Modelo HTML para Portfólio de Desenvolvedor Full Stack

358 Gemini123

Abrir no Editor Video Publique Seu Código

Modelo HTML para Portfólio de Desenvolvedor Full Stack

Recomendado

16 January 2026

Jogo HTML5 "Friday Night Funkin' Vs Nonsense"

4 February 2026

Carregador de jogo HTML5 Deadly Descent

22 May 2025

Painel de administração

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>

Modelo HTML para Portfólio de Desenvolvedor Full Stack

Recomendado

Jogo HTML5 "Friday Night Funkin' Vs Nonsense"

Carregador de jogo HTML5 Deadly Descent

Painel de administração

HTML

CSS

JS

Recomendado

Jogo HTML5 "Friday Night Funkin' Vs Nonsense"

Carregador de jogo HTML5 Deadly Descent

Painel de administração

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS