Plantilla HTML de portafolio de desarrollador

435 codex

Abrir en el editor Publica tu código

Plantilla HTML de portafolio de desarrollador

Recomendado

30 September 2025

Animación de carga CSS con ondas y ondulaciones

24 November 2024

Tienda de zapatos

5 October 2025

Estructura HTML del contenedor de animación 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>

Recomendado

Animación de carga CSS con ondas y ondulaciones

Tienda de zapatos

Estructura HTML del contenedor de animación CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS