added hero page

9 files changed, 133 insertions, 4 deletions

diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index 9df7453..0461003 100644
--- a/exampleSite/config.yaml
+++ b/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

diff --git a/exampleSite/content/projects/example.md b/exampleSite/content/projects/example.md
index 93463f6..ff54616 100644
--- a/exampleSite/content/projects/example.md
+++ b/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"
diff --git a/exampleSite/static/images/project.jpg b/exampleSite/static/images/project.jpg
new file mode 100644
index 0000000..c116e5c
--- /dev/null
+++ b/exampleSite/static/images/project.jpg
diff --git a/layouts/index.html b/layouts/index.html
index e84c5d9..d779177 100644
--- a/layouts/index.html
+++ b/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" . -}}

diff --git a/layouts/partials/sections/header.html b/layouts/partials/sections/header.html
index 9cd286d..becb220 100644
--- a/layouts/partials/sections/header.html
+++ b/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) }}

diff --git a/layouts/partials/sections/hero.html b/layouts/partials/sections/hero.html
new file mode 100644
index 0000000..90a2c09
--- /dev/null
+++ b/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 }}
\ No newline at end of file
diff --git a/static/css/header.css b/static/css/header.css
index 150c62c..c611530 100644
--- a/static/css/header.css
+++ b/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;

diff --git a/static/css/index.css b/static/css/index.css
index 6b15280..d14a4ce 100644
--- a/static/css/index.css
+++ b/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 {

diff --git a/static/css/theme.css b/static/css/theme.css
index 167569d..a6413f4 100644
--- a/static/css/theme.css
+++ b/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;

 }
\ No newline at end of file