Swapnil's Bold Portfolio
A high-impact, dark-mode design system characterized by bold editorial typography, vibrant orange-red accents, and intricate micro-interactions. Featuring a 'noise' texture overlay and a geometric grid-based layout, this style is ideal for creative developers, design agencies, or fintech landing pages. It uses a sophisticated color palette of deep blacks, slate surfaces, and warm tan highlights, paired with high-performance animations like floating SVG shapes, pulsing glows, and smooth scroll-triggered transitions.
Summary
A bold, dark-themed portfolio or creative landing page design featuring vibrant red-orange accents, sophisticated typography, and complex interactive animations. The aesthetic combines professional structure with artistic flair through the use of grain overlays, grid patterns, and floating geometric elements.
Style
The style is built on a high-contrast dark palette (#0C0C0C) with a primary accent of Sunset Red (#E8553A) and secondary highlights of Sand Warmth (#D4A574). Typography pairs the architectural 'Clash Grotesk' for headings with the clean 'Satoshi' for body text. Animations are defined by smooth 'Framer Motion' style transitions (cubic-bezier) and continuous floating background movements.
Layout & Structure
The layout follows a modular grid structure with generous whitespace (py-24 to py-32). It features a sticky navigation bar, a high-impact split hero section, a bento-style project grid, and a vertical interactive timeline.
Navigation
Hero Section
Skill Marquee
Projects Bento Grid
Experience Timeline
Contact Section
Components
Interactive Visual Orb
A complex hero visual element representing a core identity or tech stack.
Skill Tag Hover State
A micro-interaction for metadata tags.
Special Notes
MUST: Maintain the noise overlay for texture. Use 'Clash Grotesk' exclusively for large headings (32px+). Ensure all cards have the specific cubic-bezier transition. Use 5% white borders for a sophisticated 'ghost' container look. MUST NOT: Use standard blue for links. Avoid heavy shadows; use thin borders and translation transforms instead. Do not use vibrant colors for body text; keep it strictly #F0EDE8 or #B0ADA8.