site: update layout & msg

10 files changed, 84 insertions, 94 deletions

diff --git a/config.cfg b/config.cfg
new file mode 100644
index 0000000..3e6e710
--- /dev/null
+++ b/config.cfg
@@ -0,0 +1,8 @@
+resources = {
+  index.html,
+  projects.html
+}
+
+static = {
+  assets
+}
diff --git a/index.html b/index.html
index 37441b7..1fb7412 100644
--- a/index.html
+++ b/index.html
@@ -1,74 +1,28 @@
-<div class="p-16">
-</div>
-
-{{ eachdo posts }}
-KSFAISO
-    ASHIAUHSFI
-HERE
-HERETOO{{ put title }}ENDIT
-ASJFHAIS
-{{ endeachdo }}
-
-<div class="p-16">
-
-  <div class="flex flex-wrap gap-8">
-    <img src="/assets/me.webp" class="max-h-56"></img>
-    <div class="flex flex-col justify-center">
-      <h1 class="text-5xl">
-        Hi there! I'm RAGHU.
-      </h1>
-      <p class="text-xl">Programmer and Hacker.</p>
-
-      <div class="flex gap-2">
-        <a href="https://github.com/compromyse" class="hover:underline hover:text-pink-900 hover:bg-pink-200 p-1" target="_blank">GITHUB</a>
-        <a href="https://www.linkedin.com/in/compromyse" class="hover:underline hover:text-pink-900 hover:bg-pink-200 p-1" target="_blank">LINKEDIN</a>
-      </div>
-    </div>
-  </div>
-
-  <div class="pt-12">
+{{ contentfor "title" }}HOME{{ endcontent }}
 
-    <!-- START PROJECTS -->
-    <div class="max-w-120">
-      <h2 class="text-2xl">[ PROJECTS ]</h2>
+<div class="min-h-screen flex flex-col">
 
-      <div class="inline-grid grid-cols-[max-content_1fr] gap-y-5 pt-4">
-        <a href="/projects#bubbl" class="contents group">
-          <div class="text-lg group-hover:underline group-hover:text-pink-900 group-hover:bg-pink-200 p-1">BUBBL</div>
-          <div class="text-md pl-3 border-l-3 border-dashed border-pink-300 group-hover:text-pink-900 group-hover:bg-pink-200 group-hover:underline group-hover:border-pink-900 flex items-center">An operating system for x86.</div>
-        </a>
+  {{ include "navbar.html" }}
 
-        <a href="/projects#bubbl" class="contents group">
-          <div class="text-lg group-hover:underline group-hover:text-pink-900 group-hover:bg-pink-200 wrap-anywhere text-wrap max-w-28">ZUK MSM8996</div>
-          <div class="text-md pl-3 border-l-3 border-dashed border-pink-300 group-hover:text-pink-900 group-hover:bg-pink-200 group-hover:underline flex items-center">A port of Android 13 &amp; 14 to the Zuk Z2 PLUS.</div>
-        </a>
+  <div class="p-16 flex-grow flex items-center justify-center">
 
-        <a href="/projects#bubbl" class="contents group">
-          <div class="text-lg group-hover:underline group-hover:text-pink-900 group-hover:bg-pink-200">CHIP8Emu</div>
-          <div class="text-md pl-3 border-l-3 border-dashed border-pink-300 group-hover:text-pink-900 group-hover:bg-pink-200 group-hover:underline flex items-center">A VM/interpreter for CHIP-8.</div>
-        </a>
+    <div class="flex flex-wrap gap-8">
+      <img src="/assets/me.webp" class="max-h-56"></img>
+      <div class="flex flex-col justify-center gap-2">
+        <h1 class="text-5xl lg:text-7xl">
+          Hi there! I'm RAGHU.
+        </h1>
+        <p class="text-xl lg:text-3xl"><span class="text-pink-900 bg-pink-100 selection:bg-zinc-400 selection:text-pink-800 p-1">Programmer and Hacker.</span></p>
 
-        <a href="/projects#bubbl" class="contents group">
-          <div class="text-lg group-hover:underline group-hover:text-pink-900 group-hover:bg-pink-200">MSG</div>
-          <div class="text-md pl-3 border-l-3 border-dashed border-pink-300 group-hover:text-pink-900 group-hover:bg-pink-200 group-hover:underline flex items-center">A Minimal Static Site Generator.</div>
-        </a>
-
-        <a href="/projects#bubbl" class="contents group">
-          <div class="text-lg group-hover:underline group-hover:text-pink-900 group-hover:bg-pink-200">Autograd</div>
-          <div class="text-md pl-3 border-l-3 border-dashed border-pink-300 group-hover:text-pink-900 group-hover:bg-pink-200 group-hover:underline flex items-center">An implementation of autograd / backpropagation.</div>
-        </a>
+        <div class="flex gap-2 lg:text-xl">
+          <a href="https://github.com/compromyse" class="hover:underline hover:text-pink-900 hover:bg-pink-100 p-1" target="_blank">GITHUB</a>
+          <a href="https://www.linkedin.com/in/compromyse" class="hover:underline hover:text-pink-900 hover:bg-pink-100 p-1" target="_blank">LINKEDIN</a>
+        </div>
       </div>
     </div>
-    <!-- END PROJECTS -->
 
   </div>
 
-</div>
+  {{ include "footer.html" }}
 
-<footer class="w-full p-4">
-  <div class="text-center">
-    <p>The Quieter You Become, The More You Are Able To Hear.</p>
-  </div>
-</footer>
-
-{{ include "tailwind_class_groups.html" }}
+</div>
diff --git a/partials/footer.html b/partials/footer.html
new file mode 100644
index 0000000..e5e870f
--- /dev/null
+++ b/partials/footer.html
@@ -0,0 +1,5 @@
+<footer class="w-full p-4 text-lg">
+  <div class="text-center">
+    <p>The Quieter You Become, The More You Are Able To Hear.</p>
+  </div>
+</footer>
diff --git a/partials/navbar.html b/partials/navbar.html
index d97ebb3..893659c 100644
--- a/partials/navbar.html
+++ b/partials/navbar.html
@@ -1,17 +1,19 @@
 <nav class="w-full mx-auto mt-10">
-  <div class="flex flex-wrap items-center px-10 gap-4 text-center text-lg">
+  <div class="flex flex-wrap items-center px-10 gap-4 text-center text-lg lg:text-2xl">
 
-    <a href="/" class="cursor-pointer font-semibold hover:underline">
+    <a href="/" class="cursor-pointer font-bold hover:underline">
       COMPROMYSE
     </a>
 
-    <a href="/projects" class="hover:underline">
-      [ PROJECTS ]
-    </a>
+    <div class="flex items-center gap-4 flex-wrap">
+      <a href="/projects" class="hover:underline">
+        [ PROJECTS ]
+      </a>
 
-    <a href="#" class="hover:underline">
-      [ ABOUT ]
-    </a>
+      <a href="#" class="hover:underline">
+        [ ABOUT ]
+      </a>
+    </div>
 
   </div>
 </nav>
diff --git a/partials/project-list.html b/partials/project-list.html
new file mode 100644
index 0000000..d9833b6
--- /dev/null
+++ b/partials/project-list.html
@@ -0,0 +1,30 @@
+<div class="max-w-120">
+  <h2 class="text-2xl">[ PROJECTS ]</h2>
+
+  <div class="inline-grid grid-cols-[max-content_1fr] gap-y-5 pt-4">
+    <a href="/projects#bubbl" class="contents group">
+      <div class="project-list-heading">BUBBL</div>
+      <div class="project-list-description">An operating system for x86.</div>
+    </a>
+
+    <a href="/projects#bubbl" class="contents group">
+      <div class="project-list-heading">ZUK MSM8996</div>
+      <div class="project-list-description">A port of Android 13 &amp; 14 to the Zuk Z2 PLUS.</div>
+    </a>
+
+    <a href="/projects#bubbl" class="contents group">
+      <div class="project-list-heading">CHIP8Emu</div>
+      <div class="project-list-description">A VM/interpreter for CHIP-8.</div>
+    </a>
+
+    <a href="/projects#bubbl" class="contents group">
+      <div class="project-list-heading">MSG</div>
+      <div class="project-list-description">A Minimal Static Site Generator.</div>
+    </a>
+
+    <a href="/projects#bubbl" class="contents group">
+      <div class="project-list-heading">Autograd</div>
+      <div class="project-list-description">An implementation of autograd / backpropagation.</div>
+    </a>
+  </div>
+</div>
diff --git a/partials/tailwind_class_groups.css b/partials/tailwind_class_groups.css
new file mode 100644
index 0000000..1bae0be
--- /dev/null
+++ b/partials/tailwind_class_groups.css
@@ -0,0 +1,9 @@
+@layer components {
+  .project-list-heading {
+    @apply text-lg group-hover:underline group-hover:text-pink-900 group-hover:bg-pink-100 p-1;
+  }
+
+  .project-list-description {
+    @apply pl-3 border-l-3 border-dashed border-pink-300 group-hover:text-pink-900 group-hover:bg-pink-100 group-hover:underline flex items-center;
+  }
+}
diff --git a/partials/tailwind_class_groups.html b/partials/tailwind_class_groups.html
deleted file mode 100644
index ef1c6f2..0000000
--- a/partials/tailwind_class_groups.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<style type="text/tailwindcss">
-    @layer components {
-      .some-class {
-        @apply px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500;
-      }
-    }
-</style>
diff --git a/posts/a.html b/posts/a.html
deleted file mode 100644
index 8237d7f..0000000
--- a/posts/a.html
+++ /dev/null
@@ -1,4 +0,0 @@
-title = A.html
----
-
-<p>a.html</p>
diff --git a/posts/b.md b/posts/b.md
deleted file mode 100644
index 51817b8..0000000
--- a/posts/b.md
+++ /dev/null
@@ -1,8 +0,0 @@
-title = B.md
----
-
-# Hi there!!!!
-
-```
-AHH
-```
diff --git a/base.html b/templates/base.html
index 042ee4d..f00ce3e 100644
--- a/base.html
+++ b/templates/base.html
@@ -4,14 +4,15 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Home | COMPROMYSE</title>
+    <title>{{ content "title" }} | COMPROMYSE</title>
 
     <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
     <link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap" rel="stylesheet">
+    <style type="text/tailwindcss">
+      {{ include "tailwind_class_groups.css" }}
+    </style>
   </head>
-  <body class="bg-zinc-900 text-pink-300 font-[Pixelify_Sans] selection:text-pink-900 selection:bg-pink-100">
-    {{ include "navbar.html" }}
-
+  <body class="bg-zinc-900 text-pink-300 font-[Pixelify_Sans] selection:text-pink-900 selection:bg-pink-100 lg:text-xl">
     {{ body }}
   </body>
 </html>