Back to Portfolio
The home page: the eyebrow "Multidisciplinary creative", the name "Bill Kirtsos" in large condensed capitals and the line "I make things people use, watch, hear, and play.", a slider on the right showing "Code" and "Websites, web apps, and games." above six dots, and below them a wide, darkened photograph of Bill Kirtsos in glasses and a flat cap, chin on his hand, with drums and guitars behind him, a terracotta "See my work" button, an outlined "Get in touch" button and the note "Open to work and relocation".
Open bill.savage.design in a new tab

Personal Portfolio — Explorable Project Map

Overview

I rebuilt my portfolio from the ground up. The old site was a dark neo-brutalist page running a Tailwind CDN script over a JSON grid; this one is a static Astro 5 build with React islands only where interaction demands them. The centrepiece is the work page — a map-style board where 36 projects sit in five territories, one per discipline. The wheel zooms at the cursor, dragging pans with momentum, two fingers pinch, and the filter chips fly the view to a category and dim the rest. Zoom in and pins resolve into cards. Every node is a real link, so each project also builds as its own static page that opens with its dialog already on screen. The home page is a sequence of scroll-driven sections: a pinned hero with a six-slide carousel, an about section whose paragraphs fill letter by letter while an image stack accumulates, a fisheye quick-facts reel, an accordion of skills, and a project reel whose track scrubs sideways as you scroll down — on phones as well as desktops. All content lives in one JSON file. There is no CMS, no database and no server runtime.

Challenges

An explorable map is easy to make disorienting and easy to make inaccessible. It also had to stay a static build — no server — while giving 36 projects real, shareable URLs, and the motion had to hold up on a phone.

Solutions

Every map node is an anchor to a page generated at build time, so the board stays navigable, shareable and crawlable with JavaScript off. Level of detail swaps pins for cards as you zoom, and the filter chips fly the view instead of reloading it. Sections are pinned with GSAP ScrollTrigger and scrubbed by scroll position rather than by a ticker, which keeps them honest on touch devices. The whole site ships as static HTML from Astro, with React mounted on the single component that actually needs it.

Gallery

  • The home page: the eyebrow "Multidisciplinary creative", the name "Bill Kirtsos" in large condensed capitals and the line "I make things people use, watch, hear, and play.", a slider on the right showing "Code" and "Websites, web apps, and games." above six dots, and below them a wide, darkened photograph of Bill Kirtsos in glasses and a flat cap, chin on his hand, with drums and guitars behind him, a terracotta "See my work" button, an outlined "Get in touch" button and the note "Open to work and relocation".

    Hero — A Name, a Promise and Six Crafts in Rotation

  • The about section mid-scroll: the eyebrow "The short story", the heading "About Me" beside a progress ring reading 3/4, and a paragraph that begins "Because I learned every craft by hand", its first lines in dark ink and the rest still pale, next to a stack of three rounded photographs, the front one showing Bill Kirtsos in a rust-coloured shirt and flat cap working at a laptop in a warmly lit studio.

    About — Scrollytelling with Letter-by-Letter Fill

  • A dark, full-width photograph of Bill Kirtsos in glasses and a flat cap playing a bass guitar, dimmed behind white text: the small terracotta label "Quick fact 2" above "Running savage.design since 2019" in large type, with a progress ring reading 2/4 in the top right corner.

    Quick Facts — One Fact at a Time, Magnified as It Passes

  • The skills accordion: "Design" closed with a plus sign, "Web & Development" open with a minus sign, showing a paragraph that begins "I build websites, web apps, and games by directing AI tools, mainly Claude Code and DeepSeek" and a row of terracotta tags from Next.js & React to SEO, then "Audio & Video" filled in sand under the pointer, with a slate-blue tooltip listing its tools, from music composition and Premiere Pro to Suno, ElevenLabs and Kling.ai, and "Marketing" closed below.

    Skills — Open a Craft, Hover Another for Its Tools

  • The favourite projects reel mid-scroll: the eyebrow "Selected work" and the heading "Favourite Projects" above a row of cards running off both edges: the end of a card on the left, greeksimmers.com with a flight-simulator site reading "Ready to Take the Controls?", SANCO Open Bin 5LT with a bronze cylindrical bin and the words "Luxury Bathroom Bin", and the start of Magic Admin, each with a subtitle and a short description, and a terracotta "See my work" button bottom right.

    Favourite Projects — A Track That Scrubs Sideways

  • The contact section on charcoal: the eyebrow "Start a conversation" and the headline "Let's make something useful." in huge white condensed capitals over four lines, beside rows for email, phone, LinkedIn and YouTube, each with a round icon, its address or name and an arrow, the email row lit with a cream fill under the pointer.

    Contact — The Closing Ledger

  • The project map zoomed in on its Products & Platforms territory: three project cards on a pale dotted grid around the faded territory title — What Do You Do, an AI-narrated RPG, with a dark game screen; Paper86, a restaurant operations platform, with a menu editor, outlined in terracotta and its image enlarged under the pointer; and Magic Admin, conversational website management, with a chat beside a website preview. Zoom buttons sit on the left and the filter bar along the bottom, with "Products & Platforms" selected.

    Project Map — Zoom In and the Pins Turn Into Cards

  • A project dialog open over the dimmed map: a large screenshot of the prestigecmn.gr home page, a gold "P" monogram on black beside the headline "We elevate your business Prestige", then a "Web development" tag, the title "prestigecmn.gr", the subtitle "Bilingual marketing agency website", and the role "Designer & Developer" next to the timeline "Launched September 2026, ongoing", with a round close button in the top right corner.

    Project Dialog — Opened in Place, With Its Own URL

  • The home page on a tablet: the eyebrow "Multidisciplinary creative", the name "Bill Kirtsos" and the line "I make things people use, watch, hear, and play." stacked on the left, above a darkened, rounded photograph of Bill Kirtsos in glasses and a flat cap, chin on his hand, with the "See my work" and "Get in touch" buttons and "Open to work and relocation" along its lower edge.

    Hero — The Same Opening, Stacked for a Tablet

  • The about section on a tablet, in one column: the last two paragraphs of the story in large light type, the pull quote "I learned each craft by hand, so I can guide AI tools with judgment and taste." in bold with a terracotta rule at its left, and below it a black brush-stroke edge opening onto a dark photograph of Bill Kirtsos in glasses and a flat cap, where the next section begins.

    About — On Tablets the Story Flows, Then the Pull Quote Lands

  • The favourite projects reel on a tablet: the eyebrow "Selected work" and the heading "Favourite Projects" above three tall cards — greeksimmers.com cut by the left edge, SANCO Open Bin 5LT in full with its bronze bin, and Magic Admin cut by the right edge — each with a subtitle and a short description, and a "See my work" button bottom right.

    Favourite Projects — The Sideways Reel Keeps Running on Tablets

  • The project map on a tablet, flown to its Graphic Design territory: a dashed ellipse around the faded territory title, with three labelled pins — Four Elements Productions, Prestige Communications and Bora's New Start — and the filter panel open bottom right, listing every category with "Graphic Design" selected in terracotta above a round close button; zoom buttons on the left and the hint "Scroll to zoom · Drag to move" at the bottom.

    Filtered View — A Chip Flies the Board to One Category

  • A project dialog on a tablet: a screenshot of the FitRoom Experience site, a gym interior lit in blue behind the headline "Training becomes experience", then a "Web development" tag, the title "FitRoom Experience", the subtitle "Gym site & membership platform", the role "Designer & Developer", the timeline "5 weeks to launch, ongoing" and the first paragraphs of the case study, with a round close button top right.

    Project Dialog — The Whole Case Study Without Leaving the Map

  • The menu open on a phone: a full-screen charcoal sheet with six numbered links in large condensed capitals — Home, About, Quick Facts, Skills, Portfolio and Contact — an outlined "Download CV" button and four round buttons for email, phone, LinkedIn and YouTube, with the close button in terracotta at the top right and a warm glow in the bottom corner.

    Menu — A Full-Screen Sheet That Keeps the CV in Reach

  • Quick facts on a phone: a black brush-stroke edge across the top opening onto a dark photograph of Bill Kirtsos in glasses and a flat cap, with the small terracotta label "Quick fact 1" and "Based in Kassel, Germany" in white, centred over it.

    Quick Facts — A Brush Stroke Opens Onto the Photograph

  • The favourite projects reel on a phone: the heading "Favourite Projects" over two lines, the greeksimmers.com card with a flight-simulator site reading "Ready to Take the Controls?", the subtitle "Full-stack web application" and a short description, the edge of the previous card at the left, and a "See my work" button below.

    Favourite Projects — Scrubbed by Scroll on Phones Too

  • The project map on a phone, zoomed in until one pin has become a card: prestigecmn.gr, with a screenshot of a gold "P" monogram on black and the headline "We elevate your business Prestige", a "Web development" tag, the title "prestigecmn.gr – Bilingual marketing agency website" and a short description, alone on a pale dotted grid with zoom buttons at the lower left and a round terracotta filter button at the lower right.

    Project Map — Pinch In and Every Pin Becomes a Card

  • A project dialog on a phone: a screenshot of the kaloni.gr shop with collection tiles and a row of new-arrival shoes, then a "Web development" tag, the title "kaloni.gr", the subtitle "Bilingual Laravel footwear e-commerce", the role "Full-Stack Developer & Designer", the timeline "8 weeks" and the start of the case study, with a round close button at the top right.

    Project Dialog — A Full Case Study That Fits a Phone

  • The contact section on a phone: the eyebrow "Start a conversation", the headline "Let's make something useful." in huge white condensed capitals over three lines, and rows for email, phone and LinkedIn, each with a round icon, a label, its address or name and an arrow, with the YouTube row starting at the bottom edge.

    Contact — Every Channel a Single Tap Away