Spaces:

enzostvs
/

cooldev-portfolio

Running

App Files Files Community

enzostvs HF Staff commited on 11 days ago

Commit

f660263

verified ·

1 Parent(s): a5c9de1

create a cool frontend engineer portfolio using a modern style with a darkmode style and some cool blurred blob gradient.

Browse files

Im mostly working with javascript: react, nodejs, typescript, vue and tailwind.
try to do the best version possible, i like these websites if you want some ideas:
tailwind, stripe, vercel

Files changed (4) hide show

README.md +8 -5
index.html +412 -19
script.js +153 -0
style.css +84 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Cooldev Portfolio
-emoji: 👀
-colorFrom: red
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: CoolDev Portfolio
+colorFrom: gray
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,412 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>CoolDev — Frontend Engineer Portfolio</title>
+  <meta name="description" content="Portfolio of a frontend engineer specializing in JavaScript, React, Vue, TypeScript, Node.js and Tailwind." />
+  <meta name="theme-color" content="#0b0f17" />
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20'/%3E%3Cpath d='M17 7H7a4 4 0 0 0 0 8h10a4 4 0 0 1 0 8Z'/%3E%3C/svg%3E" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          fontFamily: { sans: ['Inter', 'ui-sans-serif', 'system-ui'] },
+          boxShadow: {
+            glow: '0 0 0 1px rgb(var(--color-primary-500) / 0.12), 0 20px 70px -20px rgb(var(--color-primary-500) / 0.35)',
+            soft: '0 10px 40px -15px rgb(0 0 0 / 0.35)'
+          },
+          keyframes: {
+            float: {
+              '0%,100%': { transform: 'translateY(0px) scale(1)' },
+              '50%': { transform: 'translateY(-16px) scale(1.02)' }
+            },
+            blob: {
+              '0%': { transform: 'translate(0px, 0px) scale(1)' },
+              '33%': { transform: 'translate(20px, -30px) scale(1.05)' },
+              '66%': { transform: 'translate(-15px, 20px) scale(0.98)' },
+              '100%': { transform: 'translate(0px, 0px) scale(1)' }
+            }
+          },
+          animation: {
+            float: 'float 8s ease-in-out infinite',
+            blob: 'blob 20s ease-in-out infinite'
+          }
+        }
+      }
+    }
+  </script>
+  <link rel="stylesheet" href="style.css" />
+  <script src="https://unpkg.com/feather-icons"></script>
+  <script src="script.js" defer></script>
+</head>
+<body class="antialiased selection:bg-primary-500/30 selection:text-white text-zinc-200 bg-[color:var(--bg)]">
+  <!-- Background blob layer -->
+  <div aria-hidden="true" class="fixed inset-0 -z-30 bg-[color:var(--bg)]">
+    <div class="absolute -top-32 -left-24 w-[38rem] h-[38rem] rounded-full bg-[color:rgb(var(--color-primary-500)_/_0.20)] blur-3xl animate-blob"></div>
+    <div class="absolute top-1/4 -right-24 w-[30rem] h-[30rem] rounded-full bg-[color:rgb(var(--color-secondary-500)_/_0.18)] blur-3xl animate-blob" style="animation-delay: -6s;"></div>
+    <div class="absolute bottom-[-8rem] left-1/3 w-[36rem] h-[36rem] rounded-full bg-[color:rgb(var(--color-tertiary-500)_/_0.15)] blur-3xl animate-blob" style="animation-delay: -12s;"></div>
+  </div>
+  <!-- Header -->
+  <header class="fixed top-0 inset-x-0 z-50 border-b border-white/5 bg-[color:rgb(var(--bg)_/_0.6)] backdrop-blur supports-[backdrop-filter]:bg-[color:rgb(var(--bg)_/_0.5)]">
+    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+      <div class="flex h-16 items-center justify-between">
+        <a href="#" class="flex items-center gap-2 group">
+          <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-[color:rgb(var(--color-primary-500)_/_0.2)] text-[color:rgb(var(--color-primary-500))] shadow-glow group-hover:rotate-6 transition">
+            <i data-feather="cpu"></i>
+          </span>
+          <span class="text-sm font-semibold tracking-tight text-zinc-100">CoolDev</span>
+        </a>
+        <nav class="hidden md:flex items-center gap-1">
+          <a href="#about" class="nav-link">About</a>
+          <a href="#projects" class="nav-link">Projects</a>
+          <a href="#experience" class="nav-link">Experience</a>
+          <a href="#contact" class="nav-link">Contact</a>
+        </nav>
+        <div class="flex items-center gap-2">
+          <button id="theme-toggle" class="p-2 rounded-md border border-white/10 bg-white/5 hover:bg-white/10 text-zinc-200 hover:text-white transition-colors" aria-label="Toggle theme">
+            <i id="theme-icon" data-feather="moon"></i>
+          </button>
+          <a href="#contact" class="btn-primary hidden sm:inline-flex">Get in touch</a>
+          <button id="menu-toggle" class="md:hidden p-2 rounded-md border border-white/10 bg-white/5 hover:bg-white/10 text-zinc-200 hover:text-white transition-colors" aria-label="Open menu">
+            <i data-feather="menu"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- Mobile menu -->
+    <div id="mobile-menu" class="md:hidden hidden border-t border-white/5 bg-[color:rgb(var(--bg)_/_0.75)] supports-[backdrop-filter]:bg-[color:rgb(var(--bg)_/_0.6)]">
+      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-3 flex flex-col gap-1">
+        <a href="#about" class="mobile-link">About</a>
+        <a href="#projects" class="mobile-link">Projects</a>
+        <a href="#experience" class="mobile-link">Experience</a>
+        <a href="#contact" class="mobile-link">Contact</a>
+        <a href="#contact" class="btn-primary w-full justify-center mt-2">Get in touch</a>
+      </div>
+    </div>
+  </header>
+  <!-- Main -->
+  <main class="pt-20">
+    <!-- Hero -->
+    <section class="relative">
+      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="grid lg:grid-cols-2 gap-10 items-center py-16 md:py-24">
+          <div class="relative z-10">
+            <span class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-medium text-zinc-300">
+              <span class="inline-block h-2 w-2 rounded-full bg-[color:rgb(var(--color-primary-500))] animate-pulse"></span>
+              Available for freelance
+            </span>
+            <h1 class="mt-5 text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-zinc-100 leading-tight">
+              Frontend Engineer crafting fast, delightful web apps
+            </h1>
+            <p class="mt-5 text-zinc-400 max-w-xl">
+              I design and build scalable frontends with React, Vue, TypeScript and Tailwind.
+              From complex UIs to design systems, I ship polished experiences with performance in mind.
+            </p>
+            <div class="mt-8 flex flex-wrap items-center gap-3">
+              <a href="#projects" class="btn-primary">View Projects</a>
+              <a href="#" class="btn-ghost" id="download-cv">
+                <i data-feather="download-cloud"></i>
+                Download CV
+              </a>
+            </div>
+            <div class="mt-8 flex flex-wrap items-center gap-2 text-sm text-zinc-400">
+              <span class="px-2 py-1 rounded-md bg-white/5 border border-white/10">React</span>
+              <span class="px-2 py-1 rounded-md bg-white/5 border border-white/10">Next.js</span>
+              <span class="px-2 py-1 rounded-md bg-white/5 border border-white/10">Vue</span>
+              <span class="px-2 py-1 rounded-md bg-white/5 border border-white/10">TypeScript</span>
+              <span class="px-2 py-1 rounded-md bg-white/5 border border-white/10">Node.js</span>
+              <span class="px-2 py-1 rounded-md bg-white/5 border border-white/10">Tailwind</span>
+            </div>
+          </div>
+          <div class="relative lg:justify-self-end">
+            <div class="relative w-full max-w-lg mx-auto">
+              <div class="absolute -inset-4 rounded-3xl bg-gradient-to-tr from-[color:rgb(var(--color-primary-500)_/_0.15)] to-[color:rgb(var(--color-secondary-500)_/_0.1)] blur-2xl -z-10"></div>
+              <div class="glass-card relative rounded-3xl border border-white/10 bg-[color:rgb(var(--bg)_/_0.7)] p-6 md:p-8 shadow-soft">
+                <div class="flex items-center gap-3">
+                  <div class="h-10 w-10 rounded-xl bg-[color:rgb(var(--color-primary-500)_/_0.15)] text-[color:rgb(var(--color-primary-500))] flex items-center justify-center">
+                    <i data-feather="activity"></i>
+                  </div>
+                  <div>
+                    <div class="text-zinc-200 font-semibold">Recent Build</div>
+                    <div class="text-xs text-zinc-400">Design system + SSR with Next.js</div>
+                  </div>
+                </div>
+                <pre class="mt-6 rounded-xl bg-black/50 text-zinc-300 p-4 overflow-x-auto text-sm leading-relaxed">
+<span class="text-emerald-400">const</span> theme <span class="text-pink-400">=</span> <span class="text-amber-300">dark</span>
+<span class="text-emerald-400">function</span> <span class="text-sky-400">Button</span>({ children, ...props }) {
+  <span class="text-emerald-400">return</span> (
+    &lt;button className=<span class="text-amber-300">"btn-primary"</span> {...props}&gt;
+      {children}
+    &lt;/button&gt;
+  )
+}</pre>
+                <div class="mt-6 grid grid-cols-3 gap-3 text-center">
+                  <div class="rounded-xl bg-white/5 border border-white/10 p-3">
+                    <div class="text-2xl font-extrabold text-zinc-100">5+ yrs</div>
+                    <div class="text-xs text-zinc-400">Experience</div>
+                  </div>
+                  <div class="rounded-xl bg-white/5 border border-white/10 p-3">
+                    <div class="text-2xl font-extrabold text-zinc-100">40+</div>
+                    <div class="text-xs text-zinc-400">Projects</div>
+                  </div>
+                  <div class="rounded-xl bg-white/5 border border-white/10 p-3">
+                    <div class="text-2xl font-extrabold text-zinc-100">100ms</div>
+                    <div class="text-xs text-zinc-400">TTI target</div>
+                  </div>
+                </div>
+              </div>
+              <!-- Floating card -->
+              <div class="absolute -right-6 -bottom-6 hidden lg:block">
+                <div class="glass-card rounded-2xl border border-white/10 bg-[color:rgb(var(--bg)_/_0.75)] p-4 shadow-soft">
+                  <div class="flex items-center gap-3">
+                    <span class="h-9 w-9 rounded-lg bg-[color:rgb(var(--color-secondary-500)_/_0.15)] text-[color:rgb(var(--color-secondary-500))] flex items-center justify-center">
+                      <i data-feather="zap"></i>
+                    </span>
+                    <div>
+                      <div class="text-sm font-semibold text-zinc-100">Perf minded</div>
+                      <div class="text-xs text-zinc-400">Core Web Vitals A+</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- About -->
+    <section id="about" class="relative py-16 md:py-24">
+      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="grid lg:grid-cols-3 gap-8 items-start">
+          <div class="lg:col-span-1">
+            <div class="glass-card rounded-2xl border border-white/10 bg-[color:rgb(var(--bg)_/_0.7)] p-6">
+              <div class="text-sm uppercase tracking-widest text-zinc-400">About</div>
+              <h2 class="mt-2 text-2xl font-bold text-zinc-100">Building the web, pixel by pixel</h2>
+              <p class="mt-3 text-zinc-400">
+                I’m a frontend engineer focused on building fast, accessible, and beautiful interfaces.
+                I love design systems, shipping features, and optimizing the heck out of web apps.
+              </p>
+              <div class="mt-6 flex items-center gap-2">
+                <span class="h-2 w-2 rounded-full bg-[color:rgb(var(--color-primary-500))]"></span>
+                <span class="text-sm text-zinc-300">Core stack</span>
+              </div>
+              <div class="mt-3 flex flex-wrap gap-2">
+                <span class="chip">JavaScript</span>
+                <span class="chip">TypeScript</span>
+                <span class="chip">React</span>
+                <span class="chip">Next.js</span>
+                <span class="chip">Vue</span>
+                <span class="chip">Node.js</span>
+                <span class="chip">Tailwind</span>
+              </div>
+            </div>
+          </div>
+          <div class="lg:col-span-2">
+            <div class="grid md:grid-cols-2 gap-6">
+              <div class="glass-card rounded-2xl border border-white/10 bg-[color:rgb(var(--bg)_/_0.7)] p-6">
+                <div class="flex items-center justify-between">
+                  <h3 class="font-semibold text-zinc-100">What I do</h3>
+                  <i data-feather="sliders" class="text-zinc-400"></i>
+                </div>
+                <ul class="mt-4 space-y-3 text-zinc-400">
+                  <li class="flex gap-3"><i data-feather="check-circle" class="mt-0.5 text-[color:rgb(var(--color-primary-500))]"></i> Design systems & component libraries</li>
+                  <li class="flex gap-3"><i data-feather="check-circle" class="mt-0.5 text-[color:rgb(var(--color-primary-500))]"></i> Complex, responsive UIs (React/Vue)</li>
+                  <li class="flex gap-3"><i data-feather="check-circle" class="mt-0.5 text-[color:rgb(var(--color-primary-500))]"></i> Performance & accessibility auditing</li>
+                </ul>
+              </div>
+              <div class="glass-card rounded-2xl border border-white/10 bg-[color:rgb(var(--bg)_/_0.7)] p-6">
+                <div class="flex items-center justify-between">
+                  <h3 class="font-semibold text-zinc-100">How I work</h3>
+                  <i data-feather="cpu" class="text-zinc-400"></i>
+                </div>
+                <ul class="mt-4 space-y-3 text-zinc-400">
+                  <li class="flex gap-3"><i data-feather="arrow-right" class="mt-0.5 text-[color:rgb(var(--color-secondary-500))]"></i> Outcome-driven, iterative delivery</li>
+                  <li class="flex gap-3"><i data-feather="arrow-right" class="mt-0.5 text-[color:rgb(var(--color-secondary-500))]"></i> CI/CD, testing and code quality</li>
+                  <li class="flex gap-3"><i data-feather="arrow-right" class="mt-0.5 text-[color:rgb(var(--color-secondary-500))]"></i> Collaboration with design & product</li>
+                </ul>
+              </div>
+            </div>
+            <div class="mt-6 grid md:grid-cols-3 gap-6">
+              <div class="glass-card rounded-2xl border border-white/10 bg-[color:rgb(var(--bg)_/_0.7)] p-6 text-center">
+                <i data-feather="feather" class="mx-auto text-[color:rgb(var(--color-tertiary-500))]"></i>
+                <div class="mt-3 text-sm text-zinc-300">Accessible & semantic UI</div>
+              </div>
+              <div class="glass-card rounded-2xl border border-white/10 bg-[color:rgb(var(--bg)_/_0.7)] p-6 text-center">
+                <i data-feather="wind" class="mx-auto text-[color:rgb(var(--color-primary-500))]"></i>
+                <div class="mt-3 text-sm text-zinc-300">Tailwind-first workflows</div>
+              </div>
+              <div class="glass-card rounded-2xl border border-white/10 bg-[color:rgb(var(--bg)_/_0.7)] p-6 text-center">
+                <i data-feather="smartphone" class="mx-auto text-[color:rgb(var(--color-secondary-500))]"></i>
+                <div class="mt-3 text-sm text-zinc-300">Mobile-first, responsive</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Projects -->
+    <section id="projects" class="relative py-16 md:py-24">
+      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="flex items-end justify-between gap-4">
+          <div>
+            <div class="text-sm uppercase tracking-widest text-zinc-400">Projects</div>
+            <h2 class="mt-2 text-3xl font-bold text-zinc-100">Selected work</h2>
+            <p class="mt-2 max-w-2xl text-zinc-400">A few things I’ve built recently.</p>
+          </div>
+          <a href="#contact" class="btn-ghost hidden md:inline-flex">
+            <i data-feather="send"></i>
+            Start a project
+          </a>
+        </div>
+        <div id="projects-grid" class="mt-8 grid sm:grid-cols-2 lg:grid-cols-3 gap-6"></div>
+      </div>
+    </section>
+    <!-- Experience -->
+    <section id="experience" class="relative py-16 md:py-24">
+      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div>
+          <div class="text-sm uppercase tracking-widest text-zinc-400">Experience</div>
+          <h2 class="mt-2 text-3xl font-bold text-zinc-100">Where I’ve worked</h2>
+        </div>
+        <ol class="mt-8 relative border-l border-white/10 pl-6 space-y-8">
+          <li class="relative">
+            <span class="absolute -left-3 top-1.5 h-6 w-6 rounded-full border border-white/10 bg-[color:rgb(var(--bg))] flex items-center justify-center">
+              <span class="h-2.5 w-2.5 rounded-full bg-[color:rgb(var(--color-primary-500))]"></span>
+            </span>
+            <div class="glass-card rounded-2xl border border-white/10 bg-[color:rgb(var(--bg)_/_0.7)] p-6">
+              <div class="flex items-center justify-between">
+                <div class="font-semibold text-zinc-100">Senior Frontend Engineer · Vercel-like SaaS</div>
+                <span class="text-xs text-zinc-400">2022 — Present</span>
+              </div>
+              <ul class="mt-3 space-y-2 text-zinc-400 text-sm">
+                <li class="flex gap-3"><i data-feather="arrow-up-right" class="mt-0.5 text-[color:rgb(var(--color-secondary-500))]"></i> Led design system migration to Tailwind + Radix, cutting build times by 35%</li>
+                <li class="flex gap-3"><i data-feather="arrow-up-right" class="mt-0.5 text-[color:rgb(var(--color-secondary-500))]"></i> Implemented SSR/ISR patterns with Next.js; LCP improved to ~1.2s</li>
+                <li class="flex gap-3"><i data-feather="arrow-up-right" class="mt-0.5 text-[color:rgb(var(--color-secondary-500))]"></i> Mentored 4 engineers on performance and accessibility best practices</li>
+              </ul>
+              <div class="mt-4 flex flex-wrap gap-2">
+                <span class="chip">React</span><span class="chip">TypeScript</span><span class="chip">Next.js</span><span class="chip">Tailwind</span>
+              </div>
+            </div>
+          </li>
+          <li class="relative">
+            <span class="absolute -left-3 top-1.5 h-6 w-6 rounded-full border border-white/10 bg-[color:rgb(var(--bg))] flex items-center justify-center">
+              <span class="h-2.5 w-2.5 rounded-full bg-[color:rgb(var(--color-secondary-500))]"></span>
+            </span>
+            <div class="glass-card rounded-2xl border border-white/10 bg-[color:rgb(var(--bg)_/_0.7)] p-6">
+              <div class="flex items-center justify-between">
+                <div class="font-semibold text-zinc-100">Frontend Engineer · Fintech</div>
+                <span class="text-xs text-zinc-400">2020 — 2022</span>
+              </div>
+              <ul class="mt-3 space-y-2 text-zinc-400 text-sm">
+                <li class="flex gap-3"><i data-feather="arrow-up-right" class="mt-0.5 text-[color:rgb(var(--color-primary-500))]"></i> Built modular component library used across 5 products</li>
+                <li class="flex gap-3"><i data-feather="arrow-up-right" class="mt-0.5 text-[color:rgb(var(--color-primary-500))]"></i> Introduced automated visual regression testing, reducing UI bugs by 40%</li>
+              </ul>
+              <div class="mt-4 flex flex-wrap gap-2">
+                <span class="chip">Vue</span><span class="chip">TypeScript</span><span class="chip">Vite</span><span class="chip">Cypress</span>
+              </div>
+            </div>
+          </li>
+        </ol>
+      </div>
+    </section>
+    <!-- Contact -->
+    <section id="contact" class="relative py-16 md:py-24">
+      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="grid md:grid-cols-2 gap-8">
+          <div>
+            <div class="text-sm uppercase tracking-widest text-zinc-400">Contact</div>
+            <h2 class="mt-2 text-3xl font-bold text-zinc-100">Let’s build something great</h2>
+            <p class="mt-3 max-w-xl text-zinc-400">Have a project in mind or want to chat? I’m open to freelance and collaborations.</p>
+            <div class="mt-6 space-y-4">
+              <a href="mailto:hello@example.com" class="group flex items-center gap-3 text-zinc-300 hover:text-white">
+                <span class="h-9 w-9 rounded-lg bg-[color:rgb(var(--color-primary-500)_/_0.15)] text-[color:rgb(var(--color-primary-500))] flex items-center justify-center">
+                  <i data-feather="mail"></i>
+                </span>
+                <span>hello@example.com</span>
+                <i data-feather="external-link" class="opacity-0 group-hover:opacity-100 transition"></i>
+              </a>
+              <a href="https://github.com/" target="_blank" class="group flex items-center gap-3 text-zinc-300 hover:text-white">
+                <span class="h-9 w-9 rounded-lg bg-[color:rgb(var(--color-secondary-500)_/_0.15)] text-[color:rgb(var(--color-secondary-500))] flex items-center justify-center">
+                  <i data-feather="github"></i>
+                </span>
+                <span>github.com/yourname</span>
+                <i data-feather="external-link" class="opacity-0 group-hover:opacity-100 transition"></i>
+              </a>
+              <a href="https://www.linkedin.com/" target="_blank" class="group flex items-center gap-3 text-zinc-300 hover:text-white">
+                <span class="h-9 w-9 rounded-lg bg-[color:rgb(var(--color-tertiary-500)_/_0.15)] text-[color:rgb(var(--color-tertiary-500))] flex items-center justify-center">
+                  <i data-feather="linkedin"></i>
+                </span>
+                <span>linkedin.com/in/yourname</span>
+                <i data-feather="external-link" class="opacity-0 group-hover:opacity-100 transition"></i>
+              </a>
+            </div>
+          </div>
+          <form id="contact-form" class="glass-card rounded-2xl border border-white/10 bg-[color:rgb(var(--bg)_/_0.7)] p-6">
+            <div class="grid grid-cols-2 gap-4">
+              <div class="col-span-2 sm:col-span-1">
+                <label class="label">Name</label>
+                <input type="text" required placeholder="Jane Doe" />
+              </div>
+              <div class="col-span-2 sm:col-span-1">
+                <label class="label">Email</label>
+                <input type="email" required placeholder="jane@company.com" />
+              </div>
+              <div class="col-span-2">
+                <label class="label">Subject</label>
+                <input type="text" required placeholder="Let’s collaborate on a new project" />
+              </div>
+              <div class="col-span-2">
+                <label class="label">Message</label>
+                <textarea rows="5" required placeholder="Tell me about your goals and timeline..."></textarea>
+              </div>
+            </div>
+            <div class="mt-6 flex items-center gap-3">
+              <button type="submit" class="btn-primary">
+                <i data-feather="send"></i>
+                Send message
+              </button>
+              <span id="form-status" class="text-sm text-zinc-400"></span>
+            </div>
+          </form>
+        </div>
+      </div>
+    </section>
+  </main>
+  <!-- Footer -->
+  <footer class="border-t border-white/5">
+    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-10 flex flex-col md:flex-row items-center justify-between gap-4">
+      <div class="text-zinc-400 text-sm">© <span id="year"></span> CoolDev. All rights reserved.</div>
+      <div class="text-zinc-400 text-sm">Built with HTML · CSS · JS · Tailwind</div>
+    </div>
+  </footer>
+  <button id="back-to-top" class="fixed bottom-6 right-6 p-3 rounded-full border border-white/10 bg-white/10 hover:bg-white/20 text-white opacity-0 pointer-events-none transition" aria-label="Back to top">
+    <i data-feather="arrow-up"></i>
+  </button>
+  <script>
+    feather.replace();
+  </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,153 @@

+// Theme handling
+(function initTheme() {
+  const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const saved = localStorage.getItem('theme');
+  const html = document.documentElement;
+  const applyTheme = (mode) => {
+    if (mode === 'light') {
+      html.classList.add('light');
+    } else {
+      html.classList.remove('light');
+    }
+    const icon = document.getElementById('theme-icon');
+    if (icon) icon.setAttribute('data-feather', mode === 'light' ? 'sun' : 'moon');
+  };
+  const initial = saved || (prefersDark ? 'dark' : 'dark');
+  applyTheme(initial);
+  document.getElementById('theme-toggle')?.addEventListener('click', () => {
+    const isLight = html.classList.toggle('light');
+    localStorage.setItem('theme', isLight ? 'light' : 'dark');
+    const icon = document.getElementById('theme-icon');
+    if (icon) icon.setAttribute('data-feather', isLight ? 'sun' : 'moon');
+  });
+})();
+// Mobile menu
+const menuToggle = document.getElementById('menu-toggle');
+const mobileMenu = document.getElementById('mobile-menu');
+menuToggle?.addEventListener('click', () => {
+  mobileMenu?.classList.toggle('hidden');
+  const icon = menuToggle.querySelector('[data-feather]');
+  if (icon) icon.setAttribute('data-feather', mobileMenu?.classList.contains('hidden') ? 'menu' : 'x');
+});
+mobileMenu?.querySelectorAll('a').forEach(a => a.addEventListener('click', () => mobileMenu.classList.add('hidden')));
+// Smooth anchor offsets for fixed header (optional - using scroll-margin in CSS not needed with pt-20)
+// Scroll progress + back to top
+const backToTop = document.getElementById('back-to-top');
+window.addEventListener('scroll', () => {
+  const scrolled = window.scrollY;
+  backToTop?.classList.toggle('opacity-100', scrolled > 400);
+  backToTop?.classList.toggle('pointer-events-auto', scrolled > 400);
+});
+backToTop?.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
+// Contact form (demo)
+const form = document.getElementById('contact-form');
+const status = document.getElementById('form-status');
+form?.addEventListener('submit', (e) => {
+  e.preventDefault();
+  const data = Object.fromEntries(new FormData(form).entries());
+  status.textContent = 'Sending...';
+  setTimeout(() => {
+    status.textContent = 'Thanks! I’ll get back to you soon.';
+    form.reset();
+  }, 800);
+});
+// Projects data
+const projects = [
+  {
+    title: 'SaaS Billing Dashboard',
+    desc: 'Multi-tenant analytics dashboard with role-based access, charts and export.',
+    tags: ['React', 'TypeScript', 'Tailwind', 'Recharts'],
+    demo: '#',
+    code: '#',
+    cover: 'linear-gradient(135deg, rgb(var(--color-primary-500)), rgb(var(--color-secondary-500)))'
+  },
+  {
+    title: 'Design System',
+    desc: 'Token-driven component library with docs site and a11y testing.',
+    tags: ['React', 'Storybook', 'A11y', 'Radix'],
+    demo: '#',
+    code: '#',
+    cover: 'linear-gradient(135deg, rgb(var(--color-tertiary-500)), rgb(var(--color-primary-500)))'
+  },
+  {
+    title: 'E‑commerce Frontend',
+    desc: 'Headless storefront with SSR, cart, and payments integration.',
+    tags: ['Next.js', 'TypeScript', 'Tailwind', 'Stripe'],
+    demo: '#',
+    code: '#',
+    cover: 'linear-gradient(135deg, rgb(var(--color-secondary-500)), rgb(var(--color-tertiary-500)))'
+  },
+  {
+    title: 'Real‑time Chat',
+    desc: 'WebSocket chat with presence, typing indicators, and message threads.',
+    tags: ['Vue', 'Pinia', 'WebSocket', 'Node.js'],
+    demo: '#',
+    code: '#',
+    cover: 'linear-gradient(135deg, rgb(var(--color-primary-500)), rgb(var(--color-tertiary-500)))'
+  },
+  {
+    title: 'Perf Audit & Optimization',
+    desc: 'Improved LCP, CLS and TTI; bundle splitting and image optimization.',
+    tags: ['Lighthouse', 'Vite', 'SSR', 'Bundle'],
+    demo: '#',
+    code: '#',
+    cover: 'linear-gradient(135deg, rgb(var(--color-tertiary-500)), rgb(var(--color-secondary-500)))'
+  },
+  {
+    title: 'Headless CMS Frontend',
+    desc: 'Content-driven site with ISR, preview mode and i18n.',
+    tags: ['Next.js', 'CMS', 'ISR', 'i18n'],
+    demo: '#',
+    code: '#',
+    cover: 'linear-gradient(135deg, rgb(var(--color-secondary-500)), rgb(var(--color-primary-500)))'
+  }
+];
+// Render project cards
+const grid = document.getElementById('projects-grid');
+if (grid) {
+  projects.forEach(p => {
+    const el = document.createElement('article');
+    el.className = 'group relative overflow-hidden rounded-2xl border border-white/10 bg-[color:rgb(var(--bg)_/_0.7)] hover:border-[color:rgb(var(--color-primary-500)_/_0.35)] transition-colors';
+    el.innerHTML = `
+      <div class="relative h-40 w-full" style="background:${p.cover}">
+        <div class="absolute inset-0 bg-[color:rgb(var(--bg)_/_0.25)]"></div>
+        <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition flex items-center justify-center gap-3">
+          <a href="${p.demo}" target="_blank" class="btn-primary">Live demo</a>
+          <a href="${p.code}" target="_blank" class="btn-ghost">Source</a>
+        </div>
+      </div>
+      <div class="p-5">
+        <h3 class="font-semibold text-zinc-100">${p.title}</h3>
+        <p class="mt-1 text-sm text-zinc-400">${p.desc}</p>
+        <div class="mt-4 flex flex-wrap gap-2">
+          ${p.tags.map(t => `<span class="chip">${t}</span>`).join('')}
+        </div>
+      </div>
+    `;
+    grid.appendChild(el);
+  });
+}
+// Year
+document.getElementById('year').textContent = new Date().getFullYear();
+// Optional: Download CV button (placeholder)
+document.getElementById('download-cv')?.addEventListener('click', (e) => {
+  e.preventDefault();
+  const blob = new Blob([`CoolDev — Frontend Engineer\nResume placeholder`], { type: 'text/plain' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = 'CoolDev-Resume.txt';
+  a.click();
+  URL.revokeObjectURL(url);
+});

style.css CHANGED Viewed

@@ -1,28 +1,94 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+:root {
+  /* Theme (dark default) */
+  --bg: 11 15 23; /* Deep dark background */
+  --fg: 244 244 245; /* text-zinc-100 */
+  /* Colors (adjust to your preference) */
+  --color-primary-500: 99 102 241;   /* indigo-500 */
+  --color-secondary-500: 34 197 94;  /* emerald-500 */
+  --color-tertiary-500: 249 115 22;  /* orange-500 */
+  /* Aliases for compatibility */
+  --primary: var(--color-primary-500);
+  --secondary: var(--color-secondary-500);
+}
+/* Light theme overrides */
+html.light {
+  --bg: 250 250 250;
+  --fg: 15 23 42;
+}
+* { -webkit-tap-highlight-color: transparent; }
+html, body {
+  height: 100%;
+  background: rgb(var(--bg));
+  color: rgb(var(--fg));
+}
+/* Smooth fonts */
 body {
+  font-feature-settings: "liga" 1, "calt" 1;
 }
+/* Glass effect */
+.glass-card {
+  backdrop-filter: saturate(180%) blur(10px);
+  -webkit-backdrop-filter: saturate(180%) blur(10px);
 }
+/* Links */
+a { text-decoration: none; }
+.nav-link {
+  @apply px-3 py-2 rounded-md text-sm text-zinc-300 hover:text-white hover:bg-white/10 transition;
+}
+.mobile-link {
+  @apply px-3 py-2 rounded-md text-zinc-300 hover:text-white hover:bg-white/10 transition;
 }
+/* Buttons */
+.btn-primary {
+  @apply inline-flex items-center gap-2 rounded-md border border-white/10 bg-[color:rgb(var(--color-primary-500)_/_0.2)] text-[color:rgb(var(--color-primary-500))] hover:bg-[color:rgb(var(--color-primary-500)_/_0.3)] px-4 py-2 font-medium transition shadow-glow;
+}
+.btn-ghost {
+  @apply inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/5 hover:bg-white/10 text-zinc-200 hover:text-white px-4 py-2 font-medium transition;
 }
+/* Inputs */
+.label {
+  @apply block text-xs text-zinc-400 mb-1.5;
+}
+input, textarea {
+  @apply w-full rounded-md border border-white/10 bg-white/5 text-zinc-200 placeholder:text-zinc-500 px-3 py-2 outline-none focus:border-[color:rgb(var(--color-primary-500)_/_0.6)] focus:ring-2 focus:ring-[color:rgb(var(--color-primary-500)_/_0.2)];
 }
+/* Chips */
+.chip {
+  @apply px-2.5 py-1 rounded-md border border-white/10 bg-white/5 text-xs text-zinc-300;
+}
+/* Selection */
+::selection {
+  background: rgba(var(--color-primary-500), 0.35);
+  color: white;
+}
+/* Progress bar for scroll (optional visual candy) */
+#scroll-progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 2px;
+  width: 0%;
+  background: linear-gradient(90deg, rgb(var(--color-primary-500)), rgb(var(--color-secondary-500)));
+  z-index: 60;
+  transition: width 0.1s linear;
+}
+/* Reduce motion for users who prefer it */
+@media (prefers-reduced-motion: reduce) {
+  .animate-blob, .animate-float {
+    animation: none !important;
+  }
+}