Sitio web de portafolio HTML con menú lateral

2,637 MyPortfolio

Abrir en el editor Publica tu código

Sitio web de portafolio HTML con menú lateral

Recomendado

19 October 2024

Código de barra de navegación HTML CSS

15 April 2026

Editor HTML: vista previa en tiempo real e introducción de código.

26 February 2026

Código HTML CSS con efecto de vidrio líquido

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;
}