# Florian Gross Design Studio — Portfolio

Modern, animated single-page portfolio built with **Next.js (App Router)**, **TypeScript**,
**Tailwind CSS v4**, **Framer Motion** and **PostgreSQL via Drizzle ORM**.

Everything on the site is in **English**. White background, light-grey iconography,
full-screen project slideshows, and full 4K-ready imagery.

---

## What's inside

| Area | Details |
| --- | --- |
| **Projects** | Kobe, Konnex, Andamio, Cap, Oak Streetwear Store, Balca (last, portrait) |
| **Slideshow** | Auto-advance + play/pause, click-to-zoom overlay, keyboard control (`←/→`, `Space`, `Z`, `I`, `Esc`) |
| **Konnex shop** | Explicit worldwide purchase link → `muellermoebel.de/en/KONNEX-Set/KX200-312` |
| **Instagram** | Live `@floriangrossdesign` feed, max 4 posts, DB-cached with graceful fallback |
| **Images** | 58 originals upscaled 2× (Lanczos) and enhanced for 4K; served via Next Image (AVIF/WebP) |
| **SEO** | Title/description/canonical, Open Graph, Twitter cards, JSON-LD (Person, ProfessionalService, Product), `sitemap.xml`, `robots.txt`, web manifest |
| **Excluded by design** | Stockists, News, Friends links, Wohndesign–Werner Enzmann interiors, old studio discount code |

Photos are never cropped — every frame is sized from the image's real aspect ratio
(`object-contain` throughout).

---

## Requirements

- Node.js 20+
- PostgreSQL 14+

## Setup

```bash
# 1. Install dependencies
npm install

# 2. Point the app at your database
#    Edit .env — replace the sandbox URL with your own:
echo 'DATABASE_URL=postgresql://USER:PASSWORD@localhost:5432/your_db' > .env

# 3. Create the tables
npx drizzle-kit push

# 4. Run in development
npm run dev          # → http://localhost:3000

# 5. Or build for production
npm run build
npm start
```

The database is **seeded automatically on first request** — all six projects plus
awards, exhibitions and clients are inserted from `src/lib/content.ts`. No manual
migration step required.

> `npx drizzle-kit push` is still needed so the tables exist.

---

## Optional: live Instagram feed

The `/api/instagram` route tries, in order:

1. **Official Instagram Graph API** — set `INSTAGRAM_ACCESS_TOKEN` in `.env`
2. **Public web profile endpoint** — works without a token
3. **Database cache** — refreshed every 6 h
4. **Fallback** — your latest project images, so the section is never empty

Without a token the feed gracefully falls back to your own project photography,
which is why the site always shows 4 posts.

---

## Editing content

All copy, credits, awards, specs and purchase links live in one file:

```
src/lib/content.ts
```

Change anything there, restart, and the database re-seeds itself (`upsert` by slug).
No code changes needed to update project text or swap the Konnex buy link.

```bash
npm run typecheck   # tsc --noEmit
npm run lint        # eslint
```

---

## API routes

| Route | Purpose |
| --- | --- |
| `GET /api/health` | DB connectivity check |
| `GET /api/instagram` | Latest 4 posts, cached |
| `POST /api/contact` | Stores enquiries in the `enquiries` table |

---

## Project structure

```
src/
├── app/
│   ├── layout.tsx          # SEO metadata + JSON-LD structured data
│   ├── page.tsx            # server component, loads data
│   ├── sitemap.ts          # dynamic sitemap
│   ├── robots.ts
│   ├── manifest.ts
│   └── api/                # health, instagram, contact
├── components/
│   ├── SinglePage.tsx      # orchestrates the whole page + deep links
│   ├── Nav.tsx             # fixed nav, scroll-spy, section navigation
│   ├── Hero.tsx            # animated intro + marquee
│   ├── Work.tsx            # filterable project grid
│   ├── Slideshow.tsx       # fullscreen slideshow + zoom overlay
│   ├── InstagramFeed.tsx   # live feed with skeleton + fallback
│   └── Sections.tsx        # About, Konnex shop, Recognition, Contact, Footer
├── lib/
│   ├── content.ts          # ← all editable content
│   ├── data.ts             # Drizzle queries + auto-seed
│   └── instagram.ts        # multi-strategy feed fetcher
└── db/
    ├── schema.ts
    └── index.ts

public/images/projects/     # 4K-ready photography (Kobe, Konnex, Andamio, Balca, Cap, Oak, Studio)
```

---

## Deep links

Individual projects can be linked directly:

```
/#project-konnex
/#project-balca
```

---

© 2011–2026 Florian Gross Design Studio, Barcelona.