added projects,contact in home and added list page for project

exampleSite/config.yaml

@@ -9,7 +9,7 @@ Menus:
     - identifier: blog
       name: Blog
       title: Blog posts
-      url: /blog
+      url: /blogs
       weight: 1
 
     #Dropdown menu
@@ -65,6 +65,14 @@ params:
   #   brandLogo: "/logo.png" # Logo for the brand | default is the favicon variable
   #   brandName: "Profile" # Brand name for the brand | default is the title variable
 
+  #   menus:
+  #     disableAbout: true
+  #     disableExperience: true
+  #     disableEducation: true
+  #     disableProjects: true
+  #     disableAchievements: true
+  #     disableContact: true
+
   # Achievements
   achievements:
     enable: true
@@ -85,6 +93,52 @@ params:
         content: We are developed a product which can help others.
         url: https://example.com
 
+  # projects
+  projects:
+    enable: true
+    items:
+      - title: Project 1
+        content: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        image: https://hugo-toha.github.io/posts/shortcodes/boat.jpg
+        featured:
+          name: featured
+          link: https://example.com
+        badges:
+          - "HTML"
+          - "CSS"
+          - "JavaScript"
+        links:
+          - icon: fa fa-envelope
+            url: https://example.com
+          - icon: fab fa-github
+            url: https://example.com
+          - icon: fab fa-twitter
+            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
+        featured:
+          name: featured
+          link: https://example.com
+        badges:
+          - "HTML"
+          - "CSS"
+          - "JavaScript"
+        links:
+          - icon: fa fa-envelope
+            url: https://example.com
+          - icon: fab fa-github
+            url: https://example.com
+          - icon: fab fa-twitter
+            url: https://example.com
+
+  #Contact
+  contact:
+    enable: true
+    content: My inbox is always open. Whether you have a question or just want to say hi, I’ll try my best to get back to you!
+    email: gurusabarisha@gmail.com
+    btnName: Mail me
+
   footer:
     # recentPosts: false
     socialNetworks:

exampleSite/content/project/example.md

@@ -1,9 +0,0 @@
----
-title: "Example project with details"
-date: 2021-05-04T11:30:13+05:30
-draft: false
-img: /images/project.jpg
-description: "Description of project"
-github: https://github.com/
-featured: /
----

exampleSite/content/projects/example.md

@@ -0,0 +1,21 @@
+---
+title: "Example project with details"
+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
+badges:
+    - "HTML"
+    - "CSS"
+    - "JavaScript"
+links:
+    - icon: fa fa-envelope
+      url: https://example.com
+    - icon: fab fa-github
+      url: https://example.com
+    - icon: fab fa-twitter
+      url: https://example.com
+---
+
+conetnt

layouts/index.html

@@ -1,6 +1,7 @@
 {{ define "head" }}
 <meta name="description" content={{ .Site.Params.description }}>
 <link rel="stylesheet" href="/css/index.css" media="all">
+<link rel="stylesheet" href="/css/projects.css" media="all">
 
 <!-- fontawesome -->
 <script defer src="/fontawesome-5/all-5.15.4.js"></script>
@@ -11,5 +12,7 @@
 {{ end }}
 
 {{ define "main" }}
+{{- partial "sections/projects.html" . -}}
 {{- partial "sections/achievements.html" . -}}
+{{- partial "sections/contact.html" . -}}
 {{ end }}

layouts/partials/sections/achievements.html

@@ -5,7 +5,7 @@
         <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-md-4 my-3" title="{{ .title }}">
+                <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="card-body bg-transparent">
                             <h5 class="card-title bg-transparent">{{ .title }}</h5>

layouts/partials/sections/contact.html

@@ -0,0 +1,23 @@
+{{ if .Site.Params.contact.enable | default false }}
+<section id="contact" class="py-5">
+    <div class="container">
+        <h3 class="text-center">Get In Touch</h3>
+        <div class="px-0 px-md-5 px-lg-5">
+            <div class="row justify-content-center px-md-5">
+                <div class="col-md-8 py-3">
+                    <div class="text-center">
+                        {{ .Site.Params.contact.content | emojify | markdownify }}
+                    </div>
+                    {{ if .Site.Params.contact.email }}
+                    <div class="text-center pt-3">
+                        <a href="mailto:{{ .Site.Params.contact.email }}" class="btn">
+                            {{ .Site.Params.contact.btnName | default "Get in Touch" }}
+                        </a>
+                    </div>
+                    {{ end }}
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+{{ end }}

layouts/partials/sections/footer/recentBlogPosts.html

@@ -2,7 +2,7 @@
     {{ if .Site.Params.footer.recentPosts | default true }}
     <div class="h3 text-center text-secondary py-3">Recent posts</div>
     <div class="row justify-content-center">
-        {{ range ( where .Site.RegularPages "Type" "blog" | first 3 ) }}
+        {{ range ( where .Site.RegularPages "Type" "blogs" | first 3 ) }}
         <div class="col-lg-4 col-md-6 pt-2">
             <div class="card h-100">
                 <div class="card-body bg-transparent p-3 shadow-sm">

layouts/partials/sections/header.html

@@ -48,46 +48,53 @@
             <!-- navbar content -->
             <div class="collapse navbar-collapse text-wrap primary-font" id="navbarContent">
                 <ul class="navbar-nav {{ .Site.Params.navbar.align | default " ms-auto"}} text-center">
-                    {{ if .Site.Params.disable_about }}
+                    {{ if not (.Site.Params.navbar.menus.disableAbout | default false) }}
-                    {{ else }}
                     <li class="nav-item navbar-text">
                         <a class="nav-link" href="{{ .Site.BaseURL | relURL }}#about" aria-label="about">About</a>
                     </li>
                     {{ end }}
 
-                    {{ if .Site.Params.disable_experience }}
+                    {{ if not (.Site.Params.navbar.menus.disableExperience | default false) }}
-                    {{ else }}
                     <li class="nav-item navbar-text">
                         <a class="nav-link" href="{{ .Site.BaseURL | relURL }}#experience"
                             aria-label="experience">Experience</a>
                     </li>
                     {{ end }}
 
-                    {{ if .Site.Params.disable_education }}
+                    {{ if not (.Site.Params.navbar.menus.disableEducation | default false) }}
-                    {{ else }}
                     <li class="nav-item navbar-text">
                         <a class="nav-link" href="{{ .Site.BaseURL | relURL }}#education"
                             aria-label="education">Education</a>
                     </li>
                     {{ end }}
 
-                    {{ if .Site.Params.disable_projects }}
+                    {{
-                    {{ else }}
+                    if and
+                    (.Site.Params.projects.enable | default false)
+                    (not (.Site.Params.navbar.menus.disableEducation | default false))
+                    }}
+                    {{/* {{ if .Site.Params.projects.enable | default false }} */}}
                     <li class="nav-item navbar-text">
                         <a class="nav-link" href="{{ .Site.BaseURL | relURL }}#projects"
                             aria-label="projects">Projects</a>
                     </li>
                     {{ end }}
 
-                    {{ if .Site.Params.achievements.enable | default false }}
+                    {{
+                    if and
+                    (.Site.Params.achievements.enable | default false)
+                    (not (.Site.Params.navbar.menus.disableAchievements | default false))
+                    }}
                     <li class="nav-item navbar-text">
                         <a class="nav-link" href="{{ .Site.BaseURL | relURL }}#achievements"
                             aria-label="achievements">Achievements</a>
                     </li>
                     {{ end }}
 
-                    {{ if .Site.Params.disable_contact }}
+                    {{ if and
-                    {{ else }}
+                    (.Site.Params.contact.enable | default false)
+                    (not (.Site.Params.navbar.menus.disableContact | default false))
+                    }}
                     <li class="nav-item navbar-text">
                         <a class="nav-link" href="{{ .Site.BaseURL | relURL }}#contact"
                             aria-label="contact">Contact</a>

layouts/partials/sections/projects.html

@@ -0,0 +1,83 @@
+{{ if .Site.Params.projects.enable | default false }}
+<section id="projects" class="py-5">
+    <div class="container">
+        <h3 class="text-center">Projects</h3>
+        <div class="row justify-content-center px-3 px-md-5 px-lg-5">
+            {{ range .Site.Params.projects.items }}
+            <div class="col-lg-4 col-md-6 my-3">
+                <div class="card my-3 h-100" title="{{ .title }}">
+                    <div class="card-head">
+                        <img class="card-img-top" src="{{ .image }}" alt="{{ .title }}">
+                    </div>
+                    <div class="card-body bg-transparent p-3">
+                        <div class="pb-2 bg-transparent">
+                            {{ range .badges }}
+                            <span class="badge badge-secondary">{{ . }}</span>
+                            {{ end }}
+                        </div>
+                        <h5 class="card-title bg-transparent">{{ .title }}</h5>
+                        <div class="card-text bg-transparent secondary-font">
+                            {{ .content }}
+                        </div>
+                    </div>
+                    {{ if or (.links) (.featured) }}
+                    <div class="card-footer py-3">
+                        {{ range .links }}
+                        <span class="m-1 mx-2">
+                            <a href="{{ .url }}">
+                                <i class="{{ .icon }}"></i>
+                            </a>
+                        </span>
+                        {{ end }}
+                        {{ if .featured }}
+                        <span class="float-end">
+                            <a class="btn btn-sm" href="{{ .featured.link }}" target="_blank">
+                                {{ .featured.name }}
+                            </a>
+                        </span>
+                        {{ end }}
+                    </div>
+                    {{ end }}
+                </div>
+            </div>
+            {{ end }}
+            {{ range ( where .Site.RegularPages "Type" "projects" ) }}
+            {{ if .Params.showInHome | default true }}
+            <div class="col-lg-4 col-md-6 my-3">
+                <div class="card my-3 h-100" title="{{ .Title }}">
+                    <div class="card-head">
+                        <img class="card-img-top" src="{{ .Params.image }}" alt="{{ .Title }}">
+                    </div>
+                    <div class="card-body bg-transparent p-3">
+                        <div class="pb-2 bg-transparent">
+                            {{ range .Params.badges }}
+                            <span class="badge badge-secondary">{{ . }}</span>
+                            {{ end }}
+                        </div>
+                        <h5 class="card-title bg-transparent">{{ .Title | truncate 50 }}</h5>
+                        <div class="card-text bg-transparent secondary-font">
+                            {{ .Summary | truncate 100 | safeHTML }}
+                        </div>
+                    </div>
+                    <div class="card-footer py-3">
+                        {{ range .Params.links }}
+                        <span class="m-1 mx-2">
+                            <a href="{{ .url }}">
+                                <i class="{{ .icon }}"></i>
+                            </a>
+                        </span>
+                        {{ end }}
+                        <span class="float-end">
+                            <a class="btn btn-sm" href="{{ .RelPermalink }}">
+                                Know more
+                            </a>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            {{ end }}
+            {{ end }}
+        </div>
+    </div>
+</section>
+{{ end }}

layouts/projects/list.html

@@ -0,0 +1,58 @@
+{{ define "head" }}
+<meta name="description" content="{{ .Title }} of {{ .Site.Title }}">
+<link rel="stylesheet" href="/css/projects.css" media="all">
+
+<!-- fontawesome -->
+<script defer src="/fontawesome-5/all-5.15.4.js"></script>
+{{ end }}
+
+{{ define "title" }}
+{{.Title }} | {{ .Site.Title }}
+{{ end }}
+
+{{ define "main" }}
+<div class="container pt-5" id="projects">
+    <h2 class="text-center pb-2">{{.Title}}</h2>
+    <div class="row">
+        {{ range .Paginator.Pages }}
+        <div class="col-lg-4 col-md-6 my-3">
+            <div class="card my-3 h-100" title="{{ .Title }}">
+                <div class="card-head">
+                    <img class="card-img-top" src="{{ .Params.image }}" alt="{{ .Title }}">
+                </div>
+                <div class="card-body bg-transparent p-3">
+                    <div class="pb-2 bg-transparent">
+                        {{ range .Params.badges }}
+                        <span class="badge badge-secondary">{{ . }}</span>
+                        {{ end }}
+                    </div>
+                    <h5 class="card-title bg-transparent">{{ .Title | truncate 50 }}</h5>
+                    <div class="card-text bg-transparent secondary-font">
+                        {{ .Summary | truncate 100 | safeHTML }}
+                    </div>
+                </div>
+                <div class="card-footer py-3">
+                    {{ range .Params.links }}
+                    <span class="m-1 mx-2">
+                        <a href="{{ .url }}">
+                            <i class="{{ .icon }}"></i>
+                        </a>
+                    </span>
+                    {{ end }}
+                    <span class="float-end">
+                        <a class="btn btn-sm" href="{{ .RelPermalink }}">
+                            Know more
+                        </a>
+                    </span>
+                </div>
+            </div>
+        </div>
+        {{ end }}
+        <div class="row justify-content-center">
+            <div class="col-auto m-3">
+                {{template "_internal/pagination.html" . }}
+            </div>
+        </div>
+    </div>
+</div>
+{{ end }}

static/css/index.css

@@ -1,7 +1,13 @@
+/* achievements */
+
 #achievements a {
     text-decoration: none;
 }
 
+#achievements h3 {
+    color: var(--text-secondary-color) !important;
+}
+
 #achievements .card {
     background-color: var(--secondary-color) !important;
     border-radius: .75rem;
@@ -21,3 +27,25 @@
     color: var(--text-secondary-color) !important;
 }
 
+/* contact */
+
+#contact h3 {
+    color: var(--text-secondary-color) !important;
+}
+
+
+#contact .btn {
+    transition: none;
+    transition: opacity 0.3s;
+    border-radius: .5rem !important;
+    border-color: var(--primary-color) !important;
+    background-color: var(--secondary-color) !important;
+}
+
+#contact .btn:hover {
+    opacity: .7;
+}
+
+#contact .btn:focus {
+    box-shadow: none !important;
+}

static/css/projects.css

@@ -0,0 +1,56 @@
+/* projects */
+
+#projects h3 {
+    color: var(--text-secondary-color) !important;
+}
+
+#projects a {
+    text-decoration: none;
+}
+
+#projects .card {
+    background-color: var(--secondary-color) !important;
+    box-shadow: 0px 8px 56px rgb(15 80 100 / 16%);
+    min-height: 400px;
+    overflow: hidden;
+    border-radius: 1rem;
+}
+
+#projects .card:hover {
+    box-shadow: 0 0 11px rgb(15 80 100 / 20%);
+    transition: transform 0.3s;
+    transform: translateY(-7px);
+}
+
+#projects .card .card-head {
+    height: 172px;
+    -o-object-fit: cover;
+    object-fit: cover;
+    overflow: hidden;
+    border-top-left-radius: 1rem;
+    border-top-right-radius: 1rem;
+}
+
+#projects .card .card-footer {
+    border-bottom-left-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+}
+
+#projects .card:hover .card-img-top {
+    transform: scale(1.2);
+    transition: all 0.3s ease-out;
+}
+
+#projects .card-img-top {
+    transition: transform 0.3s;
+}
+
+#projects .float-end .btn {
+    transition: none;
+    border-radius: .5rem !important;
+    border-color: var(--primary-color) !important;
+}
+
+#projects .float-end .btn:focus {
+    box-shadow: none !important;
+}