Plantilla web para portafolio: Diseño moderno

2503 Primes

Abrir en el editor Video Publica tu código

Plantilla web para portafolio: Diseño moderno

Recomendado

19 January 2026

Código HTML para insertar en el juego Parking Fury

12 December 2024

Control deslizante de imágenes para Blogspot CSS3

28 June 2025

Plantilla HTML para sitio web de alquiler de bicicletas

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Portfolio — Modern Design 2025</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
        rel="stylesheet"
    />
    <style>
        :root {
            --bg: #0a0a0a;
            --text: #e0e0e0;
            --accent: #00ff99;
            --accent-dark: #00cc77;
            --gray: #2a2a2a;
            --border: rgba(0, 255, 153, 0.2);
            --shadow: 0 0 40px rgba(0, 255, 153, 0.15);
            --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background: var(--bg);
            color: var(--text);
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            overflow-x: hidden;
            position: relative;
        }

.bg-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }

.bg-animation::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 80%, rgba(0, 255, 153, 0.08) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(0, 255, 153, 0.06) 0%, transparent 50%);
            animation: pulse 8s infinite alternate;
        }

@keyframes pulse {
            0% { opacity: 0.6; transform: scale(1); }
            100% { opacity: 1; transform: scale(1.05); }
        }

header {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            padding: 1.5rem 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            backdrop-filter: blur(12px);
            background: rgba(10, 10, 10, 0.7);
            border-bottom: 1px solid var(--border);
            transition: var(--transition);
        }

.logo {
            font-family: 'JetBrains Mono', monospace;
            font-weight: 600;
            font-size: 1.5rem;
            color: var(--accent);
            text-decoration: none;
            letter-spacing: -0.5px;
        }

nav ul {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

nav a {
            color: var(--text);
            text-decoration: none;
            font-weight: 500;
            position: relative;
            transition: var(--transition);
        }

nav a::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent);
            transition: var(--transition);
        }

nav a:hover {
            color: var(--accent);
        }

nav a:hover::after {
            width: 100%;
        }

.hero {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding: 0 5%;
            position: relative;
        }

.hero h1 {
            font-size: clamp(3rem, 8vw, 6rem);
            font-weight: 700;
            line-height: 0.9;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #ffffff, var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.hero .subtitle {
            font-size: 1.5rem;
            color: #aaaaaa;
            margin-bottom: 2rem;
            max-width: 600px;
        }

.cta-button {
            padding: 1rem 2.5rem;
            background: transparent;
            color: var(--accent);
            border: 2px solid var(--accent);
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

.cta-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: var(--accent);
            transition: var(--transition);
            z-index: -1;
        }

.cta-button:hover::before {
            left: 0;
        }

.cta-button:hover {
            color: var(--bg);
            box-shadow: var(--shadow);
        }

.projects {
            padding: 10rem 5%;
            background: var(--gray);
        }

.section-title {
            font-size: 3rem;
            margin-bottom: 4rem;
            text-align: center;
            background: linear-gradient(135deg, #ffffff, var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2.5rem;
            max-width: 1400px;
            margin: 0 auto;
        }

.project-card {
            background: rgba(20, 20, 20, 0.8);
            border-radius: 1.5rem;
            overflow: hidden;
            position: relative;
            transition: var(--transition);
            border: 1px solid var(--border);
            backdrop-filter: blur(10px);
        }

.project-card:hover {
            transform: translateY(-15px);
            box-shadow: var(--shadow);
            border-color: var(--accent);
        }

.project-img {
            height: 250px;
            background: linear-gradient(45deg, #1a1a1a, #2a2a2a);
            position: relative;
            overflow: hidden;
        }

.project-img::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect fill="%23222222" width="400" height="300"/><path fill="%23333333" d="M0 150 Q100 50 200 150 T400 150 L400 300 L0 300 Z"/></svg>') center/cover;
            opacity: 0.6;
        }

.project-info {
            padding: 2rem;
        }

.project-title {
            font-size: 1.5rem;
            margin-bottom: 0.75rem;
            color: var(--accent);
        }

.project-desc {
            color: #bbbbbb;
            font-size: 0.95rem;
            margin-bottom: 1.5rem;
        }

.project-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

.tag {
            background: rgba(0, 255, 153, 0.15);
            color: var(--accent);
            padding: 0.35rem 0.75rem;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 500;
        }

.contact {
            padding: 8rem 5%;
            text-align: center;
        }

.contact h2 {
            font-size: 3rem;
            margin-bottom: 2rem;
            background: linear-gradient(135deg, #ffffff, var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

.contact p {
            max-width: 600px;
            margin: 0 auto 3rem;
            color: #aaaaaa;
            font-size: 1.1rem;
        }

.social-links {
            display: flex;
            justify-content: center;
            gap: 2rem;
            flex-wrap: wrap;
        }

.social-links a {
            color: var(--text);
            font-size: 1.5rem;
            transition: var(--transition);
        }

.social-links a:hover {
            color: var(--accent);
            transform: translateY(-5px);
        }

footer {
            padding: 3rem 5%;
            text-align: center;
            border-top: 1px solid var(--border);
            color: #666;
            font-size: 0.9rem;
        }

@media (max-width: 768px) {
            nav ul {
                gap: 1rem;
            }

.hero {
                text-align: center;
                align-items: center;
            }

.projects-grid {
                grid-template-columns: 1fr;
            }
        }

html {
            scroll-behavior: smooth;
        }

.fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }

.fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <div class="bg-animation"></div>

<header>
        <a href="#" class="logo">PORTFOLIO</a>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

<section class="hero" id="home">
        <h1 class="fade-in">Hello, I am <br />Primes</h1>
        <p class="subtitle fade-in">UI/UX Designer • Frontend Developer • Creator</p>
        <a href="#projects" class="cta-button fade-in">View Works</a>
    </section>

<section class="projects" id="projects">
        <h2 class="section-title fade-in">My Projects</h2>
        <div class="projects-grid">
            <div class="project-card fade-in">
                <div class="project-img"></div>
                <div class="project-info">
                    <h3 class="project-title">Neon Dashboard</h3>
                    <p class="project-desc">A modern analytics dashboard with a neon interface and animated charts.</p>
                    <div class="project-tags">
                        <span class="tag">React</span>
                        <span class="tag">Framer Motion</span>
                        <span class="tag">Chart.js</span>
                    </div>
                </div>
            </div>

<div class="project-card fade-in">
                <div class="project-img"></div>
                <div class="project-info">
                    <h3 class="project-title">AI Landing</h3>
                    <p class="project-desc">A landing page for an AI product with 3D animations and interactive elements.</p>
                    <div class="project-tags">
                        <span class="tag">Three.js</span>
                        <span class="tag">GSAP</span>
                        <span class="tag">WebGL</span>
                    </div>
                </div>
            </div>

<div class="project-card fade-in">
                <div class="project-img"></div>
                <div class="project-info">
                    <h3 class="project-title">Crypto Wallet</h3>
                    <p class="project-desc">A mobile wallet app with biometrics and dark mode.</p>
                    <div class="project-tags">
                        <span class="tag">React Native</span>
                        <span class="tag">TypeScript</span>
                        <span class="tag">Biometrics</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

document.querySelectorAll('.fade-in').forEach(el => {
            observer.observe(el);
        });

Recomendado

Código HTML para insertar en el juego Parking Fury

Control deslizante de imágenes para Blogspot CSS3

Plantilla HTML para sitio web de alquiler de bicicletas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS