updated hero and about

8 files changed, 348 insertions, 39 deletions

diff --git a/layouts/index.html b/layouts/index.html
index d57bf2c..5c7d826 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -12,7 +12,7 @@
 {{ end }}

 

 {{ define "main" }}

-{{- partial "sections/hero.html" . -}}

+{{- partial "sections/hero/index.html" . -}}

 {{- partial "sections/about.html" . -}}

 {{- partial "sections/projects.html" . -}}

 {{- partial "sections/achievements.html" . -}}

diff --git a/layouts/partials/sections/about.html b/layouts/partials/sections/about.html
index 92ada9f..09a14cc 100644
--- a/layouts/partials/sections/about.html
+++ b/layouts/partials/sections/about.html
@@ -1,9 +1,9 @@
 {{ if .Site.Params.about.enable | default false }}

-<section id="about" class="py-5">

+<section id="about" class="py-0 py-sm-5">

     <div class="container bg-transparent">

         <h3 class="text-center bg-transparent">{{ .Site.Params.about.title }}</h3>

         <div class="bg-transparent row justify-content-center px-3 py-5">

-            <div class="col-md-6 h-100 content">

+            <div class="col-sm-12 col-md-12 col-lg-6 content">

                 {{ .Site.Params.about.content | markdownify }}

 

                 {{ if .Site.Params.about.skills.enable }}

@@ -16,8 +16,8 @@
                 {{ end }}

             </div>

             {{ if .Site.Params.about.image }}

-            <div class="col-md-4 mt-sm-5 mt-md-0">

-                <div class="image d-flex">

+            <div class="col-sm-12 col-md-8 col-lg-4 mt-5 mt-sm-0 mt-md-5 mt-lg-0">

+                <div class="image d-flex px-5">

                     <img src="{{ .Site.Params.about.image }}" class="img-thumbnail mx-auto rounded-circle" alt="">

                 </div>

             </div>

diff --git a/layouts/partials/sections/achievements.html b/layouts/partials/sections/achievements.html
index 2301f96..a054ec6 100644
--- a/layouts/partials/sections/achievements.html
+++ b/layouts/partials/sections/achievements.html
@@ -5,8 +5,8 @@
         <div class="px-0 px-md-5 px-lg-5">

             <div class="row justify-content-center px-3 px-md-5 px-lg-5">

                 {{ range .Site.Params.achievements.items }}

-                <div class="col-lg-4 col-md-6 my-3" title="{{ .title }}">

-                    <a class="card my-3 h-100 p-3" href="{{ .url }}">

+                <div class="col-lg-4 col-md-6 my-3">

+                    <a class="card my-3 h-100 p-3" href="{{ .url }}" title="{{ .title }}">

                         <div class="card-body bg-transparent">

                             <h5 class="card-title bg-transparent">{{ .title }}</h5>

                             <div class="card-text secondary-font">

diff --git a/layouts/partials/sections/hero.html b/layouts/partials/sections/hero.html
deleted file mode 100644
index 90a2c09..0000000
--- a/layouts/partials/sections/hero.html
+++ /dev/null
@@ -1,28 +0,0 @@
-{{ if .Site.Params.hero.enable | default true }}

-<section id="hero" class="py-5">

-    <div class="container px-xs-3 px-sm-5 px-md-5 px-lg-5">

-        <div id="primary-font">

-            <span class="subtitle">

-                {{ .Site.Params.hero.intro }}

-            </span>

-            <h2>

-                {{ .Site.Params.hero.title }}

-            </h2>

-            <h3>

-                {{ .Site.Params.hero.subtitle }}

-            </h3>

-            <p class="hero-content">

-                {{ .Site.Params.hero.content | markdownify }}

-            </p>

-            {{ if .Site.Params.hero.button.enable }}

-            <a href="{{ .Site.Params.hero.button.url }}" class="btn">

-                {{ .Site.Params.hero.button.name }}

-            </a>

-            {{ end }}

-        </div>

-    </div>

-    <div class="hero-bottom-svg d-md-block d-lg-block d-none">

-        <img src="https://portio-hugo.staticmania.com/images/hero/figure-svg.svg" alt="">

-    </div>

-</section>

-{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/sections/hero/index.html b/layouts/partials/sections/hero/index.html
new file mode 100644
index 0000000..a4db34f
--- /dev/null
+++ b/layouts/partials/sections/hero/index.html
@@ -0,0 +1,295 @@
+{{ if .Site.Params.hero.enable | default true }}

+<section id="hero" class="py-5">

+    <div class="container px-3 px-sm-5 px-md-5 px-lg-5">

+        <div id="primary-font">

+            <span class="subtitle">

+                {{ .Site.Params.hero.intro }}

+            </span>

+            <h2>

+                {{ .Site.Params.hero.title }}

+            </h2>

+            <h3>

+                {{ .Site.Params.hero.subtitle }}

+            </h3>

+            <p class="hero-content">

+                {{ .Site.Params.hero.content | markdownify }}

+            </p>

+            <div class="row">

+                <div class="col-auto h-100">

+                    {{ if .Site.Params.hero.button.enable }}

+                    <a href="{{ .Site.Params.hero.button.url }}" class="btn">

+                        {{ .Site.Params.hero.button.name }}

+                    </a>

+                    {{ end }}

+                </div>

+                <div class="col-auto px-0 h-100">

+                    {{- partial "sections/hero/social.html" . -}}

+                </div>

+            </div>

+

+        </div>

+    </div>

+    <div class="hero-bottom-svg d-md-block d-lg-block d-none">

+        <svg xmlns="http://www.w3.org/2000/svg" width="201" height="201" viewBox="0 0 201 201">

+            <g id="Group_1168" data-name="Group 1168" transform="translate(-384 -1392)">

+                <rect id="Rectangle_2206" data-name="Rectangle 2206" width="12" height="2" rx="1"

+                    transform="translate(391 1392) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2271" data-name="Rectangle 2271" width="12" height="2" rx="1"

+                    transform="translate(391 1500) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2238" data-name="Rectangle 2238" width="12" height="2" rx="1"

+                    transform="translate(391 1446) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2278" data-name="Rectangle 2278" width="12" height="2" rx="1"

+                    transform="translate(391 1554) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2222" data-name="Rectangle 2222" width="12" height="2" rx="1"

+                    transform="translate(391 1419) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2272" data-name="Rectangle 2272" width="12" height="2" rx="1"

+                    transform="translate(391 1527) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2241" data-name="Rectangle 2241" width="12" height="2" rx="1"

+                    transform="translate(391 1473) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2288" data-name="Rectangle 2288" width="12" height="2" rx="1"

+                    transform="translate(391 1581) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2214" data-name="Rectangle 2214" width="12" height="2" rx="1"

+                    transform="translate(499 1392) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2289" data-name="Rectangle 2289" width="12" height="2" rx="1"

+                    transform="translate(499 1500) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2256" data-name="Rectangle 2256" width="12" height="2" rx="1"

+                    transform="translate(499 1446) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2290" data-name="Rectangle 2290" width="12" height="2" rx="1"

+                    transform="translate(499 1554) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2231" data-name="Rectangle 2231" width="12" height="2" rx="1"

+                    transform="translate(499 1419) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2291" data-name="Rectangle 2291" width="12" height="2" rx="1"

+                    transform="translate(499 1527) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2257" data-name="Rectangle 2257" width="12" height="2" rx="1"

+                    transform="translate(499 1473) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2292" data-name="Rectangle 2292" width="12" height="2" rx="1"

+                    transform="translate(499 1581) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2210" data-name="Rectangle 2210" width="12" height="2" rx="1"

+                    transform="translate(445 1392) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2279" data-name="Rectangle 2279" width="12" height="2" rx="1"

+                    transform="translate(445 1500) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2248" data-name="Rectangle 2248" width="12" height="2" rx="1"

+                    transform="translate(445 1446) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2280" data-name="Rectangle 2280" width="12" height="2" rx="1"

+                    transform="translate(445 1554) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2226" data-name="Rectangle 2226" width="12" height="2" rx="1"

+                    transform="translate(445 1419) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2281" data-name="Rectangle 2281" width="12" height="2" rx="1"

+                    transform="translate(445 1527) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2249" data-name="Rectangle 2249" width="12" height="2" rx="1"

+                    transform="translate(445 1473) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2293" data-name="Rectangle 2293" width="12" height="2" rx="1"

+                    transform="translate(445 1581) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2219" data-name="Rectangle 2219" width="12" height="2" rx="1"

+                    transform="translate(553 1392) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2310" data-name="Rectangle 2310" width="12" height="2" rx="1"

+                    transform="translate(553 1500) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2262" data-name="Rectangle 2262" width="12" height="2" rx="1"

+                    transform="translate(553 1446) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2311" data-name="Rectangle 2311" width="12" height="2" rx="1"

+                    transform="translate(553 1554) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2232" data-name="Rectangle 2232" width="12" height="2" rx="1"

+                    transform="translate(553 1419) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2312" data-name="Rectangle 2312" width="12" height="2" rx="1"

+                    transform="translate(553 1527) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2263" data-name="Rectangle 2263" width="12" height="2" rx="1"

+                    transform="translate(553 1473) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2313" data-name="Rectangle 2313" width="12" height="2" rx="1"

+                    transform="translate(553 1581) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2209" data-name="Rectangle 2209" width="12" height="2" rx="1"

+                    transform="translate(418 1392) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2273" data-name="Rectangle 2273" width="12" height="2" rx="1"

+                    transform="translate(418 1500) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2242" data-name="Rectangle 2242" width="12" height="2" rx="1"

+                    transform="translate(418 1446) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2282" data-name="Rectangle 2282" width="12" height="2" rx="1"

+                    transform="translate(418 1554) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2223" data-name="Rectangle 2223" width="12" height="2" rx="1"

+                    transform="translate(418 1419) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2274" data-name="Rectangle 2274" width="12" height="2" rx="1"

+                    transform="translate(418 1527) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2243" data-name="Rectangle 2243" width="12" height="2" rx="1"

+                    transform="translate(418 1473) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2294" data-name="Rectangle 2294" width="12" height="2" rx="1"

+                    transform="translate(418 1581) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2217" data-name="Rectangle 2217" width="12" height="2" rx="1"

+                    transform="translate(526 1392) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2314" data-name="Rectangle 2314" width="12" height="2" rx="1"

+                    transform="translate(526 1500) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2258" data-name="Rectangle 2258" width="12" height="2" rx="1"

+                    transform="translate(526 1446) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2315" data-name="Rectangle 2315" width="12" height="2" rx="1"

+                    transform="translate(526 1554) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2233" data-name="Rectangle 2233" width="12" height="2" rx="1"

+                    transform="translate(526 1419) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2316" data-name="Rectangle 2316" width="12" height="2" rx="1"

+                    transform="translate(526 1527) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2259" data-name="Rectangle 2259" width="12" height="2" rx="1"

+                    transform="translate(526 1473) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2317" data-name="Rectangle 2317" width="12" height="2" rx="1"

+                    transform="translate(526 1581) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2211" data-name="Rectangle 2211" width="12" height="2" rx="1"

+                    transform="translate(472 1392) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2295" data-name="Rectangle 2295" width="12" height="2" rx="1"

+                    transform="translate(472 1500) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2250" data-name="Rectangle 2250" width="12" height="2" rx="1"

+                    transform="translate(472 1446) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2296" data-name="Rectangle 2296" width="12" height="2" rx="1"

+                    transform="translate(472 1554) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2227" data-name="Rectangle 2227" width="12" height="2" rx="1"

+                    transform="translate(472 1419) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2297" data-name="Rectangle 2297" width="12" height="2" rx="1"

+                    transform="translate(472 1527) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2251" data-name="Rectangle 2251" width="12" height="2" rx="1"

+                    transform="translate(472 1473) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2298" data-name="Rectangle 2298" width="12" height="2" rx="1"

+                    transform="translate(472 1581) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2221" data-name="Rectangle 2221" width="12" height="2" rx="1"

+                    transform="translate(580 1392) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2318" data-name="Rectangle 2318" width="12" height="2" rx="1"

+                    transform="translate(580 1500) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2264" data-name="Rectangle 2264" width="12" height="2" rx="1"

+                    transform="translate(580 1446) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2319" data-name="Rectangle 2319" width="12" height="2" rx="1"

+                    transform="translate(580 1554) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2236" data-name="Rectangle 2236" width="12" height="2" rx="1"

+                    transform="translate(580 1419) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2320" data-name="Rectangle 2320" width="12" height="2" rx="1"

+                    transform="translate(580 1527) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2265" data-name="Rectangle 2265" width="12" height="2" rx="1"

+                    transform="translate(580 1473) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2321" data-name="Rectangle 2321" width="12" height="2" rx="1"

+                    transform="translate(580 1581) rotate(90)" fill="#282f49" />

+                <rect id="Rectangle_2207" data-name="Rectangle 2207" width="12" height="2" rx="1"

+                    transform="translate(396 1399) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2270" data-name="Rectangle 2270" width="12" height="2" rx="1"

+                    transform="translate(396 1507) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2239" data-name="Rectangle 2239" width="12" height="2" rx="1"

+                    transform="translate(396 1453) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2283" data-name="Rectangle 2283" width="12" height="2" rx="1"

+                    transform="translate(396 1561) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2224" data-name="Rectangle 2224" width="12" height="2" rx="1"

+                    transform="translate(396 1426) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2275" data-name="Rectangle 2275" width="12" height="2" rx="1"

+                    transform="translate(396 1534) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2244" data-name="Rectangle 2244" width="12" height="2" rx="1"

+                    transform="translate(396 1480) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2299" data-name="Rectangle 2299" width="12" height="2" rx="1"

+                    transform="translate(396 1588) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2215" data-name="Rectangle 2215" width="12" height="2" rx="1"

+                    transform="translate(504 1399) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2300" data-name="Rectangle 2300" width="12" height="2" rx="1"

+                    transform="translate(504 1507) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2252" data-name="Rectangle 2252" width="12" height="2" rx="1"

+                    transform="translate(504 1453) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2301" data-name="Rectangle 2301" width="12" height="2" rx="1"

+                    transform="translate(504 1561) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2228" data-name="Rectangle 2228" width="12" height="2" rx="1"

+                    transform="translate(504 1426) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2302" data-name="Rectangle 2302" width="12" height="2" rx="1"

+                    transform="translate(504 1534) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2253" data-name="Rectangle 2253" width="12" height="2" rx="1"

+                    transform="translate(504 1480) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2303" data-name="Rectangle 2303" width="12" height="2" rx="1"

+                    transform="translate(504 1588) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2212" data-name="Rectangle 2212" width="12" height="2" rx="1"

+                    transform="translate(450 1399) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2284" data-name="Rectangle 2284" width="12" height="2" rx="1"

+                    transform="translate(450 1507) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2245" data-name="Rectangle 2245" width="12" height="2" rx="1"

+                    transform="translate(450 1453) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2285" data-name="Rectangle 2285" width="12" height="2" rx="1"

+                    transform="translate(450 1561) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2229" data-name="Rectangle 2229" width="12" height="2" rx="1"

+                    transform="translate(450 1426) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2286" data-name="Rectangle 2286" width="12" height="2" rx="1"

+                    transform="translate(450 1534) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2246" data-name="Rectangle 2246" width="12" height="2" rx="1"

+                    transform="translate(450 1480) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2304" data-name="Rectangle 2304" width="12" height="2" rx="1"

+                    transform="translate(450 1588) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2218" data-name="Rectangle 2218" width="12" height="2" rx="1"

+                    transform="translate(558 1399) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2322" data-name="Rectangle 2322" width="12" height="2" rx="1"

+                    transform="translate(558 1507) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2266" data-name="Rectangle 2266" width="12" height="2" rx="1"

+                    transform="translate(558 1453) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2323" data-name="Rectangle 2323" width="12" height="2" rx="1"

+                    transform="translate(558 1561) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2234" data-name="Rectangle 2234" width="12" height="2" rx="1"

+                    transform="translate(558 1426) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2324" data-name="Rectangle 2324" width="12" height="2" rx="1"

+                    transform="translate(558 1534) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2267" data-name="Rectangle 2267" width="12" height="2" rx="1"

+                    transform="translate(558 1480) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2325" data-name="Rectangle 2325" width="12" height="2" rx="1"

+                    transform="translate(558 1588) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2208" data-name="Rectangle 2208" width="12" height="2" rx="1"

+                    transform="translate(423 1399) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2276" data-name="Rectangle 2276" width="12" height="2" rx="1"

+                    transform="translate(423 1507) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2240" data-name="Rectangle 2240" width="12" height="2" rx="1"

+                    transform="translate(423 1453) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2287" data-name="Rectangle 2287" width="12" height="2" rx="1"

+                    transform="translate(423 1561) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2225" data-name="Rectangle 2225" width="12" height="2" rx="1"

+                    transform="translate(423 1426) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2277" data-name="Rectangle 2277" width="12" height="2" rx="1"

+                    transform="translate(423 1534) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2247" data-name="Rectangle 2247" width="12" height="2" rx="1"

+                    transform="translate(423 1480) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2305" data-name="Rectangle 2305" width="12" height="2" rx="1"

+                    transform="translate(423 1588) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2216" data-name="Rectangle 2216" width="12" height="2" rx="1"

+                    transform="translate(531 1399) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2326" data-name="Rectangle 2326" width="12" height="2" rx="1"

+                    transform="translate(531 1507) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2260" data-name="Rectangle 2260" width="12" height="2" rx="1"

+                    transform="translate(531 1453) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2327" data-name="Rectangle 2327" width="12" height="2" rx="1"

+                    transform="translate(531 1561) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2235" data-name="Rectangle 2235" width="12" height="2" rx="1"

+                    transform="translate(531 1426) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2328" data-name="Rectangle 2328" width="12" height="2" rx="1"

+                    transform="translate(531 1534) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2261" data-name="Rectangle 2261" width="12" height="2" rx="1"

+                    transform="translate(531 1480) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2329" data-name="Rectangle 2329" width="12" height="2" rx="1"

+                    transform="translate(531 1588) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2213" data-name="Rectangle 2213" width="12" height="2" rx="1"

+                    transform="translate(477 1399) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2306" data-name="Rectangle 2306" width="12" height="2" rx="1"

+                    transform="translate(477 1507) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2254" data-name="Rectangle 2254" width="12" height="2" rx="1"

+                    transform="translate(477 1453) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2307" data-name="Rectangle 2307" width="12" height="2" rx="1"

+                    transform="translate(477 1561) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2230" data-name="Rectangle 2230" width="12" height="2" rx="1"

+                    transform="translate(477 1426) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2308" data-name="Rectangle 2308" width="12" height="2" rx="1"

+                    transform="translate(477 1534) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2255" data-name="Rectangle 2255" width="12" height="2" rx="1"

+                    transform="translate(477 1480) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2309" data-name="Rectangle 2309" width="12" height="2" rx="1"

+                    transform="translate(477 1588) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2220" data-name="Rectangle 2220" width="12" height="2" rx="1"

+                    transform="translate(585 1399) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2330" data-name="Rectangle 2330" width="12" height="2" rx="1"

+                    transform="translate(585 1507) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2268" data-name="Rectangle 2268" width="12" height="2" rx="1"

+                    transform="translate(585 1453) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2331" data-name="Rectangle 2331" width="12" height="2" rx="1"

+                    transform="translate(585 1561) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2237" data-name="Rectangle 2237" width="12" height="2" rx="1"

+                    transform="translate(585 1426) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2332" data-name="Rectangle 2332" width="12" height="2" rx="1"

+                    transform="translate(585 1534) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2269" data-name="Rectangle 2269" width="12" height="2" rx="1"

+                    transform="translate(585 1480) rotate(-180)" fill="#282f49" />

+                <rect id="Rectangle_2333" data-name="Rectangle 2333" width="12" height="2" rx="1"

+                    transform="translate(585 1588) rotate(-180)" fill="#282f49" />

+            </g>

+        </svg>

+    </div>

+</section>

+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/sections/hero/social.html b/layouts/partials/sections/hero/social.html
new file mode 100644
index 0000000..b70df15
--- /dev/null
+++ b/layouts/partials/sections/hero/social.html
@@ -0,0 +1,15 @@
+{{ range .Site.Params.hero.socialLinks.fontAwesomeIcons }}

+<span class="px-1">

+    <a href="{{ .url }}" target="_blank" class="btn social-icon">

+        <i class="{{ .icon }}"></i>

+    </a>

+</span>

+{{ end }}

+

+{{ range .Site.Params.hero.socialLinks.customIcons }}

+<span class="px-1">

+    <a href="{{ .url }}" target="_blank" class="btn social-icon">

+        <img src="{{ .icon }}">

+    </a>

+</span>

+{{ end }}
\ No newline at end of file
diff --git a/static/css/index.css b/static/css/index.css
index 8fda0a2..689d4db 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -6,11 +6,17 @@
     max-width: 100%;

 }

 

+@media all and (min-width:768px) and (max-width: 992px) {

+    #hero {

+        min-height: 60vh;

+    }

+}

+

 #hero .hero-bottom-svg {

     opacity: 0.5;

     position: absolute;

     bottom: -50px;

-    left: -130px;

+    left: -150px;

 }

 

 #hero .subtitle {

@@ -35,9 +41,27 @@
     opacity: 0.8;

 }

 

+#hero a.btn.social-icon {

+    color: var(--primary-color);

+    line-height: 0%;

+    border-radius: 50% ;

+    margin-top: 50px;

+    padding: 0.7rem;

+    border: 1px solid var(--primary-color);

+    transition: none;

+}

+

+#hero a.btn.social-icon img {

+    width: 1em;

+}

+

+#hero a.btn.social-icon:hover {

+    opacity: 0.8;

+}

+

 #hero a.btn {

     margin-top: 50px;

-    padding: 1rem 1.75rem;

+    padding: 0.7rem 1.75rem;

     border: 1px solid var(--primary-color);

     border-radius: .75rem;

     transition: none;

@@ -53,6 +77,11 @@
     opacity: 0.9;

 }

 

+#hero a.btn.social-icon:hover {

+    background-color: var(--background-color) !important;

+    opacity: 0.7;

+}

+

 #hero .hero-content > a {

     display: inline-block;

     text-decoration: none;

@@ -81,7 +110,6 @@
 }

 

 #about .image img {

-    max-width: 300px !important;

     box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);

     transition: box-shadow 0.3s;

 }

diff --git a/static/css/projects.css b/static/css/projects.css
index 417d461..9c10da8 100644
--- a/static/css/projects.css
+++ b/static/css/projects.css
@@ -23,7 +23,6 @@
 }

 

 #projects .card .card-head {

-    height: 172px;

     -o-object-fit: cover;

     object-fit: cover;

     overflow: hidden;