commitra · Hrishikesh-Dalal · Oct 29, 2025 · Oct 28, 2025 · Oct 29, 2025
diff --git a/assets/styles.css b/assets/styles.css
@@ -185,7 +185,10 @@ body:not(.dark-mode) .theme-toggle .moon-icon {
 }
 
 .card a:hover {
-  filter: brightness(1.05);
+  background: linear-gradient(135deg, var(--accent-2), var(--accent));
+  background-size: 200% auto;
+  transition: background-position 0.4s ease;
+  background-position: right center;
 }
 
 .site-footer {
@@ -204,3 +207,163 @@ body:not(.dark-mode) .theme-toggle .moon-icon {
 .site-footer a:hover {
   text-decoration: underline;
 }
+
+
+/* ================================
+   📱 RESPONSIVE DESIGN ENHANCEMENTS
+   ================================ */
+
+/* --- Tablet (≤ 1024px) --- */
+@media (max-width: 1024px) {
+  .site-header {
+    padding: 1.5rem 1rem;
+  }
+
+  .site-header h1 {
+    font-size: 1.75rem;
+  }
+
+  .controls {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.75rem;
+  }
+
+  .controls input,
+  .controls select {
+    width: 100%;
+    font-size: 1rem;
+  }
+
+  .project-grid {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 0.75rem;
+  }
+}
+
+/* --- Mobile (≤ 600px) --- */
+@media (max-width: 600px) {
+  body {
+    font-size: 0.95rem;
+  }
+
+  .site-header {
+    padding: 1rem 0.75rem;
+  }
+
+  .site-header h1 {
+    font-size: 1.5rem;
+  }
+
+  .site-header p {
+    font-size: 0.9rem;
+  }
+
+  .theme-toggle {
+    width: 40px;
+    height: 40px;
+    top: 0.75rem;
+    right: 0.75rem;
+  }
+
+  .controls {
+    flex-direction: column;
+    gap: 0.5rem;
+    width: 100%;
+  }
+
+  .controls input,
+  .controls select {
+    width: 100%;
+    font-size: 0.95rem;
+  }
+
+  .project-grid {
+    grid-template-columns: 1fr;
+    padding: 0.75rem;
+  }
+
+  .card {
+    padding: 0.75rem;
+  }
+
+  .site-footer {
+    font-size: 0.85rem;
+    padding: 1rem;
+  }
+}
+
+
+/* ================================
+   ✨ TRANSITIONS & ANIMATIONS
+   ================================ */
+
+/* Smooth transitions on layout adjustments */
+.controls,
+.project-grid,
+.card,
+.site-header,
+.site-footer {
+  transition:
+    all 0.3s ease-in-out,
+    grid-template-columns 0.3s ease-in-out,
+    padding 0.3s ease-in-out,
+    font-size 0.2s ease-in-out;
+}
+
+/* Animate cards when the grid rearranges */
+.project-grid {
+  transition:
+    grid-template-columns 0.4s ease,
+    gap 0.3s ease;
+}
+
+/* Subtle hover animation for cards */
+.card {
+  transition:
+    transform 0.25s ease,
+    box-shadow 0.25s ease,
+    background 0.3s ease;
+}
+
+.card:hover {
+   border-color: var(--accent);
+  box-shadow: 0 6px 20px rgba(110, 231, 183, 0.15);
+  transform: translateY(-5px);
+}
+
+.card:active {
+  transform: scale(0.98);
+}
+
+/* Smoothly scale theme toggle when viewport changes */
+.theme-toggle {
+  transition:
+    all 0.25s ease,
+    transform 0.3s ease;
+}
+
+/* Fade animation when switching between dark/light themes */
+body {
+  transition:
+    background 0.4s ease,
+    color 0.4s ease,
+    filter 0.4s ease;
+}
+
+/* Optional: add a slight fade-in effect when content loads */
+body {
+  opacity: 0;
+  animation: fadeIn 0.6s ease-out forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
diff --git a/projects/UUID/index.html b/projects/UUID/index.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Quick UUID Generator</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <button id="themeToggle" class="theme-toggle" title="Toggle Theme">🌙</button>
+
+    <main class="card" role="main">
+        <h1>Quick UUID Generator</h1><br>
+        <p>Click the button to generate a Version 4 UUID.</p>
+
+        <div class="controls">
+            <button id="generate">Generate UUID</button>
+            <div id="uuid" aria-live="polite">—</div>
+            <button id="copy" class="small-btn" title="Copy UUID">Copy</button>
+        </div>
+
+        <div class="hint">Tip: Click <em>Copy</em> or click the UUID itself to copy it to your clipboard.</div>
+    </main>
+
+    <script src="main.js"></script>
+</body>
+
+</html>
diff --git a/projects/UUID/main.js b/projects/UUID/main.js
@@ -0,0 +1,71 @@
+const btn = document.getElementById('generate');
+const out = document.getElementById('uuid');
+const copyBtn = document.getElementById('copy');
+const themeToggle = document.getElementById('themeToggle');
+
+// Theme toggle with persistence
+function setTheme(theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+    themeToggle.textContent = theme === 'dark' ? '🌙' : '☀️';
+}
+
+const savedTheme = localStorage.getItem('theme') || 'dark';
+setTheme(savedTheme);
+
+themeToggle.addEventListener('click', () => {
+    const current = document.documentElement.getAttribute('data-theme');
+    setTheme(current === 'dark' ? 'light' : 'dark');
+});
+
+// UUID generation (v4)
+function uuidv4_fallback() {
+    const bytes = crypto.getRandomValues(new Uint8Array(16));
+    bytes[6] = (bytes[6] & 0x0f) | 0x40;
+    bytes[8] = (bytes[8] & 0x3f) | 0x80;
+    const hex = Array.from(bytes, b => b.toString(16).padStart(2, '0'));
+    return `${hex.slice(0, 4).join('')}-${hex.slice(4, 6).join('')}-${hex.slice(6, 8).join('')}-${hex.slice(8, 10).join('')}-${hex.slice(10, 16).join('')}`;
+}
+
+function generateUUID() {
+    try {
+        if (typeof crypto.randomUUID === 'function') return crypto.randomUUID();
+    } catch (e) { }
+    return uuidv4_fallback();
+}
+
+function showCopiedToast() {
+    const t = document.createElement('div');
+    t.className = 'copied';
+    t.textContent = 'Copied to clipboard';
+    document.body.appendChild(t);
+    setTimeout(() => t.remove(), 1400);
+}
+
+btn.addEventListener('click', () => {
+    const id = generateUUID();
+    out.textContent = id;
+});
+
+copyBtn.addEventListener('click', async () => {
+    const text = out.textContent;
+    if (!text || text === '—') return;
+    try {
+        await navigator.clipboard.writeText(text);
+        showCopiedToast();
+    } catch (e) {
+        const ta = document.createElement('textarea');
+        ta.value = text;
+        document.body.appendChild(ta);
+        ta.select();
+        try { document.execCommand('copy'); showCopiedToast(); }
+        catch (err) { alert('Copy failed — select the UUID and press Ctrl/Cmd+C'); }
+        ta.remove();
+    }
+});
+
+out.addEventListener('click', async () => {
+    const text = out.textContent;
+    if (!text || text === '—') return;
+    try { await navigator.clipboard.writeText(text); showCopiedToast(); } catch (e) { }
+});