Plantilla web para portafolio: Diseño moderno

990 Primes

Abrir en el editor Publica tu código

Plantilla web para portafolio: Diseño moderno

Recomendado

23 August 2025

Plantilla de sitio web de portafolio de diseñador web

21 September 2024

Agregar botón para abrir y agregar datos de perfil con validación

19 April 2024

Plantilla de formulario de inicio de sesión HTML V2

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);
        });

Plantilla web para portafolio: Diseño moderno

Recomendado

Plantilla de sitio web de portafolio de diseñador web

Agregar botón para abrir y agregar datos de perfil con validación

Plantilla de formulario de inicio de sesión HTML V2

HTML

CSS

JS

Recomendado

Plantilla de sitio web de portafolio de diseñador web

Agregar botón para abrir y agregar datos de perfil con validación

Plantilla de formulario de inicio de sesión HTML V2

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS