A clean, responsive developer portfolio with a hero section, skills grid, project cards, and a contact section — ready to deploy and share with employers.
Create index.html with the standard page structure and four main sections.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>John Doe — Developer Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php require_once __DIR__ . '/../promo_banner.php'; ?>
<header class="hero">
<!-- Step 2 -->
</header>
<section class="skills">
<!-- Step 3 -->
</section>
<section class="projects">
<!-- Step 4 -->
</section>
<footer class="contact">
<!-- Step 5 -->
</footer>
</body>
</html>Add your name, role, and call-to-action buttons to the header.
<header class="hero">
<div class="hero-content">
<span class="hero-tag">Available for hire</span>
<h1>Hi, I'm <span class="highlight">John Doe</span></h1>
<p class="hero-role">Full-Stack Developer</p>
<p class="hero-bio">
I build clean, fast web apps with Python and JavaScript.
Currently open to freelance and full-time opportunities.
</p>
<div class="hero-buttons">
<a href="#projects" class="btn-primary">View My Work</a>
<a href="#contact" class="btn-secondary">Get In Touch</a>
</div>
</div>
</header>List your technical skills in a responsive grid layout.
<section class="skills">
<h2 class="section-title">Skills</h2>
<div class="skills-grid">
<div class="skill-card">🐍 Python</div>
<div class="skill-card">⚡ JavaScript</div>
<div class="skill-card">🌐 HTML & CSS</div>
<div class="skill-card">🗄️ SQL</div>
<div class="skill-card">⚙️ FastAPI</div>
<div class="skill-card">🐙 Git & GitHub</div>
</div>
</section>Showcase your projects with title, description, tech stack, and a link.
<section class="projects">
<h2 class="section-title">Projects</h2>
<div class="projects-grid">
<div class="project-card">
<div class="project-emoji">🤖</div>
<h3>AI Chatbot</h3>
<p>A local chatbot powered by Llama 3 via Ollama. Fully private — no API keys.</p>
<div class="project-tags">
<span>Python</span><span>Ollama</span><span>CLI</span>
</div>
<a href="https://github.com/yourusername/chatbot" class="project-link">View on GitHub →</a>
</div>
<div class="project-card">
<div class="project-emoji">📊</div>
<h3>Sales Dashboard</h3>
<p>Interactive dashboard built with Streamlit and Plotly. Reads from a CSV.</p>
<div class="project-tags">
<span>Python</span><span>Streamlit</span><span>Plotly</span>
</div>
<a href="https://github.com/yourusername/dashboard" class="project-link">View on GitHub →</a>
</div>
<div class="project-card">
<div class="project-emoji">🕷️</div>
<h3>Price Tracker</h3>
<p>Scrapes product prices daily and emails an alert when they drop.</p>
<div class="project-tags">
<span>Python</span><span>BeautifulSoup</span><span>SQLite</span>
</div>
<a href="https://github.com/yourusername/price-tracker" class="project-link">View on GitHub →</a>
</div>
</div>
</section>Finish the HTML, then write style.css to make everything look great.
<!-- contact section in index.html -->
<footer class="contact">
<h2 class="section-title" style="color:#fff">Get In Touch</h2>
<p class="contact-sub">Open to freelance projects and full-time roles.</p>
<div class="contact-links">
<a href="mailto:john@example.com">✉️ john@example.com</a>
<a href="https://github.com/yourusername">🐙 GitHub</a>
<a href="https://linkedin.com/in/yourprofile">💼 LinkedIn</a>
</div>
</footer>/* style.css */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; color: #1e293b; }
/* Hero */
.hero { background: linear-gradient(135deg, #0f172a, #1e3a6e); color: #fff; padding: 100px 20px; text-align: center; }
.hero-tag { background: #F59C0D; color: #fff; font-size: 0.75rem; font-weight: 700; padding: 4px 14px; border-radius: 20px; letter-spacing: 0.5px; }
.hero h1 { font-size: 3rem; margin: 20px 0 8px; }
.highlight { color: #F59C0D; }
.hero-role { font-size: 1.2rem; opacity: 0.75; margin-bottom: 16px; }
.hero-bio { max-width: 500px; margin: 0 auto 32px; opacity: 0.85; line-height: 1.7; }
.hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn-primary { background: #F59C0D; color: #fff; padding: 12px 28px; border-radius: 8px; text-decoration: none; font-weight: 700; }
.btn-secondary{ border: 2px solid rgba(255,255,255,0.5); color: #fff; padding: 12px 28px; border-radius: 8px; text-decoration: none; font-weight: 700; }
/* Sections */
.section-title { font-size: 1.8rem; font-weight: 800; text-align: center; margin-bottom: 40px; }
.skills { padding: 80px 20px; background: #f8fafc; }
.skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; max-width: 800px; margin: 0 auto; }
.skill-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 20px; text-align: center; font-weight: 700; font-size: 1rem; }
.skill-card:hover { border-color: #F59C0D; }
/* Projects */
.projects { padding: 80px 20px; }
.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; max-width: 1000px; margin: 0 auto; }
.project-card { border: 1.5px solid #e2e8f0; border-radius: 14px; padding: 28px; transition: all 0.2s; }
.project-card:hover { border-color: #F59C0D; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.project-emoji { font-size: 2.5rem; margin-bottom: 12px; }
.project-card h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 8px; }
.project-card p { color: #64748b; font-size: 0.9rem; line-height: 1.6; margin-bottom: 14px; }
.project-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.project-tags span { background: #f1f5f9; color: #475569; font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 4px; }
.project-link { color: #F59C0D; font-weight: 700; text-decoration: none; font-size: 0.88rem; }
/* Contact */
.contact { background: #0f172a; color: #fff; padding: 80px 20px; text-align: center; }
.contact-sub { opacity: 0.7; margin-bottom: 28px; }
.contact-links { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.contact-links a { color: #F59C0D; text-decoration: none; font-weight: 700; font-size: 1rem; }
/* Mobile responsive */
@media (max-width: 600px) {
.hero h1 { font-size: 2rem; }
.projects-grid { grid-template-columns: 1fr; }
.skills-grid { grid-template-columns: repeat(2, 1fr); }
}Your portfolio is ready to share. Swap in your real name, projects, and links — then deploy to Netlify or GitHub Pages for a free custom URL. This same HTML/CSS foundation works for any static site.
Spotted a bug, broken code, or something that doesn't look right? Tell us what's off and we'll fix it.