A step-by-step tutorial on building an animated, glassmorphic developer portfolio using the devtemDesign declarative page engine — zero boilerplate, one JS call.
Most developer portfolios take hours to set up. You pick a template, fight with CSS, tweak the layout, and eventually settle for something that looks like every other portfolio on the internet.
What if you could describe your portfolio as a config object and have a JavaScript engine paint the whole thing for you — animated, glassmorphic, responsive?
That's exactly what devtemDesign does.
In this tutorial, we'll build a complete developer portfolio from scratch using devtemDesign@0.0.2. By the end, you'll have a live, production-ready portfolio page — and you'll understand every config option that powers it.
What is devtemDesign?
devtemDesign is a lightweight, declarative page engine. You call one function with a config object, and it renders a full animated page: hero section, navbar, feature grid, info panels, footer — all of it.
No build tools. No framework. Just a CDN import and a JS object.
<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>
It ships four built-in themes:
| Template | Vibe |
|---|---|
figsh |
Futuristic glassmorphism — cyan / purple / pink |
cyber |
Neon cyberpunk — cyan / magenta / red |
aurora |
Organic nature — emerald / violet / blue |
monochrome |
Minimalist grayscale |
Step 1 — The HTML shell
The entire page lives inside one div. That's it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Your Name — Developer Portfolio</title>
<!-- devtemDesign -->
<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>
<!-- Font Awesome (needed for icons) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<div id="app"></div>
<script src="portfolio.js"></script>
</body>
</html>
Font Awesome is required — devtemDesign uses it for feature icons, social links, and CTA buttons.
Step 2 — Initialize the engine
In portfolio.js, call devtemDesign() with your container ID and config:
devtemDesign("app", {
template: "figsh",
logoName: "YOUR NAME",
// ... rest of config
});
The first argument is the container element's id. The second is your full config object. Let's build it section by section.
Step 3 — Core + Navigation
devtemDesign("app", {
template: "figsh", // pick your theme
logoName: "YOUR BRAND", // shows in navbar & footer
navLinks: [
{ label: "About", href: "#about" },
{ label: "Projects", href: "#projects" },
{ label: "Skills", href: "#skills" },
{ label: "Contact", href: "#contact" }
],
ctaText: "<i class='fab fa-github'></i> GitHub",
});
navLinks accepts plain strings ("About") or objects with { label, href }. The ctaText field supports HTML, so you can embed Font Awesome icons directly.
Step 4 — Hero section
The hero is the first thing visitors see. Fill it with clarity and confidence:
heroTag: "fullstack developer · builder · creator",
heroTitleLine1: "Building the",
heroTitleLine2: "Web's Future",
heroSubtitle: "I'm [Your Name] — I build platforms, tools, and open-source projects that help developers ship faster.",
primaryBtnText: "<i class='fas fa-rocket'></i> My Work",
secondaryBtnText: "Read More →",
heroTitleLine1 and heroTitleLine2 split into two animated lines — the engine handles the styling. Keep them short and punchy.
Step 5 — Brands ticker
The scrolling ticker below the hero is great for showing your tech stack:
brands: ["React", "Node.js", "Supabase", "Netlify", "Cloudflare", "PostgreSQL"],
brandsSubtitle: "technologies & platforms I work with daily",
Pass any strings — tool names, frameworks, platforms. The engine animates them as a continuous marquee.
Step 6 — Feature cards (Projects)
Each features entry renders as a glassmorphic card. Use them for your best projects:
featuresSectionLabel: "<i class='fas fa-layer-group'></i> FEATURED PROJECTS",
featuresSectionTitle: "Things I've Built",
features: [
{
title: "Project Alpha",
desc: "A brief description. What problem does it solve? What's the tech stack?",
icon: "<i class='fas fa-store'></i>"
},
{
title: "Project Beta",
desc: "Explain the key challenge and how you solved it. Mention notable outcomes.",
icon: "<i class='fas fa-code'></i>"
},
{
title: "Project Gamma",
desc: "Is it open source? A commercial product? Include a metric if you have one.",
icon: "<i class='fas fa-chart-bar'></i>"
}
// add up to 6 for a clean 3-column grid
],
Icons are raw HTML strings — any Font Awesome icon class works here.
Step 7 — Panels (About / Context blocks)
Panels are wider info blocks, great for explaining your professional angle:
panels: [
{
tag: "Fullstack",
title: "End-to-End Development",
desc: "From database schema to polished frontends — I own the whole stack."
},
{
tag: "Open Source",
title: "Building in Public",
desc: "I contribute to open-source, write technical articles, and document everything."
},
{
tag: "Creator",
title: "Products & Templates",
desc: "I create and sell UI kits, templates, and dev tools for fellow developers."
}
],
The tag renders as a small label chip above the title. Use it for categories or keywords.
Step 8 — Footer
The v0.0.2 footer is fully declarative with link columns, social icons, and legal links:
footer: {
tagline: "Fullstack developer · Open source creator · Problem solver.",
copy: "© 2025 Your Name · Built with devtemDesign",
columns: [
{
heading: "Platforms",
links: [
{ label: "My App", href: "https://yourapp.com" },
{ label: "npm", href: "https://npmjs.com" }
]
},
{
heading: "Writing",
links: [
{ label: "dev.to", href: "https://dev.to" },
{ label: "LinkedIn", href: "https://linkedin.com" }
]
},
{
heading: "Code",
links: [
{ label: "GitHub", href: "https://github.com" }
]
}
],
social: [
{ icon: "fab fa-github", href: "https://github.com", label: "GitHub" },
{ icon: "fab fa-linkedin", href: "https://linkedin.com", label: "LinkedIn" },
{ icon: "fab fa-dev", href: "https://dev.to", label: "dev.to" },
{ icon: "fab fa-npm", href: "https://npmjs.com", label: "npm" },
{ icon: "fab fa-codepen", href: "https://codepen.io", label: "CodePen" }
],
legal: [
{ label: "MIT License", href: "#" }
]
}
Step 9 — Optional: Custom accent colors
All visual variables are CSS custom properties. Override them after including the engine stylesheet:
<style>
:root {
--accent: #ff7b2c; /* primary accent */
--accent2: #ff2c7b; /* secondary accent */
--glass-bg: rgba(20, 20, 40, 0.5);
}
</style>
This lets you brand the page without touching the engine internals.
The full config at a glance
Here's the complete template — copy it, fill in your details, and you're done:
What you just built
In a single JS config object you defined:
- Animated navbar with CTA
- Full hero with tag, two-line title, subtitle, and dual buttons
- Scrolling tech stack ticker
- 6-card project grid with custom icons
- 3 contextual panels
- Structured footer with columns, social links, and legal
Zero boilerplate. No bundler. No framework.
Resources
-
npm:
npm i devtemdesign - Docs: design.devtem.org/docs
- Live demo: design.devtem.org
- GitHub: github.com/devtem-dev/devtemDesign
- DevTemple: @devtemDesign
If you build a portfolio with devtemDesign, drop the link in the comments — I'd love to see what you make with it.
