Flayks Digital Portfolio with Floating Cards

Overview

This high-end creative portfolio serves as a masterclass in combining bold, experimental typography with a clean, functional grid system. It is a premier reference for developers looking to master Svelte-based interactive components and Astro for high-performance content delivery. The site’s primary strength lies in its cinematic presentation of project case studies through a modular, slide-based navigation system.

Design System

• Color Palette & Visual Hierarchy: The site uses a deep emerald green (#002a3b variant) as a base, contrasted with a high-vibrancy coral/salmon color for massive display typography. Visual hierarchy is established through extreme scale shifts—massive word-wrapped titles vs. ultra-fine caps-small technical details.
• Typography System: Features a variable sans-serif font for titles that utilizes font-variation-settings (italics) and custom kerning via CSS variables (--kern). Body copy uses a typewriter-style monospace font, giving the creative portfolio a technical, documented feel.
• Page Structure:
  1. Introduction Hero: Massive multi-line display text with a floating card stack (astro-island component).
  2. Information Strip: A persistent reach-out bar showing availability and location.
  3. Selected Projects: A vertical stack of article elements, each containing a sub-carousel of images and technical descriptions.
  4. Skills & Services: A grid of interactive SkillCard components.
  5. Recognition & Clients: Simple semantic lists for industry validation.
  6. Contact: Minimalist footer with an embedded map image and large-scale call-to-action.
• Reusable Components:
  • Floating Card Stack: A Svelte component (Cards.svelte) that manages overlapping z-indexes and rotation offsets for a physical "stack" effect.
  • Typewriter Text: A custom component (typewriter) that splits words into spans and animates opacity on scroll/load.
  • Modular Project Slides: The article.project structure includes a sticky meta-data sidebar and a horizontal-scrolling slide container for media.
• Interaction & Motion: Extensive use of Anime.js and SmoothScroll. Hover states on cards trigger subtle 3D transformations (--rotate-x, --rotate-y). Video assets include custom playback controls within an astro-island wrapper.
• Implementation Clues: The site is built with Astro and uses Svelte for island-based interactivity. It heavily leverages Sanity CMS for image and video delivery, using specialized attributes like fetchpriority="high" and decoding="async" for performance.

Use Cases

• Who should clone this pattern: Creative directors, independent designers, and boutique digital agencies who want a high-impact, "portfolio-first" brand presence.
• Effective Remixes: This pattern is ideal for luxury brand lookbooks, experimental music artist pages, or high-end architectural studio portfolios.
• Practical Remix Directions:
  • Typography Swap: Replace the primary display font with a high-contrast serif for a more traditional luxury feel.
  • Architecture Adaptation: Use the modular project slides as a vertical landing page for a single product launch, treating each slide as a feature highlight.
  • Minimalist Scope: Clone the reachout component and the typewriter animation for a clean, text-heavy bio page.
• Suggested Clone Scope: Start by cloning the Project Slide Module. It is the most technically complex and unique part of the layout, offering a refined way to showcase media without standard boring grids.