# Portfolio (design showcase) A modern designer/agency portfolio. Project cards with hover effects, smooth scroll, sticky nav, dark hero with bright accent. This is the example to reach for when the user wants something visually impressive — a freelancer site, a small studio, a personal brand page. The pattern: each project is a sub-page with metadata (title, tagline, year, tags, hero color). The main page reads `cross_page_metadata.json` and renders project cards. Click a card → drill into a case study page. ## The script ```python import requests import time API = "https://api.uat-beam.page" TOKEN = "" H = {"Authorization": f"Bearer {TOKEN}", "Content-Type": "application/json"} slug = "studio-nova" # 1. Create the project requests.post(f"{API}/projects", headers=H, json={ "slug": slug, "context": "Studio Nova — independent design studio in London. Portfolio site with project case studies.", }) time.sleep(2) # 2. Brand it — black, white, electric accent requests.put(f"{API}/projects/{slug}/assets/tailwind-config.js", headers=H, json={ "content": ( 'tailwind.config = { theme: { extend: { ' 'colors: { ' 'ink: "#0a0a0a", ' 'paper: "#fafaf9", ' 'accent: "#ff5436" ' '}, ' 'fontFamily: { ' 'display: ["Space Grotesk", "sans-serif"], ' 'mono: ["JetBrains Mono", "monospace"] ' '} ' '} } }' ), }) requests.put(f"{API}/projects/{slug}/assets/styles.css", headers=H, json={ "content": ( "@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');\\n" "@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');" ), }) # 3. Create the project case study pages projects = [ { "slug": "northwind", "title": "Northwind", "tagline": "Brand identity for a sustainable airline", "year": "2025", "tags": ["Brand", "Identity", "Print"], "color": "#2d4a3e", }, { "slug": "loop-magazine", "title": "Loop Magazine", "tagline": "Editorial design for a quarterly culture journal", "year": "2024", "tags": ["Editorial", "Print", "Typography"], "color": "#d4af37", }, { "slug": "midnight-radio", "title": "Midnight Radio", "tagline": "Album artwork and merchandise for an indie label", "year": "2024", "tags": ["Music", "Illustration", "Merchandise"], "color": "#8b1538", }, ] for p in projects: requests.post(f"{API}/projects/{slug}/pages", headers=H, json={ "slug": p["slug"], "notes": p["title"], }) time.sleep(0.3) requests.put( f"{API}/projects/{slug}/pages/{p['slug']}/metadata", headers=H, json={ "title": p["title"], "tagline": p["tagline"], "year": p["year"], "tags": p["tags"], "color": p["color"], }, ) time.sleep(0.3) # 4. The main page — sticky nav, big hero, project grid with hover main_html = """ Studio Nova — independent design studio

[ Independent design studio · est. 2019 · London ]

We make brands
people remember.

Brand identity, editorial, and packaging for clients who care about the details.

Brand Identity● Editorial● Packaging● Typography● Art Direction● Brand Identity● Editorial● Packaging● Typography● Art Direction●

[ 01 ]

Selected work

[ 02 ]

About

We're a small studio that does big work for clients who want their brand to feel as good as it looks. No process decks, no mood-board theatre — just considered design that earns its keep.

FOUNDED

2019, London

TEAM

Three designers, one strategist

CLIENTS

Independent brands worldwide

[ 03 ]

Let's make
something good.

hello@studionova.example
""" requests.put( f"{API}/projects/{slug}/pages/_root/files/index.html", headers=H, json={"content": main_html}, ) print(f"Done. Live at https://{slug}.uat-beam.page") ``` ## What makes it look like this - **Sticky translucent nav** with backdrop blur. One line of CSS, feels expensive. - **Massive headline** (8xl) with the accent colour highlighting the key phrase. Eye candy. - **Mono accents** for tags, numbers, labels. Pairs perfectly with a big display sans like Space Grotesk. - **Numbered sections** (`[ 01 ]`, `[ 02 ]`) — editorial trick that makes a portfolio feel like a magazine. - **Marquee bar** between hero and work — animated, draws the eye. - **Project rows, not cards.** Each project is a wide horizontal row with title, tags, year, and a coloured dot. Hover lifts the row and expands the colour bar at the bottom. Subtle but reads as polished. - **Inverse-coloured About section.** Black background, white text. Breaks the rhythm of the page and makes the studio's voice feel louder. - **Big email CTA at the bottom** instead of a contact form. For a studio site, an email link is more in keeping with the vibe. ## Adapt it This same shell works for: - A photographer's portfolio (swap project rows for image grids) - A consultant's site (swap project rows for case study summaries) - A musician's site (rows become tracks or releases) - A writer's site (rows become essays) The metadata pattern is the same — each item is a sub-page with title, tagline, year, tags. The main page just renders them in whatever shape the design wants.