Portfolio Website

Open In Editor Publish Your Code

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

Portfolio Website

Recommended

Portfolio Website HTML Template

Web Designer Portfolio HTML Template

Animated Portfolio

HTML

CSS

JS

Recommended

Portfolio Website HTML Template

Web Designer Portfolio HTML Template

Animated Portfolio

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS