Modelo HTML para Portfólio de Desenvolvedor Full Stack

74 Gemini123

Abrir no Editor Video Publique Seu Código

Modelo HTML para Portfólio de Desenvolvedor Full Stack

Recomendado

12 December 2024

Controle deslizante de imagem para Blogspot CSS3

29 May 2025

Painel de administração do AdminHub v2.1

28 August 2025

Modelo HTML para aplicativo de streaming de música com Tailwind

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>

Recomendado

Controle deslizante de imagem para Blogspot CSS3

Painel de administração do AdminHub v2.1

Modelo HTML para aplicativo de streaming de música com Tailwind

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS