diff --git a/package-lock.json b/package-lock.json index 8ff44a7..598b5be 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,8 @@ "name": "dyzulk.github.io", "version": "0.0.0", "dependencies": { + "@fontsource/geist-mono": "^5.2.7", + "@fontsource/geist-sans": "^5.2.5", "@supabase/supabase-js": "^2.90.1", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", @@ -932,6 +934,24 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@fontsource/geist-mono": { + "version": "5.2.7", + "resolved": "https://registry.npmjs.org/@fontsource/geist-mono/-/geist-mono-5.2.7.tgz", + "integrity": "sha512-xVPVFISJg/K0VVd+aQN0Y7X/sw9hUcJPyDWFJ5GpyU3bHELhoRsJkPSRSHXW32mOi0xZCUQDOaPj1sqIFJ1FGg==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, + "node_modules/@fontsource/geist-sans": { + "version": "5.2.5", + "resolved": "https://registry.npmjs.org/@fontsource/geist-sans/-/geist-sans-5.2.5.tgz", + "integrity": "sha512-anllOHyJbElRs9fV15TeDRqAeb1IKm4bSknPl6ZMoyPTx1BBy7logudcUwpNjmQLkzn4Q0JGQLRCUKJYoyST6A==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", diff --git a/package.json b/package.json index e92bb9e..37b03ff 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ "preview": "vite preview" }, "dependencies": { + "@fontsource/geist-mono": "^5.2.7", + "@fontsource/geist-sans": "^5.2.5", "@supabase/supabase-js": "^2.90.1", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx index 058ca26..7a2d260 100644 --- a/src/components/layout/Navbar.tsx +++ b/src/components/layout/Navbar.tsx @@ -11,27 +11,36 @@ export default function Navbar() { ] return ( -
-
- - Dyzulk. +
+
-
+
+ {links.map((link) => { + const isActive = location.pathname === link.href + return ( + + {link.label} + + ) + })} +
+ + ) } diff --git a/src/components/layout/PublicLayout.tsx b/src/components/layout/PublicLayout.tsx index 92da30f..f50dfa2 100644 --- a/src/components/layout/PublicLayout.tsx +++ b/src/components/layout/PublicLayout.tsx @@ -3,13 +3,13 @@ import Navbar from './Navbar' export default function PublicLayout() { return ( -
+
-
+
-
-

© {new Date().getFullYear()} Dyzulk. Built with React & Supabase.

+
+

© {new Date().getFullYear()} DyzulkDev. Built with React & Supabase.

) diff --git a/src/components/ui/project-card.tsx b/src/components/ui/project-card.tsx index 2c7717f..8000050 100644 --- a/src/components/ui/project-card.tsx +++ b/src/components/ui/project-card.tsx @@ -6,9 +6,9 @@ interface ProjectCardProps { export function ProjectCard({ project }: ProjectCardProps) { return ( -
+
{/* Image */} -
+
{project.cover_image ? ( ) : ( -
+
No Image
)} @@ -24,30 +24,30 @@ export function ProjectCard({ project }: ProjectCardProps) { {/* Content */}
-

+

{project.title}

-

+

{project.description}

{/* Tech Stack */} -
+
{project.tech_stack?.map((tech: string) => ( - + {tech} ))}
{/* Links */} -
+
{project.demo_url && ( Live Demo @@ -57,7 +57,7 @@ export function ProjectCard({ project }: ProjectCardProps) { href={project.repo_url} target="_blank" rel="noopener noreferrer" - className="flex items-center gap-1 text-sm font-medium text-slate-600 hover:text-black dark:text-slate-400 dark:hover:text-white" + className="flex items-center gap-2 text-xs font-semibold text-muted-foreground hover:text-white transition-colors" > Code diff --git a/src/index.css b/src/index.css index d924e24..c980409 100644 --- a/src/index.css +++ b/src/index.css @@ -4,58 +4,59 @@ @layer base { :root { - --background: 0 0% 100%; - --foreground: 222.2 84% 4.9%; - --card: 0 0% 100%; - --card-foreground: 222.2 84% 4.9%; - --popover: 0 0% 100%; - --popover-foreground: 222.2 84% 4.9%; - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 40% 98%; - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - --ring: 222.2 84% 4.9%; - --radius: 0.5rem; - --chart-1: 12 76% 61%; - --chart-2: 173 58% 39%; - --chart-3: 197 37% 24%; - --chart-4: 43 74% 66%; - --chart-5: 27 87% 67%; + /* Deep Graphite / Black Theme Base */ + --background: 0 0% 4%; /* #0a0a0a */ + --foreground: 0 0% 98%; + + --card: 0 0% 4%; + --card-foreground: 0 0% 98%; + + --popover: 0 0% 4%; + --popover-foreground: 0 0% 98%; + + --primary: 0 0% 98%; + --primary-foreground: 240 5.9% 10%; + + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + + --muted: 240 3.7% 15.9%; + --muted-foreground: 240 5% 64.9%; + + --accent: 240 3.7% 15.9%; + --accent-foreground: 0 0% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --ring: 240 4.9% 83.9%; + + --radius: 0.75rem; /* More rounded */ } + /* Force Dark Mode Default */ .dark { - --background: 222.2 84% 4.9%; - --foreground: 210 40% 98%; - --card: 222.2 84% 4.9%; - --card-foreground: 210 40% 98%; - --popover: 222.2 84% 4.9%; - --popover-foreground: 210 40% 98%; - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 11.2%; - --secondary: 217.2 32.6% 17.5%; - --secondary-foreground: 210 40% 98%; - --muted: 217.2 32.6% 17.5%; - --muted-foreground: 215 20.2% 65.1%; - --accent: 217.2 32.6% 17.5%; - --accent-foreground: 210 40% 98%; + --background: 0 0% 4%; + --foreground: 0 0% 98%; + --card: 0 0% 4%; + --card-foreground: 0 0% 98%; + --popover: 0 0% 4%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 240 5.9% 10%; + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + --muted: 240 3.7% 15.9%; + --muted-foreground: 240 5% 64.9%; + --accent: 240 3.7% 15.9%; + --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 40% 98%; - --border: 217.2 32.6% 17.5%; - --input: 217.2 32.6% 17.5%; - --ring: 212.7 26.8% 83.9%; - --chart-1: 220 70% 50%; - --chart-2: 160 60% 45%; - --chart-3: 30 80% 55%; - --chart-4: 280 65% 60%; - --chart-5: 340 75% 55%; + --destructive-foreground: 0 0% 98%; + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --ring: 240 4.9% 83.9%; } } @@ -64,6 +65,20 @@ @apply border-border; } body { - @apply bg-background text-foreground; + @apply bg-background text-foreground antialiased selection:bg-white/20 selection:text-white; + font-feature-settings: "rlig" 1, "calt" 1; + } +} + +/* Glassmorphism Utilities */ +@layer utilities { + .glass { + @apply bg-white/5 backdrop-blur-md border border-white/10 shadow-lg; + } + .glass-hover { + @apply hover:bg-white/10 hover:border-white/20 transition-all duration-300; + } + .glass-card { + @apply glass glass-hover rounded-xl; } } diff --git a/src/main.tsx b/src/main.tsx index bef5202..ea9eaaa 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,5 +1,7 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' +import '@fontsource/geist-sans' +import '@fontsource/geist-mono' import './index.css' import App from './App.tsx' diff --git a/tailwind.config.js b/tailwind.config.js index 492ba30..1faebc4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -7,6 +7,10 @@ export default { ], theme: { extend: { + fontFamily: { + sans: ['Geist Sans', 'sans-serif'], + mono: ['Geist Mono', 'monospace'], + }, borderRadius: { lg: 'var(--radius)', md: 'calc(var(--radius) - 2px)',