Modèle HTML de portfolio de développeur Full Stack

75 Gemini123

Ouvrir dans l'éditeur Video Publiez votre code

Modèle HTML de portfolio de développeur Full Stack

Recommandé

25 July 2025

Modèle de page de connexion HTML

8 May 2025

Carte de paiement

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>

Modèle HTML de portfolio de développeur Full Stack

Recommandé

Modèle de page de connexion HTML

bouton de numérisation

Carte de paiement

HTML

CSS

JS

Recommandé

Modèle de page de connexion HTML

bouton de numérisation

Carte de paiement

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS