What you get
- One offline HTML file, or real routes in your React, Vue, Svelte or Astro project
- Home, work and case studies, writing and articles, talks, Uses, About, résumé, contact and 404
- Project covers drawn as HTML product panels on photographic backdrops
- Command palette, experience tabs, repo grid, filters and validated forms
- Optional PopNow backdrops or photos, quoted before you pay
Good for
- Engineers and indie makers who want a personal site
- Job seekers who need a hire-me page with case studies
- Developers who write or speak and want one home for it
Not for
- Light or colorful brands: the design is dark only
- Visual designers whose work is mostly images
- Company sites or online stores
How to use it
In Claude or ChatGPT
Use the PopNow skill "Developer Portfolio Website" (developer-portfolio-website) for this: Build my personal site. I'm a backend engineer in Berlin; my CV, three projects and two blog posts are in ./notes.
In a coding agent
/popnow-developer-portfolio-website Build my personal site. I'm a backend engineer in Berlin; my CV, three projects and two blog posts are in ./notes.
Then try
Make a backdrop for a fourth project in the same dark stone style and quote it first.
Remove the talks section and turn Uses into Process.
What to have ready
- Your jobs, dates and concrete results
- Two to six projects with the problem, key decisions and outcomes
- Posts, talks, repos and tools you actually have
- Your own portrait and any real event photos
Similar skills
View all →3D Avatar Maker
+3Build a cute soft-toy 3D character in your browser and save it as a transparent PNG or a 3D page.
Calendar Heatmap
+3A year of daily activity as a shaded calendar grid, with streaks, totals and keyboard access.
AI SaaS Landing Page
+3Warm sand paper, hairline rails and hatched gutters around a live kanban board where an assistant plans tasks.
Animated Hero Section
+3A landing-page hero with a gently rotating headline word, two buttons and a wide image frame.
Shader Hero Agency Website
+3A live orange-heat shader hero behind a bottom-pinned statement, pill nav and a staggered case-study grid.
Dark SaaS Landing Page
+3A dark, motion-rich marketing site for a software product, delivered as one self-contained HTML file.
Designer Portfolio Website
+3Six tilted cards hover round a fading headline on calm grey, one red portrait card, editorial case studies.
Editorial SaaS Website
+3Navy split hero, a five-line serif headline beside a documentary still, slanted bands and one cobalt accent.
Glassmorphism Website Template
+3Frosted glass pills on a near-black film, a huge serif headline with one italic word and an email capture.
Hardware Product Website
+3Huge hairline model names on silver studio shots, frosted spec cards, a to-scale lineup and a hardware bento.
Interactive Architecture Diagram
+3An offline, clickable system diagram built from a checked JSON model, with the evidence behind each box.
Interactive Grid Hero
+3A dark grid of fine strands that bends toward the cursor and rolls a glowing ring out from every click.
Knowledge Graph Explorer
+3Turn project notes into an offline, searchable graph where every claim links back to its source line.
KPI Dashboard Template
+3Four KPI tiles with change chips over a glowing line chart, a breakdown table and target bars on warm paper.
Landing Page from AI Mockups
+3See three full-page designs first, pick one, and your agent builds it as clean, responsive code.
Magazine Website Template
+3A print-quality magazine site with articles, topics, a small shop and subscriptions, as one HTML file.
Particle Animation Hero
+3Copy on warm paper beside a turning sphere of ink and teal dots that reshapes per idea and scatters on scroll.
Personal Brand Website
+3A portrait feathered into warm paper under a thin bracket, with light-and-bold statements on either side.
Cinematic Product Launch Page
+3Film-lit near-black page: serif title card over drifting light, letterboxed night scene, reservation form.
Admin Dashboard Template
+3A working back-office console with charts, tables, kanban and calendar, built as one offline HTML file.
SaaS Landing Page Template
+3A calm, light marketing site for a software product with a working product console, pricing and sign-up.
Scrapbook Portfolio Website
+3A multi-page online CV made of paper objects, with case studies and a printable resume.
Sneaker Store Website Template
+3A complete footwear or apparel shop with catalog, product pages, bag and demo checkout in one HTML file.
Workflow Automation Landing Page
+3Graphite page, small left-aligned headline, and a live node graph below that runs, retries and streams logs.
Questions
Why are the project covers not screenshots?
Each cover is a small product interface built in HTML and CSS with data from your domain. It stays sharp at every size, matches the site's colors and never shows private data from a real screen.
Do I need PopNow for this?
No. The bundled stone and sand backdrops are reusable for your projects, and talks can use drawn thumbnails. PopNow is optional for new backdrops, a desk photo or a regraded portrait, and every run is priced first.
What if I have no talks or open-source repos?
Sections without real content are removed together with their links. The skill never invents talks, repos, star counts or clients for a real person.
Can it go into my existing Next.js app?
Yes. It detects the stack, keeps unrelated files and rebuilds the same routes as real pages with the same tokens and fonts.