01 — PERSONAL INTRO
Introduce Yourself
The first thing people see on your About page. Three styles: centered portrait, side-by-side, and a full-width photo banner.
Intro A — Centered Portrait + Name + Bio + Links INTRO
portrait
Your Name
Web Designer & Developer

Write a few sentences about yourself here. Who you are, what you do, what you care about. Keep it real, keep it short.

Intro B — Photo Left + Text Right INTRO
portrait
About Me
Your Name

A short paragraph about who you are. What drives you, what you're working on, where you're headed. This layout puts your photo on the left and text on the right.

Get In Touch
Intro C — Full-Width Banner + Name Overlay INTRO
Your Name
Designer, Developer, Creator
Your City, Your State
02 — STORY TIMELINE
Tell Your Story
A vertical timeline showing milestones, education, jobs, or project history. The left line is built with a CSS ::before pseudo-element.
Vertical Timeline — dates + titles + descriptions TIMELINE
2026
Started learning web development
Enrolled in my first web design class. Learned HTML, CSS, and how the internet actually works.
Spring 2026
Built my first portfolio site
Created a responsive portfolio from scratch and deployed it live. No templates, no shortcuts.
Summer 2026
Freelance project for a local business
Designed and built a website for a small business in my neighborhood. Real client, real deadline.
Fall 2026
What's next
Learning JavaScript, diving into UI/UX design, and looking for internships in web development.
03 — MISSION & VALUES
What You Stand For
A personal mission statement or a set of values that guide your work. Two styles: a big centered quote and a two-column mission + values layout.
Mission A — Big Centered Quote MISSION
"
I build things for the web because I believe everyone deserves a space online that looks and feels exactly like them.

Good design is invisible. It just works. That's what I aim for in every project I touch.

Mission B — Two-Column: Mission Left + Values Right MISSION

Why I do this.

The web is the most accessible medium on the planet. Anyone with a browser can see what you built. That's powerful. I want to help people use that power well — with clean code, thoughtful design, and real intention behind every decision.

My Values

Clarity over cleverness
Code that's easy to read is better than code that's impressive to write.
Ship it, then improve it
A live site beats a perfect mockup every time. Launch first, polish second.
Design for real people
Every layout decision should make the experience better for the person using it.
04 — TEAM / COLLABORATORS
The People Behind It
Photo cards for team members, classmates, or collaborators. Each card has a photo, name, role, short bio, and social links.
Team Cards — 3 per row · photo · name · role · bio · social TEAM
team member
Your Name
Web Developer
Short bio goes here. One or two sentences about this person and what they do.
Gh Li Tw
team member
Your Name
UI Designer
Short bio goes here. One or two sentences about this person and what they do.
Gh Li
team member
Your Name
Content Creator
Short bio goes here. One or two sentences about this person and what they do.
Li Tw
05 — SKILLS & TOOLS
What You Know
Two ways to show your skills: an icon grid with labels, and horizontal progress bars.
Skills A — Icon Grid SKILLS
HTML
CSS
JavaScript
Figma
VS Code
Netlify
GitHub
Photography
Skills B — Progress Bars SKILLS
HTML & CSS 90%
Responsive Design 85%
JavaScript 40%
Figma 70%
Git & GitHub 60%
06 — PHOTO COLLAGE
Show Your World
Asymmetric photo grids built with CSS Grid. Use span classes to make some images wider or taller. Great for workspace photos, project screenshots, or behind-the-scenes shots.
Collage A — Asymmetric 3-Column Grid PHOTOS
workspace coding design laptop team
Collage B — Masonry-Style 4-Column Grid PHOTOS
design web ui office screen code
07 — CONTACT
Get In Touch
The final call-to-action on your About page. Two styles: a centered dark CTA with buttons, and a split layout with a contact form.
Contact A — Centered Dark CTA CONTACT

Want to work together?

I'm always open to new projects, collaborations, or just a conversation about the web.

Contact B — Split: Text Left + Form Right CONTACT

Let's talk.

Have a question, a project idea, or just want to say hello? Fill out the form and I'll get back to you.

Or email me directly at
yourname@email.com
08 — ANIMATED STATS
Numbers That Move
Counters that count up and bars that fill the moment they scroll into view — built with the IntersectionObserver API. Pure HTML, CSS, and a little JavaScript.
Stat Counters — count up on scroll STATS
0
Projects
0
Years Coding
0
Happy Clients
0
Tools Mastered
Animated Bars — fill on scroll STATS
HTML & CSS 90%
JavaScript 55%
Responsive Design 85%
UI / UX 70%
09 — BENTO GRID
All-in-One Bento
The dominant modern About layout — an asymmetric grid of tiles that mixes a photo, intro, stats, a quote, and links into one cohesive block. Built with CSS Grid spans.
Bento Grid — photo · intro · stats · quote · links BENTO
portrait

Hi, I'm Your Name

A web designer & developer who turns ideas into clean, fast, accessible websites.

120+
Projects
5 yrs
Experience
"Good design is invisible — it just works."
10 — INTERACTIVE CARDS
Cards That React
Two motion patterns: team cards that flip in 3D to reveal a bio on hover (or keyboard focus), and feature cards that tilt toward your cursor.
Flip Cards — hover or focus to reveal the back CARDS
member
Your Name
Web Developer
Hover to flip →

Short bio on the back. The card flips in 3D to reveal it.

member
Your Name
UI Designer
Hover to flip →

Designs interfaces people actually enjoy using. Loves type and whitespace.

member
Your Name
Content Creator
Hover to flip →

Tells stories with words, photos, and video. Makes complex things feel simple.

Tilt Cards — follow your cursor in 3D CARDS

Fast

Performance-first builds that load in a blink.

Responsive

Looks right on every screen, from phone to desktop.

Accessible

Built so everyone can use it, keyboard and screen reader included.

11 — FAQ & SCROLL REVEAL
Expand & Reveal
A native, accessible FAQ accordion using <details> — no JavaScript needed — plus cards that fade and slide in as they enter the viewport.
FAQ Accordion — native details / summary FAQ
What do you do?
I design and build websites — from the first wireframe to the live, deployed page.
What tools do you use?
HTML, CSS, and JavaScript by hand, Figma for design, and Git + Netlify to ship.
Are you available for work?
Yes — I take on a small number of freelance projects. Use the contact form above to reach me.
Scroll Reveal — cards fade in on scroll REVEAL

Design

Wireframes and clean visual layouts that put the content first.

Build

Hand-coded, standards-based HTML and CSS that loads fast.

Ship

Deployed live with Git and Netlify, ready for the world.

12 — FULL PAGE EXAMPLES
Complete About Pages
Three complete about page layouts you can use as a starting point. Each one is a different approach — alternating grid, info list with photos, and a multi-section story page.
Example A — Alternating Image + Text Grid (Light, Minimal) FULL PAGE

About Us

team working

We have data on the most played trends this year. Creativity, bold colors, and unique expression are highly valued by our audience.

coding

Our mission is to create meaningful, expressive products that bring personality and joy into everyday life.

Explore Now
workspace
Example B — Numbered Info List + Photo Grid (Consultancy Style) FULL PAGE

About Us

We take pride in our values — service, integrity, and excellence. We help individuals and organizations grow with confidence.

Learn More

1. Who We Are

We help individuals and organizations grow with confidence through guidance and support.

2. What We Do

We provide mentorship, structured learning programs, and hands-on workshops.

3. How We Help

Through multimedia lessons, community support, and real-world project experience.

4. Success Stories

With access to the right knowledge and tools, anyone can grow and transform their career.

team workshop office mentorship
Example C — Multi-Section Story Page (Hero + History + Quote + Mission + CTA) FULL PAGE

Building Connections, Creating Impact

We're a community-focused organization that helps people live healthier, happier lives through real support and real tools.

Learn More
person person person

Our Story

We started with a simple idea: make information accessible to everyone, regardless of background or experience level.

Over the years we've grown from a small group of volunteers into a full community with workshops, mentors, and resources that reach thousands of people every month.

team history
"This platform has completely changed the way I approach my daily routine. I feel more confident and capable every single day."
— A Community Member

Living Our Mission

Our community is creating positive change every day.

"The guidance was clear and easy to follow. I actually understood what to do next."
"I finally see real improvements in my daily habits and my confidence."
"The community here is supportive and genuine. It doesn't feel corporate."

Daily guidance crafted specifically for your goals.

Get Started
13 — BRAND STYLE EXAMPLES
Set the Mood
Four distinct visual moods for an About page — retro heritage, bold performance, warm & friendly, and big-type values. Each is a starting point you can recolor and rewrite. Inspired by common About-us design patterns.
Style A — Retro Brand Heritage STYLE
Est. 2010

Built by hand, made to last.

We've crafted our work the same careful way for over a decade — a little old-school, and proud of it.

Style B — Dynamic Performance Showcase STYLE
action shot
Who we are

We move fast.

A team built on energy and momentum — we ship bold ideas and don't slow down.

Style C — Warm Brand Atmosphere STYLE

Pull up a chair.

We make things with warmth and care — and we'd love for you to feel right at home here.

warm interior
Style D — Bold Typography & Values STYLE
Our values

We design for people, build in the open, and ship with care.

Style E — Fun Facts / Personality STYLE

A few fun facts about us

The numbers that make us, us.

4,200
Coffees brewed
3
Office dogs
12
Countries
280+
Projects shipped
9,000
Songs on our playlist
Style F — Geometric / Neon Shapes STYLE
Hello there

We make bold things.

Neon accents, geometric shapes, and high contrast — a loud, confident look for a brand that isn't shy.