added hero page

exampleSite/config.yaml

@@ -73,6 +73,19 @@ params:
   #     disableAchievements: true
   #     disableContact: true
 
+  # Hero
+  hero:
+    enable: true
+    intro: "Hi, my name is"
+    title: "Hugo Profile."
+    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."
+    button:
+      enable: true
+      name: "Get in touch"
+      url: "#contact"
+
+
   # Achievements
   achievements:
     enable: true
@@ -99,7 +112,7 @@ params:
     items:
       - title: Project 1
         content: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        image: https://hugo-toha.github.io/posts/shortcodes/boat.jpg
+        image: /images/project.jpg
         featured:
           name: featured
           link: https://example.com
@@ -116,7 +129,7 @@ params:
             url: https://example.com
       - title: Project 2
         content: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        image: https://hugo-toha.github.io/posts/shortcodes/boat.jpg
+        image: /images/project.jpg
         featured:
           name: featured
           link: https://example.com

exampleSite/content/projects/example.md

@@ -4,7 +4,7 @@ date: 2021-05-04T11:30:13+05:30
 draft: false
 # showInHome: false
 description: "Description of project"
-image: https://hugo-toha.github.io/posts/shortcodes/boat.jpg
+image: /images/project.jpg
 badges:
     - "HTML"
     - "CSS"

layouts/index.html

@@ -12,6 +12,7 @@
 {{ end }}
 
 {{ define "main" }}
+{{- partial "sections/hero.html" . -}}
 {{- partial "sections/projects.html" . -}}
 {{- partial "sections/achievements.html" . -}}
 {{- partial "sections/contact.html" . -}}

layouts/partials/sections/header.html

@@ -25,7 +25,7 @@
 <!-- Navbar -->
 <header>
     <nav class="pt-3 navbar navbar-expand-lg">
-        <div class="container">
+        <div class="container-fluid mx-xs-2 mx-sm-5 mx-md-5 mx-lg-5">
             <!-- navbar brand -->
             <a class="navbar-brand primary-font text-wrap" href="{{ .Site.BaseURL | relURL }}">
                 {{ if or (.Site.Params.favicon) (.Site.Params.navbar.brandLogo) }}

layouts/partials/sections/hero.html

@@ -0,0 +1,28 @@
+{{ 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 }}

static/css/header.css

@@ -10,12 +10,14 @@
 }
 .navbar-text {
     font-size: 16px !important;
+    opacity: 0.95;
 }
 .nav-link{
     transition: none !important;
 }
 .navbar-brand {
     color: var(--primary-color) !important;
+    opacity: 0.95;
 } 
 .navbar .nav-link:hover {
     color: var(--primary-color) !important;

static/css/index.css

@@ -1,3 +1,79 @@
+/* hero */
+
+#hero {
+    min-height: 100vh;
+    line-height: 2rem;
+    max-width: 100%;
+}
+
+#hero .hero-bottom-svg {
+    opacity: 0.5;
+    position: absolute;
+    bottom: 20px;
+    left: -130px;
+}
+
+#hero .subtitle {
+    font-size: clamp(14px,5vw,16px);
+    opacity: 0.6;
+}
+
+#hero h2 {
+    font-size: clamp(40px, 8vw, 80px);
+    color: var(--primary-color) !important;
+}
+
+#hero h3 {
+    font-size: clamp(40px, 8vw, 80px);
+    /* color: var(--primary-color) !important; */
+    opacity: 0.5;
+}
+
+#hero p {
+    margin: 20px 0px 0px;
+    max-width: 540px;
+    opacity: 0.8;
+}
+
+#hero a.btn {
+    margin-top: 50px;
+    padding: 1rem 1.75rem;
+    border: 1px solid var(--primary-color);
+    border-radius: .75rem;
+    transition: none;
+}
+
+#hero a.btn:focus {
+    box-shadow: none;
+}
+
+#hero a.btn:hover {
+    background-color: var(--secondary-color) !important;
+    color: var(--text-color) !important;
+    opacity: 0.9;
+}
+
+#hero .hero-content > a {
+    display: inline-block;
+    text-decoration: none;
+    color: var(--primary-color) !important;
+}
+
+#hero .hero-content > a::after {
+    content: "";
+    display: block;
+    width: 0px;
+    height: 2px;
+    bottom: 0.37em;
+    background-color: var(--primary-color);
+    transition: all 0.25s cubic-bezier(0.645,0.045,0.355,1);
+    opacity: 0.5;
+}
+
+#hero .hero-content > a:hover::after, #hero .hero-content > a:focus::after, #hero .hero-content > a:active::after {
+    width: 100%;
+}
+
 /* achievements */
 
 #achievements a {

static/css/theme.css

@@ -20,18 +20,27 @@
 #theme-toggle:focus {
     outline: 0;
 }
+
 #theme-toggle svg {
     height: 18px;
 }
+
 button#theme-toggle {
     border: none;
     font-size: 26px;
     margin: auto 4px;
 }
+
 body.dark #moon {
     vertical-align: middle;
     display: none;
 }
+
 body:not(.dark) #sun {
     display: none;
 }
+
+body *::selection {
+    color: var(--text-color) !important;
+    background-color: var(--primary-color) !important;
+}