FSCSS tutorial for FSCSS tutorial

Posted on Jun 23

Build a Stunning Developer Portfolio in Minutes with devtemDesign

#beginners #webdev #javascript #portfolio

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> &nbsp; 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.

DEV Community