update navbar

layouts/partials/header.html

@@ -2,6 +2,15 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
 <link rel="stylesheet" href="/css/index.css" />
+<link rel="stylesheet" href="/css/navbar.css" />
 <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
 <script src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/konpa/devicon@master/devicon.min.css">
+
+<script type="text/javascript">
+    window.addEventListener('scroll', ()=>{
+        const nav = document.querySelector('nav')
+        console.log(nav)
+        nav.classList.toggle('onscroll', window.scrollY > 0)
+    })
+</script>

layouts/partials/home.html

@@ -14,23 +14,26 @@
   {{ $data := .Site.Data.home }}
   <main class="container mx-auto mt-8 px-4 xl:px-0">
     <section id="about" class="md:flex justify-around">
-      <div class="my-auto">
+      <div class="my-auto md:mr-4">
         {{ partial "home_title" (dict "title" "About Me") }}
         <div class="flex mt-3 gap-3 text-xl">
           {{ range $data.about.link }}
           <i class="{{ .icon }}"></i>{{end}}
         </div>
       </div>
-      <div class="text-md mt-4 md:mt-0">
+      <div class="mt-4 md:mt-0 md:ml-4">
+        <div class="text-2xl font-bold">{{$data.about.title}}</div>
+        <div class="text-lg mt-3">
           <div>{{ replace $data.about.text "\n" "<br />" | safeHTML }}</div>
         </div>
+      </div>
     </section>
-    <section id="skills" class="mt-6">
+    <section id="skills" class="mt-12">
       <div class="md:flex justify-center">
         {{ partial "home_title" (dict "title" "Skills") }}
       </div>
       <div
-        class="mt-4 grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
+        class="mt-8 grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
       >
         {{ range $data.skills.list }}
         <div class="w-full rounded overflow-hidden shadow-lg">
@@ -55,12 +58,12 @@
         {{end}}
       </div>
     </section>
-    <section id="projects" class="mt-6">
+    <section id="projects" class="mt-12">
       <div class="md:flex justify-center">
         {{ partial "home_title" (dict "title" "Projects") }}
       </div>
       <div
-        class="mt-4 grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
+        class="mt-8 grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
       >
         {{ range $data.project.list }}
         <div class="w-full rounded overflow-hidden shadow-lg">
@@ -75,20 +78,6 @@
               {{ .text }}
             </p>
           </div>
-          <div class="px-6 py-4">
-            <span
-              class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2"
-              >#photography</span
-            >
-            <span
-              class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2"
-              >#travel</span
-            >
-            <span
-              class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700"
-              >#winter</span
-            >
-          </div>
         </div>
         {{end}}
       </div>

layouts/partials/navbar.html

@@ -1,44 +1,11 @@
-<nav class="fixed w-full" style="z-index:1000">
-  <div
-    class="container mx-auto flex items-center justify-between flex-wrap bg-transparency p-6"
-  >
-    <div class="flex items-center flex-shrink-0 text-white mr-6">
-      <a class="font-semibold text-xl tracking-tight" href="/"
-        >{{ $.Site.Title }}</a
-      >
-    </div>
-    <div class="block lg:hidden">
-      <button
-        class="flex items-center px-3 py-2 border rounded text-teal-200 border-white hover:text-white hover:border-white"
-      >
-        <svg
-          class="fill-current h-3 w-3"
-          viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>Menu</title>
-          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
-        </svg>
-      </button>
-    </div>
-    <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
-      <div class="text-sm lg:flex-grow">
-        {{ $currentPage := . }} {{ range .Site.Menus.main }}
-        <a
-          href="{{ .URL }}"
-          class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-white mr-4"
-        >
-          {{ .Name }}
-        </a>
+<nav>
+  <a href="/" class="logo">{{ .Site.Title }}</a>
+  <ul>
+    {{ range .Site.Menus.main }}
+    <li>
+      <a href="{{ .URL }}">{{ .Name }}</a>
+    </li>
     {{end}}
-      </div>
-      <div>
-        <a
-          href="#"
-          class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0"
-          >Blog</a
-        >
-      </div>
-    </div>
-  </div>
+  </ul>
 </nav>
+<section class="banner"></section>

static/css/index.css

@@ -81,7 +81,7 @@
   content: "";
   width: 42px;
   height: 4px;
-  background: #EE7785;
+  background: #ee7785;
   left: 0;
   bottom: 0px;
 }

static/css/navbar.css

@@ -0,0 +1,53 @@
+nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: 0.6s;
+  padding: 40px 100px;
+  z-index: 600;
+}
+
+nav.onscroll {
+  padding: 5px 100px;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+nav .logo {
+  position: relative;
+  font-weight: 700;
+  color: #fff;
+  text-decoration: none;
+  font-size: 2em;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+}
+
+nav ul {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+nav ul li {
+  position: relative;
+  list-style: none;
+}
+
+nav ul li a {
+  position: relative;
+  margin: 0 15px;
+  text-decoration: none;
+  color: #fff;
+  letter-spacing: 2px;
+  font-weight: 500px;
+  transition: 0.6s;
+}
+nav.onscroll .logo,
+nav.onscroll ul li a {
+  color: #fff;
+}