Holographic Portfolio Website Template | HTML CSS JS

Open In Editor Video Publish Your Code

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dev.Portfolio | Holographic</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=Outfit:wght@300;400;600;800&family=Space+Grotesk:wght@300;500;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>

<body>

<div class="noise-overlay"></div>
    <div class="holo-gradient-orb orb-1"></div>
    <div class="holo-gradient-orb orb-2"></div>

<nav class="glass-nav">
        <div class="nav-logo">DEV.<span>IO</span></div>
        <ul class="nav-links">
            <li><a href="#hero" class="active">Start</a></li>
            <li><a href="#about">Identity</a></li>
            <li><a href="#work">Projects</a></li>
            <li><a href="#contact">Signal</a></li>
        </ul>
        <div class="nav-toggle">
            <i class="fas fa-bars"></i>
        </div>
    </nav>

<section id="hero" class="hero-section">
        <div class="hero-content">
            <div class="glitch-wrapper">
                <h1 class="hero-title glitch" data-text="FUTURE_READY">FUTURE_READY</h1>
            </div>
            <p class="hero-subtitle">Creative Developer & UI Engineer</p>
            <div class="hero-cta">
                <a href="#work" class="btn-holo">View Work <div class="btn-shine"></div></a>
                <a href="#contact" class="btn-outline">Contact <div class="btn-shine"></div></a>
            </div>
        </div>
        <div class="hero-visual">
            <div class="holo-card">
                <div class="code-snippet">
                    <pre><code>
class Developer {
  constructor() {
    this.vision = "Infinite";
    this.stack = "Full";
  }
  
  create() {
    return new Future();
  }
}
                    </code></pre>
                </div>
            </div>
        </div>
        <div class="scroll-indicator">
            <span>SCROLL</span>
            <div class="mouse-icon"></div>
        </div>
    </section>

<section id="about" class="section">
        <div class="container">
            <h2 class="section-title">Identity_Protocol</h2>
            <div class="about-grid">
                <div class="about-card glass-card">
                    <i class="fas fa-user-astronaut card-icon"></i>
                    <h3>The Pilot</h3>
                    <p>Passionate about crafting digital experiences that blend aesthetic beauty with high-performance
                        code. I build accessible, pixel-perfect interfaces.</p>
                </div>
                <div class="about-card glass-card">
                    <i class="fas fa-layer-group card-icon"></i>
                    <h3>The Stack</h3>
                    <ul class="stack-list">
                        <li>JavaScript (ES6+)</li>
                        <li>React / Vue</li>
                        <li>Node.js</li>
                        <li>WebGL / Three.js</li>
                        <li>CSS3 / SASS</li>
                    </ul>
                </div>
                <div class="about-card glass-card">
                    <i class="fas fa-bolt card-icon"></i>
                    <h3>The Vision</h3>
                    <p>To redefine the web through immersive interactions and futuristic design patterns. Always
                        learning, always evolving.</p>
                </div>
            </div>
        </div>
    </section>

<section id="work" class="section">
        <div class="container">
            <h2 class="section-title">Deployed_Systems</h2>
            <div class="projects-grid">
                
                <article class="project-card">
                    <div class="project-image">
                        <div class="placeholder-img color-1"></div>
                        <div class="overlay">
                            <a href="#" class="btn-icon"><i class="fas fa-external-link-alt"></i></a>
                            <a href="#" class="btn-icon"><i class="fab fa-github"></i></a>
                        </div>
                    </div>
                    <div class="project-info">
                        <h3>Neon Dashboard</h3>
                        <p>A high-performance analytics dashboard with real-time data visualization.</p>
                        <div class="tags">
                            <span>React</span>
                            <span>D3.js</span>
                            <span>Firebase</span>
                        </div>
                    </div>
                </article>

<article class="project-card">
                    <div class="project-image">
                        <div class="placeholder-img color-2"></div>
                        <div class="overlay">
                            <a href="#" class="btn-icon"><i class="fas fa-external-link-alt"></i></a>
                            <a href="#" class="btn-icon"><i class="fab fa-github"></i></a>
                        </div>
                    </div>
                    <div class="project-info">
                        <h3>Cyber Commerce</h3>
                        <p>Next-gen e-commerce platform featuring 3D product previews.</p>
                        <div class="tags">
                            <span>Three.js</span>
                            <span>Shopify API</span>
                            <span>GSAP</span>
                        </div>
                    </div>
                </article>

<article class="project-card">
                    <div class="project-image">
                        <div class="placeholder-img color-3"></div>
                        <div class="overlay">
                            <a href="#" class="btn-icon"><i class="fas fa-external-link-alt"></i></a>
                            <a href="#" class="btn-icon"><i class="fab fa-github"></i></a>
                        </div>
                    </div>
                    <div class="project-info">
                        <h3>AI Chat Interface</h3>
                        <p>Minimalist chat UI with natural language processing integration.</p>
                        <div class="tags">
                            <span>OpenAI API</span>
                            <span>Next.js</span>
                            <span>Tailwind</span>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </section>

<section id="contact" class="section">
        <div class="container">
            <h2 class="section-title">Transmit_Signal</h2>
            <div class="contact-wrapper glass-panel">
                <form class="contact-form">
                    <div class="input-group">
                        <input type="text" id="name" required placeholder=" ">
                        <label for="name">Identifier (Name)</label>
                        <div class="input-highlight"></div>
                    </div>
                    <div class="input-group">
                        <input type="email" id="email" required placeholder=" ">
                        <label for="email">Return Address (Email)</label>
                        <div class="input-highlight"></div>
                    </div>
                    <div class="input-group">
                        <input id="message" required placeholder=" " rows="5"/>
                        <label for="message">Data Packet (Message)</label>
                        <div class="input-highlight"></div>
                    </div>
                    <button type="submit" class="btn-holo submit-btn">Send Transmission</button>
                </form>
            </div>

<footer class="footer">
        <p>© 2025 DEV.IO // SYSTEM_ONLINE</p>
    </footer>

<div class="cursor-dot"></div>
    <div class="cursor-outline"></div>

</html>

CSS

/* Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Space+Grotesk:wght@300;500;700&display=swap');

:root {
    --bg-color: #050505;
    --neon-cyan: #00f3ff;
    --neon-pink: #ff0055;
    --neon-purple: #bd00ff;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-main: #ffffff;
    --text-muted: #a0a0a0;
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Outfit', sans-serif;
    --card-radius: 16px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none;
    /* Custom cursor */
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-body);
    overflow-x: hidden;
    line-height: 1.6;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neon-cyan);
}

/* Background Effects */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.05;
    z-index: 0;
}

.holo-gradient-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(100px);
    z-index: -1;
    opacity: 0.4;
    animation: drift 20s infinite alternate ease-in-out;
}

.orb-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--neon-cyan), transparent 70%);
    top: -10%;
    left: -10%;
}

.orb-2 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--neon-purple), transparent 70%);
    bottom: -10%;
    right: -10%;
    animation-delay: -5s;
}

@keyframes drift {
    0% {
        transform: translate(0, 0);
    }

100% {
        transform: translate(50px, 50px);
    }
}

/* Typography & Utilities */
h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section {
    padding: 100px 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-title {
    font-size: 3rem;
    margin-bottom: 3rem;
    background: linear-gradient(90deg, #fff, var(--text-muted));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-left: 4px solid var(--neon-cyan);
    padding-left: 1rem;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1rem;
    width: 50px;
    height: 2px;
    background: var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan);
}

/* Navigation */
.glass-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(5, 5, 5, 0.7);
    backdrop-filter: blur(10px);
    z-index: 100;
    border-bottom: 1px solid var(--glass-border);
}

.nav-logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 2px;
}

.nav-logo span {
    color: var(--neon-cyan);
}

.nav-links {
    display: flex;
    gap: 3rem;
    list-style: none;
}

.nav-links a {
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    opacity: 0.7;
}

.nav-links a:hover,
.nav-links a.active {
    opacity: 1;
    color: var(--neon-cyan);
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.5);
}

.nav-toggle {
    display: none;
    font-size: 1.5rem;
}

/* Hero Section */
.hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10%;
    overflow: hidden;
}

.hero-content {
    z-index: 2;
    max-width: 600px;
}

.glitch-wrapper {
    position: relative;
    display: inline-block;
}

.hero-title {
    font-size: 5rem;
    line-height: 1;
    margin-bottom: 1rem;
    color: #fff;
    position: relative;
}

.glitch {
    position: relative;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
}

.glitch::before {
    left: 2px;
    text-shadow: -1px 0 var(--neon-pink);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -1px 0 var(--neon-cyan);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% {
        clip: rect(42px, 9999px, 44px, 0);
    }

5% {
        clip: rect(12px, 9999px, 59px, 0);
    }

10% {
        clip: rect(48px, 9999px, 29px, 0);
    }

15% {
        clip: rect(42px, 9999px, 73px, 0);
    }

20% {
        clip: rect(63px, 9999px, 27px, 0);
    }

25% {
        clip: rect(34px, 9999px, 55px, 0);
    }

30% {
        clip: rect(86px, 9999px, 73px, 0);
    }

35% {
        clip: rect(20px, 9999px, 20px, 0);
    }

40% {
        clip: rect(26px, 9999px, 60px, 0);
    }

45% {
        clip: rect(25px, 9999px, 66px, 0);
    }

50% {
        clip: rect(57px, 9999px, 98px, 0);
    }

55% {
        clip: rect(5px, 9999px, 46px, 0);
    }

60% {
        clip: rect(82px, 9999px, 31px, 0);
    }

65% {
        clip: rect(54px, 9999px, 27px, 0);
    }

70% {
        clip: rect(28px, 9999px, 99px, 0);
    }

75% {
        clip: rect(45px, 9999px, 69px, 0);
    }

80% {
        clip: rect(23px, 9999px, 85px, 0);
    }

85% {
        clip: rect(54px, 9999px, 84px, 0);
    }

90% {
        clip: rect(45px, 9999px, 47px, 0);
    }

95% {
        clip: rect(37px, 9999px, 20px, 0);
    }

100% {
        clip: rect(4px, 9999px, 91px, 0);
    }
}

@keyframes glitch-anim2 {
    0% {
        clip: rect(65px, 9999px, 100px, 0);
    }

5% {
        clip: rect(52px, 9999px, 74px, 0);
    }

10% {
        clip: rect(79px, 9999px, 85px, 0);
    }

15% {
        clip: rect(75px, 9999px, 5px, 0);
    }

20% {
        clip: rect(67px, 9999px, 61px, 0);
    }

25% {
        clip: rect(14px, 9999px, 79px, 0);
    }

30% {
        clip: rect(1px, 9999px, 66px, 0);
    }

35% {
        clip: rect(86px, 9999px, 30px, 0);
    }

40% {
        clip: rect(23px, 9999px, 98px, 0);
    }

45% {
        clip: rect(85px, 9999px, 72px, 0);
    }

50% {
        clip: rect(71px, 9999px, 75px, 0);
    }

55% {
        clip: rect(2px, 9999px, 48px, 0);
    }

60% {
        clip: rect(30px, 9999px, 16px, 0);
    }

65% {
        clip: rect(59px, 9999px, 50px, 0);
    }

70% {
        clip: rect(41px, 9999px, 62px, 0);
    }

75% {
        clip: rect(2px, 9999px, 82px, 0);
    }

80% {
        clip: rect(47px, 9999px, 73px, 0);
    }

85% {
        clip: rect(3px, 9999px, 27px, 0);
    }

90% {
        clip: rect(26px, 9999px, 55px, 0);
    }

95% {
        clip: rect(42px, 9999px, 97px, 0);
    }

100% {
        clip: rect(38px, 9999px, 49px, 0);
    }
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.hero-cta {
    display: flex;
    gap: 1.5rem;
}

.btn-holo {
    position: relative;
    padding: 1rem 2.5rem;
    background: rgba(0, 243, 255, 0.1);
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 2px;
    overflow: hidden;
    transition: 0.3s;
}

.btn-holo:hover {
    background: var(--neon-cyan);
    color: var(--bg-color);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.4);
}

.btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    transition: 0.5s;
}

.btn-holo:hover .btn-shine {
    left: 200%;
    transition: 0.5s;
}

.btn-outline {
    padding: 1rem 2.5rem;
    border: 1px solid var(--glass-border);
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 2px;
}

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

.hero-visual {
    position: relative;
    width: 400px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.holo-card {
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.8);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 2rem;
    transform: perspective(1000px) rotateY(-15deg) rotateX(5deg);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(0, 243, 255, 0.1);
    transition: 0.5s;
}

.holo-card:hover {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
    border-color: var(--neon-cyan);
}

.code-snippet pre {
    color: var(--text-muted);
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    white-space: pre-wrap;
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    letter-spacing: 2px;
    opacity: 0.6;
}

.mouse-icon {
    width: 20px;
    height: 35px;
    border: 2px solid #fff;
    border-radius: 20px;
    position: relative;
}

.mouse-icon::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    animation: scroll 1.5s infinite;
}

@keyframes scroll {
    0% {
        top: 5px;
        opacity: 1;
    }

100% {
        top: 25px;
        opacity: 0;
    }
}

/* Glass Cards (About) */
.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 2.5rem;
    border-radius: var(--card-radius);
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple));
    opacity: 0;
    transition: 0.3s;
}

.glass-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
}

.glass-card:hover::before {
    opacity: 1;
}

.card-icon {
    font-size: 2.5rem;
    color: var(--neon-cyan);
    margin-bottom: 1.5rem;
}

.glass-card h3 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.glass-card p {
    color: var(--text-muted);
}

.stack-list {
    list-style: none;
    padding-left: 0;
}

.stack-list li {
    margin-bottom: 0.5rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stack-list li::before {
    content: '>';
    color: var(--neon-pink);
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
}

.project-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    overflow: hidden;
    transition: 0.3s;
}

.project-card:hover {
    border-color: var(--neon-purple);
    box-shadow: 0 0 20px rgba(189, 0, 255, 0.2);
}

.project-image {
    height: 250px;
    position: relative;
    overflow: hidden;
}

.placeholder-img {
    width: 100%;
    height: 100%;
    transition: 0.5s;
}

.color-1 {
    background: linear-gradient(45deg, #111, #222);
}

.color-2 {
    background: linear-gradient(45deg, #1a1a2e, #16213e);
}

.color-3 {
    background: linear-gradient(45deg, #2c003e, #1a0024);
}

.project-card:hover .placeholder-img {
    transform: scale(1.1);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    opacity: 0;
    transition: 0.3s;
}

.project-card:hover .overlay {
    opacity: 1;
}

.btn-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    transform: translateY(20px);
    transition: 0.3s;
}

.project-card:hover .btn-icon {
    transform: translateY(0);
}

.btn-icon:hover {
    background: var(--neon-cyan);
}

.project-info {
    padding: 2rem;
}

.project-info h3 {
    margin-bottom: 0.5rem;
    color: #fff;
}

.project-info p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

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

.tags span {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    color: var(--neon-cyan);
    border: 1px solid rgba(0, 243, 255, 0.2);
}

/* Contact Form */
.contact-wrapper {
    max-width: 600px;
    margin: 0 auto;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 3rem;
    border-radius: var(--card-radius);
}

.input-group {
    position: relative;
    margin-bottom: 2rem;
}

input,
textarea {
    width: 100%;
    padding: 1rem 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid #444;
    color: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    outline: none;
    transition: 0.3s;
}

input:focus,
textarea:focus {
    border-bottom-color: var(--neon-cyan);
}

label {
    position: absolute;
    top: 1rem;
    left: 0;
    color: var(--text-muted);
    transition: 0.3s;
    pointer-events: none;
}

input:focus~label,
input:not(:placeholder-shown)~label,
textarea:focus~label,
textarea:not(:placeholder-shown)~label {
    top: -1.2rem;
    font-size: 0.8rem;
    color: var(--neon-cyan);
}

.input-highlight {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--neon-cyan);
    transition: 0.3s;
}

input:focus~.input-highlight,
textarea:focus~.input-highlight {
    width: 100%;
}

.submit-btn {
    width: 100%;
    background: transparent;
    cursor: pointer;
}

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

.social-icon {
    font-size: 1.5rem;
    color: var(--text-muted);
}

.social-icon:hover {
    color: #fff;
    transform: translateY(-5px);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Footer */
.footer {
    text-align: center;
    padding: 2rem;
    border-top: 1px solid var(--glass-border);
    color: #444;
    font-size: 0.8rem;
    letter-spacing: 2px;
}

/* Custom Cursor */
.cursor-dot {
    width: 5px;
    height: 5px;
    background: var(--neon-cyan);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9999;
}

.cursor-outline {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(0, 243, 255, 0.5);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9998;
    transition: width 0.2s, height 0.2s, background-color 0.2s;
}

/* Cursor States */
body:active .cursor-outline {
    width: 20px;
    height: 20px;
    background: rgba(0, 243, 255, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

.nav-toggle {
        display: block;
    }

.hero-title {
        font-size: 3rem;
    }

.hero-section {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding-top: 100px;
    }

.hero-visual {
        display: none;
    }

.hero-cta {
        justify-content: center;
    }
}

JS

document.addEventListener('DOMContentLoaded', () => {

/* =========================================
       custom cursor
       ========================================= */
    const cursorDot = document.querySelector('.cursor-dot');
    const cursorOutline = document.querySelector('.cursor-outline');

window.addEventListener('mousemove', (e) => {
        const posX = e.clientX;
        const posY = e.clientY;

// Dot follows instantly
        cursorDot.style.left = `${posX}px`;
        cursorDot.style.top = `${posY}px`;

// Outline follows with slight delay (handled by CSS transition or simple animation here for smoothness)
        // Using animate for smooth trailing effect
        cursorOutline.animate({
            left: `${posX}px`,
            top: `${posY}px`
        }, { duration: 500, fill: "forwards" });
    });

// Cursor hover effects
    const clickables = document.querySelectorAll('a, button, .project-card');
    clickables.forEach(el => {
        el.addEventListener('mouseenter', () => {
            cursorOutline.style.transform = 'translate(-50%, -50%) scale(1.5)';
            cursorOutline.style.backgroundColor = 'rgba(0, 243, 255, 0.1)';
        });
        el.addEventListener('mouseleave', () => {
            cursorOutline.style.transform = 'translate(-50%, -50%) scale(1)';
            cursorOutline.style.backgroundColor = 'transparent';
        });
    });

/* =========================================
       Mobile Navigation Toggle
       ========================================= */
    const navToggle = document.querySelector('.nav-toggle');
    const navLinks = document.querySelector('.nav-links');

navToggle.addEventListener('click', () => {
        // Simple toggle for mobile view
        if (navLinks.style.display === 'flex') {
            navLinks.style.display = 'none';
        } else {
            navLinks.style.display = 'flex';
            navLinks.style.flexDirection = 'column';
            navLinks.style.position = 'absolute';
            navLinks.style.top = '70px';
            navLinks.style.right = '0';
            navLinks.style.left = '0';
            navLinks.style.background = 'rgba(5,5,5,0.95)';
            navLinks.style.padding = '2rem';
            navLinks.style.alignItems = 'center';
        }
    });

/* =========================================
       Smooth Scroll & Scroll Spy
       ========================================= */
    // Helper to scroll smoothly
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;

// Active Link Highlighting
    const sections = document.querySelectorAll('section');
    const navItems = document.querySelectorAll('.nav-links a');

window.addEventListener('scroll', () => {
        let current = '';
        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.clientHeight;
            if (scrollY >= (sectionTop - sectionHeight / 3)) {
                current = section.getAttribute('id');
            }
        });

navItems.forEach(a => {
            a.classList.remove('active');
            if (a.getAttribute('href').includes(current)) {
                a.classList.add('active');
            }
        });
    });

/* =========================================
       Scroll Reveal Animation
       ========================================= */
    const observerOptions = {
        threshold: 0.1
    };

// Select elements to animate
    const animatedElements = document.querySelectorAll(
        '.about-card, .project-card, .section-title, .hero-content, .hero-visual'
    );

animatedElements.forEach(el => {
        // Set initial state
        el.style.opacity = '0';
        el.style.transform = 'translateY(20px)';
        el.style.transition = 'all 0.6s ease-out';
        observer.observe(el);
    });

/* =========================================
       Contact Form Handler
       ========================================= */
    const form = document.querySelector('.contact-form');
    form.addEventListener('submit', (e) => {
        e.preventDefault();
        const btn = form.querySelector('button');
        const originalText = btn.innerText;

btn.innerText = 'Transmitting...';
        btn.style.opacity = '0.7';

setTimeout(() => {
            btn.innerText = 'Signal Received';
            btn.style.borderColor = '#0f0';
            btn.style.color = '#0f0';
            form.reset();

setTimeout(() => {
                btn.innerText = originalText;
                btn.style.borderColor = '';
                btn.style.color = '';
                btn.style.opacity = '1';
            }, 3000);
        }, 1500);
    });

});

Holographic Portfolio Website Template | HTML CSS JS

Recommended

HTML Neuron Animation Snippet

Home Image Slider Effect Website

HTML Drawing Tablet Code with Javascript

HTML

CSS

JS

Recommended

HTML Neuron Animation Snippet

Home Image Slider Effect Website

HTML Drawing Tablet Code with Javascript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS