Amie Chronological Portfolio Timeline

Overview

This project is a high-fidelity chronological portfolio timeline from the productivity app Amie. It reimagines traditional vertical scrolling as a horizontal calendar-grid experience, using a bento-style card layout to narrate a company's product journey. It is a premier reference for developers and designers looking to build non-linear storytelling interfaces, interactive resumes, or feature roadmaps.

Design System

• Color Palette & Visual Hierarchy: The system uses a soft, light-gray background (#f3f4f6) to let colorful event cards pop. Cards follow a semantic or category-based color code: blue (#D5EAFF) for tasks, yellow (#fef9c3) for hires, green (#dcfce7) for media, and purple (#f3e8ff) for philosophy. Text colors are high-contrast variants of the card fills (e.g., #854d0e on yellow) to ensure readability.
• Typography: The interface utilizes a clean sans-serif stack with a focus on hierarchy. Date headers feature bold, condensed month labels with smaller year sub-headers. Card titles use variable font weights, sometimes featuring slight rotations (e.g., rotate:-2deg) to mimic post-it notes or hand-written aesthetics.
• Page Structure: The layout is built on a Timeline_grid utilizing CSS Grid. Each column represents a specific date, allowing for vertical stacking of multiple events occurring on the same day. This create a "scannable" horizontal flow that breaks away from standard vertical feed patterns.
• Reusable Components:
  • EventCard: A versatile container with properties for background color, image slots (EventCard_photo), and stacking effects for team photos.
  • Sticky Header: Date markers that stay pinned to the top of the columns during horizontal scroll.
  • Dynamic Navigation Bar: A custom floating control at the bottom that allows users to toggle zoom levels (Years, Months, Days) and scroll precisely.
• Interaction Patterns: The design features subtle hover states and card-stacking animations (EventCard_stack). Some cards include .gif and .mp3 indicators, suggesting a rich media experience. The timeline uses overflow-x: scroll with a timeline-container for native-feeling horizontal movement.
• Implementation Clues: The HTML reveals a Next.js framework (indicated by #__next) and CSS Modules for styling (e.g., EventCard_card__MZFio). Layout execution relies heavily on grid-row: auto / span X to manage card height based on importance or content density.

Use Cases

• Startup Founders: Use this to build a "Building in Public" roadmap or a company history page that feels more personal than a bulleted list.
• Creatives & Developers: Practical for an interactive CV or portfolio where projects are mapped across a career timeline.
• Music & Media Producers: Remix the .mp3 and media card patterns to create an interactive discography or release schedule.
• Remix Directions: Swap the playful pastel colors for high-contrast dark tones for a technical documentation site, or adapt the horizontal scroll for a photo-heavy travel blog.
• Clone Scope: Start by cloning the Timeline_column and EventCard components to create a modular, scrollable section for an existing landing page before committing to the full-page horizontal architecture.