Modello HTML per portfolio di sviluppatori full stack

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

6 June 2025

Frammento di animazione di caricamento CSS

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>

Modello HTML per portfolio di sviluppatori full stack

Consigliato

Un codice del testo

Un codice di andres.stahr

Frammento di animazione di caricamento CSS

HTML

CSS

JS

Consigliato

Un codice del testo

Un codice di andres.stahr

Frammento di animazione di caricamento CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS