I built a 5-page portfolio site without writing a single line of HTML or CSS

#javascript #web #opensource #design

Not a no-code tool. Not a drag-and-drop builder. Just a JavaScript function and a config object.

Here's the entire setup for a working animated page:

<div id="app-root"></div>
<script>
  devtemDesign("app-root", {
    template: "cyber",
    logoName: "MY BRAND",
    heroTitleLine1: "Build fast.",
    heroTitleLine2: "Ship beautiful.",
    heroSubtitle: "No HTML. No CSS. Just config.",
    primaryBtnText: "Get Started",
    features: [
      { title: "Zero boilerplate", desc: "Nav, hero, footer — all rendered from your config." },
      { title: "4 live themes",    desc: "Switch the whole visual language with one token." }
    ]
  });
</script>

That renders a full page. Animated navbar. Glassmorphism cards. Ambient orb backgrounds. Custom cursor. Scroll reveal. A professional footer. All of it.

The problem I was solving

Every time I started a new landing page or portfolio, I was writing the same things. A fixed glass nav. A hero section with some gradient text. Feature cards. A footer with columns and social icons. Ambient background effects. Custom cursor.

It's not hard work. It's just repetitive. And the repetition compounds — by the time you're on your third or fourth project, you're copy-pasting from your own old work and spending more time renaming CSS classes than actually designing.

So I built devtemDesign to abstract all of it behind a config schema.

How it works

You call one function. You pass it a container ID and a config object. The engine reads the config and constructs the full page DOM — nav, hero, marquee ticker, features grid, panels, footer — and wires up all the interactions.

The visual theme is controlled by a single template token:

devtemDesign("app-root", {
  template: "figsh", // or "cyber", "aurora", "monochrome"
  ...
})

Each template injects a complete set of CSS custom properties onto :root. Every component in the engine reads from those variables, so swapping "cyber" to "aurora" changes the entire colour language of the page — backgrounds, borders, accents, glass effects — in one character change.

The footer took the longest to design

The footer schema is the part I'm most proud of. It's fully declarable:

footer: {
  tagline: "Crafting digital experiences that move people.",
  columns: [
    {
      heading: "Product",
      links: [
        { label: "Docs",      href: "/docs"    },
        { label: "Changelog", href: "/changelog" }
      ]
    },
    {
      heading: "Company",
      links: [
        { label: "About",   href: "/about"   },
        { label: "Contact", href: "/contact" }
      ]
    }
  ],
  social: [
    { icon: "fab fa-github",  href: "https://github.com/you", label: "GitHub"  },
    { icon: "fab fa-twitter", href: "https://twitter.com/you", label: "Twitter" }
  ],
  legal: [
    { label: "Privacy Policy", href: "/privacy" },
    { label: "Terms",          href: "/terms"   }
  ],
  copy: "© 2026 Your Name"
}

Two-zone layout. Brand column with tagline and social icons on the left. Link columns on the right. Legal strip at the bottom. Hover animations, focus states, mobile stacking — all handled.

The 5-page portfolio

To test the engine properly, I built a complete 5-page portfolio template — Home, About, Work, Services, Contact — using devtemDesign as the shell on every page.

The trick is a shared config file:

// kaelnova-config.js
window.KN = {
  template: "figsh",
  logoName: "KAEL NOVA",
  navLinks: [
    { label: "Home",     href: "index.html"    },
    { label: "About",    href: "about.html"    },
    { label: "Work",     href: "work.html"     },
    { label: "Services", href: "services.html" },
    { label: "Contact",  href: "contact.html"  }
  ],
  footer: { /* shared footer config */ }
};

KN.boot = function(overrides) {
  devtemDesign("app-root", Object.assign({}, KN, overrides));
};

Every page calls KN.boot({}) with only its page-specific overrides. The nav, footer, logo, and theme are inherited automatically. Change the brand name in one place and it updates across all five pages.

The engine renders the nav and footer. Each page then injects its own content into the DOM after the engine runs — a hero, a timeline, a filterable project grid, a contact form. None of that required touching the engine itself.

What I didn't write

To be specific about what the config abstraction actually saved me:

The glass navbar with slide-down animation, hamburger menu, and mobile drawer
The ambient orb background layer with drift keyframes
The custom magnetic cursor with ring lag and ripple click effect
The scroll reveal IntersectionObserver setup
The marquee ticker
The footer — all columns, hover states, social icons, legal strip, responsive stacking

That's roughly 600 lines of CSS and 200 lines of JS I didn't write per project. On a 5-page site, that's a meaningful difference.

No build step

The CDN setup is two lines:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/devtemdesign@0.0.2/style.css">
<script src="https://cdn.jsdelivr.net/npm/devtemdesign@0.0.2/script.js"></script>

No Node. No bundler. No framework. Open the HTML file in a browser and it works. Deploy it to Netlify by dragging a folder and it works. The whole template is 7 files and 22KB zipped.

The limits

I want to be honest — there are real tradeoffs.

The config schema is opinionated. The page structure is fixed: nav, hero, marquee, features, panels, footer. If your design needs something outside that structure, you're injecting it manually after the engine runs, which is what I did for the portfolio pages.

It's also not a replacement for actually learning HTML and CSS. The engine is useful precisely because someone who knows those things built the components carefully. If you want to customise beyond the config, you need to understand what's underneath.

And right now there are only four templates. More are coming — along with enableParallax, custom CSS variable overrides, and new section types.