diff --git a/assets/styles.css b/assets/styles.css
index 737f0d5..429de39 100644
--- 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
new file mode 100644
index 0000000..2896e61
--- /dev/null
+++ b/projects/UUID/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+ Quick UUID Generator
+
+
+
+
+
+
+
+ Quick UUID Generator
+ Click the button to generate a Version 4 UUID.
+
+
+
+
—
+
+
Tip: Click Copy or click the UUID itself to copy it to your clipboard.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/projects/UUID/main.js b/projects/UUID/main.js
new file mode 100644
index 0000000..dc61f0f
--- /dev/null
+++ 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) { }
+});
diff --git a/projects/UUID/styles.css b/projects/UUID/styles.css
new file mode 100644
index 0000000..c8080d3
--- /dev/null
+++ b/projects/UUID/styles.css
@@ -0,0 +1,146 @@
+ :root {
+ --bg: linear-gradient(180deg, #071025 0%, #0b1220 100%);
+ --card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
+ --accent: #6ee7b7;
+ --accent-dark: #18b38a;
+ --muted: #94a3b8;
+ --text: #e6eef8;
+ --uuid-bg: rgba(255, 255, 255, 0.05);
+ --border: rgba(255, 255, 255, 0.08);
+ }
+
+ [data-theme="light"] {
+ --bg: linear-gradient(180deg, #fdfdfd 0%, #f4f7fb 100%);
+ --card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9));
+ --accent: #34d399;
+ --accent-dark: #059669;
+ --muted: #64748b;
+ --text: #0f172a;
+ --uuid-bg: rgba(240, 245, 250, 0.9);
+ --border: rgba(0, 0, 0, 0.08);
+ }
+
+ html,
+ body {
+ height: 100%;
+ margin: 0;
+ font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+ transition: background 0.3s ease, color 0.3s ease;
+ }
+
+ body {
+ display: grid;
+ place-items: center;
+ background: var(--bg);
+ color: var(--text);
+ }
+
+ .card {
+ width: min(720px, 94%);
+ background: var(--card-bg);
+ border-radius: 16px;
+ padding: 32px;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+ border: 1px solid var(--border);
+ backdrop-filter: blur(8px);
+ transition: background 0.3s ease, box-shadow 0.3s ease;
+ }
+
+ h1 {
+ margin: 0 0 8px;
+ font-size: 22px;
+ text-align: center;
+ }
+
+ p {
+ margin: 0 0 18px;
+ color: var(--muted);
+ }
+
+ .controls {
+ display: flex;
+ gap: 12px;
+ align-items: center;
+ flex-wrap: wrap;
+ }
+
+ button {
+ appearance: none;
+ border: 0;
+ padding: 10px 16px;
+ border-radius: 10px;
+ background: linear-gradient(180deg, var(--accent), var(--accent-dark));
+ color: #032018;
+ font-weight: 600;
+ cursor: pointer;
+ box-shadow: 0 6px 18px rgba(14, 165, 233, 0.08);
+ font-size: 15px;
+ transition: transform 0.1s;
+ }
+
+ button:active {
+ transform: translateY(1px);
+ }
+
+ #uuid {
+ flex: 1;
+ min-height: 48px;
+ padding: 10px 12px;
+ border-radius: 10px;
+ background: var(--uuid-bg);
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
+ font-size: 14px;
+ color: var(--text);
+ overflow: auto;
+ transition: background 0.3s;
+ }
+
+ .hint {
+ margin-top: 12px;
+ color: var(--muted);
+ font-size: 13px;
+ }
+
+ .small-btn {
+ background: transparent;
+ border: 1px solid var(--border);
+ color: var(--muted);
+ padding: 8px 10px;
+ border-radius: 10px;
+ font-size: 13px;
+ cursor: pointer;
+ }
+
+ .theme-toggle {
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ background: var(--card-bg);
+ border: 1px solid var(--border);
+ border-radius: 50%;
+ width: 42px;
+ height: 42px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+ font-size: 18px;
+ transition: background 0.3s, box-shadow 0.3s;
+ }
+
+ .copied {
+ position: fixed;
+ right: 18px;
+ bottom: 18px;
+ background: var(--card-bg);
+ color: var(--text);
+ padding: 10px 14px;
+ border-radius: 10px;
+ border: 1px solid var(--border);
+ box-shadow: 0 6px 22px rgba(2, 6, 23, 0.2);
+ backdrop-filter: blur(6px);
+ }
\ No newline at end of file