all repos — website @ 61c3d67a9479c31f57438cbff7a6bdd007bcc60b

personal website hosted at prithu.xyz, built using hugo

make homepage mobile-friendly
Prithu Goswami prithugoswami524@gmail.com
Tue, 05 May 2020 12:06:15 +0530
commit

61c3d67a9479c31f57438cbff7a6bdd007bcc60b

parent

d1df807d6beefd12e8616929560215aa1984f0e1

2 files changed, 118 insertions(+), 16 deletions(-)

jump to
M hugo-site/layouts/index.htmlhugo-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.csshugo-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; + } + +} +