Portafolio de desarrolladores: ejemplos de HTML, CSS y JavaScript

Abrir en el editor Publica tu código

Recomendado

7 November 2024

Plantilla de página de destino de sitio web

19 March 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>John Doe | Full Stack Developer Portfolio</title>
    
    <style>
        body { font-family: sans-serif; margin: 0; padding: 0; background-color: #f4f4f9; color: #333; }
        header { background-color: #222; color: white; padding: 15px 5%; display: flex; justify-content: space-between; align-items: center; }
        nav a { color: white; margin-left: 20px; text-decoration: none; }
        section { padding: 60px 5%; min-height: 400px; }
        #hero { background-color: #007bff; color: white; text-align: center; padding: 100px 5%; }
        .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 30px; }
        .project-card { border: 1px solid #ccc; padding: 20px; background-color: white; border-radius: 5px; }
        footer { background-color: #333; color: white; text-align: center; padding: 20px 5%; }
    </style>
</head>
<body>

<header>
        <h1>John Doe</h1>
        <nav>
            <a href="#hero">Home</a>
            <a href="#about">About</a>
            <a href="#portfolio">Portfolio</a>
            <a href="#skills">Skills</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

<main>

<section id="hero">
            <h2>Creative Developer & Problem Solver</h2>
            <p>Building modern, responsive, and high-performance web applications.</p>
            <a href="#portfolio" style="background-color: white; color: #007bff; padding: 10px 20px; display: inline-block; margin-top: 20px; text-decoration: none; border-radius: 5px;">View My Work</a>
        </section>

<section id="about">
            <h2>About Me</h2>
            <p>I am a full-stack developer with 5 years of experience specializing in JavaScript ecosystems. I thrive on turning complex problems into simple, elegant, and efficient solutions. My passion lies in clean code, robust architecture, and delivering exceptional user experiences.</p>
            <p>When I'm not coding, you can find me hiking or experimenting with new coffee brewing methods.</p>
        </section>

<section id="portfolio" style="background-color: #e9ecef;">
            <h2>Featured Projects</h2>
            <div class="project-grid">

<div class="project-card">
                    <h3>E-commerce Platform Redesign</h3>
                    <p>A complete overhaul of an existing platform, resulting in a 30% increase in conversion rates. (React, Node.js, MongoDB)</p>
                    <a href="#">View Live</a>
                </div>

<div class="project-card">
                    <h3>Real-time Chat Application</h3>
                    <p>A scalable real-time messaging service built using WebSockets and optimized for low-latency communication. (Vue.js, Socket.io, Express)</p>
                    <a href="#">View Live</a>
                </div>

<div class="project-card">
                    <h3>Data Visualization Dashboard</h3>
                    <p>Interactive dashboard for analyzing large datasets, featuring custom charts and filtering capabilities. (D3.js, Python/Flask)</p>
                    <a href="#">View Live</a>
                </div>

</div>
        </section>

<section id="skills">
            <h2>Technical Expertise</h2>
            <p>I specialize in the following technologies:</p>
            <ul>
                <li><strong>Frontend:</strong> HTML5, CSS3 (SCSS/Less), JavaScript (ES6+), React, Vue, Redux</li>
                <li><strong>Backend:</strong> Node.js, Express, Python (Django/Flask), REST APIs, GraphQL</li>
                <li><strong>Databases:</strong> PostgreSQL, MySQL, MongoDB, Redis</li>
                <li><strong>Tools & DevOps:</strong> Git, Docker, AWS, Netlify, CI/CD</li>
            </ul>
        </section>

<section id="contact" style="background-color: #f8f9fa;">
            <h2>Get In Touch</h2>
            <p>Have a project idea or want to collaborate? Send me a message!</p>
            
            <form action="#" method="POST" style="max-width: 500px; margin-top: 20px;">
                <div style="margin-bottom: 15px;">
                    <label for="name">Name:</label>
                    <input type="text" id="name" name="name" required style="width: 100%; padding: 10px; box-sizing: border-box; border: 1px solid #ccc;">
                </div>
                <div style="margin-bottom: 15px;">
                    <label for="email">Email:</label>
                    <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; box-sizing: border-box; border: 1px solid #ccc;">
                </div>
                <div style="margin-bottom: 15px;">
                    <label for="message">Message:</label>
                    <input id="message" name="message" rows="5" required style="width: 100%; padding: 10px; box-sizing: border-box; border: 1px solid #ccc;"/>
                </div>
                <button type="submit" style="padding: 10px 20px; background-color: #007bff; color: white; border: none; cursor: pointer;">Send Message</button>
            </form>
        </section>

</main>

<footer>
        <p>© 2024 John Doe | All Rights Reserved</p>
        <div>
            <a href="#" style="color: white; margin: 0 10px;">LinkedIn</a> | 
            <a href="#" style="color: white; margin: 0 10px;">GitHub</a>
        </div>
    </footer>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Developer Name | Advanced Portfolio</title>
    <meta name="description" content="A modern, advanced portfolio showcasing professional projects and skills.">
    
    
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;900&display=swap" rel="stylesheet">
    
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

/* --- Global Reset and Typography --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

html {
            scroll-behavior: smooth;
        }

body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
        }

a {
            color: var(--primary-color);
            text-decoration: none;
            transition: color var(--transition-speed);
        }

a:hover {
            color: var(--secondary-color);
        }

section {
            padding: 100px 20px;
            min-height: 80vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

.container {
            width: 100%;
            max-width: var(--max-width);
            margin: 0 auto;
        }

h1, h2, h3 {
            font-weight: 700;
            margin-bottom: 20px;
        }

h2 {
            font-size: 3rem;
            text-align: center;
            margin-bottom: 60px;
            position: relative;
        }

h2::after {
            content: '';
            display: block;
            width: 80px;
            height: 4px;
            background: var(--primary-color);
            margin: 10px auto 0;
            border-radius: 2px;
        }

.btn {
            display: inline-block;
            padding: 12px 30px;
            border: 2px solid var(--primary-color);
            border-radius: 50px;
            color: var(--text-color);
            background: var(--primary-color);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: background var(--transition-speed), transform var(--transition-speed);
            cursor: pointer;
        }

.btn:hover {
            background: none;
            color: var(--primary-color);
            transform: translateY(-3px);
        }

/* --- Navigation Bar (Sticky & Advanced) --- */
        .header {
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
            background: rgba(10, 10, 15, 0.95);
            backdrop-filter: blur(8px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

.nav {
            max-width: var(--max-width);
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
        }

.logo {
            font-size: 1.8rem;
            font-weight: 900;
            color: var(--secondary-color);
        }

.nav-list {
            list-style: none;
            display: flex;
        }

.nav-item {
            margin-left: 30px;
        }

.nav-link {
            font-weight: 600;
            padding: 5px 0;
            position: relative;
        }

.nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--secondary-color);
            transition: width var(--transition-speed), left var(--transition-speed);
        }

.nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
            left: 0;
        }

/* --- Hero Section (Full Viewport) --- */
        #hero {
            height: 100vh;
            text-align: center;
            background: linear-gradient(135deg, var(--bg-color) 0%, #1a0a25 100%);
            padding-top: 0;
        }

.hero-content {
            z-index: 5;
        }

.hero-content h1 {
            font-size: 5rem;
            margin-bottom: 10px;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1.1;
        }

.hero-content p {
            font-size: 1.5rem;
            margin-bottom: 40px;
            color: rgba(255, 255, 255, 0.8);
        }

/* --- Skills Section (Grid Layout) --- */
        .skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

.skill-card {
            background: var(--card-bg);
            padding: 30px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(106, 13, 173, 0.2);
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

.skill-card:hover {
            transform: translateY(-10px) scale(1.02);
            border-color: var(--primary-color);
        }

.skill-card i {
            font-size: 3rem;
            color: var(--secondary-color);
            margin-bottom: 15px;
        }

/* --- Portfolio Section (Advanced Grid) --- */
        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }

.project-card {
            background: var(--card-bg);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            transition: box-shadow var(--transition-speed);
        }

.project-card:hover {
            box-shadow: 0 15px 40px rgba(106, 13, 173, 0.5);
        }

.project-image {
            height: 250px;
            background: #2a2a30; /* Placeholder BG */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.5);
        }

.project-info {
            padding: 25px;
        }

.project-info h3 {
            color: var(--primary-color);
            margin-bottom: 10px;
        }

.tags span {
            display: inline-block;
            background: rgba(106, 13, 173, 0.2);
            color: var(--primary-color);
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 0.8rem;
            margin-right: 5px;
            margin-top: 10px;
        }

/* --- Contact Section --- */
        .contact-form-wrapper {
            background: var(--card-bg);
            padding: 40px;
            border-radius: 12px;
            max-width: 600px;
            width: 100%;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

.form-group {
            margin-bottom: 20px;
        }

.form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
        }

.form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #333;
            background: #222;
            color: var(--text-color);
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color var(--transition-speed);
        }

.form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(106, 13, 173, 0.3);
        }

/* --- Footer --- */
        .footer {
            text-align: center;
            padding: 40px 20px;
            border-top: 1px solid #1f1f25;
            background: #08080C;
        }

.social-links {
            margin: 20px 0;
        }

.social-links a {
            font-size: 1.5rem;
            margin: 0 15px;
            color: var(--text-color);
        }

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

/* --- Responsive Adjustments --- */
        @media (max-width: 768px) {
            .nav {
                flex-direction: column;
                padding: 10px 20px;
            }
            .nav-list {
                margin-top: 10px;
                justify-content: center;
                flex-wrap: wrap;
            }
            .nav-item {
                margin: 5px 15px;
            }
            .hero-content h1 {
                font-size: 3.5rem;
            }
            h2 {
                font-size: 2.5rem;
            }
            section {
                padding: 60px 20px;
            }
        }
    </style>
</head>
<body>

<header class="header">
        <nav class="nav">
            <div class="logo">
                <J.D/>
            </div>
            <ul class="nav-list">
                <li class="nav-item"><a href="#hero" class="nav-link active">Home</a></li>
                <li class="nav-item"><a href="#about" class="nav-link">About</a></li>
                <li class="nav-item"><a href="#portfolio" class="nav-link">Work</a></li>
                <li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
            </ul>
        </nav>
    </header>

<section id="hero">
        <div class="hero-content">
            <p>Hello, I'm Jane Doe</p>
            <h1>Building Digital Experiences.</h1>
            <p>A Full Stack Developer specializing in cutting-edge web technologies and modern design.</p>
            <a href="#portfolio" class="btn">View My Work</a>
        </div>
        
        
    </section>

<section id="about">
        <div class="container">
            <h2>About Me & Skills</h2>
            <p style="max-width: 800px; text-align: center; margin-bottom: 50px;">
                I craft performant and scalable applications using a diverse technology stack. My focus is on clean code, responsive design, and delivering seamless user experiences.
            </p>

<div class="skills-grid">
                <div class="skill-card">
                    <i class="fas fa-code"></i>
                    <h3>Frontend Mastery</h3>
                    <p>React, Vue.js, Advanced CSS (SASS/Styled Components), State Management.</p>
                </div>
                <div class="skill-card">
                    <i class="fas fa-server"></i>
                    <h3>Backend Development</h3>
                    <p>Node.js, Python (Django/Flask), REST APIs, Microservices Architecture.</p>
                </div>
                <div class="skill-card">
                    <i class="fas fa-database"></i>
                    <h3>Data Management</h3>
                    <p>PostgreSQL, MongoDB, Redis caching, Database Optimization.</p>
                </div>
                <div class="skill-card">
                    <i class="fas fa-tools"></i>
                    <h3>DevOps & Cloud</h3>
                    <p>Docker, Kubernetes basics, AWS/Azure, CI/CD Pipelines (Gitlab/Github Actions).</p>
                </div>
            </div>
        </div>
    </section>

<section id="portfolio">
        <div class="container">
            <h2>Featured Projects</h2>
            
            <div class="portfolio-grid">
                
                
                <div class="project-card">
                    <div class="project-image">
                        Project Thumbnail 1
                    </div>
                    <div class="project-info">
                        <h3>E-commerce Platform Redesign</h3>
                        <p>A high-performance e-commerce solution built with Next.js and integrated Stripe payments.</p>
                        <div class="tags">
                            <span>Next.js</span>
                            <span>Tailwind CSS</span>
                            <span>Stripe</span>
                            <span>GraphQL</span>
                        </div>
                        <p style="margin-top: 20px;"><a href="#" target="_blank">View Live <i class="fas fa-external-link-alt"></i></a></p>
                    </div>
                </div>

<div class="project-card">
                    <div class="project-image">
                        Project Thumbnail 2
                    </div>
                    <div class="project-info">
                        <h3>Real-time Analytics Dashboard</h3>
                        <p>A responsive dashboard utilizing websockets for live data visualization and reporting.</p>
                        <div class="tags">
                            <span>Vue.js</span>
                            <span>Node.js</span>
                            <span>Websockets</span>
                            <span>D3.js</span>
                        </div>
                        <p style="margin-top: 20px;"><a href="#" target="_blank">View Live <i class="fas fa-external-link-alt"></i></a></p>
                    </div>
                </div>

<div class="project-card">
                    <div class="project-image">
                        Project Thumbnail 3
                    </div>
                    <div class="project-info">
                        <h3>SaaS Landing Page & Backend</h3>
                        <p>Full stack implementation of a promotional site and core user management API.</p>
                        <div class="tags">
                            <span>Django</span>
                            <span>PostgreSQL</span>
                            <span>Bootstrap 5</span>
                            <span>AWS S3</span>
                        </div>
                        <p style="margin-top: 20px;"><a href="#" target="_blank">View Live <i class="fas fa-external-link-alt"></i></a></p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="contact">
        <div class="container" style="display: flex; flex-direction: column; align-items: center;">
            <h2>Get In Touch</h2>
            
            <div class="contact-form-wrapper">
                <p style="text-align: center; margin-bottom: 30px;">
                    Have a project idea or need a consultation? Let's connect!
                </p>

<form action="#" method="POST">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" id="email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="message">Message</label>
                        <input id="message" name="message" rows="5" required/>
                    </div>
                    <button type="submit" class="btn" style="width: 100%; margin-top: 10px;">Send Message</button>
                </form>
            </div>
        </div>
    </section>

<footer class="footer">
        <div class="social-links">
            <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
            <a href="#" aria-label="GitHub"><i class="fab fa-github"></i></a>
            <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
        </div>
        <p>© <span id="current-year"></span> Jane Doe. Developed with passion and modern standards.</p>
    </footer>

<script>
        document.addEventListener('DOMContentLoaded', function() {
            // Set current year in footer
            document.getElementById('current-year').textContent = new Date().getFullYear();

const navLinks = document.querySelectorAll('.nav-link');
            const sections = document.querySelectorAll('section');

// Function to handle active navigation link on scroll
            const observerOptions = {
                root: null,
                rootMargin: '0px',
                threshold: 0.3 // Trigger when 30% of the section is visible
            };

sections.forEach(section => {
                sectionObserver.observe(section);
            });
            
            // Initial check for the hero section on load
            if (window.scrollY < document.getElementById('about').offsetTop - 100) {
                 document.querySelector('.nav-link[href="#hero"]').classList.add('active');
            }
        });
    </script>

</body>
</html>

Portafolio de desarrolladores: ejemplos de HTML, CSS y JavaScript

Recomendado

Plantilla de página de destino de sitio web

Animación de sombra de texto

Un código de meriem

HTML

CSS

JS

Recomendado

Plantilla de página de destino de sitio web

Animación de sombra de texto

Un código de meriem

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS