Dhaval Jani | Design Authority

by dhavaljani

HTML

<link href="https://api.fontshare.com/v2/css?f[]=clash-display@700,900&f[]=satoshi@300,400,700&display=swap" rel="stylesheet">

    <div id="cursor"></div>

    <nav>
        <div class="logo">DJ.©2026</div>
        <div class="nav-links">
            <a href="#work">Work</a>
            <a href="#resume">Resume</a>
            <a href="#contact">Contact</a>
        </div>
    </nav>

    <main>
        <section class="hero">
            <div class="hero-left">
                <h1>PRODUCT<br>& DESIGN</h1>
                <h1 style="color: var(--cobalt);">LEADER</h1>
            </div>
            <div class="hero-right">
                <p class="hero-desc">18+ years of turning enterprise chaos into seamless human experiences. Shaping systems for SaaS, Finance, and AI.</p>
                <div class="ticker-container">
                    <div class="ticker">
                        <span>CLARITY</span><span>SCALE</span><span>VELOCITY</span><span>TRUST</span>
                        <span>CLARITY</span><span>SCALE</span><span>VELOCITY</span><span>TRUST</span>
                    </div>
                </div>
            </div>
        </section>

        <h2 class="section-title">STRATEGY</h2>
        <div class="strategy-grid">
            <div class="strategy-card">
                <h3>SCOPE</h3>
                <p>Directing digital ecosystems across complex enterprise landscapes and high-growth startups.</p>
            </div>
            <div class="strategy-card">
                <h3>OPS</h3>
                <p>Agile leadership balancing immediate feature velocity with decade-long architectural impact.</p>
            </div>
            <div class="strategy-card">
                <h3>ETHICS</h3>
                <p>Driving responsible AI and governance in regulated markets where design has real-world consequences.</p>
            </div>
        </div>

        <h2 class="section-title" id="work">SELECTED...

CSS

/*:root {
  /* Colors from your provided palette 
  --bg-black: #000000;
  --navy-deep: #14213D;
  --gold-accent: #FCA311;
  --silver-grey: #E5E5E5;
  --white: #FFFFFF;

  /* Typography 
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;
}*/:root {
            --obsidian: #080808;
            --cobalt: #2E5BFF;
            --paper: #F5F5F7;
            --accent: #FF3E00;
            --font-main: 'Clash Display', sans-serif;
            --font-body: 'Satoshi', sans-serif;
            --padding: clamp(20px, 5vw, 80px);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }
        body { 
            background-color: var(--obsidian); 
            color: var(--paper); 
            font-family: var(--font-body);
            overflow-x: hidden;
            line-height: 1.4;
        }

        /* --- MAGNETIC INVERTED CURSOR --- */
        #cursor {
            position: fixed;
            width: 30px;
            height: 30px;
            background: var(--paper);
            border-radius: 50%;
            pointer-events: none;
            mix-blend-mode: difference;
            z-index: 9999;
            transition: transform 0.15s ease-out, width 0.3s, height 0.3s;
            transform: translate(-50%, -50%);
        }

        /* --- NAVIGATION --- */
        nav {
            position: fixed;
            padding: var(--padding);
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 100;
        }
        .logo { font-family: var(--font-main); font-size: 1.2rem; letter-spacing: -1px; }
        .nav-links a { 
            font-family: var(--font-main); 
            text-decoration: none; 
            color: var(--paper); 
            font-size: 0.8rem; 
            letter-spacing: 2px;
            margin-left: 30px;
            text-transform:...

JavaScript

const cursor = document.getElementById('cursor');
        
        document.addEventListener('mousemove', (e) => {
            cursor.style.left = e.clientX + 'px';
            cursor.style.top = e.clientY + 'px';
        });

        // Hover Effect: Expand cursor on interactive elements
        const interactive = document.querySelectorAll('a, .strategy-card, .cta-btn');
        interactive.forEach(el => {
            el.addEventListener('mouseenter', () => {
                cursor.style.width = '120px';
                cursor.style.height = '120px';
            });
            el.addEventListener('mouseleave', () => {
                cursor.style.width = '30px';
                cursor.style.height = '30px';
            });
        });