Contact
All projects
Portfolio
Live in production

Portfolio Websites for Professionals — 17 Sites

Seventeen live one-page portfolio websites we built for independent professionals: a photographer, a cybersecurity researcher, developers, marketers, a content writer with a nursing background, a UX designer, an agronomist and more. Each is a static HTML, CSS and JavaScript site on Netlify.

For Independent professionals
  • Marketing site
Niyati Tiwari UX designer portfolio hero on a black background

Overview

This page collects the personal portfolio websites we have built for individual professionals. Seventeen are live today, each at its own Netlify address. The people behind them do very different work: a photographer and video producer, a cybersecurity researcher, a full-stack engineer who is also a certified Scrum Master, a junior developer who moved over from IT support, a robotics software engineer, a UX designer, a content writer with a nursing background, two social media strategists, an Instagram influencer, a Facebook ads specialist, a marketing strategist, a business strategist and keynote speaker, a communication student, an agronomist and a freelancer. The set also includes a staging build for a creative agency.

Each site is one scrolling page whose first screen says who this is, what they do and what to do next. Experience, services or projects, testimonials and contact follow. We start from an HTML theme and restyle it around the person, so a cybersecurity researcher's dark, resume-led page looks nothing like an influencer's pink one.

Under the hood they are static HTML, CSS and JavaScript, built with jQuery and, on most, the Bootstrap grid, with no server code. Three send their contact forms to email through FormSubmit. Of the footers that carry a year, most say 2021; the newest, the agency staging build, says 2025. Most footers credit Web Cannon-Z, CountryDevs' sister company: the sites were built under that name.

How we build a one-page portfolio site

Every site in this collection follows the same build pattern, and all of it can be checked on the live pages.

One page, anchored sections

The menu scrolls to sections on the same page (About, Skills or Services, Projects, Contact) rather than opening new ones. A visitor arriving from a CV link sees everything in one scroll, and there is one page to keep current.

A theme, restyled around the person

We start from an HTML theme and change what makes it personal: palette, type, imagery and the order of sections. Niyati's page is black with a serif headline, Natalie's is pink with leaf illustrations, and Rosalina's is a single illustrated scene exported from Webflow.

Static files and a small toolset

Job What the sites use Where to see it
Layout and grid Bootstrap (14 of the 17), UIkit most pages; UIkit on Stephanie R.'s
Scroll reveals WOW.js, AOS, animate.css Tierni McGinn, Derek Rhodes, Sydney
Illustrated motion Lottie Rosalina Williams, Rutz, Calvin R. Woodberry
Typed headlines short custom scripts Nadia Amir, Rosalina Williams, Hookana
Sliders and lightboxes Swiper, Owl Carousel, Slick, Magnific Popup Ali Zera, Natalie, Majed
Contact forms FormSubmit, no backend Natalie, Marc, Nadia Amir

Hosting

All 17 are served from Netlify. A static site there has no server of ours to run or patch, and an update goes live as soon as the files are deployed.

What goes on a portfolio's first screen

We have no conversion data for these sites, so this is about structure, not measured results. Across the seventeen, the first screen keeps coming back to four jobs.

  1. Name and role in one line. “I'm Niyati UX Designer.” “I'm Sydney Barrow, A Corporate Communication Student.” The visitor knows whose page this is before scrolling.
  2. One next step that fits the visitor. Recruiters get a resume: Majed's and Amir Moazami's heroes lead with Download Resume. Clients get a quote: Rutz's leads with Free Quote. Daniel's points to his publications and Ali Zera's to his galleries.
  3. A face or a signature image. Many use a portrait. Where a photo isn't wanted, an illustration does the job: a developer at three screens for Amir, a self-driving car for Devansh, a farm for Daniel, an eye for Niyati.
  4. Proof close to the top. Rutz's results band (return on ad spend, conversion rate, CPM) sits straight under the hero, the Hookana build shows a row of brand logos, and Stephanie R.'s hero image is a portrait card from a 2019 industry event.

The challenge

A personal portfolio has one job. When a recruiter, client or event organiser follows the link from a CV, a LinkedIn profile or an Instagram bio, the page has to say who the person is and what to do next, and it has to work on a phone. Who that visitor is changes from site to site: Nadia's and Amir's pages are built for employers, with a CV or resume to download; Rutz's, Marc's and Calvin's sell services; Derek invites speaking bookings; Daniel's page points to his research publications.

These are individuals, not companies, so we kept the sites simple to keep online: one page each, with no database, no logins and no server of their own.

The solution

We built every site as a single scrolling page with anchored navigation, typically About, Skills or Services, Projects or Portfolio, and Contact. Each starts from an HTML theme that we restyle around the person: colour, type, photography or illustration, and the order of sections. Marc's, Derek Rhodes's and Sydney's pages run on the same base, for example, yet read as three different people.

Motion comes from small, single-purpose libraries: WOW.js, AOS and animate.css for scroll reveals, Lottie for illustrated animation, anime.js on Niyati's page, and GSAP with ScrollTrigger only on the Hookana build. Three heroes type a line out letter by letter. The contact forms on Natalie's, Marc's and Nadia's sites post to FormSubmit, which forwards each message by email, so no backend is needed. Every site is deployed to Netlify.

The impact

Seventeen of these sites were online when we visited them on 17 October 2026, all served by Netlify, and the screenshots on this page come from that visit. Most of the footers that carry a year say 2021, and those sites are still up.

Three of the original twenty are not shown here: one site no longer resolves, and two now show content we can't confirm as our finished build. We hold no traffic, enquiry or hiring figures for any of these sites, so we don't report any.

Features

What we built into Portfolio Websites for Professionals

Niyati Tiwari — UX designer

A black page with a serif “I'm Niyati UX Designer.” headline, an eye illustration and four gradient tiles. Below the hero, large tiles lead to About, Projects and a contact form, with anime.js handling the motion.

Ali Zera — photographer and video producer

Opens as a full-screen black-and-white slider, numbered 01 to 04, with galleries for travel, animal and people photography and a preview of the next slide. A card on the first screen sums up eight-plus years of product, modelling, event and photojournalism work, and a toggle switches between day and night themes.

Rosalina Williams — social media strategist

One illustrated scene exported from Webflow: a line-drawn portrait over clouds and a mountain, with Lottie leaf and arrow animations, a custom cursor and a chat bubble that types out her name and then her role.

Tierni McGinn — content writer and registered nurse

A white split hero carries her pitch as a content writer. Her skills list nursing alongside writing, and the testimonials come from a psychotherapist, a financial coach and a registered nurse.

Majed — cybersecurity researcher and advisor

A dark page for Dr. Majed Afandi with shapes that drift as the mouse moves, a Download Resume button in the hero, and sections for his video message, skills, top clients and case studies, plus a Knowledge Center link in the menu.

Amir Moazami — full-stack engineer and Scrum Master

A white hero with an illustration of a developer at three screens and a Download Resume button. The page introduces him as a full-stack software engineer and certified Scrum Master and gives his Pluralsight results a section of their own.

Nadia Amir — junior full-stack developer

Built around a career change: the hero types out “I'm a Junior Full Stack Developer”, and the page traces her move from IT support analyst through a 12-week coding bootcamp in Manchester. Skill bars and project cards follow, from a React weather app to a news API with separate front-end and back-end.

Devansh — robotics software engineer

A cyan hero with a falling-particle overlay and a self-driving-car illustration. The page sets out his robotics projects, a 1/16-scale self-driving car and a boom barrier that detects face masks, then a dated timeline of university robotics teams and labs.

Derek Rhodes — business strategist and keynote speaker

Opens with a long personal statement under “Meaningful Work – Meaningful Life” beside a portrait set into a blue blob. Service blocks for social-impact consulting, business work and speaking follow, then a list of his keynote talks.

Stephanie R. — social media strategist

Her hero pairs “Social Media Strategist” with an illustrated portrait card from the 2019 Creatives Meet Business Experience event. Five service cards and testimonials follow, built on the UIkit framework rather than Bootstrap.

Calvin R. Woodberry — marketing strategist

Sets his name in large type beside an illustrated figure, with a light/dark mode switch in the header. A four-step method (research, write, develop, promote) and a dated experience timeline follow, starting with his Dell Technologies role.

Natalie — Instagram influencer

A pink page with a script logo and leaf illustrations around a rotating hero, “Reach Out To The Right People!”. Sections cover product and brand influencing, achievement counters, client testimonials and a contact form.

Rutz (Bullseye Targeting) — Facebook ads specialist

Built as a service page rather than a CV: the hero offers Facebook ad campaign setup and management with a Free Quote button, a results band for return on ad spend, conversion rate and CPM sits right below, and the page carries its own quote form.

Hookana — creative agency (staging build)

A staging build of a performance-creative agency's home page: an oversized typewriter headline, a row of brand logos, service blocks for video editing, graphic design, motion graphics and AI visuals, and portfolio cards by platform. It is the one site in the set that uses GSAP with ScrollTrigger.

Marc — freelance services

A teal hero with drifting clouds and a 3D avatar ringed by social icons. Service cards run from graphic design and video to web, app and game development, and a contact form closes the page.

Sydney — communication student

Made for internship applications: a centred hero over a globe illustration, then a dated timeline of part-time jobs, an education section and a portfolio of her writing and event work.

Daniel — agronomist

A page for an agronomist and PhD candidate in turf ecology, with a farm illustration and a Check publications button. One section covers his agronomic advice to a golf club, focused on playing quality and non-chemical maintenance.

By the numbers
17
Live portfolio sites in this collection
20
Older one-site entries merged into this page
Screens

What Portfolio Websites for Professionals looks like

Ali Zera photography portfolio hero with a black-and-white portrait
A full-screen dark slider opening on “Hey there, I'm Alireza Razzaghi”, with a View Galleries link, a 01–04 slide counter and a preview of the next gallery.
Rosalina Williams illustrated portfolio hero with a typed chat bubble
An illustrated hero — a line-drawn portrait over clouds and a mountain line — where a chat bubble types out her introduction.
Tierni McGinn content writer portfolio hero
A split hero with “I'm Tierni McGinn”, a one-line pitch as a content writer and an About Me button beside a full-height photo of someone writing at a desk.
Majed cybersecurity portfolio hero on a dark background
A dark hero introducing Dr. Majed Afandi as a cybersecurity researcher, advisor and practitioner, with a Download Resume button, floating shapes and a cut-out portrait.
Amir Moazami software engineer portfolio hero
A white hero with his name, “Software Engineer & Full Stack Developer” and a Download Resume button beside an illustration of a developer at a three-screen desk.
Nadia Amir developer portfolio hero with typed headline
A centred intro with a round profile photo, a typed “I'm a Junior Full Stack Developer” line, GitHub, LinkedIn and email icons and a Hire me button.
Devansh robotics engineer portfolio hero with a self-driving car illustration
A cyan hero with a falling-particle overlay, “Hi there, I'm Devansh Chawla!”, a one-line robotics intro and an isometric self-driving-car illustration.
Derek Rhodes business strategist portfolio hero
A hero headed “Meaningful Work – Meaningful Life” with a five-paragraph introduction beside a portrait set into a blue blob shape.
Stephanie R. social media strategist portfolio hero
A “Social Media Strategist” hero with a one-line summary and an illustrated conference portrait, above cards for Strategy, Connection and Expertise.
Calvin R. Woodberry marketing strategist portfolio hero
A hero introducing Calvin R. Woodberry as a marketing strategist, with a short brand-ambassador summary, My Work and Let's Talk buttons and an illustrated figure.
Natalie Instagram influencer portfolio hero in pink
A pink hero with a script “Natalie Thi Do” logo, “Reach Out To The Right People! I'm An Instagram Influencer” and a cut-out portrait framed by leaf illustrations.
Bullseye Targeting Facebook ads specialist site hero
A Bullseye Targeting hero offering Facebook ad campaign setup and management, with a Free Quote button, an analytics illustration and a results band below.
Hookana creative agency staging site hero
The staging build of a creative agency's home page: an oversized typed headline, a View Portfolio button and a logo row headed “Trusted by Leading Brands Worldwide”.
Marc freelance portfolio hero with a 3D avatar
A teal hero with drifting clouds, “Hey! I'm Marc”, a one-line services pitch, Learn More and Contact buttons and a 3D avatar ringed by social icons.
Sydney corporate communication student portfolio hero
A centred hero, “I'm Sydney Barrow, A Corporate Communication Student”, above a globe illustration ringed by app icons.
Agronomist portfolio hero with a farm illustration
A “Hey There, I'm Daniel Hahn” hero explaining his work as an agronomist, with a Check publications button beside a farm illustration.
App screens

Inside the mobile app

Niyati Tiwari portfolio hero on a phone
On a phone the hero stacks: navigation on one line, the serif headline and statement, then the eye illustration.
Ali Zera photography portfolio hero on a phone
On a phone the slider keeps the full-bleed portrait, the headline, the View Galleries link and the slide counter.
Tierni McGinn portfolio hero on a phone
On a phone the split hero becomes one centred column — name, pitch and button — with the photo moved below.
Majed cybersecurity portfolio hero on a phone
On a phone the navigation collapses into a round menu button and the headline stacks above the resume button.
Project details
Tech stack
HTML5CSS3JavaScriptjQueryBootstrapUIkitWebflow (export)anime.jsGSAPLottieAOSWOW.jsSwiperOwl CarouselFormSubmitNetlify
FAQ

Questions about this project

Do you build portfolio websites for people who aren't designers?

Yes. Most of the sites in this collection are for people outside design: a cybersecurity researcher, a robotics software engineer, an agronomist, a content writer who is also a registered nurse, a communication student and a Facebook ads specialist, among others. Each page is shaped around what its visitors need, such as a resume download for recruiters or a quote form for clients.

What should a professional portfolio website show on its first screen?

On the sites we've built, four things: the person's name and role in one line, one next step that fits the visitor (a resume download for recruiters, a quote button for clients), a portrait or a signature illustration, and some proof near the top, such as a results band or client logos.

Can a static portfolio website have a contact form?

Yes. The contact forms on three sites here, Natalie's, Marc's and Nadia Amir's, post to FormSubmit, which forwards each message by email. The sites stay static files on Netlify with no backend to run.

Flying Pup Films — Film Studio Website and CMS
Previous
Flying Pup Films — Film Studio Website and CMS
Maple Safe — Disinfection Services Website for the Toronto Area
Next
Maple Safe — Disinfection Services Website for the Toronto Area
More work

Other things we shipped

All projects
Black home page with 'DAMIR PEHAR' in huge white type, View My Work and Get In Touch buttons and a row of phone screen mock-ups.Built
Portfoliofor Damir Pehar

Damir Pehar — UX Designer Portfolio Website

A personal portfolio website for Damir Pehar, a UX designer in Chicago. We built the home, work, about and contact pages and three long-form case studies on a customised GSAP template, with scroll-driven animation and a WebGL hover effect. It is complete, with no public URL on record.

HTML5CSS3JavaScriptGSAP (ScrollTrigger, ScrollSmoother)+3
7Pages built, including three long-form case studies
Case study
Jdee Media homepage hero reading Media Transcriptions Made EasyPrototype
Static Sitefor Jdee Media

Jdee Media — Transcription Service Homepage Design

A homepage design we built for Jdee Media, a media transcription service: a large display-type hero, cards for transcription, captioning and translation, and a closing call-to-action band. It never went live with final content; much of the body copy is still placeholder text.

HTML5CSS3JavaScriptSASS+1
Case study
Turf Agronomy home page with an aerial golf course photo and the line I am an elite level golf player, turf scientist and greenkeeper
Static Sitefor Daniel Hahn (Turf Agronomy)

Daniel Hahn Turf Agronomy — Golf Agronomist Website

A five-page website we built for Daniel Hahn, a turfgrass agronomist and applied scientist who advises golf courses: a photo-led home page, a career timeline, a publications list, an agronomy strategy page and a contact form.

HTML5CSS3JavaScriptSASS+1
Case study
Got a project?

Let's build the
next one together

Tell us what you're trying to ship. We'll come back with a scope, a timeline, and a fixed price — usually within 48 hours.

Start a project

Not ready for a full build? Start with a fixed-price Discovery Sprint, or get a code audit of an app someone else built.