Previews are representative layouts. Every page, component and state shown is included in the download.
Luma — Designer Portfolio Website Template
A quiet, gallery-grade portfolio that puts your work first and your ego second.
- Category
- Portfolio
- Pages included
- 7 pages
- File format
- ZIP · HTML, CSS, JS
- Delivery
- Instant download
- Licence
- One end product
- Support
- 6 months included
- Updates
- Free, for life
- Last updated
- February 2026
- Secure payment via Stripe or PayPal
- Download link valid for 72 hours, re-issued free
- No account required, no subscription
Overview
Luma is a portfolio for designers, photographers and art directors who would rather show than tell. The layout borrows from print: generous margins, a restrained type scale, and images that are allowed to breathe at full width.
It ships with three project layouts — full-bleed, two-column and long-scroll — so a branding system, a photo series and a product case study each get a format that suits them.
What's included
- 7 HTML pages including three interchangeable project layouts
- Lightbox gallery with keyboard and swipe navigation
- Lazy-loaded imagery with graceful blur-up placeholders
- Dark and light colour schemes, switchable with one class
- Downloadable CV / about layout with a timeline component
- Image export guidelines and a folder of sized placeholders
Pages and sections included
7 ready-made pages:
- Home
- Work index
- Project — full bleed
- Project — two column
- Project — long scroll
- About & CV
- Contact
Built from these sections and components:
- Minimal hero with name and discipline
- Selected work grid
- Hover-preview project list
- Full-width image sequences
- Process notes with numbered steps
- Timeline of studios and clients
- Recognition list
- Simple contact and social block
Key features
Three project layouts
Pick the format that flatters each piece instead of forcing every project into one grid.
Keyboard-friendly lightbox
Arrow keys, Escape and swipe gestures, with focus returned to the thumbnail on close.
Dark mode included
A complete second palette that respects the visitor's system preference.
Blur-up images
Tiny inline placeholders keep the layout stable while full images load.
Print-inspired grid
A 12-column grid with real optical margins, not just padded boxes.
CV that prints cleanly
A print stylesheet turns your about page into a tidy one-page PDF.
Responsive and mobile design
Luma is built mobile-first and tested at 320, 375, 414, 768, 1024, 1440 and 1920 pixels before release. Small screens are not an afterthought — navigation, tables, galleries and the 7-page structure are each redesigned for the space available rather than shrunk to fit.
- Fluid type and spacing scales, so headlines stay in proportion between a phone and a 27-inch display.
- Tap targets of at least 44×44 pixels on every control, with visible focus rings for keyboard users.
- Images served at sensible dimensions with lazy loading below the fold and reserved space to prevent layout shift.
- Tested in current Chrome, Safari, Firefox and Edge, on iOS and Android, and with reduced-motion preferences respected.
Customisation and editing
Everything you will want to change is in an obvious place. Colours, fonts, radii and spacing are CSS custom properties declared in one block at the top of the stylesheet — change those six or so lines and all 7 pages follow. Text and links are edited directly in the HTML, with comments marking each section.
- No build step, no Node, no package manager — open the folder in any editor and double-click a page to preview it.
- Swap images by dropping your own files into /assets/img using the same filenames, or point the markup anywhere you like.
- Every component is commented and reusable, so adding a page means copying a block rather than writing CSS from scratch.
- Clean, semantic markup that ports cleanly into WordPress, Webflow, Astro, Eleventy or a React project when you outgrow static files.
Ideal for
- Graphic and brand designers building a personal site
- Photographers and art directors showing series work
- Product designers presenting long-form case studies
- Students and juniors preparing a first professional portfolio
Frequently asked questions
The template lazy-loads every image below the fold and includes a short guide on exporting at the right dimensions. Following it, a twelve-image project page typically loads in under two seconds on 4G.
Yes. The standard licence covers one end product, so you can build one client site with it. A second client site needs a second licence.
Basic comfort with HTML and CSS is enough. Text, images and links are edited directly in the HTML, and colours and fonts live in a short list of variables at the top of the stylesheet. If you can edit a text file, you can launch one of these.
One licence covers one end product — your own website, or one client project. You can modify the template as much as you like. You cannot resell, redistribute, sublicense or share the template files themselves.
Anywhere that serves static files: Netlify, Vercel, Cloudflare Pages, GitHub Pages, or classic shared hosting via FTP. Most are free for a site this size, and the guide covers each.
Because templates are delivered instantly and cannot be returned, all sales are final once the download link is issued. If a file is corrupt or a page does not match its preview, contact us within 14 days and we will fix it or refund you in full.
You might also like