Modello HTML per portfolio sviluppatori con sfondo animato

26 lebdev

Apri nell'Editor Video Pubblica il Tuo Codice

Modello HTML per portfolio sviluppatori con sfondo animato

Consigliato

18 September 2025

Frammento HTML di animazione della finestra CSS

4 December 2025

Pulsante animato HTML con SVG e testo

7 March 2025

Incrocio stradale con three.js

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DevVision | Creative Developer</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
    <style>
        :root {
            --bg: #0f172a;
            --primary: #38bdf8;
            --secondary: #818cf8;
            --text: #f8fafc;
            --card-bg: rgba(30, 41, 59, 0.7);
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

body {
            background-color: var(--bg);
            color: var(--text);
            overflow-x: hidden;
        }

/* Animated Background */
        .bg-glow {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: radial-gradient(circle at 50% 50%, #1e293b 0%, #0f172a 100%);
        }

.blob {
            position: absolute;
            width: 500px;
            height: 500px;
            background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(129, 140, 248, 0.2));
            filter: blur(80px);
            border-radius: 50%;
            z-index: -1;
            animation: move 20s infinite alternate;
        }

@keyframes move {
            from { transform: translate(-10%, -10%); }
            to { transform: translate(20%, 20%); }
        }

/* Navigation */
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 2rem 10%;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 100;
            backdrop-filter: blur(10px);
        }

.logo {
            font-size: 1.5rem;
            font-weight: 800;
            letter-spacing: -1px;
            background: linear-gradient(to right, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

.nav-links a {
            color: var(--text);
            text-decoration: none;
            margin-left: 2rem;
            font-size: 0.9rem;
            transition: 0.3s;
            opacity: 0.8;
        }

.nav-links a:hover {
            opacity: 1;
            color: var(--primary);
        }

/* Hero Section */
        .hero {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 0 1rem;
        }

.hero h1 {
            font-size: 4rem;
            margin-bottom: 1rem;
            line-height: 1.1;
        }

.hero p {
            font-size: 1.2rem;
            color: #94a3b8;
            max-width: 600px;
            margin-bottom: 2rem;
        }

.typing-text {
            color: var(--primary);
            border-right: 3px solid var(--primary);
            padding-right: 5px;
            animation: blink 0.75s step-end infinite;
        }

@keyframes blink {
            from, to { border-color: transparent }
            50% { border-color: var(--primary); }
        }

.cta-buttons {
            display: flex;
            gap: 1rem;
        }

.btn {
            padding: 0.8rem 2rem;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            transition: 0.3s;
        }

.btn-primary {
            background: var(--primary);
            color: var(--bg);
        }

.btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(56, 189, 248, 0.3);
        }

.btn-outline {
            border: 1px solid rgba(255,255,255,0.1);
            color: var(--text);
        }

.btn-outline:hover {
            background: rgba(255,255,255,0.05);
        }

/* Features Section */
        .features {
            padding: 5rem 10%;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

.card {
            background: var(--card-bg);
            padding: 2.5rem;
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.05);
            transition: 0.4s;
            cursor: default;
        }

.card:hover {
            transform: translateY(-10px);
            border-color: var(--primary);
            background: rgba(30, 41, 59, 0.9);
        }

.card i {
            font-size: 2rem;
            color: var(--primary);
            margin-bottom: 1.5rem;
        }

.card h3 {
            margin-bottom: 1rem;
        }

.card p {
            color: #94a3b8;
            line-height: 1.6;
        }

/* Code Block Animation */
        .code-window {
            background: #011627;
            border-radius: 10px;
            padding: 20px;
            margin-top: 4rem;
            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
            width: 100%;
            max-width: 700px;
            text-align: left;
            font-family: 'Courier New', Courier, monospace;
            position: relative;
        }

.dots {
            display: flex;
            gap: 8px;
            margin-bottom: 15px;
        }

.dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

.red { background: #ff5f56; }
        .yellow { background: #ffbd2e; }
        .green { background: #27c93f; }

.code-content {
            color: #d6deeb;
            font-size: 0.9rem;
        }

.keyword { color: #c792ea; }
        .function { color: #82aaff; }
        .string { color: #ecc48d; }

@media (max-width: 768px) {
            .hero h1 { font-size: 2.5rem; }
            .nav-links { display: none; }
        }
    </style>
</head>
<body>

<nav>
        <div class="logo"><DEV.VISION /></div>
        <div class="nav-links">
            <a href="#work">Work</a>
            <a href="#services">Services</a>
            <a href="#contact">Contact</a>
            <a href="#" class="btn btn-outline" style="padding: 0.5rem 1.2rem;">Resume</a>
        </div>
    </nav>

<section class="hero">
        <h1>Building Digital <br><span class="typing-text" id="typewriter"></span></h1>
        <p>A full-stack developer specializing in building exceptional digital experiences that are fast, accessible, and visually stunning.</p>
        
        <div class="cta-buttons">
            <a href="#" class="btn btn-primary">View Projects</a>
            <a href="#" class="btn btn-outline">Let's Talk</a>
        </div>

<div class="code-window">
            <div class="dots">
                <div class="dot red"></div>
                <div class="dot yellow"></div>
                <div class="dot green"></div>
            </div>
            <div class="code-content">
                <div><span class="keyword">const</span> developer = {</div>
                <div style="padding-left: 20px;">name: <span class="string">'Alex Rivera'</span>,</div>
                <div style="padding-left: 20px;">skills: [<span class="string">'React'</span>, <span class="string">'Node'</span>, <span class="string">'Three.js'</span>],</div>
                <div style="padding-left: 20px;"><span class="function">passion</span>: () => <span class="string">'Clean Code'</span></div>
                <div>};</div>
            </div>
        </div>
    </section>

<section class="features" id="services">
        <div class="card">
            <i class="fas fa-code"></i>
            <h3>Frontend Dev</h3>
            <p>Creating responsive, high-performance user interfaces using modern frameworks like React and Vue.</p>
        </div>
        <div class="card">
            <i class="fas fa-server"></i>
            <h3>Backend Arch</h3>
            <p>Designing scalable server-side logic and robust API structures with Node.js and PostgreSQL.</p>
        </div>
        <div class="card">
            <i class="fas fa-mobile-alt"></i>
            <h3>Mobile First</h3>
            <p>Optimizing experiences for every screen size, ensuring your product looks great everywhere.</p>
        </div>
    </section>

function type() {
            const currentPhrase = phrases[phraseIndex];
            
            if (isDeleting) {
                textElement.textContent = currentPhrase.substring(0, charIndex - 1);
                charIndex--;
            } else {
                textElement.textContent = currentPhrase.substring(0, charIndex + 1);
                charIndex++;
            }

let typeSpeed = isDeleting ? 100 : 200;

if (!isDeleting && charIndex === currentPhrase.length) {
                isDeleting = true;
                typeSpeed = 2000; // Pause at end
            } else if (isDeleting && charIndex === 0) {
                isDeleting = false;
                phraseIndex = (phraseIndex + 1) % phrases.length;
                typeSpeed = 500;
            }

setTimeout(type, typeSpeed);
        }

// Start animation
        document.addEventListener('DOMContentLoaded', () => {
            type();
            
            // Mouse move effect for the blob
            const blob = document.querySelector('.blob');
            document.addEventListener('mousemove', (e) => {
                const x = e.clientX;
                const y = e.clientY;
                blob.style.left = x - 250 + 'px';
                blob.style.top = y - 250 + 'px';
            });
        });
    </script>
</body>
</html>

Consigliato

Frammento HTML di animazione della finestra CSS

Pulsante animato HTML con SVG e testo

Incrocio stradale con three.js

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS