Build Your Dream Portfolio Website

Every tutorial portfolio site looks the same — dark theme, generic "Hi, I'm a developer" text, the same three project cards. Boring. Let's build one that actually has personality. YOUR personality.

What We're Building

A portfolio that has:

A hero section with your name and vibe
An about section that doesn't read like a resume
A projects grid that shows off your work
A contact section that's not just a sad email link
Your own color palette and fonts (not Bootstrap defaults)

💬 Denise says

Your portfolio is literally your first impression. It should make someone go "oh, I like this person" not "oh, another developer template." I'm going to show you how to build one that stands out, and you don't need React or any fancy framework — just HTML, CSS, and a tiny bit of JavaScript.

Step 1: The HTML Structure

Let's start with the bones:

Step 2: Make It Beautiful with CSS

Here's where the magic happens. Pick a color palette that feels like you:

1/* style.css — make it YOUR vibe */
2
3:root {
4/* CHANGE THESE to match your personality! */
5--bg: #FFF8F0;          /* warm cream background */
6--text: #2D2D2D;        /* almost-black text */
7--accent: #E8A0BF;      /* pink accent */
8--accent-light: #F5D5E0; /* light pink */
9--subtle: #957DAD;       /* muted purple */
10--card-bg: #FFFFFF;
11}
12
13* { margin: 0; padding: 0; box-sizing: border-box; }
14
15body {
16font-family: 'Sora', sans-serif;
17background: var(--bg);
18color: var(--text);
19line-height: 1.7;
20}
21
22/* HERO — the first thing people see */
23.hero {
24min-height: 100vh;
25display: flex;
26flex-direction: column;
27justify-content: center;
28padding: 0 10%;
29}
30
31.greeting {
32font-size: 1.1rem;
33color: var(--subtle);
34font-weight: 600;
35margin-bottom: 8px;
36}
37
38.hero h1 {
39font-size: clamp(3rem, 8vw, 6rem);
40font-weight: 700;
41line-height: 1.1;
42margin-bottom: 16px;
43}
44
45.tagline {
46font-size: 1.2rem;
47color: var(--subtle);
48margin-bottom: 40px;
49}
50
51.hero-links {
52display: flex;
53gap: 16px;
54}
55
56.hero-links a {
57padding: 12px 28px;
58border-radius: 50px;
59text-decoration: none;
60font-weight: 600;
61font-size: 0.9rem;
62transition: all 0.3s ease;
63}
64
65.hero-links a:first-child {
66background: var(--accent);
67color: white;
68}
69
70.hero-links a:last-child {
71border: 2px solid var(--accent-light);
72color: var(--text);
73}
74
75.hero-links a:hover {
76transform: translateY(-3px);
77}

Step 3: Project Cards

1/* Project cards */
2.projects {
3padding: 80px 10%;
4}
5
6.project-grid {
7display: grid;
8grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
9gap: 24px;
10margin-top: 40px;
11}
12
13.project-card {
14background: var(--card-bg);
15border-radius: 16px;
16overflow: hidden;
17transition: transform 0.3s ease;
18}
19
20.project-card:hover {
21transform: translateY(-8px);
22}
23
24.project-card img {
25width: 100%;
26height: 200px;
27object-fit: cover;
28}
29
30.project-info {
31padding: 24px;
32}
33
34.project-info h3 {
35font-size: 1.1rem;
36margin-bottom: 8px;
37}
38
39.project-info p {
40color: var(--subtle);
41font-size: 0.9rem;
42margin-bottom: 16px;
43}
44
45.project-tags {
46display: flex;
47gap: 8px;
48flex-wrap: wrap;
49}
50
51.project-tags span {
52background: var(--accent-light);
53color: var(--subtle);
54padding: 4px 12px;
55border-radius: 50px;
56font-size: 0.75rem;
57font-weight: 600;
58}

Now add the project cards to your HTML:

💡 Pro tip

Don't wait until you have "impressive" projects. Put up what you've built, even if it's simple. A finished outfit planner app is more impressive than an unfinished complex app. Hiring managers and collaborators want to see that you can ship something.

Step 4: Smooth Scroll + Animation

Add a tiny bit of JavaScript for polish:

1/* Add this to your CSS for the fade-in effect */
2.fade-in {
3opacity: 0;
4transform: translateY(20px);
5transition: opacity 0.6s ease, transform 0.6s ease;
6}
7
8.fade-in.visible {
9opacity: 1;
10transform: translateY(0);
11}

Step 5: Deploy It for Free

Put it online so people can actually see it:

Push your code to GitHub
Go to your repo settings
Scroll to GitHub Pages
Select your branch and save
Your site is live at yourusername.github.io/portfolio

Or use Vercel or Netlify for even easier deployment — just drag and drop your folder.

Palette Ideas

Not sure what colors to use? Here are some palettes to try:

1/* Soft & Feminine */
2--bg: #FFF8F0; --accent: #E8A0BF; --subtle: #957DAD;
3
4/* Cool Girl */
5--bg: #F0F4F8; --accent: #7C9CBF; --subtle: #5A7A9A;
6
7/* Earthy & Warm */
8--bg: #FDF6EC; --accent: #D4A574; --subtle: #8B7355;
9
10/* Bold & Fun */
11--bg: #FFFBF0; --accent: #FF6B6B; --subtle: #845EC2;
12
13/* Minimal & Clean */
14--bg: #FAFAFA; --accent: #333333; --subtle: #888888;

💬 Denise says

Your portfolio doesn't need to be perfect to go online. Seriously. A simple, clean site with 2-3 projects and personality beats a fancy template with no soul. Put it up, share the link, and keep improving it over time. The best portfolio is a live one.