Modern Portfolio Website Template

Michael Smith — Portfolio 26 is the personal portfolio template in the Siteglade library, and it is the one most people fork first. It is a single-page dark portfolio for a creative and fullstack founder, with a counter preloader, video backdrops in the hero and footer, and exactly one chromatic signature: a steel-blue accent gradient.

It solves the problem most portfolio templates get wrong, which is that a portfolio has to show work at several different sizes. A large flagship project and a quick experiment do not deserve the same tile, so the works section is a twelve-column bento grid where tiles can be different shapes.

It is a Vite and React project and it is forkable on the Free plan, which means you can have an agency-grade personal site live without paying for anything.

Six sections, each doing a different job

The page opens with a loading screen that counts up while the hero video buffers, locking body scroll until it finishes — so the first thing a visitor sees is deliberate rather than a half-loaded page. Then the hero starts, with an HLS video backdrop behind it and a role list cycling through what the owner does.

Selected works is the bento grid: a twelve-column layout where each project can claim a different footprint, so hierarchy is visible before a single title is read. Journal follows as text rows rather than cards, which is the right treatment for writing — a list of headlines with dates reads faster than a wall of thumbnails.

Explorations is a pinned parallax gallery with a lightbox, holding the work that is not a case study: sketches, side projects, visual experiments. Stats runs count-up numbers, and contact closes with a GSAP marquee and social links over a second video backdrop. All the content — works, journal entries, explorations, stats, socials and the role list — sits in one src/data.ts file.

What is in the component tree

Each section is its own component under src/components/, composed by a single Index page:

• LoadingScreen — a counter preloader that locks scroll until the page is ready
• Navbar — minimal fixed navigation
• Hero — HLS video backdrop with a cycling role list
• SelectedWorks — the twelve-column bento case-study grid
• Journal — writing presented as compact rows
• Explorations — a pinned parallax gallery with a lightbox
• Stats — count-up figures
• Contact — GSAP marquee, social links and a second video backdrop
• HlsVideo — the shared video player used by hero and footer
• A 404 page, since the project uses react-router

Design notes

Dark throughout, with the steel-blue accent gradient as the only color event on the page. Restricting a portfolio to one accent is what stops it from competing with the work it is showing, which is the most common failure mode of a designer portfolio.

The typography has one trick and uses it consistently: Inter headings with a single word flipped to Instrument Serif italic. It appears in the hero and repeats in the section headers, so it reads as a system rather than a flourish. Everything else is plain, tight and left-aligned.

Motion is split between two libraries doing what each is best at — GSAP with ScrollTrigger for the pinned exploration gallery and the contact marquee, Framer Motion 11 for component-level entrances and the loading screen exit. The hero and footer use hls.js so the video backdrops stream rather than downloading in full.

The stack under the hood

This template runs a slightly older stack than the newest ones in the library, which is worth knowing before you fork it: Tailwind v3 rather than v4, React 18 rather than 19.

• Vite 5
• React 18 and TypeScript
• Tailwind CSS v3
• GSAP and ScrollTrigger for pinning and the marquee
• Framer Motion 11 for entrances and the preloader
• hls.js for the streamed video backdrops
• react-router-dom for routing and the 404 page

Adapting it with a Siteglade prompt

Everything a visitor reads lives in src/data.ts, so a full content swap is one file. The agent can do it from a description of you, but it does better work when you give it the actual projects.

A prompt with enough to work from: "Rebuild this as the portfolio of Ana Duarte, a product designer in Berlin. Change the roles to Product Designer, Design Systems and Illustration. Replace the six works with these case studies: a banking app redesign, a design system for a logistics company, a wayfinding project for a hospital, and two smaller brand identities. Turn the journal into three writing pieces about design systems. Change the accent from steel blue to a warm amber and keep the dark background."

If you do not have video for the hero, say so and ask for a static gradient or an image backdrop instead — it is a better outcome than shipping the placeholder showreel. Prompt attachments help here too: you can drag your case-study images straight into the chat and ask the agent to place them.

What to change first

A portfolio is judged on the work, so everything else is secondary:

• The works array — replace every placeholder project, and delete tiles you cannot fill
• The hero video, or swap it for something you own
• The stats, which should be figures you would say out loud in a meeting
• The role list, since it is the fastest summary of what you do
• Contact and social links, which are the only conversion point on the page

Last updated: 2026-08-16