# Mohammad Imrose Portfolio Design Guide

Use this file as a practical recipe to recreate the portfolio UI.

## Design Direction

Build a quiet premium, Apple-inspired portfolio with a warm light theme, large typography, soft depth, subtle glass surfaces, and restrained motion. The site should feel polished and product-like without becoming flashy.

Keywords: editorial, clean, warm, precise, spacious, tactile, modern.

## Tech Stack

- Next.js App Router
- TypeScript
- Tailwind CSS
- Framer Motion for small reveal animations
- Local structured content data
- Static public assets for resume and animated pet GIF

## Color Tokens

Use CSS variables or Tailwind theme tokens:

```css
--background: #f7f4ef;
--foreground: #171512;
--surface: #fffdf8;
--surface-muted: #ede8df;
--border: #ded7cc;
--accent: #1d5fd6;
--accent-soft: #d9e6ff;
--success: #168a4a;
--muted: #6f6a61;
--shadow-soft: 0 24px 80px rgb(42 35 26 / 0.12);
--shadow-card: 0 18px 60px rgb(42 35 26 / 0.08);
--radius-large: 32px;
```

## Typography

- Font: Geist Sans for primary UI.
- Mono: Geist Mono for tiny section labels and metadata.
- Hero headline: huge, tight tracking, balanced wrapping.
- Body copy: 16-20px, relaxed line height, muted color.
- Section headings: 3xl to 5xl, semibold, tight tracking.

Recommended classes:

```txt
Hero headline: text-5xl sm:text-7xl lg:text-8xl font-semibold tracking-[-0.065em]
Section title: text-3xl sm:text-5xl font-semibold tracking-[-0.04em]
Body: text-base sm:text-lg leading-8 text-muted
Metadata: font-mono text-xs uppercase tracking-[0.24em]
```

## Global Background

Use a warm off-white body background plus a subtle ambient grid:

```css
.ambient-grid {
  background-image:
    radial-gradient(circle at 20% 0%, rgb(255 255 255 / 0.95), transparent 28rem),
    radial-gradient(circle at 80% 10%, rgb(217 230 255 / 0.78), transparent 24rem),
    linear-gradient(rgb(23 21 18 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(23 21 18 / 0.035) 1px, transparent 1px);
  background-size: auto, auto, 72px 72px, 72px 72px;
}
```

## Layout System

- Use a centered max-width container around 76rem.
- Section padding: `py-20 sm:py-28`.
- Outer horizontal padding: `px-5 sm:px-8`.
- Mobile first: stack everything; move to grids at `lg`.
- Keep text blocks around 2xl-3xl max width for readability.

## Core Components

### Floating Navigation

- Fixed top center on desktop.
- Hidden on small screens.
- Rounded full pill, translucent white, backdrop blur, soft shadow.
- Active section gets dark foreground background and warm light text.

### Buttons

Primary:

```txt
rounded-full bg-foreground text-background shadow-card hover:-translate-y-0.5
```

Secondary:

```txt
rounded-full border border-border bg-white/70 text-foreground backdrop-blur hover:bg-white
```

### Badges

Small rounded pills:

```txt
rounded-full border border-border bg-white/70 px-3 py-1 text-xs font-medium text-muted
```

### Cards

Use large radius, warm surface, thin border, and soft shadow:

```txt
rounded-[28px] border border-border bg-surface/88 p-6 shadow-card backdrop-blur-sm
```

Hover lift:

```txt
transition duration-200 ease-out hover:-translate-y-1 hover:shadow-soft
```

## Page Sections

### Hero

Structure:

1. Badge row: role and part-time availability.
2. Name as a prominent line above the headline.
3. Huge headline.
4. Short supporting paragraph.
5. CTA row: View selected work, Download resume, Contact.
6. Right-side status card.

Status card:

- Glassy white card.
- Top metadata row: Status + availability.
- Base: Sacramento, California.
- Focus: AI products, full-stack systems, developer tooling.
- Dark inset block: "Current operating mode" and the billion-dollar portfolio line.
- Center an animated pet GIF on top of the card using a local public asset.

Pet styling:

```txt
absolute -top-20 left-1/2 -translate-x-1/2
h-28 w-28 object-contain drop-shadow [image-rendering:pixelated]
```

### Proof Strip

Four compact metric cards in a responsive grid:

- 40% faster SQL paths
- 30% faster user workflows
- 50+ critical issues resolved
- 6 systems shipped

### Projects

Render every project with the same detailed full-width card.

Card layout:

- Left column: tag, year, title, summary, impact panel.
- Right column: role, bullet list, stack badges.
- Desktop: two columns, border divider.
- Mobile: one column with stacked sections.

Project card grid:

```txt
grid gap-0 lg:grid-cols-[0.95fr_1.35fr]
```

### Capabilities

Two-column responsive grid of capability cards:

- Agentic AI Engineering
- Full-Stack Systems
- Data + Cloud
- Quality + Observability

Each card has a title, concise body, and badges for tools or practices.

### Experience

Alternating timeline on desktop, left-side vertical timeline on mobile.

Each experience entry:

- Date in mono uppercase
- Role title
- Company and location
- Summary card
- Bullet points with accent dots

All card text should be left-aligned, even when timeline metadata alternates sides.

### About

Two-column section:

- Left: title and intro.
- Right: three floating cards in a controlled cluster.
- No bullet dots in the floating cards.

Desktop floating card positions:

```txt
card 1: lg:absolute lg:left-6 lg:top-0 lg:w-[58%]
card 2: lg:absolute lg:right-0 lg:top-28 lg:w-[58%]
card 3: lg:absolute lg:bottom-0 lg:left-0 lg:w-[62%]
```

### Contact

Dark rounded CTA block.

Left:

- Tiny mono "Contact"
- Large heading

Right:

- Short availability note
- CTA row: Say hello, Revisit work
- Social icon row: Email, LinkedIn, GitHub

Use explicit anchor styles for contact CTAs so light/dark button colors do not get overridden.

## Motion

Use motion sparingly:

- Reveal sections with fade + slight upward movement.
- Hover lift on cards and buttons.
- Respect `prefers-reduced-motion`.

Recommended reveal:

```ts
hidden: { opacity: 0, y: 24 }
visible: {
  opacity: 1,
  y: 0,
  transition: { duration: 0.55, ease: [0.22, 1, 0.36, 1] }
}
```

Avoid heavy parallax, looping page effects, cursor gimmicks, or motion that competes with reading.

## Accessibility

- Use semantic sections.
- Keep focus-visible outlines.
- Use `aria-hidden` for decorative SVGs/GIFs.
- Keep icon links labeled with `aria-label`.
- Maintain readable contrast over glass surfaces.
- Respect reduced motion.
- Ensure mobile layout stacks cleanly.

## Assets

Use public assets:

- `/mohammad-imrose-resume.pdf`
- `/NwrcwQQYfy-slow.gif`

## Footer

Footer should include:

- Copyright line
- Contact email
- Download link for this design file

Copy:

```txt
Like the design? Download design.md
```

Link target:

```txt
/design.md
```