From Code Chaos to Cohesion – UI/UX Overhaul

After a long day of refinement, design tweaks, and critical fixes, Project Angmar finally feels like a living, breathing product — not just a project folder.

This session focused on professional styling, better animation flow, full theme compatibility, and consistent component architecture across the entire site.

🎯 Overview#

Today's work combined two goals:

1. Visual upgrade – A full styling and animation pass for all home, blog, and layout components
2. Structural refinement – Consistent theme handling, readability fixes, and cleaner code conventions

The result: a more polished, faster, and unified site that behaves beautifully in every theme and mode.

🏠 Home Components — Modernized & Refined#

Hero & HeroBackground#

Complete visual overhaul with gradient title, subtle background meshes, and lightweight CSS animations.
Scale transitions (hover:scale-105), glow hover effects, and smooth scroll indicators — all pure CSS for performance.

✅ Result: Professional, responsive, and works across all 11 palettes (light/dark)

FeatureGrid#

Rebuilt into 9 real feature cards instead of placeholders.
Added hover scaling, animated borders, and gradient icons with larger padding and card spacing.

✅ Result: Balanced, professional feature section that fits the new design language

FeaturedProjects#

Added Lucide icons (ExternalLink, Github, ArrowRight) and animated badges.
Each project card now has gradient glows, animated links, and a consistent "case" link style.

✅ Result: Projects feel alive — modern yet minimal

CTA Section#

Rebuilt with stronger layout and more visual weight.
Rounded-3xl cards, gradient backgrounds, subtle glows, and arrow icons with hover gradients.

✅ Result: A true Call to Action — eye-catching but never aggressive

BlogTeaser & PostCard#

Added icons for date and tags, hover scaling, and animated underlines.
"View All" upgraded to a full gradient button with arrow animation.

✅ Result: Blog section now visually matches the rest of the site

🧱 Blog Pages — Critical Fixes & Professional Layouts#

Blog Index#

Added header navigation, post counter, and gradient background with min-h-screen layout for proper scroll flow.

Blog Post Detail#

⚠️ Major Fix: Text was invisible in light mode due to hardcoded prose-zinc colors.

Introduced a new prose.css file that uses theme variables instead — ensuring perfect readability in all light/dark themes.
All markdown elements now styled consistently with theme-aware colors.

✅ Result: Perfect readability across all themes with new back navigation and themed typography

👤 About Section — New Components#

Profile#

Added avatar, biography, stats grid, and quote section with full i18n support and theme-aware styling.

TechStack#

Categorized technologies with skill indicators and modern card layout.

Timeline#

New chronological layout with "Show More / Show Less" functionality, localized strings, and smoother transitions.

✅ Result: About section now feels personal and professional

⚙️ Layout Components — Cohesive & Interactive#

Upgraded all layout components for better cohesion:

• Header: Gradient logo icon, animated nav hover states, improved visibility
• Footer: Redesigned 3-column layout with GitHub, LinkedIn, and Email links
• BreadcrumbNav: Gradient dividers and motion transitions
• MobileMenu: Framer Motion slide-in animation with blur background

✅ Everything now feels connected and theme-aware

🐞 Bug Fixes#

Critical issues resolved:

Valinor Light Mode
Wrong dark surface color → Corrected --color-surface for light mode

Blog Text Visibility
Text invisible in light mode → Replaced prose-zinc with theme-aware prose.css

Timeline Button
Untranslated key "Vis mer" → Added missing translation

Header Logo
Gradient text invisible → Replaced text-transparent with text-fg

Glow Effects
Too bright (opacity-100) → Reduced to 30% + smooth transitions

✅ All verified across 11 palettes × 2 modes (22 total variants)

🧩 Technical Details#

Tech Stack#

• Next.js 15 / App Router
• TypeScript for full typing
• Tailwind CSS with custom tokens
• Framer Motion for animations
• Lucide React icons
• Theme variables with CSS custom properties

CSS Architecture#

• globals.css → Base styling & tokens
• prose.css → Blog typography
• animations.css → Optimized keyframes (bounce, fade, scale, pulse)

✅ All refactored for maintainability and smaller file size

🧠 Development Notes#

Key principles maintained throughout:

• Accessibility: ARIA labels, focus states, semantic structure
• Performance: Lazy loading, static blog generation, minimal JS
• Consistency: Unified use of --color-* tokens across all components
• Documentation: 50+ components documented with clear headers and prop notes

📊 Results & Metrics#

Styling
Before: Flat, simple → After: Gradient, modern, theme-aware

Theme Support
Before: Inconsistent → After: 100% consistent across 22 variants

Blog Readability
Before: Poor (light mode broken) → After: Perfect in all modes

Animations
Before: Aggressive → After: Subtle (opacity 30%)

UX
Before: Basic navigation → After: Polished with icons & motion

🚀 What's Next#

Priorities for the next session:

• Style portfolio and resume pages
• Finalize contact and about layouts
• Add missing UI components
• Continue i18n expansion
• Begin content rollout

⏱️ Session Summary#

Date: October 13, 2025
Total Time: ~8 hours
Files Changed: 20+
Lines Modified: ~2000
Critical Fixes: 2 (Valinor theme, Blog readability)

Project Angmar is finally starting to feel like something —
structured, elegant, and ready to grow further.

This marks a significant milestone in the project's visual and structural maturity.