Abhinab Jena — Portfolio
Premium minimalist dark mode portfolio and studio style guide. Features a sophisticated editorial aesthetic using a taupe (#b7ab98) and coral (#eb5939) palette on a deep charcoal (#0d0d0d) background. Suitable for high-end digital agencies, art directors, product designers, and luxury brand showcases. Employs brutalist typography with 'Clash Grotesk' and 'Satoshi', combined with sophisticated micro-interactions like magnetic buttons, custom cursor rings, and scroll-triggered revealing animations. Layout focuses on a bento-style grid, large-scale headings, and high-quality whitespace balance.
Summary
A refined, dark-themed design system for high-end professional portfolios or creative agencies. It combines editorial layouts with modern reactivity, featuring a distinct grain/noise texture, spinning badges, and fluid transitions between sections. The color system uses low-contrast borders and elevated surfaces to create depth without relying on heavy shadows.
Style
The style is defined by its 'Brutalist-Light' approach: clean, high-contrast typography paired with a muted, earthy color palette and vibrant accent colors. Typography pairs 'Clash Grotesk' for high-impact headings and 'Satoshi' for legible body text. Visual depth is achieved through subtle noise overlays (opacity 0.03) and large, soft radial glows. Animation uses a signature 'cubic-bezier(0.16, 1, 0.3, 1)' curve for all reveals and transitions to ensure a snappy yet smooth feel.
Layout & Structure
A vertical-scrolling landing page structure using a 1400px max-width container. Employs section-based partitioning with thin horizontal rules, utilizing a mix of 12-column grids and flex-based rows.
Navigation
Hero Section
Marquee
Selected Work Grid
Services Rows
Process Section
Footer
Components
Spinning Text Badge
A rotating circular badge with a text-on-path SVG.
Magnetic Button
A button that subtly follows the mouse cursor when nearby.
Line-Mask Heading
Headings that appear to slide up from behind an invisible floor.
Special Notes
Maintain a strict 0.03 opacity on the noise filter to avoid making the UI look 'dirty'. Ensure all interactive elements (links, cards, buttons) trigger the 'hov' class on the custom cursor ring. Spacing must be consistent: use 24px-36px for section padding and 1400px as the maximum container width. Avoid drop shadows; use #1a1a1a background for elevated surfaces instead.