Developer Portfolio: HTML, CSS, JavaScript Example

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>John Doe | Full Stack Developer Portfolio</title>
    
    <style>
        body { font-family: sans-serif; margin: 0; padding: 0; background-color: #f4f4f9; color: #333; }
        header { background-color: #222; color: white; padding: 15px 5%; display: flex; justify-content: space-between; align-items: center; }
        nav a { color: white; margin-left: 20px; text-decoration: none; }
        section { padding: 60px 5%; min-height: 400px; }
        #hero { background-color: #007bff; color: white; text-align: center; padding: 100px 5%; }
        .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 30px; }
        .project-card { border: 1px solid #ccc; padding: 20px; background-color: white; border-radius: 5px; }
        footer { background-color: #333; color: white; text-align: center; padding: 20px 5%; }
    </style>
</head>
<body>

<header>
        <h1>John Doe</h1>
        <nav>
            <a href="#hero">Home</a>
            <a href="#about">About</a>
            <a href="#portfolio">Portfolio</a>
            <a href="#skills">Skills</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

<main>

<section id="hero">
            <h2>Creative Developer & Problem Solver</h2>
            <p>Building modern, responsive, and high-performance web applications.</p>
            <a href="#portfolio" style="background-color: white; color: #007bff; padding: 10px 20px; display: inline-block; margin-top: 20px; text-decoration: none; border-radius: 5px;">View My Work</a>
        </section>

<section id="about">
            <h2>About Me</h2>
            <p>I am a full-stack developer with 5 years of experience specializing in JavaScript ecosystems. I thrive on turning complex problems into simple, elegant, and efficient solutions. My passion lies in clean code, robust architecture, and delivering exceptional user experiences.</p>
            <p>When I'm not coding, you can find me hiking or experimenting with new coffee brewing methods.</p>
        </section>

<section id="portfolio" style="background-color: #e9ecef;">
            <h2>Featured Projects</h2>
            <div class="project-grid">

<div class="project-card">
                    <h3>E-commerce Platform Redesign</h3>
                    <p>A complete overhaul of an existing platform, resulting in a 30% increase in conversion rates. (React, Node.js, MongoDB)</p>
                    <a href="#">View Live</a>
                </div>

<div class="project-card">
                    <h3>Real-time Chat Application</h3>
                    <p>A scalable real-time messaging service built using WebSockets and optimized for low-latency communication. (Vue.js, Socket.io, Express)</p>
                    <a href="#">View Live</a>
                </div>

<div class="project-card">
                    <h3>Data Visualization Dashboard</h3>
                    <p>Interactive dashboard for analyzing large datasets, featuring custom charts and filtering capabilities. (D3.js, Python/Flask)</p>
                    <a href="#">View Live</a>
                </div>

</div>
        </section>

<section id="skills">
            <h2>Technical Expertise</h2>
            <p>I specialize in the following technologies:</p>
            <ul>
                <li><strong>Frontend:</strong> HTML5, CSS3 (SCSS/Less), JavaScript (ES6+), React, Vue, Redux</li>
                <li><strong>Backend:</strong> Node.js, Express, Python (Django/Flask), REST APIs, GraphQL</li>
                <li><strong>Databases:</strong> PostgreSQL, MySQL, MongoDB, Redis</li>
                <li><strong>Tools & DevOps:</strong> Git, Docker, AWS, Netlify, CI/CD</li>
            </ul>
        </section>

<section id="contact" style="background-color: #f8f9fa;">
            <h2>Get In Touch</h2>
            <p>Have a project idea or want to collaborate? Send me a message!</p>
            
            <form action="#" method="POST" style="max-width: 500px; margin-top: 20px;">
                <div style="margin-bottom: 15px;">
                    <label for="name">Name:</label>
                    <input type="text" id="name" name="name" required style="width: 100%; padding: 10px; box-sizing: border-box; border: 1px solid #ccc;">
                </div>
                <div style="margin-bottom: 15px;">
                    <label for="email">Email:</label>
                    <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; box-sizing: border-box; border: 1px solid #ccc;">
                </div>
                <div style="margin-bottom: 15px;">
                    <label for="message">Message:</label>
                    <input id="message" name="message" rows="5" required style="width: 100%; padding: 10px; box-sizing: border-box; border: 1px solid #ccc;"/>
                </div>
                <button type="submit" style="padding: 10px 20px; background-color: #007bff; color: white; border: none; cursor: pointer;">Send Message</button>
            </form>
        </section>

</main>

<footer>
        <p>© 2024 John Doe | All Rights Reserved</p>
        <div>
            <a href="#" style="color: white; margin: 0 10px;">LinkedIn</a> | 
            <a href="#" style="color: white; margin: 0 10px;">GitHub</a>
        </div>
    </footer>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Developer Name | Advanced Portfolio</title>
    <meta name="description" content="A modern, advanced portfolio showcasing professional projects and skills.">
    
    
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;900&display=swap" rel="stylesheet">
    
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

/* --- Global Reset and Typography --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

html {
            scroll-behavior: smooth;
        }

body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
        }

a {
            color: var(--primary-color);
            text-decoration: none;
            transition: color var(--transition-speed);
        }

a:hover {
            color: var(--secondary-color);
        }

section {
            padding: 100px 20px;
            min-height: 80vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

.container {
            width: 100%;
            max-width: var(--max-width);
            margin: 0 auto;
        }

h1, h2, h3 {
            font-weight: 700;
            margin-bottom: 20px;
        }

h2 {
            font-size: 3rem;
            text-align: center;
            margin-bottom: 60px;
            position: relative;
        }

h2::after {
            content: '';
            display: block;
            width: 80px;
            height: 4px;
            background: var(--primary-color);
            margin: 10px auto 0;
            border-radius: 2px;
        }

.btn {
            display: inline-block;
            padding: 12px 30px;
            border: 2px solid var(--primary-color);
            border-radius: 50px;
            color: var(--text-color);
            background: var(--primary-color);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: background var(--transition-speed), transform var(--transition-speed);
            cursor: pointer;
        }

.btn:hover {
            background: none;
            color: var(--primary-color);
            transform: translateY(-3px);
        }

/* --- Navigation Bar (Sticky & Advanced) --- */
        .header {
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
            background: rgba(10, 10, 15, 0.95);
            backdrop-filter: blur(8px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

.nav {
            max-width: var(--max-width);
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
        }

.logo {
            font-size: 1.8rem;
            font-weight: 900;
            color: var(--secondary-color);
        }

.nav-list {
            list-style: none;
            display: flex;
        }

.nav-item {
            margin-left: 30px;
        }

.nav-link {
            font-weight: 600;
            padding: 5px 0;
            position: relative;
        }

.nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--secondary-color);
            transition: width var(--transition-speed), left var(--transition-speed);
        }

.nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
            left: 0;
        }

/* --- Hero Section (Full Viewport) --- */
        #hero {
            height: 100vh;
            text-align: center;
            background: linear-gradient(135deg, var(--bg-color) 0%, #1a0a25 100%);
            padding-top: 0;
        }

.hero-content {
            z-index: 5;
        }

.hero-content h1 {
            font-size: 5rem;
            margin-bottom: 10px;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1.1;
        }

.hero-content p {
            font-size: 1.5rem;
            margin-bottom: 40px;
            color: rgba(255, 255, 255, 0.8);
        }

/* --- Skills Section (Grid Layout) --- */
        .skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

.skill-card {
            background: var(--card-bg);
            padding: 30px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(106, 13, 173, 0.2);
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

.skill-card:hover {
            transform: translateY(-10px) scale(1.02);
            border-color: var(--primary-color);
        }

.skill-card i {
            font-size: 3rem;
            color: var(--secondary-color);
            margin-bottom: 15px;
        }

/* --- Portfolio Section (Advanced Grid) --- */
        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }

.project-card {
            background: var(--card-bg);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            transition: box-shadow var(--transition-speed);
        }

.project-card:hover {
            box-shadow: 0 15px 40px rgba(106, 13, 173, 0.5);
        }

.project-image {
            height: 250px;
            background: #2a2a30; /* Placeholder BG */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.5);
        }

.project-info {
            padding: 25px;
        }

.project-info h3 {
            color: var(--primary-color);
            margin-bottom: 10px;
        }

.tags span {
            display: inline-block;
            background: rgba(106, 13, 173, 0.2);
            color: var(--primary-color);
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 0.8rem;
            margin-right: 5px;
            margin-top: 10px;
        }

/* --- Contact Section --- */
        .contact-form-wrapper {
            background: var(--card-bg);
            padding: 40px;
            border-radius: 12px;
            max-width: 600px;
            width: 100%;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

.form-group {
            margin-bottom: 20px;
        }

.form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
        }

.form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #333;
            background: #222;
            color: var(--text-color);
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color var(--transition-speed);
        }

.form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(106, 13, 173, 0.3);
        }

/* --- Footer --- */
        .footer {
            text-align: center;
            padding: 40px 20px;
            border-top: 1px solid #1f1f25;
            background: #08080C;
        }

.social-links {
            margin: 20px 0;
        }

.social-links a {
            font-size: 1.5rem;
            margin: 0 15px;
            color: var(--text-color);
        }

.social-links a:hover {
            color: var(--primary-color);
        }

/* --- Responsive Adjustments --- */
        @media (max-width: 768px) {
            .nav {
                flex-direction: column;
                padding: 10px 20px;
            }
            .nav-list {
                margin-top: 10px;
                justify-content: center;
                flex-wrap: wrap;
            }
            .nav-item {
                margin: 5px 15px;
            }
            .hero-content h1 {
                font-size: 3.5rem;
            }
            h2 {
                font-size: 2.5rem;
            }
            section {
                padding: 60px 20px;
            }
        }
    </style>
</head>
<body>

<header class="header">
        <nav class="nav">
            <div class="logo">
                <J.D/>
            </div>
            <ul class="nav-list">
                <li class="nav-item"><a href="#hero" class="nav-link active">Home</a></li>
                <li class="nav-item"><a href="#about" class="nav-link">About</a></li>
                <li class="nav-item"><a href="#portfolio" class="nav-link">Work</a></li>
                <li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
            </ul>
        </nav>
    </header>

<section id="hero">
        <div class="hero-content">
            <p>Hello, I'm Jane Doe</p>
            <h1>Building Digital Experiences.</h1>
            <p>A Full Stack Developer specializing in cutting-edge web technologies and modern design.</p>
            <a href="#portfolio" class="btn">View My Work</a>
        </div>
        
        
    </section>

<section id="about">
        <div class="container">
            <h2>About Me & Skills</h2>
            <p style="max-width: 800px; text-align: center; margin-bottom: 50px;">
                I craft performant and scalable applications using a diverse technology stack. My focus is on clean code, responsive design, and delivering seamless user experiences.
            </p>

<div class="skills-grid">
                <div class="skill-card">
                    <i class="fas fa-code"></i>
                    <h3>Frontend Mastery</h3>
                    <p>React, Vue.js, Advanced CSS (SASS/Styled Components), State Management.</p>
                </div>
                <div class="skill-card">
                    <i class="fas fa-server"></i>
                    <h3>Backend Development</h3>
                    <p>Node.js, Python (Django/Flask), REST APIs, Microservices Architecture.</p>
                </div>
                <div class="skill-card">
                    <i class="fas fa-database"></i>
                    <h3>Data Management</h3>
                    <p>PostgreSQL, MongoDB, Redis caching, Database Optimization.</p>
                </div>
                <div class="skill-card">
                    <i class="fas fa-tools"></i>
                    <h3>DevOps & Cloud</h3>
                    <p>Docker, Kubernetes basics, AWS/Azure, CI/CD Pipelines (Gitlab/Github Actions).</p>
                </div>
            </div>
        </div>
    </section>

<section id="portfolio">
        <div class="container">
            <h2>Featured Projects</h2>
            
            <div class="portfolio-grid">
                
                
                <div class="project-card">
                    <div class="project-image">
                        Project Thumbnail 1
                    </div>
                    <div class="project-info">
                        <h3>E-commerce Platform Redesign</h3>
                        <p>A high-performance e-commerce solution built with Next.js and integrated Stripe payments.</p>
                        <div class="tags">
                            <span>Next.js</span>
                            <span>Tailwind CSS</span>
                            <span>Stripe</span>
                            <span>GraphQL</span>
                        </div>
                        <p style="margin-top: 20px;"><a href="#" target="_blank">View Live <i class="fas fa-external-link-alt"></i></a></p>
                    </div>
                </div>

<div class="project-card">
                    <div class="project-image">
                        Project Thumbnail 2
                    </div>
                    <div class="project-info">
                        <h3>Real-time Analytics Dashboard</h3>
                        <p>A responsive dashboard utilizing websockets for live data visualization and reporting.</p>
                        <div class="tags">
                            <span>Vue.js</span>
                            <span>Node.js</span>
                            <span>Websockets</span>
                            <span>D3.js</span>
                        </div>
                        <p style="margin-top: 20px;"><a href="#" target="_blank">View Live <i class="fas fa-external-link-alt"></i></a></p>
                    </div>
                </div>

<div class="project-card">
                    <div class="project-image">
                        Project Thumbnail 3
                    </div>
                    <div class="project-info">
                        <h3>SaaS Landing Page & Backend</h3>
                        <p>Full stack implementation of a promotional site and core user management API.</p>
                        <div class="tags">
                            <span>Django</span>
                            <span>PostgreSQL</span>
                            <span>Bootstrap 5</span>
                            <span>AWS S3</span>
                        </div>
                        <p style="margin-top: 20px;"><a href="#" target="_blank">View Live <i class="fas fa-external-link-alt"></i></a></p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="contact">
        <div class="container" style="display: flex; flex-direction: column; align-items: center;">
            <h2>Get In Touch</h2>
            
            <div class="contact-form-wrapper">
                <p style="text-align: center; margin-bottom: 30px;">
                    Have a project idea or need a consultation? Let's connect!
                </p>

<form action="#" method="POST">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" id="email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="message">Message</label>
                        <input id="message" name="message" rows="5" required/>
                    </div>
                    <button type="submit" class="btn" style="width: 100%; margin-top: 10px;">Send Message</button>
                </form>
            </div>
        </div>
    </section>

<footer class="footer">
        <div class="social-links">
            <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
            <a href="#" aria-label="GitHub"><i class="fab fa-github"></i></a>
            <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
        </div>
        <p>© <span id="current-year"></span> Jane Doe. Developed with passion and modern standards.</p>
    </footer>

<script>
        document.addEventListener('DOMContentLoaded', function() {
            // Set current year in footer
            document.getElementById('current-year').textContent = new Date().getFullYear();

const navLinks = document.querySelectorAll('.nav-link');
            const sections = document.querySelectorAll('section');

// Function to handle active navigation link on scroll
            const observerOptions = {
                root: null,
                rootMargin: '0px',
                threshold: 0.3 // Trigger when 30% of the section is visible
            };

sections.forEach(section => {
                sectionObserver.observe(section);
            });
            
            // Initial check for the hero section on load
            if (window.scrollY < document.getElementById('about').offsetTop - 100) {
                 document.querySelector('.nav-link[href="#hero"]').classList.add('active');
            }
        });
    </script>

</body>
</html>

Developer Portfolio: HTML, CSS, JavaScript Example

Recommended

Mini Game Hub: Guess, RPS, Coin Flip JavaScript

Portfolio Webpage Example

CSS Animation Example: Loading & Text Effects

HTML

CSS

JS

Recommended

Mini Game Hub: Guess, RPS, Coin Flip JavaScript

Portfolio Webpage Example

CSS Animation Example: Loading & Text Effects

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS