What you get
- One offline HTML site with home, services, pricing, plan pages, work, case studies, about, process, contact, terms and 404
- A plan grid with one featured package, comparison table and optional quarterly billing
- Case studies with phone and browser screens built in HTML, not screenshots
- A validator for routes, data integrity, accessibility and sample leftovers
- Optional portrait cut-out and project images with PopNow after a price quote
Good for
- Freelance UI, UX, brand and web designers
- Solo developers, illustrators and photographers who sell packages
- Consultants and coaches with fixed-scope offers
Not for
- Agencies with a team and many service lines
- Online shops selling physical products
- Quiet, image-led portfolios
How to use it
In Claude or ChatGPT
Use the PopNow skill "Freelance Designer Website" (freelance-designer-website) for this: Build my site. I'm Dana Oyelowo, a product designer in Leeds. Packages: Audit 1,200 GBP (1 week), Sprint 4,800 GBP (3 weeks), Retainer 3,500 GBP/month. Projects are in notes/projects.md.
In a coding agent
/popnow-freelance-designer-website Build my site. I'm Dana Oyelowo, a product designer in Leeds. Packages: Audit 1,200 GBP (1 week), Sprint 4,800 GBP (3 weeks), Retainer 3,500 GBP/month. Projects are in notes/projects.md.
Then try
Quote cutting my portrait out of photos/me.jpg for the hero.
Two projects have no photos. Quote identity images in the same series for them.
What to have ready
- Your services and two to four packages with real prices and timelines
- Two or more projects with the problem, decisions and outcome
- A half-length photo of yourself on a plain background and photos of your work
- Optional: a PopNow API key
Similar skills
View all →- Web
3D Avatar Maker
+25Build a cute soft-toy 3D character in your browser and save it as a transparent PNG or a 3D page.
- Web
Calendar Heatmap
+25A year of daily activity as a shaded calendar grid, with streaks, totals and keyboard access.
- Web
AI SaaS Landing Page
+25Warm sand paper, hairline rails and hatched gutters around a live kanban board where an assistant plans tasks.
- Web
Animated Hero Section
+25A landing-page hero with a gently rotating headline word, two buttons and a wide image frame.
- Web
Beverage Brand Website Template
+25A sunny drinks or snack brand site with shop, case builder, stockist map and demo checkout in one file.
- Web
Shader Hero Agency Website
+25A live orange-heat shader hero behind a bottom-pinned statement, pill nav and a staggered case-study grid.
- Web
Dark SaaS Landing Page
+25A dark, motion-rich marketing site for a software product, delivered as one self-contained HTML file.
- Web
Designer Portfolio Website
+25Six tilted cards hover round a fading headline on calm grey, one red portrait card, editorial case studies.
- Web
Developer Portfolio Website
+25A dark personal site for engineers with case studies, writing, talks, a résumé and a contact form.
- Web
Editorial SaaS Website
+25Navy split hero, a five-line serif headline beside a documentary still, slanted bands and one cobalt accent.
- Web
Glassmorphism Website Template
+25Frosted glass pills on a near-black film, a huge serif headline with one italic word and an email capture.
- Web
Hardware Product Website
+25Huge hairline model names on silver studio shots, frosted spec cards, a to-scale lineup and a hardware bento.
- Web
Interactive Architecture Diagram
+25An offline, clickable system diagram built from a checked JSON model, with the evidence behind each box.
- Web
Interactive Grid Hero
+25A dark grid of fine strands that bends toward the cursor and rolls a glowing ring out from every click.
- Web
Knowledge Graph Explorer
+25Turn project notes into an offline, searchable graph where every claim links back to its source line.
- Web
KPI Dashboard Template
+25Four KPI tiles with change chips over a glowing line chart, a breakdown table and target bars on warm paper.
- Web
Landing Page from AI Mockups
+25See three full-page designs first, pick one, and your agent builds it as clean, responsive code.
- Web
Magazine Website Template
+25A print-quality magazine site with articles, topics, a small shop and subscriptions, as one HTML file.
- Web
Particle Animation Hero
+25Copy on warm paper beside a turning sphere of ink and teal dots that reshapes per idea and scatters on scroll.
- Web
Personal Brand Website
+25A portrait feathered into warm paper under a thin bracket, with light-and-bold statements on either side.
- Web
Pet Store Website Template
+25A working pet supply shop with catalog, variants, bag, refill planner and demo checkout in one HTML file.
- Web
Podcast Website Template
+25A podcast site with a playable hero, episode archive, guest pages and a player that keeps playing.
WebHand-Drawn Pricing Section
+25A notebook-style pricing table with tilted ink cards, a yearly switch and dark mode, in one offline file.
- Web
Cinematic Product Launch Page
+25Film-lit near-black page: serif title card over drifting light, letterboxed night scene, reservation form.
- Web
Research Paper Website
+25A project page for your paper with an interactive Figure 1, results, limitations and one-click citation.
- Web
Admin Dashboard Template
+25A working back-office console with charts, tables, kanban and calendar, built as one offline HTML file.
- Web
SaaS Landing Page Template
+25A calm, light marketing site for a software product with a working product console, pricing and sign-up.
- Web
Scrapbook Portfolio Website
+25A multi-page online CV made of paper objects, with case studies and a printable resume.
- Web
Sneaker Store Website Template
+25A complete footwear or apparel shop with catalog, product pages, bag and demo checkout in one HTML file.
- Web
Sports Club Website Template
+25A club, gym or studio site with timetable, coach pages, memberships, court plan and booking in one file.
- Web
Testimonial Wall Section
+25A masonry or slowly drifting wall of customer quotes that only ships quotes people agreed to.
- Web
Travel Agency Website Template
+25A photo-led site for tours, guides or lodges with trip search, booking requests and a trip-finder quiz.
- Web
Workflow Automation Landing Page
+25Graphite page, small left-aligned headline, and a live node graph below that runs, retries and streams logs.
Questions
How does the hero portrait work with my own photo?
Send a half-length photo on a plain background. PopNow's background remover cuts it out to a transparent image, and an SVG filter in the page tones it pale blue in light mode and keeps it right in dark mode, so any photo matches the design.
Can I sell packages without a checkout?
Yes. Each package has its own page with schedule, deliverables, fit and FAQ, and its button leads to the brief form with the package preselected. Connect the form to your inbox or a form service when you go live.
My projects have no good photos. What then?
PopNow can generate one material or place study per project in a single consistent series, quoted before it runs. They are clearly mood images, never presented as photos of delivered work; case-study screens are built in HTML.
Does it work for illustrators or consultants?
Yes. Work becomes a portfolio of image-only projects for visual work, and for consultants services become offers and plans become packages, with case pages told as problem, approach and outcome.
Is this a freelance graphic design portfolio or a sales site?
Both. Case studies show your freelance graphic design portfolio, while the package pages and brief form turn visitors into paid projects. It also fits a freelance web designer portfolio: swap the work samples and keep the packages.