updated for project - quiz app

nirajxdev · nirajxdev · commit a78cb7e15447 · 2025-11-19T11:54:30.000+05:30
diff --git a/index.html b/index.html
@@ -3,14 +3,71 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>My JavaScript Projects</title>
+    <title>JS Portfolio | Projects</title>
+    <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body>
-    <h1>My JavaScript Projects</h1>
-    <ul>
-        <li><a href="01_to-do-app/">Basic To Do APP</a></li>
-        <li><a href="02_budget-tracker/">Budget Tracker App</a></li>
+<body class="bg-white text-black font-sans antialiased flex flex-col items-center min-h-screen p-8">
+
+    <div class="w-full max-w-2xl">
         
-    </ul>
+        <header class="border-b-2 border-black pb-4 mb-12 text-center">
+            <h1 class="text-4xl font-bold tracking-tighter uppercase">
+                JavaScript Projects
+            </h1>
+            <p class="text-sm font-light text-gray-500 mt-1 tracking-widest">
+                A collection of fundamental web apps.
+            </p>
+        </header>
+
+        <h2 class="text-lg font-medium uppercase tracking-widest text-gray-700 mb-6">
+            Project Index (Core Logic)
+        </h2>
+
+        <ul class="space-y-4">
+            <li>
+                <a href="01_to-do-app/" 
+                   class="flex justify-between items-center border border-gray-200 p-4 
+                          hover:bg-black hover:text-white transition-colors duration-200 group">
+                    <span class="text-xl font-semibold group-hover:underline">
+                        01. Basic To-Do List App
+                    </span>
+                    <span class="text-sm uppercase font-mono tracking-widest text-gray-500 group-hover:text-white transition-colors">
+                        State & DOM
+                    </span>
+                </a>
+            </li>
+            
+            <li>
+                <a href="02_budget-tracker/" 
+                   class="flex justify-between items-center border border-gray-200 p-4 
+                          hover:bg-black hover:text-white transition-colors duration-200 group">
+                    <span class="text-xl font-semibold group-hover:underline">
+                        02. Budget Tracker App
+                    </span>
+                    <span class="text-sm uppercase font-mono tracking-widest text-gray-500 group-hover:text-white transition-colors">
+                        Calculations & Storage
+                    </span>
+                </a>
+            </li>
+
+            <li>
+                <a href="03_quiz-application/" 
+                   class="flex justify-between items-center border border-gray-200 p-4 
+                          hover:bg-black hover:text-white transition-colors duration-200 group">
+                    <span class="text-xl font-semibold group-hover:underline">
+                        03. Quiz Application
+                    </span>
+                    <span class="text-sm uppercase font-mono tracking-widest text-gray-500 group-hover:text-white transition-colors">
+                        Flow Control & Events
+                    </span>
+                </a>
+            </li>
+        </ul>
+        
+        <footer class="mt-20 text-center text-xs text-gray-400">
+            Niraj Singh Kushwaha | All Rights Reserved.
+        </footer>
+
+    </div>
 </body>
 </html>
