I built a free dark portfolio template you can set up in 5 minutes [no React, no npm, no headache]

Patience Philip — Tue, 31 Mar 2026 01:02:35 +0000

Most free portfolio templates have the same problem.

You download them excited, open the folder, and then spend the next 45 minutes ctrl+F-ing through 400 lines of HTML trying to find where your name is supposed to go. You change one thing and break three others. You give up and use a website builder instead.

I've been there. So I built something different.

The idea: edit one file, never touch the HTML

The template has two files: index.html and config.js.

You open config.js. You fill in your details. You're done.

const PORTFOLIO = {
  name:      "Your Name",
  role:      "designer & developer",
  location:  "Lagos, Nigeria",
  available: true,
  email:     "hello@yourname.com",

  bio: [
    "First paragraph about yourself.",
    "Second paragraph — optional."
  ],

  projects: [
    {
      title: "   \"Your Project\","
      desc:     "What it does and why it matters.",
      tags:     ["React", "Design"],
      url:      "https://yourproject.com",
      featured: true,
    },
  ],

  theme: {
    accent: "#c8a96e", // change this one line to rebrand the whole site
  },
};

That's it. The HTML reads from the config and builds the entire page — hero, about, work, experience, contact, footer, copyright year, everything. You never open index.html at all.

Set available: false and the "Available for work" badge disappears. Set a social link to null and it vanishes with no empty space. Change theme.accent to your brand color and the whole site rebrands in one line.

The design

I wanted something that actually looked good; not "free template" good, but genuinely polished.

Dark background. Editorial typography: Cormorant Garamond for the serif moments, Syne for the bold display text, DM Mono for the technical details. A noise texture overlay for depth. A custom animated cursor with a lagging ring on desktop. Scroll-reveal animations on every section. A sticky nav that picks up a backdrop blur as you scroll.

No gradients slapped on a white background. No Inter font. No purple-and-white color scheme that every AI-generated design seems to default to. Just a considered, intentional aesthetic from top to bottom.

No frameworks. No npm. No build step.

Open index.html in your browser. It works.

There's something genuinely refreshing about that. No node_modules folder eating your disk space. No npm run dev. No Webpack config to fight with. No dependencies that break six months later when something upstream changes.

Just HTML, CSS, and vanilla JavaScript doing exactly what they were designed to do.

This was a deliberate choice, not a limitation. The people who need a portfolio template are often students, junior developers, and designers who just want something that works. Making them install a JavaScript runtime to view a webpage is the wrong call.

It's open source... and I want your templates

This is the first template in what I'm building into a collection. SaaS landing page and documentation site are coming next.

But more importantly, contributions are open.

If you want to add a template, the rules are simple: pure HTML/CSS/JS, fully responsive, and config-driven (users edit a config.js, never the HTML). That last rule is the one I care about most. The whole point of this repo is that it's actually usable by real people, not just developers who are comfortable digging through source code.

Fork it, build something, open a PR. The more templates in here, the more useful it becomes for everyone.

DEV Community: Patience Philip

I built a free dark portfolio template you can set up in 5 minutes [no React, no npm, no headache]

The idea: edit one file, never touch the HTML

The design

No frameworks. No npm. No build step.

It's open source... and I want your templates

Links