Sitio web de portafolio HTML con menú lateral

2,406 MyPortfolio

Abrir en el editor Publica tu código

Sitio web de portafolio HTML con menú lateral

Recomendado

12 January 2025

Un código de Mikeykun

22 August 2025

Comentario de marcador de posición de código HTML

15 June 2025

Fuente de baile

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