projects

config.toml

@@ -1,38 +0,0 @@
-baseURL = "https://hugo-blog0.netlify.app/"
-languageCode = "en-us"
-title = "Hugo-blog"
-
-[params]
-  favicon = "/images/hugo.png"
-  description = "Portfolio and personal blog of gurusabarish"
-
-  # Home
-  name = "Gurusabarish"
-  profile = "/images/avatar-370-456322.webp"
-  github = "https://github.com/gurusabarish"
-  linkedin = "https://linkedin.com/in/gurusabarish"
-  twitter = "https://twitter.com/gurusabarishh"
-  instagram = "https://instagram.com/gurusabarishh"
-
-  # Do things { Please change the svg icons width="3em" height="3em" }
-  thing1 = "Python"
-  thing2 = "Machine learning"
-  thing3 = "Build things for web"
-  thing1_des = "I build something beautiful using python."
-  thing2_des = "I train robust models for various tasks."
-  thing3_des = "I love to build things for web."
-
-  # About
-  profile_image = "/images/gurusabarish.jpg"
-  jop = "Web developer"
-  jops_about = "web developer and ML engineer"
-  resume = ""
-
-# Navbar Menus
-[[menu.main]]
-name    = "Blog"
-url     = "blog"
-
-[Author]
-  name = "Gurusabarish"
-  website = "https://github.com/gurusabarish"

config.yaml

@@ -0,0 +1,56 @@
+baseURL: "https://hugo-blog0.netlify.app/"
+languageCode: "en-us"
+title: "Hugo-blog"
+
+
+
+  
+params:
+  favicon: "/images/hugo.png"
+  description: "Portfolio and personal blog of gurusabarish"
+
+  # Navbar Menus
+  customMenus:
+  - name: "Blog"
+    url: "blog"
+ 
+  # Home
+  name: "Gurusabarish"
+  profile: "/images/avatar-370-456322.webp"
+  github: "https://github.com/gurusabarish"
+  linkedin: "https://linkedin.com/in/gurusabarish"
+  twitter: "https://twitter.com/gurusabarishh"
+  instagram: "https://instagram.com/gurusabarishh"
+
+  # Do things { Please change the svg icons width="3em" height="3em" }
+  thing1: "Python"
+  thing2: "Machine learning"
+  thing3: "Build things for web"
+  thing1_des: "I build something beautiful using python."
+  thing2_des: "I train robust models for various tasks."
+  thing3_des: "I love to build things for web."
+
+  # About
+  profile_image: "/images/gurusabarish.jpg"
+  jop: "Web developer"
+  jops_about: "web developer and ML engineer"
+  resume: ""
+  
+  projects:
+  - title: "Project 1"
+    image: "/images/project.png"
+    description:  "this is your description"
+
+  - title: "Project 1"
+    image: "/images/project.png"
+    description: "this is your description"
+  
+
+Author:
+  name: "Gurusabarish"
+  website: "https://github.com/gurusabarish"
+
+
+
+
+  

data/sections/projects.yaml

@@ -0,0 +1,56 @@
+projects:
+  
+- title: = "Project 1"
+  image: "/images/project.png"
+  description:  "this is your description"
+
+- title: "Project 1"
+  image: "/images/project.png"
+  description: "this is your description"
+
+baseURL: "https://hugo-blog0.netlify.app/"
+languageCode: "en-us"
+title: "Hugo-blog"
+
+params:
+  favicon: "/images/hugo.png"
+  description: "Portfolio and personal blog of gurusabarish"
+
+  # Home
+  name: "Gurusabarish"
+  profile: "/images/avatar-370-456322.webp"
+  github: "https://github.com/gurusabarish"
+  linkedin: "https://linkedin.com/in/gurusabarish"
+  twitter: "https://twitter.com/gurusabarishh"
+  instagram: "https://instagram.com/gurusabarishh"
+
+  # Do things { Please change the svg icons width="3em" height="3em" }
+  thing1: "Python"
+  thing2: "Machine learning"
+  thing3: "Build things for web"
+  thing1_des: "I build something beautiful using python."
+  thing2_des: "I train robust models for various tasks."
+  thing3_des: "I love to build things for web."
+
+  # About
+  profile_image: "/images/gurusabarish.jpg"
+  jop: "Web developer"
+  jops_about: "web developer and ML engineer"
+  resume: ""
+  
+
+  
+
+# Navbar Menus
+menu.main:
+  name: "Blog"
+  url: "blog"
+
+Author:
+  name: "Gurusabarish"
+  website: "https://github.com/gurusabarish"
+
+
+
+
+  

layouts/index.html

@@ -24,6 +24,7 @@
     {{- partial "sections/about.html" . -}}
     {{- partial "sections/do_things.html" . -}}
     {{- partial "sections/skill.html" . -}}
+    {{- partial "sections/projects.html" . -}}
 
 
     {{- partial "footer.html" . -}}

layouts/partials/header.html

@@ -9,18 +9,18 @@
 		<div class="collapse navbar-collapse" id="navbarNavDropdown">
 			<ul class="navbar-nav ml-auto">
 				<li class="nav-item">
-					<a class="nav-link" href="#home">Home</a>
+					<a class="nav-link" href="{{ .Site.BaseURL }}#home">Home</a>
 				</li>
 				<li class="nav-item">
-					<a class="nav-link" href="#about">About</a>
+					<a class="nav-link" href="{{ .Site.BaseURL }}#about">About</a>
 				</li>
 				<li class="nav-item">
-					<a class="nav-link" href="#skill">Skill</a>
+					<a class="nav-link" href="{{ .Site.BaseURL }}#projects">Projects</a>
 				</li>
 
-				{{ range .Site.Menus.main }}
+				{{ range site.Params.customMenus }}
 				<li class="nav-item">
-					<a class="nav-link" href="{{ .URL | absURL }}">{{ .Name }}</a>
+					<a class="nav-link" href="{{ .Site.BaseURL }}{{.url}}">{{ .name }}</a>
 				</li>
 				{{ end }}
 			</ul>

layouts/partials/sections/projects.html

@@ -0,0 +1,18 @@
+<section>
+    <div class="projects p-3" id="projects">
+        <div class="project-heading text-center container">Projects</div>
+
+        <div class="container p-2">
+            {{ range .Site.Params.projects }}
+            <div class="card mb-3">
+                <img class="card-img-top" src="{{ .image }}" alt="Card image cap">
+                <div class="card-body">
+                    <h5 class="card-title">{{ .title }}</h5>
+                    <p class="card-text">{{ .description }}</p>
+                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+                </div>
+            </div>
+            {{ end }}
+        </div>
+    </div>
+</section>

static/css/index.css

@@ -142,6 +142,7 @@
 /* Skill */
 .skill {
     height: 80vh;
+    background-color: #e5e9f2;
 }
 
 .skill-heading {
@@ -150,3 +151,22 @@
 }
 
 /* Projects */
+.projects {
+    height: auto;
+}
+
+.project-heading {
+    font-family: 'Alata', sans-serif;
+    font-size: 25px;
+}
+
+.card-img-top {
+    width: 100% !important;
+    height: 350px !important;
+}
+
+@media only screen and (max-width: 600px) {
+    .card-img-top {
+        height: 180px !important;
+    }
+}