HTMLify

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Modern responsive personal portfolio website with four visual themes.">
<title>Dj Upraity | Personal Portfolio</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@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="shell">
<header class="header">
<a class="brand" href="#home"><b>DU</b><span>Dj Upraity</span></a>
<nav id="nav"><a href="#home">Home</a><a href="#about">About</a><a href="#skills">Skills</a><a href="#projects">Projects</a><a href="#experience">Experience</a><a href="#contact">Contact</a></nav>
<div class="actions"><button id="themeBtn" class="theme-btn"><i></i><span id="themeLabel">Midnight</span></button><button id="menuBtn" class="menu-btn">☰</button></div>
</header>

<main>
<section id="home" class="hero section">
<div class="hero-copy reveal">
<p class="eyebrow">WEB DEVELOPER • UI DESIGNER</p>
<h1>Building digital experiences that feel <em>clear, modern & memorable.</em></h1>
<p class="lead">I’m Dj, a frontend developer focused on responsive websites, thoughtful interfaces, and practical digital products that turn ideas into polished experiences.</p>
<div class="buttons"><a class="btn primary" href="#projects">View My Work</a><a class="btn" href="#contact">Let’s Connect</a></div>
<div class="stats"><div><strong>3+</strong><small>Years Experience</small></div><div><strong>24</strong><small>Projects Built</small></div><div><strong>12</strong><small>Happy Clients</small></div></div>
</div>
<div class="hero-art reveal">
<div class="profile-card"><div class="avatar">DJ</div><div class="profile-copy"><small>Currently</small><b>Creating on the web</b><span>Available for freelance work</span></div><label>● Available</label></div>
<div class="float one">✦ <b>Clean UI</b><small>Pixel-focused details</small></div><div class="float two">↗ <b>Responsive</b><small>Every screen, covered</small></div>
</div>
</section>

<section id="about" class="section">
<div class="heading reveal"><p class="eyebrow">ABOUT ME</p><h2>A developer who cares about the details.</h2></div>
<div class="about-grid"><div class="about-copy reveal"><p>I enjoy combining design and technology to create websites that are easy to use, fast to understand, and pleasant to explore. My work balances visual polish with clean, maintainable frontend code.</p><p>From landing pages to complete portfolio experiences, I focus on accessibility, responsive layouts, meaningful interactions, and a consistent visual system.</p><a class="text-link" href="#contact">Start a conversation →</a></div>
<div class="points reveal"><article><b>01</b><div><strong>Design thinking</strong><p>Layouts built around clarity, hierarchy and user intent.</p></div></article><article><b>02</b><div><strong>Clean development</strong><p>Organized HTML, CSS and JavaScript that is easy to customize.</p></div></article><article><b>03</b><div><strong>Responsive by default</strong><p>Interfaces designed to work across phones, tablets and desktops.</p></div></article></div></div>
</section>

<section id="skills" class="section">
<div class="heading reveal"><p class="eyebrow">SKILLS</p><h2>Tools I use to bring ideas to life.</h2></div>
<div class="skills"><article class="skill reveal"><strong>HTML5</strong><small>Semantic structure</small><i><b style="width:95%"></b></i></article><article class="skill reveal"><strong>CSS3</strong><small>Responsive interfaces</small><i><b style="width:92%"></b></i></article><article class="skill reveal"><strong>JavaScript</strong><small>Interactive experiences</small><i><b style="width:86%"></b></i></article><article class="skill reveal"><strong>UI Design</strong><small>Visual systems</small><i><b style="width:88%"></b></i></article><article class="skill reveal"><strong>Git</strong><small>Version control</small><i><b style="width:82%"></b></i></article><article class="skill reveal"><strong>Figma</strong><small>Prototyping & design</small><i><b style="width:80%"></b></i></article></div>
</section>

<section id="projects" class="section">
<div class="heading reveal"><p class="eyebrow">SELECTED WORK</p><h2>A few things I’ve built recently.</h2></div>
<div class="projects">
<article class="project reveal"><div class="art a"><span>01</span><b>Nova Finance</b></div><div class="project-body"><small>Dashboard</small><h3>Finance Dashboard</h3><p>A clean analytics interface for tracking revenue, expenses and business growth.</p><div class="tags"><i>HTML</i><i>CSS</i><i>JS</i></div></div></article>
<article class="project reveal"><div class="art b"><span>02</span><b>Arco Studio</b></div><div class="project-body"><small>Brand Website</small><h3>Creative Studio</h3><p>A bold portfolio experience designed for a modern creative agency.</p><div class="tags"><i>UI</i><i>Web</i><i>Motion</i></div></div></article>
<article class="project reveal"><div class="art c"><span>03</span><b>Travelly</b></div><div class="project-body"><small>Travel</small><h3>Travel Planner</h3><p>An approachable travel interface for discovering destinations and planning trips.</p><div class="tags"><i>UX</i><i>Responsive</i><i>JS</i></div></div></article>
</div>
</section>

<section id="experience" class="section">
<div class="heading reveal"><p class="eyebrow">EXPERIENCE</p><h2>Growing through every project.</h2></div>
<div class="timeline"><article class="reveal"><time>2025 — Now</time><div><h3>Independent Frontend Developer</h3><p>Designing and building responsive websites and digital experiences for personal and client projects.</p></div></article><article class="reveal"><time>2024 — 2025</time><div><h3>Web Design Intern</h3><p>Worked on landing pages, component systems, visual assets and responsive UI implementation.</p></div></article><article class="reveal"><time>2023 — 2024</time><div><h3>Computer Science Student</h3><p>Built academic projects while developing a strong foundation in programming and web technologies.</p></div></article></div>
</section>

<section id="contact" class="section"><div class="contact reveal"><div><p class="eyebrow">LET’S WORK TOGETHER</p><h2>Have an idea? Let’s make it real.</h2><p>Feel free to reach out for a project, collaboration or just a conversation about the web.</p></div><a class="btn primary" href="mailto:hello@example.com">hello@example.com</a></div></section>
</main>
<footer><span>© 2026 Dj Upraity. All rights reserved.</span><a href="#home">Back to top ↑</a></footer>
</div>

<div id="panel" class="panel"><div class="panel-box"><header><strong>Choose a theme</strong><button id="close">×</button></header>
<button class="theme active" data-theme="midnight"><i></i><b>Midnight</b><small>Dark & premium</small></button>
<button class="theme" data-theme="paper"><i></i><b>Paper</b><small>Light & editorial</small></button>
<button class="theme" data-theme="aurora"><i></i><b>Aurora</b><small>Fresh & vibrant</small></button>
<button class="theme" data-theme="sunset"><i></i><b>Sunset</b><small>Warm & creative</small></button></div></div>
<script src="assets/js/script.js"></script>
</body></html>