Skip to content

feat: complete UX redesign — editorial minimal design with bento grid layout #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

feat: complete UX redesign — editorial minimal design with bento grid layout #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
34019c4
Initial plan
Copilot Aug 9, 2026
29a7069
feat: complete UX redesign — editorial minimal design with bento grid…
Copilot Aug 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
329 changes: 248 additions & 81 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,124 +2,257 @@
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* ─── Design Tokens ──────────────────────────────────────────── */
:root {
--background: #fafafa;
--foreground: #1a1a1a;
--primary: #0066ff;
--accent: #0ea5e9;
--accent-hover: #0284c7;
--muted: #f1f5f9;
--border: #d1d5db;
/* Surfaces */
--background: #f8f8f7;
--foreground: #111110;
Comment on lines +5 to +9
--card: #ffffff;
--card-hover: #f8fafc;
--gradient-start: #f8fafc;
--gradient-end: #f1f5f9;
--card-hover: #fafaf9;
--muted: #f2f1ef;
--muted-foreground: #706f6c;

/* Borders */
--border: #e6e4e1;
--border-strong: #c9c7c4;

/* Brand accent — refined electric teal */
--accent: #0d9488;
--accent-hover: #0f766e;
--accent-subtle: rgba(13, 148, 136, 0.08);
--accent-subtle-hover: rgba(13, 148, 136, 0.14);

/* Legacy compat */
--primary: #0d9488;
--gradient-start: #f8f8f7;
--gradient-end: #f2f1ef;
}

.dark {
--background: #0a0a0a;
--foreground: #ededed;
--primary: #0066ff;
--accent: #00ffaa;
--accent-hover: #00cc88;
--muted: #1a1a1a;
--border: #333333;
--card: #1a1a1a;
--card-hover: #262626;
--gradient-start: #1a1a1a;
--gradient-end: #0a0a0a;
--background: #0c0c0b;
--foreground: #eeede9;
--card: #161614;
--card-hover: #1d1d1b;
--muted: #1a1a18;
--muted-foreground: #8b8984;

--border: #252523;
--border-strong: #3a3a37;

--accent: #2dd4bf;
--accent-hover: #14b8a6;
--accent-subtle: rgba(45, 212, 191, 0.08);
--accent-subtle-hover: rgba(45, 212, 191, 0.14);

--primary: #2dd4bf;
--gradient-start: #161614;
--gradient-end: #0c0c0b;
}

/* ─── Base ───────────────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
color: var(--foreground);
background: var(--background);
font-family: var(--font-geist), system-ui, -apple-system, sans-serif;
transition: background-color 0.3s ease, color 0.3s ease;
font-family: var(--font-geist), 'Inter', system-ui, -apple-system, sans-serif;
transition: background-color 0.25s ease, color 0.25s ease;
Comment on lines 63 to +67
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* Enhanced hover effects */
.card-hover {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
/* ─── Typography Scale ───────────────────────────────────────── */
.display-xl {
font-size: clamp(3rem, 8vw, 6rem);
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 700;
}

.card-hover::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(0, 255, 170, 0.1),
transparent
);
transition: left 0.6s ease;
z-index: 1;
.display-lg {
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.1;
letter-spacing: -0.025em;
font-weight: 700;
}

.card-hover:hover::before {
left: 100%;
.display-md {
font-size: clamp(1.5rem, 3vw, 2.25rem);
line-height: 1.2;
letter-spacing: -0.02em;
font-weight: 600;
}

/* ─── Card Primitives ────────────────────────────────────────── */
.card-base {
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.card-base:hover {
border-color: var(--border-strong);
box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}

.dark .card-base:hover {
box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.4);
}

/* ─── Legacy compat aliases ──────────────────────────────────── */
.card-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 255, 170, 0.1);
transform: translateY(-4px);
box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.12);
}

.dark .card-hover:hover {
box-shadow: 0 25px 50px -12px rgba(0, 255, 170, 0.15), 0 0 30px rgba(0, 255, 170, 0.1);
box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.5);
}

/* Enhanced button glow effect */
.btn-glow {
position: relative;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-glow:hover {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(13, 148, 136, 0.35);
}

/* ─── Bento Grid ─────────────────────────────────────────────── */
.bento-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(6, 1fr);
}

.bento-cell {
background: var(--card);
border: 1px solid var(--border);
border-radius: 20px;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.25s ease;
}

.bento-cell:hover {
border-color: var(--border-strong);
box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.12);
transform: translateY(-3px);
}

.dark .bento-cell:hover {
box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.5);
}

.btn-glow::before {
/* ─── Accent line decoration ─────────────────────────────────── */
.section-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
}

.section-label::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: left 0.6s ease;
display: block;
width: 24px;
height: 2px;
background: var(--accent);
border-radius: 2px;
}

.btn-glow:hover::before {
left: 100%;
/* ─── Navigation ─────────────────────────────────────────────── */
.nav-link {
position: relative;
font-size: 0.875rem;
font-weight: 500;
color: var(--muted-foreground);
transition: color 0.2s ease;
padding: 6px 12px;
border-radius: 8px;
}

.btn-glow:hover {
box-shadow: 0 0 20px rgba(0, 255, 170, 0.4), 0 0 40px rgba(0, 255, 170, 0.2);
transform: translateY(-2px);
.nav-link:hover {
color: var(--foreground);
background: var(--accent-subtle);
}

/* New shimmer effect for accent elements */
.shimmer-bg {
background: linear-gradient(
90deg,
var(--accent) 0%,
rgba(0, 255, 170, 0.8) 50%,
var(--accent) 100%
);
background-size: 200% 100%;
animation: shimmer 2.5s linear infinite;
.nav-link.active {
color: var(--accent);
background: var(--accent-subtle);
}

/* ─── Skill Badge ────────────────────────────────────────────── */
.skill-badge {
display: inline-flex;
align-items: center;
padding: 5px 12px;
border-radius: 999px;
font-size: 0.8125rem;
font-weight: 500;
background: var(--muted);
color: var(--muted-foreground);
border: 1px solid var(--border);
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.skill-badge:hover {
background: var(--accent-subtle);
color: var(--accent);
border-color: var(--accent);
}

/* ─── Timeline ───────────────────────────────────────────────── */
.timeline-item {
position: relative;
padding-left: 1.75rem;
}

.timeline-item::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 3px var(--accent-subtle);
}

/* Enhanced mobile menu animation */
.timeline-item::after {
content: '';
position: absolute;
left: 3.5px;
top: 20px;
width: 1px;
bottom: -16px;
background: var(--border);
}

.timeline-item:last-child::after {
display: none;
}

/* ─── Mobile menu ────────────────────────────────────────────── */
@keyframes slideInLeft {
from {
transform: translateX(-100%);
Expand All @@ -132,5 +265,39 @@ body {
}

.mobile-menu-enter {
animation: slideInLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1);
animation: slideInLeft 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Shimmer / Legacy ───────────────────────────────────────── */
.shimmer-bg {
background: linear-gradient(
90deg,
var(--accent) 0%,
var(--accent-hover) 50%,
var(--accent) 100%
);
background-size: 200% 100%;
animation: shimmer 2.5s linear infinite;
}

/* ─── Focus ring ─────────────────────────────────────────────── */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
Comment on lines +284 to +288

/* ─── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--muted-foreground);
}
Loading