Simon Studio Computational Design Portfolio

Overview

This Svelte-based portfolio for a computational design studio features a highly tactile, experimental interface centered around large, vertically-scrolling interactive "pills." It is an excellent reference for builders looking to implement non-traditional navigation patterns where the UI elements themselves serve as the primary focus and canvas for project transitions.

Design System

• Color Palette & Visual Hierarchy: The design uses a sophisticated, muted palette involving earthy ochre (#c68c5b), soft off-whites (#f0e9e8), and stark black text. Hierarchy is driven by scale and motion rather than nested containers, with the interactive labels filling nearly the entire viewport width.
• Typography: Features a clean, geometric sans-serif (resembling Inter or similar) for the project titles. Project indices and years use smaller, secondary scales, while the header uses a serif typeface for high-contrast branding at the top ("Simon.com", "About Words").
• Page Structure: The layout consists of a fixed top navigation bar with three distinct zones. Below this, a series of project sections (.list-item) are indexed. The primary interaction layer is a scroll-controlled stack of labels (.index-labels) that transform and translate in 3D space (translate3d) as the user scrolls through the corresponding shadow-list of project data.
• Reusable Components:
  • The "Pill" Label: Large, rounded-end containers (.label-wrap) with dynamic background colors (--cbg) and 3D rotation properties (--rotY, --rotX).
  • The Shadow List: A functional but hidden scrolling mechanism (.shadow-list) used to sync scroll position with the visual foreground elements.
  • Minimalist Header: A tripartite header (Left: Logo, Center: Description, Right: Links) providing a stable anchor to the fluid page content.
• Interaction & Motion: The site utilizes scroll-triggered animations where labels stick and stack. Each pill tracks subtle mouse movement via CSS variables (--rotX, --rotY), creating a 3D tilting effect. The large project titles fade and slide based on their active index.
• Implementation Clues: Built with SvelteKit (indicated by sveltekit:prefetch and class naming conventions). It uses CSS custom properties to drive complex 3D transforms directly from the component state.

Use Cases

• High-End Creative Portfolios: Designers or studios who want their site to feel like a custom-coded installation rather than a standard template.
• Brand Launch Pages: Products with a limited but high-impact feature set can use the large pill labels to narrate a story through scrolling.
• Remix Directions:
  • Style Swap: Keep the Svelte scroll logic but replace the round-capped pills with sharp rectangular blocks or fluid organic shapes.
  • IA Adaptation: Use the 3D-tilting pill component as a specialized navigation menu for a gallery rather than the full-page structure.
  • Interaction Simplification: Clone the visual stacking effect but remove the 3D mouse-tracking to improve performance on lower-end devices.
• Suggested Clone Scope: A full-page clone is recommended to capture the synchronized scroll-to-index logic between the foreground labels and the background project list.