Comma – Portfolio Template

Last Updated on July 29, 2026 by Editorial Team

Comma is a modern template ideal for portfolios/creative personal websites. The freebie contains: documentation, all used fonts, previews, a style guide and a .Sketch project. To be honest, I think it is one of the most well-organized free projects I ever posted. Congrats to the author!

Crafted and shared by Ahmed Gumaa.

The split-screen layout is what gives Comma its identity. A full-bleed photograph anchors one half of the screen while a bold color panel, here a saturated blue, carries the headline and introduction on the other.

That contrast between a moody, desaturated portrait and a flat, punchy color field is the whole visual trick, and it works because it forces attention onto the name and title without any extra ornamentation.

The rounded speech-bubble mark paired with a small red accent dot gives the brand a friendly, conversational feel, which fits the “Hello, I’m” framing used on the landing screen.

Typography leans on a rounded, chunky sans-serif for the greeting and a lighter weight for supporting text, so the hierarchy reads instantly even at a glance, which matters a lot for a portfolio homepage where visitors decide in seconds whether to keep scrolling.

This kind of layout suits personal portfolio sites for visual designers, photographers, illustrators, and art directors who want their work displayed alongside a strong personal introduction rather than a generic hero banner.

It also reads well for freelancers who want their site to feel like a direct introduction rather than a corporate landing page, since the “Hello” greeting and first-name framing set a personable tone from the first screen.

Adapting the Split-Screen Layout

Because the template is built around a two-panel structure, the easiest customization is swapping the photography.

Replace the dark portrait or workspace image with your own black-and-white or moodily graded shot, keeping the contrast low so text on the color panel stays legible if it ever overlaps the seam.

The color panel itself is flexible. Swap the blue for a brand color, but keep it as a single flat tone rather than a gradient, since the flat fill is part of what makes the greeting text pop.

• Update the name, title, and greeting copy first, since the layout is built to showcase that text prominently.
• Adjust the small arrow or navigation cue if you restructure how visitors move between sections.
• Keep the logo mark simple if you add your own; the speech-bubble icon works because it is a single shape with one accent dot.

When pairing this landing screen with the rest of a portfolio, keep later project pages on the same flat-color, high-contrast-photo language so the split-screen intro does not feel like a one-off cover page.

A simple grid of project thumbnails using the same accent color for hover states or tags will carry the style through the rest of the site convincingly.