Site Web de portfolio HTML avec menu latéral

2188 MyPortfolio

Ouvrir dans l'éditeur Video Publiez votre code

Site Web de portfolio HTML avec menu latéral

Recommandé

11 March 2024

Jeu de ping-pong

22 August 2025

Blogium : Modèle HTML de blog sur la technologie, le design et la vie

23 February 2024

Modèle gratuit de page d'accueil

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Developer Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <aside class="sidebar">
        <div class="logo">[Your Logo]</div>
        <ul class="sidebar-menu">
            <li><a href="#about">About Me</a></li>
            <li><a href="#skills">Skills</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#experience">Experience</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </aside>

<main class="content">
        
        <section id="hero" class="section hero">
            <h1>Hi, I'm [Your Name]</h1>
            <p>I create digital solutions with a focus on design, efficiency, and user-centered experiences.</p>
            <a href="#projects" class="btn">See My Work</a>
        </section>

<section id="about" class="section about">
            <h2>About Me</h2>
            <p>A passionate developer who enjoys building applications that make life easier. I specialize in web and mobile development and love experimenting with new technologies.</p>
        </section>

<section id="skills" class="section skills">
            <h2>Skills</h2>
            <div class="skills-grid">
                <div class="skill-card">JavaScript</div>
                <div class="skill-card">React</div>
                <div class="skill-card">Node.js</div>
                <div class="skill-card">Python</div>
                <div class="skill-card">CSS</div>
                <div class="skill-card">UI/UX Design</div>
            </div>
        </section>

<section id="projects" class="section projects">
            <h2>Projects</h2>
            <div class="projects-grid">
                <div class="project-card">
                    <h3>Project Title 1</h3>
                    <p>Short description about the project.</p>
                    <a href="#" class="btn">View Project</a>
                </div>
                <div class="project-card">
                    <h3>Project Title 2</h3>
                    <p>Short description about the project.</p>
                    <a href="#" class="btn">View Project</a>
                </div>
                
            </div>
        </section>

<section id="experience" class="section experience">
            <h2>Experience</h2>
            <ul>
                <li><strong>Frontend Developer</strong> at Tech Corp (2020 - 2023)</li>
                <li><strong>Intern Developer</strong> at Web Studio (2018 - 2020)</li>
            </ul>
        </section>

<section id="contact" class="section contact">
            <h2>Contact Me</h2>
            <form action="#" method="POST">
                <input type="text" name="name" placeholder="Your Name" required>
                <input type="email" name="email" placeholder="Your Email" required>
              <input  name="message" placeholder="Your Message" required />
                <button type="submit" class="btn">Send Message</button>
            </form>
        </section>
    </main>
</body>
</html>

CSS

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body and General Styling */
body {
    font-family: 'Arial', sans-serif;
    display: flex;
}

/* Sidebar */
.sidebar {
    width: 250px;
    background: linear-gradient(to bottom, #9ad3bc, #57b8ff);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
    height: 100vh;
    position: fixed;
}

.sidebar .logo {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 40px;
}

.sidebar-menu {
    list-style: none;
}

.sidebar-menu li {
    margin: 20px 0;
}

.sidebar-menu a {
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s;
}

.sidebar-menu a:hover {
    color: #333;
}

/* Content Wrapper */
.content {
    margin-left: 250px;
    padding: 40px;
    width: 100%;
}

/* Section Styling */
.section {
    margin-bottom: 60px;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Hero Section */
.hero {
    background-color: #ffe0ac;
    text-align: center;
    color: #333;
}

.hero h1 {
    font-size: 2.8rem;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.hero .btn {
    padding: 12px 24px;
    font-size: 1rem;
    background-color: #f38181;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.hero .btn:hover {
    background-color: #f54a4a;
}

/* Section-specific styling */
.about, .experience {
    background-color: #f8f1f1;
}

.skills {
    background-color: #eaffd0;
}

.projects {
    background-color: #bce6eb;
}

.contact {
    background-color: #ffd3b6;
}

/* Skill and Project Cards */
.skills-grid, .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

.skill-card, .project-card {
    background-color: #ffffff;
    color: #333;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.skill-card:hover, .project-card:hover {
    transform: scale(1.05);
}

/* Form Styling */
form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 500px;
    margin: 0 auto;
}

form input, form textarea {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #cccccc;
    font-size: 1rem;
}

form button {
    padding: 12px;
    font-size: 1rem;
    background-color: #f38181;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s;
}

form button:hover {
    background-color: #f54a4a;
}

Recommandé

Jeu de ping-pong

Blogium : Modèle HTML de blog sur la technologie, le design et la vie

Modèle gratuit de page d'accueil

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS