Plantilla HTML de portafolio de desarrollador full stack

357 Gemini123

Abrir en el editor Video Publica tu código

Plantilla HTML de portafolio de desarrollador full stack

Recomendado

16 January 2026

FNF Shaggy x Matt Mod HTML5 Juego incrustado

19 May 2025

Un código de efficientapp58

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DevPortfolio | Full Stack Developer</title>
    <style>
        :root {
            --bg: #0f172a;
            --card-bg: #1e293b;
            --text-main: #f8fafc;
            --text-dim: #94a3b8;
            --accent: #38bdf8;
            --accent-hover: #7dd3fc;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }

body {
            background-color: var(--bg);
            color: var(--text-main);
            line-height: 1.6;
            scroll-behavior: smooth;
        }

nav {
            position: fixed;
            top: 0;
            width: 100%;
            padding: 1.5rem 10%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(15, 23, 42, 0.9);
            backdrop-filter: blur(10px);
            z-index: 1000;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

.logo {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--accent);
            text-decoration: none;
        }

.nav-links a {
            color: var(--text-dim);
            text-decoration: none;
            margin-left: 2rem;
            transition: color 0.3s;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.nav-links a:hover {
            color: var(--accent);
        }

section {
            padding: 100px 10% 60px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

.hero {
            text-align: left;
        }

.hero h1 {
            font-size: clamp(2.5rem, 8vw, 4.5rem);
            margin-bottom: 1rem;
            line-height: 1.1;
        }

.hero h1 span {
            color: var(--accent);
        }

.hero p {
            font-size: 1.25rem;
            color: var(--text-dim);
            max-width: 600px;
            margin-bottom: 2rem;
        }

.btn {
            display: inline-block;
            padding: 0.8rem 2rem;
            background: transparent;
            color: var(--accent);
            border: 1px solid var(--accent);
            text-decoration: none;
            border-radius: 4px;
            font-weight: 600;
            transition: all 0.3s;
        }

.btn:hover {
            background: rgba(56, 189, 248, 0.1);
            transform: translateY(-3px);
        }

.section-title {
            font-size: 2rem;
            margin-bottom: 3rem;
            display: flex;
            align-items: center;
        }

.section-title::after {
            content: "";
            height: 1px;
            width: 300px;
            background: rgba(255,255,255,0.1);
            margin-left: 20px;
        }

.grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

.card {
            background: var(--card-bg);
            padding: 2rem;
            border-radius: 8px;
            border: 1px solid transparent;
            transition: all 0.3s;
        }

.card:hover {
            border-color: var(--accent);
            transform: translateY(-5px);
        }

.card h3 {
            margin-bottom: 1rem;
            color: var(--accent);
        }

.tech-stack {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 1.5rem;
        }

.tag {
            background: rgba(56, 189, 248, 0.1);
            color: var(--accent);
            padding: 0.2rem 0.6rem;
            border-radius: 4px;
            font-size: 0.8rem;
        }

footer {
            padding: 4rem 10%;
            text-align: center;
            color: var(--text-dim);
            border-top: 1px solid rgba(255,255,255,0.1);
        }

@media (max-width: 768px) {
            .nav-links { display: none; }
            .section-title::after { width: 100px; }
        }
    </style>
</head>
<body>

<nav>
        <a href="#" class="logo"><DEV /></a>
        <div class="nav-links">
            <a href="#about">About</a>
            <a href="#projects">Projects</a>
            <a href="#contact">Contact</a>
        </div>
    </nav>

<main>
        <section class="hero">
            <p style="color: var(--accent); font-family: monospace; margin-bottom: 10px;">Hi, my name is</p>
            <h1>Alex Rivera.<span><br>I build things for the web.</span></h1>
            <p>I’m a software engineer specializing in building (and occasionally designing) exceptional digital experiences. Currently, I’m focused on building accessible, human-centered products.</p>
            <a href="#projects" class="btn">View My Work</a>
        </section>

<section id="about">
            <h2 class="section-title">About Me</h2>
            <div class="grid">
                <div class="card">
                    <h3>Frontend</h3>
                    <p>Creating responsive, performant, and accessible user interfaces using modern frameworks.</p>
                    <div class="tech-stack">
                        <span class="tag">React</span>
                        <span class="tag">TypeScript</span>
                        <span class="tag">Next.js</span>
                        <span class="tag">Tailwind</span>
                    </div>
                </div>
                <div class="card">
                    <h3>Backend</h3>
                    <p>Developing robust APIs and database architectures to power complex applications.</p>
                    <div class="tech-stack">
                        <span class="tag">Node.js</span>
                        <span class="tag">PostgreSQL</span>
                        <span class="tag">GraphQL</span>
                        <span class="tag">Docker</span>
                    </div>
                </div>
            </div>
        </section>

<section id="projects">
            <h2 class="section-title">Selected Projects</h2>
            <div class="grid">
                <div class="card">
                    <h3>E-Commerce Engine</h3>
                    <p>A headless commerce solution with real-time inventory tracking and Stripe integration.</p>
                    <div class="tech-stack">
                        <span class="tag">Next.js</span>
                        <span class="tag">Prisma</span>
                        <span class="tag">Stripe</span>
                    </div>
                </div>
                <div class="card">
                    <h3>Task Management AI</h3>
                    <p>Project management tool featuring automated task prioritization using machine learning.</p>
                    <div class="tech-stack">
                        <span class="tag">Python</span>
                        <span class="tag">React</span>
                        <span class="tag">FastAPI</span>
                    </div>
                </div>
                <div class="card">
                    <h3>Analytics Dashboard</h3>
                    <p>Real-time data visualization platform for monitoring server-side metrics and traffic.</p>
                    <div class="tech-stack">
                        <span class="tag">D3.js</span>
                        <span class="tag">Redis</span>
                        <span class="tag">Socket.io</span>
                    </div>
                </div>
            </div>
        </section>

<section id="contact" style="text-align: center; align-items: center;">
            <h2 class="section-title">Get In Touch</h2>
            <p style="max-width: 500px; margin-bottom: 2rem;">My inbox is always open. Whether you have a question or just want to say hi, I’ll try my best to get back to you!</p>
            <a href="mailto:hello@example.com" class="btn">Say Hello</a>
        </section>
    </main>

</body>
</html>

Plantilla HTML de portafolio de desarrollador full stack

Recomendado

FNF Shaggy x Matt Mod HTML5 Juego incrustado

SITIO WEB DE APPLE

Un código de efficientapp58

HTML

CSS

JS

Recomendado

FNF Shaggy x Matt Mod HTML5 Juego incrustado

SITIO WEB DE APPLE

Un código de efficientapp58

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS