hero page modification

5 files changed, 132 insertions, 42 deletions

diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index 77bc398..d322c10 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -42,6 +42,7 @@ params:
 

   theme:

     disableThemeToggle: false

+    # defaultTheme: "light" # dark

 

   # font:

   #   fontSize: 1.5rem # default: 1rem

@@ -84,9 +85,10 @@ params:
   hero:

     enable: true

     intro: "Hi, my name is"

-    title: "Hugo Profile."

-    subtitle: "I build things for the web."

+    title: "Isabella."

+    subtitle: "I build things for the web"

     content: "A passionate web app developer. I tend to make use of modern web technologies to build websites that looks great, feels fantastic, and functions correctly."

+    image: /images/hero.svg

     button:

       enable: true

       name: "Resume"

@@ -310,3 +312,5 @@ params:
       twitter: https://twitter.com

       instagram: https://instagram.com

       facebook: https://facebook.com

+

+

diff --git a/exampleSite/static/images/hero.svg b/exampleSite/static/images/hero.svg
new file mode 100644
index 0000000..8d7dad2
--- /dev/null
+++ b/exampleSite/static/images/hero.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="iso-8859-1"?>

+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 viewBox="0 0 145 145" style="enable-background:new 0 0 145 145;" xml:space="preserve">

+<g id="women_1">

+	<rect style="fill:#60B0C9;" width="145" height="145"/>

+	<g>

+		<ellipse style="fill:#5A3017;" cx="86.95" cy="81.002" rx="16.518" ry="18.002"/>

+		<path style="fill:#F1C9A5;" d="M109.374,115.396c-4.964-9.397-36.874-15.293-36.874-15.293s-31.911,5.896-36.875,15.293

+			C31.958,128.434,28.888,145,28.888,145H72.5h43.611C116.112,145,114.04,127.237,109.374,115.396z"/>

+		<path style="fill:#E4B692;" d="M72.501,100.103c0,0,31.91,5.896,36.874,15.293c4.665,11.842,6.737,29.604,6.737,29.604H72.501

+			V100.103z"/>

+		<rect x="63.813" y="81.002" style="fill:#F1C9A5;" width="17.374" height="29.077"/>

+		<rect x="72.501" y="81.002" style="fill:#E4B692;" width="8.686" height="29.077"/>

+		<path style="opacity:0.1;fill:#DDAC8C;enable-background:new    ;" d="M63.813,94.475c1.563,4.485,7.868,7.057,12.499,7.057

+			c1.676,0,3.306-0.28,4.875-0.795V81.002H63.813V94.475z"/>

+		<path style="fill:#F1C9A5;" d="M94.837,62.652c0-18.161-10.001-28.489-22.337-28.489c-12.337,0-22.338,10.328-22.338,28.489

+			c0,18.162,10.001,32.888,22.338,32.888S94.837,80.814,94.837,62.652z"/>

+		<path style="fill:#E4B692;" d="M91.438,75.245c-4.049-0.451-6.783-5.088-6.098-10.353c0.678-5.269,4.513-9.179,8.563-8.733

+			c4.047,0.449,6.777,5.084,6.094,10.353C99.318,71.781,95.487,75.689,91.438,75.245z"/>

+		<path style="fill:#F1C9A5;" d="M45.161,66.513c-0.684-5.269,2.047-9.903,6.092-10.353c4.053-0.446,7.888,3.464,8.567,8.733

+			c0.683,5.265-2.053,9.901-6.1,10.353C49.671,75.689,45.84,71.781,45.161,66.513z"/>

+		<path style="fill:#E4B692;" d="M94.837,62.652c0-18.161-10.001-28.489-22.337-28.489V95.54

+			C84.837,95.54,94.837,80.814,94.837,62.652z"/>

+		<path style="fill:#9E1F63;" d="M109.374,115.396c-1.665-3.154-6.369-5.909-11.878-8.184c-2.77,11.233-12.908,19.566-24.996,19.566

+			c-12.089,0-22.227-8.333-24.997-19.566c-5.509,2.274-10.212,5.029-11.878,8.184C31.958,128.434,28.888,145,28.888,145H72.5h43.611

+			C116.112,145,114.04,127.237,109.374,115.396z"/>

+		<path style="fill:#5A3017;" d="M102.039,65.792c0,0-12.06,6.029-20.501-10.855c-5.628,0.805-22.513-2.411-25.729-10.451

+			c-2.813,12.06-10.753,14.435-4.824,26.531c4.37,8.916,3.618,24.523,3.618,24.523S36.334,78.865,38.994,56.126

+			c2.994-25.604,9.178-32.544,17.619-30.133c6.835-8.844,27.738-7.638,36.181,3.217c8.441,10.854,6.064,15.653,9.245,20.1

+			C108.134,57.831,102.039,65.792,102.039,65.792z"/>

+		<polyline style="fill:none;stroke:#9E1F63;stroke-width:1.0637;stroke-miterlimit:10;" points="47.503,107.212 90.388,119.538 

+			101.22,112.105 97.497,107.212 48.921,119.538 56.013,125.224 97.852,116.218 79.946,127.707 48.212,112.991 		"/>

+	</g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+</svg>

diff --git a/layouts/partials/sections/about.html b/layouts/partials/sections/about.html
index 09a14cc..58df551 100644
--- a/layouts/partials/sections/about.html
+++ b/layouts/partials/sections/about.html
@@ -3,7 +3,14 @@
     <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-sm-12 col-md-12 col-lg-6 content">

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

+            <div class="col-sm-12 col-md-8 col-lg-4 mb-5 mb-sm-0 mb-md-5 mb-lg-0 d-none d-sm-none d-md-block">

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

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

+                </div>

+            </div>

+            {{ end }}

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

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

 

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

@@ -15,13 +22,6 @@
                 </ul>

                 {{ end }}

             </div>

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

-            <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>

-            {{ end }}

         </div>

     </div>

 </section>

diff --git a/layouts/partials/sections/hero/index.html b/layouts/partials/sections/hero/index.html
index ce3ab27..8107c6e 100644
--- a/layouts/partials/sections/hero/index.html
+++ b/layouts/partials/sections/hero/index.html
@@ -1,32 +1,43 @@
 {{ if .Site.Params.hero.enable | default false }}

 <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 class="container px-3 px-sm-5 px-md-5 px-lg-5 pt-lg-3">

+        <div class="row">

+            <div class="col-sm-12 col-md-12 col-lg-8" 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 class="col-auto px-0 h-100">

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

+            </div>

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

+                <div class="row justify-content-center">

+                    <div class="col-sm-12 col-md-9 pt-5 image px-5 px-md-5 px-lg-0 text-center">

+                        <img src="{{ .Site.Params.hero.image }}" 

+                            class="img-thumbnail mx-auto" 

+                            alt=""

+                        >

+                    </div>

                 </div>

             </div>

-

         </div>

     </div>

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

diff --git a/static/css/index.css b/static/css/index.css
index 7360d91..bca1b1d 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -19,12 +19,6 @@
     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;

@@ -43,17 +37,32 @@
 }

 

 #hero h3 {

-    font-size: clamp(40px, 8vw, 80px);

+    font-size: clamp(40px, 8vw, 60px);

     /* color: var(--primary-color) !important; */

     opacity: 0.5;

 }

 

 #hero p {

     margin: 20px 0px 0px;

-    max-width: 540px;

+    max-width: 640px;

     opacity: 0.8;

 }

 

+#hero .image img {

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

+    transition: box-shadow 0.3s;

+    padding: 0;

+    border: 0;

+    border: 2px solid var(--secondary-color);

+    border-radius: 1rem;

+}

+

+#hero .image img:hover {

+    box-shadow: 0 0 11px rgb(15 80 100 / 20%);

+    filter: contrast(1.2);

+    cursor: pointer;

+}

+

 #hero a.btn.social-icon {

     color: var(--primary-color) !important;

     line-height: 0%;