hero page modification

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."
+    title: "Isabella."
-    subtitle: "I build things for the web."
+    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
+
+

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>

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>

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 class="container px-3 px-sm-5 px-md-5 px-lg-5 pt-lg-3">
-        <div id="primary-font">
+        <div class="row">
-            <span class="subtitle">
+            <div class="col-sm-12 col-md-12 col-lg-8" id="primary-font">
-                {{ .Site.Params.hero.intro }}
+                <span class="subtitle">
-            </span>
+                    {{ .Site.Params.hero.intro }}
-            <h2>
+                </span>
-                {{ .Site.Params.hero.title }}
+                <h2>
-            </h2>
+                    {{ .Site.Params.hero.title }}
-            <h3>
+                </h2>
-                {{ .Site.Params.hero.subtitle }}
+                <h3>
-            </h3>
+                    {{ .Site.Params.hero.subtitle }}
-            <p class="hero-content">
+                </h3>
-                {{ .Site.Params.hero.content | markdownify }}
+                <p class="hero-content">
-            </p>
+                    {{ .Site.Params.hero.content | markdownify }}
-            <div class="row">
+                </p>
-                <div class="col-auto h-100">
+                <div class="row">
-                    {{ if .Site.Params.hero.button.enable }}
+                    <div class="col-auto h-100">
-                    <a href="{{ .Site.Params.hero.button.url }}" class="btn">
+                        {{ if .Site.Params.hero.button.enable }}
-                        {{ .Site.Params.hero.button.name }}
+                        <a href="{{ .Site.Params.hero.button.url }}" class="btn">
-                    </a>
+                            {{ .Site.Params.hero.button.name }}
-                    {{ end }}
+                        </a>
-                </div>
+                        {{ end }}
-                <div class="col-auto px-0 h-100">
+                    </div>
-                    {{- partial "sections/hero/social.html" . -}}
+                    <div class="col-auto px-0 h-100">
+                        {{- partial "sections/hero/social.html" . -}}
+                    </div>
+                </div>
+            </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">

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