DEV Community: DesignToCodes

Developer, Designer, or One-Pager? Picking the Right Portfolio Template

DesignToCodes — Tue, 25 Aug 2026 06:53:49 +0000

Developer, designer, or launching-fast? The right portfolio template isn't the prettiest — it's the one built for how your field shows its work. Quick guide.

One question decides it: what does your proof look like?

Devs prove with projects, code, performance. Designers prove with visuals in context. Juniors/freelancers prove with a focused, fast first site. Match the template to that.

The picks

NextGenAppsPro — Next.js, fast, code-friendly, case-study ready. For developers. (free + pro editions)
Grafik V2 — gallery-led, visual-first (Next.js or Elementor). For designers.
MyDevFolio — free one-page starter with a Figma file. For launching today.

What they share

Same bar: fast enough for Core Web Vitals, responsive on real devices, clean license. The choice is fit, not quality.

Not sure? Browse the DesignToCodes portfolio templates.

What matters more to you in a portfolio base — speed or visual polish? 👇

The Pricing Table Pattern That Converts (Copy-Paste Code)

DesignToCodes — Fri, 21 Aug 2026 09:50:46 +0000

People don't read pricing tables. They scan them for permission to choose. Design for that and conversions follow. Copy-paste pattern below.

The rules

Three tiers — two feels thin, four paralyses
Highlight the middle — "Most popular" badge + a subtle lift
Value lines, not features — "Unlimited projects" > "project module"
One CTA per plan, same weight

Copy-paste it

.pricing{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.tier{border:1px solid #e5e7eb;border-radius:12px;padding:24px;text-align:center}
.tier.featured{border-color:#4a9eff;box-shadow:0 8px 30px rgba(74,158,255,.15);transform:translateY(-6px)}
.badge{background:#4a9eff;color:#fff;padding:3px 10px;border-radius:20px}

(Full markup in the post — three .tier cards, the middle one .featured.)

Honest psychology

Anchoring makes the middle plan feel reasonable; "most popular" is social proof; fewer benefit-led lines lower the effort of comparing. Not manipulation when the plans are fair.

Want tested blocks? Grab DesignToCodes UI section kits.

Do highlighted "most popular" plans actually convert better for you? 👇

The Website Speed Checklist That Actually Moves Core Web Vitals

DesignToCodes — Tue, 18 Aug 2026 06:49:15 +0000

Almost every slow website fails on the same handful of things. Here's the checklist that actually moves Core Web Vitals — framework-agnostic, no fluff.

Measure first

PageSpeed Insights: mobile field data. LCP (load), INP (interactivity), CLS (shift). Fix in that order.

Images (biggest win)

WebP/AVIF, sized to their slot (not 3000px into 400px)
loading="lazy" below the fold
Preload the hero (it's your LCP)

JavaScript (INP killer)

Audit third-party scripts — chat/analytics/ads are often the heaviest thing
defer/async non-critical scripts
Code-split heavy features

Fonts, caching, CLS

Self-host fonts, font-display: swap
Long cache headers + a CDN + Brotli
width/height on everything → no shift

The uncomfortable one

If you've done all this and you're still slow, the template is the problem. Page-builder themes ship MBs you can't optimize away.

Need a lean base? Browse fast DesignToCodes templates.

What's the worst offender you've found in a Lighthouse audit? 👇

What Solopreneurs Actually Need From a Website Template

DesignToCodes — Fri, 14 Aug 2026 07:07:18 +0000

When you're the whole company, your website is your storefront, sales rep, and credibility at once. Here's what solopreneurs actually need from a template (and what to ignore).

Optimize for one flow

What do you do → is it for me → can I trust you → how do I hire you. Build around that, not around showing off. A prospect with no one to follow up with needs the answers fast.

What to look for

Clear hero: what you do + one action (book/quote/contact)
Services or work, each with a benefit
Proof — testimonials/results (trust is the whole sale)
About + your face (people buy from people)
Frictionless booking/contact
Fast, editable solo, no lock-in

Free vs paid

Free is great for starting/testing if you'll edit it yourself. Pay for a specific look, updates, support, or a guaranteed performance standard. A great free template + your time beats a mediocre paid one — but your time isn't free.

Starting out? The free, hand-coded NextGenAppsPro is a solid base.

Solo founders: what converts best for you — a form or a scheduling link? 👇

Build a Fast Next.js Portfolio (App Router, next/image, Deploy)

DesignToCodes — Tue, 11 Aug 2026 06:16:09 +0000

A Next.js portfolio is the best React project you can ship — it teaches routing, images, metadata, and deployment, and you end up with something you'll actually use. Here's the whole build.

Scaffold + structure

npx create-next-app@latest my-portfolio  # App Router
app/
  page.tsx            // home
  projects/[slug]/page.tsx
  components/Hero.tsx

App Router = server-rendered by default, so your content is in the HTML crawlers read.

Images + SEO (the two most-skipped bits)

import Image from 'next/image'
<Image src="/work.webp" alt="Dashboard" width={1200} height={800} priority />

export const metadata = {
  title: 'Sam Rivera — Front-End Engineer',
  alternates: { canonical: 'https://samrivera.dev' },
}

priority on the hero (it's your LCP). Metadata API for titles/canonicals, no plugin.

Deploy

npm i -g vercel && vercel

HTTPS, CDN, auto-deploys on push. Add a domain, done.

Before you ship

next/image + priority hero, next/font, Server Components by default, PageSpeed on mobile.

Want a head start? NextGenAppsPro ships this structure ready.

Building yours from scratch or a template? 👇

A Responsive Image Gallery in ~30 Lines (Grid + Lightbox, No Library)

DesignToCodes — Fri, 07 Aug 2026 11:11:39 +0000

You don't need a carousel library for a gallery. CSS grid + ~15 lines of JS gives you a responsive, lazy-loaded gallery with a lightbox — and it loads faster than any plugin. Copy-paste below.

Grid does the responsive part for free

.gallery{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:8px}

auto-fill + minmax() = reflows on every screen, zero media queries.

Lightbox, no library

const g=document.querySelector('.gallery');
const box=Object.assign(document.createElement('div'),{className:'lightbox'});
document.body.append(box);
g.addEventListener('click',e=>{const a=e.target.closest('a');if(!a)return;
  e.preventDefault();box.innerHTML='<img src="'+a.href+'">';box.classList.add('open');});
box.addEventListener('click',()=>box.classList.remove('open'));

The perf bits that matter

WebP/AVIF thumbnails sized to their slot (not 3000px into 400px)
loading="lazy" below the fold
width/height set → no layout shift
Full-res image loads only in the lightbox, on click

Want a tested one? Grab a free responsive gallery section.

Vanilla lightbox or a library — what do you reach for? 👇

What Makes a Professional Portfolio Website (12 Examples Analyzed)

DesignToCodes — Tue, 04 Aug 2026 07:05:11 +0000

I've reviewed portfolios across dev, design, and writing, and the effective ones all do the same thing: they prove one capability quickly, rather than showing everything. Here's the pattern, with 12 examples.

Answer 3 questions above the fold

Can you do the work? Can you explain it? Can I reach you? A professional portfolio answers all three before the first scroll. Most bury them under a mood hero and "creative professional."

The case-study formula

Problem  — what needed solving, for whom
Approach — your role + the key decision
Result   — a number (time, users, revenue, %)
Link     — live demo / artifact

"Redesigned onboarding, cut drop-off 24%" earns the interview. "Worked on onboarding" doesn't.

12 patterns that work

Case-study-first (dev), work-in-context (design), clips+outcomes (writing), results-led (consulting), story-driven (UX), gallery-first (photo), metrics dashboard (marketing), GitHub+demos (eng), services+pricing (freelance), projects+trajectory (junior), one-specialty (multi-disciplinary), and the minimalist one-pager. Pick the one that fits what you want more of.

Speed is a professionalism signal

A 4-second portfolio undercuts the work. LCP < 2.5s, modern image formats, reserved dimensions.

Want a fast base? Browse DesignToCodes portfolio templates (dev, designer, one-page).

What field are you in, and what's your one strongest project? 👇

How We Make Portfolio Templates That Actually Pass Core Web Vitals

DesignToCodes — Fri, 24 Jul 2026 09:30:02 +0000

Most portfolio templates are slow for one reason: they’re built on page builders, not code. Here’s how we make ours pass Core Web Vitals out of the box — and how to check any template yourself.

Where the weight comes from

Page builders and stacked animation libraries look great in a demo and ship multi-MB payloads with render-blocking scripts and layout shift. For a portfolio — where you’re being judged on craft — a slow site argues against you.

How we keep it lean

Hand-coded, semantic HTML (no builder bloat)
Minimal JS — interactivity only where it earns its place (helps INP)
Optimized images: modern formats, sized, lazy-loaded, dimensions reserved
Self-hosted fonts (no swap flash)
Next.js server rendering where it counts (e.g. Grafik V2)

Why fast = better ranking

CWV is a ranking signal, and server-rendered HTML is what crawlers and AI engines read most reliably. Performance is SEO and AI visibility in one.

Verify it

Run any of our portfolio template demos through PageSpeed (mobile), check transferred size in dev tools, and compare to a page-builder template. The claims are checkable on purpose.

Test it: run a DesignToCodes portfolio template through Lighthouse and compare.

What’s the slowest "premium" template you’ve ever opened in dev tools? 👇

The Cleaning Business Website That Actually Books Jobs (7 Sections)

DesignToCodes — Tue, 21 Jul 2026 07:46:02 +0000

A cleaning business website has one job: turn a local searcher into a booked job. Most bury the quote button under a slideshow. Here are the 7 sections that actually book work.

The visitor’s 4 questions

Do you clean my type of place? Do you serve my area? Can I trust you? How do I book? Answer those fast and you win the job.

The 7 sections

Hero with a "Get a free quote" CTA (above the fold)
Services, with "from $X" where possible
Service areas (also helps local SEO)
Trust signals — reviews, insurance, guarantee
Before/after gallery (proof beats adjectives)
"How it works" 3-step flow
Short quote form + visible phone

Don’t lose the lead in the form

Ask for the minimum — name, contact, type of clean, area. Every extra field is a lost booking. Offer a phone option and confirm instantly.

Local SEO is the multiplier

Complete the Google Business Profile, "[service] in [city]" in titles, LocalBusiness + Review schema, steady reviews. A fast template + complete profile beats a prettier site that skips this.

Want a base built for this? See the DesignToCodes cleaning templates.

Service-business folks: what’s converted best — instant quote or callback? 👇

What a Gym Website Template Actually Needs (and How to Pick One)

DesignToCodes — Fri, 17 Jul 2026 10:20:38 +0000

Most gym websites bury the "Join" button under three scrolls of brand storytelling. If you’re picking a gym template, here’s what actually matters.

The template’s job: turn a local into a member

Lead with the conversion. Hero = the offer + a join/trial button, above the fold. Then the class schedule (everyone checks it), then pricing (show it — hiding prices kills trust), then real photos and proof.

Must-have sections

Hero with a join/trial CTA
Scannable class schedule
Clear membership pricing
Real trainer/facility photos (not stock)
Location, hours, map

How to pick

Match it to your model — boutique studio (sleek one-pager), multi-location (schedules + location pages), PT (booking-first). Then check the demo: fast on mobile, schedule/pricing easy to edit, design doesn’t fight your brand.

Don’t skip local SEO

Gym traffic is local and high-intent: complete your Google Business Profile, put your city in titles/headings, add LocalBusiness schema, keep NAP consistent.

Best 3 gym website templates 2026

MuscleCare – OnePage Fitness Framer Template

Gymkear – Professional Framer Template for Gym Websites

FitKinGym – Best Fitness and Gym Framer Template

Want a fast base? Gymkear is a Next.js gym template with these sections ready.

Gym owners/devs: what converts best for you — free trial or first-class-free? 👇

Is Next.js Actually Good for SEO? A Straight Answer

DesignToCodes — Tue, 14 Jul 2026 12:23:52 +0000

"Is Next.js good for SEO?" Short answer: yes, genuinely — as long as you don’t undo it. Here’s the honest version with the caveat that actually matters.

Why it’s strong

Server-rendered HTML by default (App Router) — crawlers and AI engines read the full page.
The Metadata API: per-route titles, descriptions, canonicals in code, no plugin.
sitemap.ts / robots.ts generate and stay in sync.
next/image + next/font + Server Components make Core Web Vitals the default path.

export const metadata = {
  title: 'Free Business Templates',
  description: 'Fast, SEO-ready templates.',
  alternates: { canonical: 'https://example.com/templates' },
}

The caveat (where devs shoot themselves in the foot)

Mark everything 'use client' and you push content back into JS — crawlers see an empty shell. Skip next/image and CWV tanks. Client-render a page that should be static, and the content is hidden. The framework helps; it doesn’t babysit.

Verdict

Use server rendering + the Metadata API + the image/font tools, and Next.js is one of the best SEO frameworks going. Ignore them, and it’s React with extra steps.

Want an SEO-ready base? Grab a DesignToCodes Next.js template.

What’s bitten you hardest — client components or a canonical mistake? 👇

The CTA Section Formula That Converts (Copy-Paste Code)

DesignToCodes — Fri, 10 Jul 2026 06:41:36 +0000

Your CTA isn’t underperforming because the button’s the wrong blue. It’s underperforming because you’re asking for three things at once. Here’s the copy-paste pattern that fixes it.

One ask, no competition

The fastest conversion killer is two equally loud buttons. Pick the single most valuable action and make everything else quieter (at most, a text link). Focus converts; choice paralyses.

Copy-paste it

<section class="cta">
  <h2>Ready to launch faster?</h2>
  <p>Templates that pass Core Web Vitals.</p>
  <a class="btn" href="/templates">Browse templates</a>
</section>

.cta{max-width:640px;margin:0 auto;padding:72px 24px;text-align:center}
.btn{display:inline-block;background:#4a9eff;color:#fff;padding:14px 30px;border-radius:8px}

Label the button like a promise

"Submit" describes a mechanism. "Get my quote" / "Start building" describes the outcome. The button should finish the sentence "I want to…". It’s the most-read text in the section — don’t waste it.

Repeat the same ask

Hero CTA, then again after your proof, then at the foot — same wording every time. One decision repeated beats five different ones.

Explore the best CTA section designs you should use in your projects

Want tested CTA blocks? Grab the free DesignToCodes CTA sections.

What’s your highest-converting button label? Mine’s boringly literal 👇