Josh Warner Portfolio Landing Page

Overview

This portfolio landing page exemplifies a high-end, "dark mode" aesthetic characterized by immersive 3D imagery and a minimalist navigation structure. It is a strong reference for builders looking to master background-centric layouts where the UI is treated as a subtle, glassmorphic overlay rather than a traditional container-based design.

Design System

• Color Palette & Visual Hierarchy: The palette is deeply monochromatic, utilizing rgb(15, 15, 15) for the background and rgb(240, 240, 240) for primary text. Hierarchy is established through opacity; secondary text and metadata tags use a 40% to 75% white opacity to recede visually against the dark canvas.
• Typography: The system relies on Inter Display, a clean sans-serif. Large headings (40px) are used for the hero statement with tight leading (40px) to maintain a compact feel, while body descriptions use a 20px scale with increased letter-spacing (0.04em) for readability.
• Page Structure: The layout follows a top-down flow: a full-height 3D hero section with integrated status badges, followed by a "Work" section featuring large-scale case study cards, and concluding with a categorized skills overview.
• Reusable Components:
  • Floating Nav: Pill-style navigation with a blur(6px) backdrop filter and 1px subtle borders.
  • Status Tag: A micro-component comprising a glowing green SVG indicator and a "Available for hire" label inside a semi-transparent container.
  • Case Study Cards: Large image-first blocks with custom hover states and bottom-aligned text overlays.
• Interaction & Motion: The design uses Framer’s animation engine for enter-animations, specifically translateY(20px) shifts with opacity fades on the case study wrappers. Case study cards feature a gradient overlay (linear-gradient(180deg, transparent, rgba(0,0,0,0.7))) that intensifies on interaction.
• Implementation Clues: Built with Framer, the site uses absolute positioning for hero elements and a highly responsive breakpoint system (1200px, 810px, 600px) defined in the JSON data attributes to manage layout shifts across devices.

Use Cases

• Who should clone this: Product designers, 3D artists, and creative technologists who want a high-impact, visual-first portfolio that feels modern and premium.
• Remix Directions: Replace the static 3D hero image with a Spline scene or a high-quality video loop to enhance the immersion. The "skills" section at the bottom can be easily adapted into a service list for agencies or a feature breakdown for a SaaS landing page.
• Suggested Scope: The hero section and the floating pill navigation are the most valuable components to clone individually for quick integration into existing projects. A full-page clone is best for those seeking a singular, cohesive aesthetic for a personal brand.