Skip to content
codexa

Portfolios · React

Film composer

Moody dark portfolio for a film and TV composer, with credits, a career timeline and how scoring works.

Film composer starter, as built from its own files
Starter screenshot captured from this template's own build at 1440×900. It shows the template as it ships, not output generated from a prompt.

What you get

A dark portfolio for a composer for film, TV and games: selected scores, a credits timeline, how a scoring project runs, notes from directors and a contact form for producers. All content lives in src/site.ts.

Files

Exactly what is copied into a new project: 13 files, nothing generated.

Raw data: GET /api/v1/templates/portfolio-film-composer

src/site.ts
src/site.ts
import type { Site } from "./types"; /** Everything this site shows. Edit freely. */export const site: Site = {  "brand": "Elias Varga",  "nav": [    {      "label": "Scores",      "href": "#scores"    },    {      "label": "Credits",      "href": "#credits"    },    {      "label": "Process",      "href": "#process"    }  ],  "navCta": {    "label": "Contact",    "href": "#contact"  },  "sections": [    {      "kind": "hero",      "variant": "center",      "eyebrow": "Composer for film, television & games · Budapest",      "title": "Music that sits under the picture, not on top of it.",      "text": "Scores for independent features, documentary series and narrative games. Strings, piano and a lot of prepared instruments, recorded with players in Budapest and Vienna.",      "primary": {        "label": "Listen to scores",        "href": "#scores"      },      "secondary": {        "label": "Contact",        "href": "#contact"      },      "visual": {        "type": "mock",        "title": "Now playing: Winter Quarters (OST)",        "rows": [          {            "label": "1. Arrival at the yard",            "value": "2:48"          },          {            "label": "2. Ice on the rigging",            "value": "3:31",            "tone": "#93a0b0"          },          {            "label": "3. Letters home",            "value": "4:05"          },          {            "label": "4. The long night",            "value": "6:12",            "tone": "#93a0b0"          }        ],        "footer": "String quartet, prepared piano, cimbalom · 14 tracks, 47 minutes"      }    },    {      "kind": "projects",      "id": "scores",      "eyebrow": "Selected scores",      "title": "Recent work",      "items": [        {          "title": "Winter Quarters",          "tag": "Feature film, period drama, 108 min",          "year": "2026",          "tone": "#1e293b"        },        {          "title": "The River Remembers",          "tag": "Documentary series, 6 × 50 min",          "year": "2025",          "tone": "#0c4a6e"        },        {          "title": "Lanternfall",          "tag": "Narrative game, 3 hours of adaptive score",          "year": "2024",          "tone": "#334155"        },        {          "title": "Small Hours",          "tag": "Short film, 22 min",          "year": "2023",          "tone": "#1f2937"        }      ]    },    {      "kind": "timeline",      "id": "credits",      "eyebrow": "Credits",      "title": "Career so far",      "items": [        {          "period": "2026",          "title": "Winter Quarters",          "text": "Original score for a feature film; soundtrack released on streaming and vinyl."        },        {          "period": "2025",          "title": "The River Remembers",          "text": "Main theme and score for a public-broadcast documentary series."        },        {          "period": "2024",          "title": "Lanternfall",          "text": "Adaptive score for an independent game, with layers that respond to the player's light."        },        {          "period": "2019 – 2023",          "title": "Orchestrator and additional music",          "text": "Orchestration for twelve features and series while building my own credits."        }      ]    },    {      "kind": "steps",      "id": "process",      "eyebrow": "Process",      "title": "How a score comes together",      "items": [        {          "title": "Spotting session",          "text": "We watch the cut together and decide where music goes, and just as important, where it doesn't."        },        {          "title": "Sketches to picture",          "text": "Mock-ups for every cue so you can hear the score against the edit before anything is recorded."        },        {          "title": "Record and mix",          "text": "Live sessions with players, mixed in stereo and 5.1, stems delivered for the final dub."        }      ]    },    {      "kind": "quotes",      "eyebrow": "Directors",      "title": "From the people I've scored for",      "items": [        {          "quote": "Elias took out half the music I asked for, and the film got twice as sad. He was right.",          "name": "Katalin R.",          "role": "Director, Winter Quarters"        },        {          "quote": "The main theme does more storytelling in thirty seconds than our narration does in three minutes.",          "name": "Peter H.",          "role": "Series producer"        },        {          "quote": "The adaptive layers never repeat in a way players notice. That's very hard to do.",          "name": "Lena F.",          "role": "Audio director, Lanternfall"        }      ]    },    {      "kind": "contact",      "eyebrow": "Contact",      "title": "Talk about your project",      "text": "Send a link to the cut or the script, your timeline and where you are in the edit. Representation enquiries through the same form.",      "fields": [        "name",        "email",        "company",        "message"      ],      "button": "Send message"    }  ],  "footer": {    "text": "Elias Varga, composer for film, television and games.",    "columns": [      {        "title": "Listen",        "links": [          "Bandcamp",          "Showreel"        ]      },      {        "title": "Contact",        "links": [          "studio@eliasvarga.com"        ]      }    ],    "legal": "© Elias Varga. Sample content: replace it in src/site.ts."  }};

Remix

Remix this template

Describe what to change and the agent starts from Film composer's files. The box is already started for you: finish “Start from Film composer and …”

Agent ready

Creates a free account first; your idea is carried over.

Dependencies

Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.

  • react^19.1.0
  • react-dom^19.1.0
  • vite^6.3.0
  • @vitejs/plugin-react^4.4.0
  • tailwindcss^4.1.0
  • @tailwindcss/vite^4.1.0
  • typescript^5.8.0

How it runs

Framework
Vite + React + TypeScript
Dev command
npm run dev
Build command
npm run build
Output directory
dist
Port
5173
Entry route
/

Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.

All templates

Build on Film composer

Create a free account, start from this template, and ask the AI agent to turn it into your app.