M hugo-site/layouts/index.html → hugo-site/layouts/index.html

@@ -6,7 +6,7 @@ <meta charset="utf-8">
   <title>Prithu Goswami</title>
   <meta name="description" content="Prithu Goswami's personal website">
   <meta name="author" content="Prithu Goswami">
-  <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,700" rel="stylesheet"> 
   <link rel="stylesheet" href="/css/main.css">
@@ -38,6 +38,15 @@ <circle cx="38" cy="65" r="6" transform="rotate(39 38 65)" fill="#B554E3"/>
       </svg>
 
       <div class="shadow-box">
+        <svg id="triangle" xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 128 59" preserveAspectRatio="xMidYMid meet">
+          <path d="M34 0l47 9 47 10L0 59z" />
+        </svg>
+
+        <svg id="circle" xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 74 74" preserveAspectRatio="xMidYMid meet">
+          <circle cx="37" cy="37" r="37" />
+        </svg>
         <div class="head-text">
           <h1>Prithu Goswami</h1>
         </div>
@@ -58,15 +67,6 @@ <!-- #b554e3 -->
 
         <img id="profile-pic" src="./img/duotone-profile-small.jpeg">
 
-        <svg id="triangle" xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 128 59" preserveAspectRatio="xMidYMid meet">
-          <path d="M34 0l47 9 47 10L0 59z" />
-        </svg>
-
-        <svg id="circle" xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 74 74" preserveAspectRatio="xMidYMid meet">
-          <circle cx="37" cy="37" r="37" />
-        </svg>
 
         <div id="socials">
           <a href="mailto:prithugoswami524@gmail.com">
@@ -92,6 +92,28 @@ </a>
         </div>
 
       </div>
+    </div>
+    <div id="socials-2">
+      <a href="mailto:prithugoswami524@gmail.com">
+        <div class="sb mail">
+          <img src="/img/mail.svg">
+        </div>
+      </a>
+      <a href="https://github.com/prithugoswami" target="_blank">
+        <div class="sb github">
+          <img src="/img/github.svg">
+        </div>
+      </a>
+      <a href="https://dribbble.com/prithugoswami" target="_blank">
+        <div class="sb dribbble">
+          <img src="/img/dribbble.svg">
+        </div>
+      </a>
+      <a href="https://twitter.com/prithu524" target="_blank">
+        <div class="sb twitter">
+          <img src="/img/twitter.svg">
+        </div>
+      </a>
     </div>
   </section>
 

M hugo-site/static/css/main.css → hugo-site/static/css/main.css

@@ -60,8 +60,10 @@ text-transform: uppercase;
     font-weight: 700;
     color: black;
 }
+
 #intro{
-    width: 900px;
+    width: 90%;
+    max-width: 900px;
     margin: 0 auto;
     position: relative;
     margin-top: 100px;
@@ -76,8 +78,7 @@ 
 .shadow-box{
     background-color: white;
     border-radius: 24px;
-    width: 650px;
-    height: 411px;
+    width: 70%;
     box-shadow: 0 10px 30px 3px rgba(0,0,0,0.15);
     margin: 0 auto;
     position: relative;
@@ -135,9 +136,9 @@ padding-left: 3px;
 }
 
 .intro-text{
-    padding: 80px 105px;
+    padding: 6rem;
     font-weight: 300;
-    font-size: 18px;
+    font-size: 1.1rem;
     text-align: justify;
 }
 
@@ -164,6 +165,7 @@ fill:#8BEF89;
     width: 74px;
     position: absolute;
     left: 100px;
+    bottom: -40px;
     filter: drop-shadow(0px -7px 7px rgba(0,0,0,0.15));
 }
 
@@ -181,15 +183,23 @@ bottom: -75px;
     left: 40px;
 }
 
+
 #socials{
     display: flex;
     position: absolute;
     right: -100px;
-    bottom: 40px;
+    bottom: 30px;
 }
 
 #socials a{
     margin-left: 10px
+}
+
+#socials-2{
+    display: none;
+    justify-content: space-between;
+    width: 80%;
+    margin: 6rem 0;
 }
 
 .sb{
@@ -224,3 +234,73 @@ font-size: 10px;
     color: rgba(0,0,0,0.2);
     text-shadow: none;
 }
+
+@media only screen and (max-width: 767px){
+    #intro{
+        width: 100%;
+        margin-top: 8rem;
+        display: flex;
+        flex-flow: column;
+        align-items: center ;
+    }
+
+    .head-text {
+        display: none;
+    }
+    
+    .shadow-box{
+        width: 90%;
+    }
+
+    #socials{
+        display: none;
+    }
+
+    #socials-2{
+        display: flex;
+    }
+
+    #profile-pic {
+        width: 120px;
+        border-radius: 50%;
+        position: absolute;
+        top: -60px;
+        left: calc(50% - 60px);
+        box-shadow: 0 7px 10px rgba(0,0,0,0.25);
+    }
+
+    .intro-text{
+        padding: 0 3rem;
+        padding-top: 5rem;
+        padding-bottom: 4rem;
+        font-weight: 300;
+        font-size: 1.1rem;
+        text-align: justify;
+    }
+
+    #triangle{
+        width: 80px;
+        right: -50px;
+    }
+
+    #circle {
+        width: 50px;
+        bottom: -25px;
+    }
+
+    #stripes-green{
+        width: 150px;
+        position: absolute;
+        top: -60px;
+        right: 0px;
+    }
+
+    #stripes-purp{
+        width: 140px;
+        position: absolute;
+        bottom: -65px;
+        left: -10px;
+    }
+
+}
+