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.

GitHub LinkedIn Email
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.

Send Me an Email View My Work
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 — 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