Modèle HTML de portefeuille de développeurs

926 codex

Ouvrir dans l'éditeur Publiez votre code

Modèle HTML de portefeuille de développeurs

Recommandé

28 July 2025

Bulle de message HTML avec conception SVG

22 September 2025

Animation CSS : effet de regret chromatique

18 October 2024

Modèle de site Web de portefeuille HTML CSS

HTML

<!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>
    <meta name="description" content="John Doe's professional developer portfolio showcasing projects, skills, and contact information.">
    <style>
        /* Basic CSS for a Developer Portfolio Landing Page */
        :root {
            --primary-color: #007bff; /* Blue */
            --secondary-color: #6c757d; /* Gray */
            --bg-dark: #2c3e50; /* Dark Blue-Gray */
            --bg-light: #f8f9fa; /* Light Gray */
            --text-light: #ffffff;
            --text-dark: #333;
            --accent-color: #28a745; /* Green */
        }

body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            line-height: 1.6;
            color: var(--text-dark);
            background-color: var(--bg-light);
            scroll-behavior: smooth;
        }

/* Utility Classes */
        .container {
            max-width: 1100px;
            margin: auto;
            overflow: hidden;
            padding: 0 2rem;
        }

.btn {
            display: inline-block;
            background: var(--primary-color);
            color: var(--text-light);
            padding: 0.8rem 1.8rem;
            border-radius: 5px;
            text-decoration: none;
            transition: background 0.3s ease;
            font-weight: bold;
        }

.btn:hover {
            background: #0056b3;
        }

.text-center {
            text-align: center;
        }

.section-padding {
            padding: 5rem 0;
        }

h1, h2, h3, h4 {
            margin-bottom: 1rem;
            line-height: 1.2;
        }

/* Header / Navigation */
        header {
            background: var(--bg-dark);
            color: var(--text-light);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

header h1 {
            margin: 0;
            font-size: 2rem;
        }

header h1 a {
            color: var(--text-light);
            text-decoration: none;
        }

header nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

header nav ul li {
            margin-left: 25px;
        }

header nav ul li a {
            color: var(--text-light);
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s ease;
        }

header nav ul li a:hover {
            color: var(--primary-color);
        }

/* Hero Section */
        #hero {
            background: var(--bg-dark);
            color: var(--text-light);
            text-align: center;
            padding: 10rem 0 8rem;
            min-height: 80vh;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

#hero h2 {
            font-size: 4rem;
            margin-bottom: 1rem;
            color: var(--primary-color);
        }

#hero p {
            font-size: 1.7rem;
            margin-bottom: 2.5rem;
            max-width: 800px;
            opacity: 0.9;
        }

/* About Section */
        #about {
            background: var(--bg-light);
            color: var(--text-dark);
        }

#about h3 {
            font-size: 3rem;
            margin-bottom: 2rem;
            color: var(--bg-dark);
        }

#about p {
            font-size: 1.15rem;
            max-width: 900px;
            margin: 0 auto 2.5rem auto;
        }

.skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 1.5rem;
            margin-top: 3rem;
        }

.skill-item {
            background: var(--text-light);
            padding: 1.5rem;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
            font-weight: bold;
            color: var(--bg-dark);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

.skill-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 15px rgba(0,0,0,0.12);
        }

/* Projects Section */
        #projects {
            background: #e2e6ea; /* Slightly darker light gray */
            color: var(--text-dark);
        }

#projects h3 {
            font-size: 3rem;
            margin-bottom: 3rem;
            color: var(--bg-dark);
        }

.project-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2.5rem;
        }

.project-item {
            background: var(--text-light);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

.project-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }

.project-item img {
            width: 100%;
            height: 220px;
            object-fit: cover;
            display: block;
        }

.project-info {
            padding: 1.8rem;
        }

.project-info h4 {
            margin-top: 0;
            font-size: 1.8rem;
            color: var(--primary-color);
        }

.project-info p {
            font-size: 1rem;
            color: var(--secondary-color);
            margin-bottom: 1.5rem;
        }

/* Contact Section */
        #contact {
            background: var(--bg-dark);
            color: var(--text-light);
        }

#contact h3 {
            font-size: 3rem;
            margin-bottom: 2.5rem;
            color: var(--primary-color);
        }

#contact p {
            font-size: 1.15rem;
            max-width: 700px;
            margin: 0 auto 2.5rem auto;
            opacity: 0.9;
        }

.contact-form {
            max-width: 700px;
            margin: auto;
            padding: 2.5rem;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        }

.contact-form .form-group {
            margin-bottom: 1.8rem;
        }

.contact-form label {
            display: block;
            margin-bottom: 0.7rem;
            font-weight: bold;
            font-size: 1.1rem;
        }

.contact-form input[type="text"],
        .contact-form input[type="email"],
        .contact-form textarea {
            width: calc(100% - 20px); /* Account for padding */
            padding: 12px 10px;
            border: 1px solid #555;
            border-radius: 5px;
            background: #444;
            color: var(--text-light);
            font-size: 1rem;
        }

.contact-form textarea {
            min-height: 150px;
            resize: vertical;
        }

.contact-form input[type="submit"] {
            width: auto;
            cursor: pointer;
            border: none;
            font-size: 1.1rem;
            padding: 1rem 2rem;
            background: var(--accent-color);
            color: var(--text-light);
        }

.contact-form input[type="submit"]:hover {
            background: #218838;
        }

/* Footer */
        footer {
            background: #333;
            color: var(--text-light);
            text-align: center;
            padding: 2rem 0;
            font-size: 0.95rem;
        }

footer .social-links {
            margin-bottom: 1.5rem;
        }

footer .social-links a {
            color: var(--text-light);
            margin: 0 15px;
            font-size: 1.8rem;
            transition: color 0.3s ease;
        }

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

/* Responsive Design */
        @media (max-width: 768px) {
            header .container {
                flex-direction: column;
                text-align: center;
            }

header nav ul {
                margin-top: 1.5rem;
                justify-content: space-around;
                width: 100%;
            }

header nav ul li {
                margin: 0 10px;
            }

#hero {
                padding: 7rem 0 5rem;
            }

#hero h2 {
                font-size: 3rem;
            }

#hero p {
                font-size: 1.4rem;
            }

.section-padding {
                padding: 4rem 0;
            }

#about h3, #projects h3, #contact h3 {
                font-size: 2.5rem;
            }

.project-grid {
                grid-template-columns: 1fr;
            }

.skills-grid {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            }
        }

@media (max-width: 480px) {
            header h1 {
                font-size: 1.8rem;
            }

header nav ul li {
                margin: 5px 8px;
            }

#hero h2 {
                font-size: 2.5rem;
            }

#hero p {
                font-size: 1.2rem;
            }

#about h3, #projects h3, #contact h3 {
                font-size: 2rem;
            }

.contact-form {
                padding: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <h1><a href="#hero">John Doe</a></h1>
            <nav>
                <ul>
                    <li><a href="#about">About</a></li>
                    <li><a href="#projects">Projects</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<main>
        <section id="hero" class="section-padding">
            <div class="container">
                <p>Hello, I'm</p>
                <h2>John Doe</h2>
                <p>A Passionate Full-Stack Developer Building Modern Web Experiences</p>
                <a href="#projects" class="btn">View My Work</a>
            </div>
        </section>

<section id="about" class="section-padding text-center">
            <div class="container">
                <h3>About Me</h3>
                <p>
                    I'm a dedicated and innovative developer with 5+ years of experience in crafting high-performance,
                    responsive, and user-friendly web applications. My expertise spans across front-end frameworks
                    like React and back-end technologies such as Node.js and Python. I thrive on solving complex
                    problems and delivering clean, efficient code that powers engaging digital experiences.
                </p>
                <p><strong>Technologies I love to work with:</strong></p>
                <div class="skills-grid">
                    <div class="skill-item">HTML5 & CSS3</div>
                    <div class="skill-item">JavaScript (ES6+)</div>
                    <div class="skill-item">React.js</div>
                    <div class="skill-item">Node.js & Express.js</div>
                    <div class="skill-item">Python & Django</div>
                    <div class="skill-item">SQL & MongoDB</div>
                    <div class="skill-item">Git & GitHub</div>
                    <div class="skill-item">AWS/Azure</div>
                </div>
            </div>
        </section>

<section id="projects" class="section-padding text-center">
            <div class="container">
                <h3>My Projects</h3>
                <div class="project-grid">
                    <div class="project-item">
                        <img src="https://via.placeholder.com/400x220?text=E-commerce+Platform" alt="E-commerce Platform">
                        <div class="project-info">
                            <h4>Modern E-commerce Site</h4>
                            <p>A full-featured online store with user authentication, product management, and secure payment processing.</p>
                            <a href="#" class="btn" target="_blank">View Project</a>
                        </div>
                    </div>
                    <div class="project-item">
                        <img src="https://via.placeholder.com/400x220?text=Social+Media+App" alt="Social Media Application">
                        <div class="project-info">
                            <h4>Interactive Social Feed</h4>

CSS