feat: complete UX redesign — editorial minimal design with bento grid layout - #24
Draft
charlyautomatiza with Copilot wants to merge 2 commits into
Draft
feat: complete UX redesign — editorial minimal design with bento grid layout#24charlyautomatiza with Copilot wants to merge 2 commits into
charlyautomatiza with Copilot wants to merge 2 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Open
…, refined tokens, and accessible layout Co-authored-by: charlyautomatiza <89928062+charlyautomatiza@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Redesign DevFolio project using Hallmark
feat: complete UX redesign — editorial minimal design with bento grid layout
Aug 9, 2026
There was a problem hiding this comment.
Pull request overview
This PR delivers a full UX redesign of DevFolio toward an editorial/minimal aesthetic, updating global design tokens, Tailwind theme extensions, and restructuring the main Portfolio page into a bento-grid/timeline layout with simplified GSAP reveal animations.
Changes:
- Overhauls design tokens and introduces new CSS primitives (bento cells, timeline items, skill badges, nav links) in
globals.css. - Updates Tailwind theme extensions (colors, radii, animations/keyframes) to match the new token system.
- Refactors
Portfolio.tsxmarkup into the new layout system and switches GSAP setup to a class-based.gsap-revealpattern.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| tailwind.config.ts | Extends Tailwind tokens (colors/radii/animations) to align utilities with the new design system. |
| src/components/Portfolio.tsx | Rebuilds the portfolio UI (hero/bento grid/CV/contact/footer) and updates GSAP reveal behavior. |
| src/app/globals.css | Defines the new token palette and adds the reusable CSS primitives powering the redesign. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+284
to
+288
| :focus-visible { | ||
| outline: 2px solid var(--accent); | ||
| outline-offset: 3px; | ||
| border-radius: 4px; | ||
| } |
Comment on lines
81
to
+85
| useEffect(() => { | ||
| if (mounted) { | ||
| gsap.from('.header', { y: -100, opacity: 0, duration: 1, ease: 'power3.out' }) | ||
|
|
||
| Object.keys(sectionRefs.current).forEach((section) => { | ||
| if (sectionRefs.current[section]?.current) { | ||
| gsap.from(sectionRefs.current[section].current, { | ||
| opacity: 0, | ||
| y: 50, | ||
| duration: 1, | ||
| scrollTrigger: { | ||
| trigger: sectionRefs.current[section].current, | ||
| start: 'top 80%', | ||
| end: 'bottom 20%', | ||
| toggleActions: 'play none none reverse', | ||
| }, | ||
| }) | ||
| } | ||
| gsap.from('.header', { y: -60, opacity: 0, duration: 0.8, ease: 'power3.out' }) | ||
|
|
||
| gsap.utils.toArray<Element>('.gsap-reveal').forEach((el) => { |
Comment on lines
+5
to
+9
| /* ─── 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
63
to
+67
| 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; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
DevFolio's previous design used a generic purple/neon palette, flat card grids, and over-engineered animations. This redesign replaces it with a high-craft editorial aesthetic aligned with Awwwards/Godly standards: warm zinc neutrals, refined teal accent, bento-grid layouts, and intentional whitespace.
Design System (
globals.css,tailwind.config.ts)#f8f8f7/#0c0c0b), two-tier border scale (--border/--border-strong), semantic accent-subtle tints, full dark-mode paritydisplay-xl/lg/mdclasses viaclamp()with optical letter-spacingbento-cell,timeline-item,skill-badge,section-label,nav-link— each self-contained with hover/focus states and WCAG focus-visible ringsPortfolio Component (
Portfolio.tsx)display-xlname, eyebrow label, location badge, inline social icon tray, two clean CTA buttons; no decorative gradients.nav-linkactive state; simplified mobile drawerImage,Card,ChevronDownIconimports; GSAP refactored to class-based.gsap-revealstagger pattern, eliminating per-ref animation boilerplate