Animated Portfolio Website with Dark/Light Mode | HTML, CSS & JavaScript
HTML
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Arshyan — Full Stack Developer</title>
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700;800&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" />
<link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet" />
</head>
<body>
<header id="site-header" class="top-header">
<div class="container header-inner">
<div class="logo" data-tippy-content="Arshyan — Portfolio"><span>A</span>rshyan</div>
<nav class="nav" aria-label="Main Navigation">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#skills">Skills</a>
<a href="#projects">Projects</a>
<a href="#testimonials">Testimonials</a>
<a href="#contact">Contact</a>
</nav>
<div class="header-ctas">
<a href="#contact" class="btn hire" data-tippy-content="Hire me">Hire Me</a>
<a href="assets/resume.pdf" class="btn resume" data-tippy-content="Download resume">Resume <i class="fa-solid fa-file-arrow-down"></i></a>
<button id="theme-toggle" class="icon-btn" aria-label="Toggle theme" data-tippy-content="Toggle theme">
<i id="theme-icon" class="fa-solid fa-moon"></i>
</button>
</div>
</div>
</header>
<main>
<section id="home" class="hero-section">
<div id="particles-container" aria-hidden="true"></div>
<div class="container hero-inner">
<div class="hero-left" data-aos="fade-right">
<h1 class="hero-title">Hi — I'm <span class="accent">Arshyan</span></h1>
<div class="typing-wrap" aria-live="polite">
<span id="typed-text" class="typed-text"></span><span class="typed-cursor" aria-hidden="true">|</span>
</div>
<div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<template id="YzsQXlPL6ba09EgWJd9J"></template>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2094722033678002"
data-ad-slot="2248279416"></ins>
<script type="bv_inline_delayed_js" bv_unique_id="K6pUmXanwc0SD6AtRrMJ" defer="1" data-cfasync="" bv_inline_delayed="1" async="">(adsbygoogle = window.adsbygoogle || []).push({});</script></div>
<p class="lead">I build fast, accessible web apps, custom WordPress solutions, and clean brand visuals — projects & tutorials under <strong>Learn with Arshyan</strong>.</p>
<div class="hero-actions">
<a href="#contact" class="btn hire" data-tippy-content="Let's work together">Hire Me</a>
<a href="assets/resume.pdf" class="btn resume" data-tippy-content="Download CV">Resume <i class="fa-solid fa-download"></i></a>
</div>
<div class="social-row" aria-hidden="false">
<a href="#" data-tippy-content="GitHub"><i class="fa-brands fa-github"></i></a>
<a href="#" data-tippy-content="LinkedIn"><i class="fa-brands fa-linkedin"></i></a>
<a href="#" data-tippy-content="YouTube"><i class="fa-brands fa-youtube"></i></a>
<a href="#" data-tippy-content="Dribbble"><i class="fa-brands fa-dribbble"></i></a>
<a href="#" data-tippy-content="Behance"><i class="fa-brands fa-behance"></i></a>
<a href="#" data-tippy-content="Instagram"><i class="fa-brands fa-instagram"></i></a>
<a href="#" data-tippy-content="Twitter / X"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" data-tippy-content="Facebook"><i class="fa-brands fa-facebook"></i></a>
</div>
</div>
<div class="hero-right" data-aos="zoom-in">
<div class="profile-wrap" data-tippy-content="That's me — Arshyan">
<div class="profile-glow" aria-hidden="true"></div>
<img bv-data-src="assests/Profile.jpg" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Arshyan portrait" class="profile-img bv-tag-attr-replace bv-lazyload-tag-img" />
</div>
</div>
</div>
</section>
<section id="about" class="section container" data-aos="fade-up">
<div class="section-grid">
<div>
<h3>About Me</h3>
<p>I’m a Full Stack Developer, WordPress developer and Graphic Designer. I create real-world projects and tutorials under the brand <strong>Learn with Arshyan</strong>. My focus is performance, accessibility and beautiful UI.</p>
<p>I’m available for freelance and full-time work — let's build something great.</p>
</div>
<div class="about-stats">
<div class="stat">
<div class="stat-num">50+</div>
<div class="stat-label">Projects</div>
</div>
<div class="stat">
<div class="stat-num">4+</div>
<div class="stat-label">Years Experience</div>
</div>
<div class="stat">
<div class="stat-num">10k+</div>
<div class="stat-label">YouTube Views</div>
</div>
</div>
</div>
</section>
<section id="skills" class="section container" data-aos="fade-up">
<h3>Skills</h3>
<div class="skills-grid">
<div class="skill-card" data-tippy-content="Expert">
<h4>HTML & CSS</h4>
<div class="skill-bar"><div class="skill-fill" data-value="95"></div></div>
</div>
<div class="skill-card" data-tippy-content="Advanced">
<h4>JavaScript</h4>
<div class="skill-bar"><div class="skill-fill" data-value="88"></div></div>
</div>
<div class="skill-card" data-tippy-content="Advanced">
<h4>React / Node</h4>
<div class="skill-bar"><div class="skill-fill" data-value="80"></div></div>
</div>
<div class="skill-card" data-tippy-content="Strong">
<h4>WordPress / PHP</h4>
<div class="skill-bar"><div class="skill-fill" data-value="86"></div></div>
</div>
<div class="skill-card" data-tippy-content="Strong">
<h4>Graphic Design</h4>
<div class="skill-bar"><div class="skill-fill" data-value="90"></div></div>
</div>
<div class="skill-card" data-tippy-content="Good">
<h4>UI / UX</h4>
<div class="skill-bar"><div class="skill-fill" data-value="82"></div></div>
</div>
</div>
</section>
<section id="projects" class="section container" data-aos="fade-up">
<h3>Projects — Learn with Arshyan</h3>
<div class="project-grid">
<article class="project-card" data-project="Login & Signup Forms" data-tippy-content="Click for details">
<div class="proj-media"><img bv-data-src="assests/login.jpg" class="bv-tag-attr-replace bv-lazyload-tag-img" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Login forms"></div>
<div class="proj-body">
<h4>Login & Signup Forms</h4>
<p>Themed, accessible forms with validation & animations.</p>
<div class="proj-tags">HTML, CSS, JS</div>
</div>
</article>
<article class="project-card" data-project="E-commerce Product Card Grid" data-tippy-content="Click for details">
<div class="proj-media"><img bv-data-src="assests/Product Card.png" class="bv-tag-attr-replace bv-lazyload-tag-img" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Product Grid"></div>
<div class="proj-body">
<h4>E-commerce Product Card Grid</h4>
<p>Amazon-style clean product grid with consistent image heights.</p>
<div class="proj-tags">HTML, CSS</div>
</div>
</article>
<article class="project-card" data-project="Lamp Project" data-tippy-content="Click for details">
<div class="proj-media"><img bv-data-src="assests/Lamp Project.png" class="bv-tag-attr-replace bv-lazyload-tag-img" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Lamp Project"></div>
<div class="proj-body">
<h4>Lamp Project</h4>
<p>Interactive lamp UI with smooth on/off toggle animations.</p>
<div class="proj-tags">HTML, CSS, JS</div>
</div>
</article>
<article class="project-card" data-project="Real-Time Chat App" data-tippy-content="Click for details">
<div class="proj-media"><img bv-data-src="assests/Chat App.png" class="bv-tag-attr-replace bv-lazyload-tag-img" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Chat App"></div>
<div class="proj-body">
<h4>Real-Time Chat App</h4>
<p>Modern chat UI with avatars and auto-scroll behavior.</p>
<div class="proj-tags">HTML, CSS, JS</div>
</div>
</article>
<article class="project-card" data-project="Startup Landing Page" data-tippy-content="Click for details">
<div class="proj-media"><img bv-data-src="assests/Landing Page.png" class="bv-tag-attr-replace bv-lazyload-tag-img" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Landing Page"></div>
<div class="proj-body">
<h4>Startup Landing Page</h4>
<p>Responsive marketing landing page with CTAs and hero.</p>
<div class="proj-tags">HTML, CSS, JS</div>
</div>
</article>
<article class="project-card" data-project="Responsive Testimonial Carousel" data-tippy-content="Click for details">
<div class="proj-media"><img bv-data-src="assests/Responsive Testimonial Carousel.jpg" class="bv-tag-attr-replace bv-lazyload-tag-img" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E"Carousel"></div>
<div class="proj-body">
<h4>Responsive Testimonial Carousel</h4>
<p>Autoplay carousel with avatars and controls.</p>
<div class="proj-tags">HTML, CSS, JS</div>
</div>
</article>
<article class="project-card" data-project="Tic Tac Toe (Neumorphism)" data-tippy-content="Click for details">
<div class="proj-media"><img bv-data-src="assests/Tic Tac Toe.png" class="bv-tag-attr-replace bv-lazyload-tag-img" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Tic Tac Toe"></div>
<div class="proj-body">
<h4>Tic Tac Toe (Neumorphism)</h4>
<p>Colorful neumorphic game with UX polish.</p>
<div class="proj-tags">HTML, CSS, JS</div>
</div>
</article>
<article class="project-card" data-project="Animated Navbar UI" data-tippy-content="Click for details">
<div class="proj-media"><img bv-data-src="assests/Nav Bar.png" class="bv-tag-attr-replace bv-lazyload-tag-img" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Navbar"></div>
<div class="proj-body">
<h4>Animated Navbar UI</h4>
<p>Floating pill navbar with sliding indicator and icon animation.</p>
<div class="proj-tags">HTML, CSS, JS</div>
</div>
</article>
</div>
</section>
<section id="testimonials" class="section container" data-aos="fade-up">
<h3>Testimonials</h3>
<div class="testimonials-wrap">
<div class="testimonial active">
<p>"These tutorials helped me build real projects fast. Highly recommended!"</p>
<strong>— Sarah Khan, Frontend Developer</strong>
</div>
<div class="testimonial">
<p>"Clear explanations and practical projects — great for beginners."</p>
<strong>— Ali Raza, UI/UX Designer</strong>
</div>
<div class="testimonial">
<p>"Practical, project-based lessons with clean code." </p>
<strong>— Mina Zahid, JS Enthusiast</strong>
</div>
</div>
<div class="test-controls">
<button id="prevTest" class="icon-btn" aria-label="Previous">‹</button>
<button id="nextTest" class="icon-btn" aria-label="Next">›</button>
</div>
</section>
<section id="contact" class="section container" data-aos="fade-up">
<h3>Contact</h3>
<p>Interested in working together? Fill the form or reach me on social.</p>
<form id="contact-form" class="contact-form" novalidate>
<div class="form-grid">
<label>
<span>Name</span>
<input type="text" name="name" required placeholder="Your name" />
</label>
<label>
<span>Email</span>
<input type="email" name="email" required placeholder="you@domain.com" />
</label>
<label class="full">
<span>Message</span>
<textarea name="message" rows="5" placeholder="Tell me about your project..." required></textarea>
</label>
</div>
<div class="form-actions">
<button type="submit" class="btn hire">Send Message</button>
</div>
</form>
</section>
<footer class="site-footer">
<div class="container footer-inner">
<div>© <span id="year"></span> Arshyan. All rights reserved.</div>
<div class="footer-socials">
<a href="#" data-tippy-content="LinkedIn"><i class="fa-brands fa-linkedin"></i></a>
<a href="#" data-tippy-content="GitHub"><i class="fa-brands fa-github"></i></a>
<a href="#" data-tippy-content="YouTube"><i class="fa-brands fa-youtube"></i></a>
</div>
</div>
</footer>
</main>
<div id="project-modal" class="modal" aria-hidden="true">
<div class="modal-inner" role="dialog" aria-modal="true">
<button id="modal-close" class="icon-btn" aria-label="Close project">✕</button>
<div id="modal-body"></div>
</div>
</div>
<template id="u8U343XyVIY0qkrBcZ5H"></template>
<template id="2M9b8pGFL2XMbirNQLvi"></template>
<template id="YBdjLdTaBVRLe9ub6CdU"></template>
<template id="7k33WdUoACGQ4xCuI8hc"></template>
<template id="P5QSDVaulZ52ASmjawOk"></template>
<template id="rYpsH1hyl3SsoAjPxQnq"></template>
</body>
</html>
CSS
/* =========================
Arshyan — Portfolio (style.css)
Final rich single-page
========================= */
/* ---------- variables ---------- */
:root{
--max-w: 1200px;
/* Light theme */
--bg: #f6f9fc;
--surface: #ffffff;
--text: #0b1320;
--muted: #6b7280;
--accent: #e11d2e;
--accent-contrast: #fff;
--header-bg: rgba(255,255,255,0.75);
--header-shadow: 0 8px 30px rgba(12,18,30,0.06);
--tooltip-bg: #0f172a;
--tooltip-color: #fff;
}
/* Dark overrides */
body.dark {
--bg: #060708;
--surface: #0f1112;
--text: #e8eef6;
--muted: #9aa3ad;
--accent: #ff5a67;
--accent-contrast: #0f1112;
--header-bg: rgba(10,12,14,0.86);
--header-shadow: 0 10px 40px rgba(0,0,0,0.6);
--tooltip-bg: #ffffff;
--tooltip-color: #0f1112;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
background:var(--bg);
color:var(--text);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
transition: background .35s ease, color .35s ease;
line-height:1.5;
}
/* container helper */
.container{ max-width:var(--max-w); margin:0 auto; padding:28px; }
/* ---------- Header ---------- */
.top-header{ position:fixed; left:0; right:0; top:12px; z-index:120; transition: all .28s ease; }
.header-inner{
display:flex; align-items:center; gap:16px; justify-content:space-between;
background:transparent; padding:10px 18px; border-radius:12px;
}
.header-inner .logo{ font-weight:800; font-size:1.05rem; letter-spacing:0.3px; }
.header-inner .logo span{ display:inline-block; background:var(--accent); color:var(--accent-contrast); padding:6px 8px; border-radius:6px; margin-right:8px; font-weight:900; }
/* nav */
.nav{ display:flex; gap:14px; align-items:center; }
.nav a{ text-decoration:none; color:inherit; font-weight:600; padding:8px 6px; position:relative; transition: color .18s, transform .18s; }
.nav a::after{ content:''; position:absolute; left:0; right:0; bottom:2px; height:3px; background:transparent; transform:scaleX(0); transform-origin:left; transition: transform .22s ease; border-radius:4px; }
.nav a:hover{ color:var(--accent); transform:translateY(-3px); }
.nav a:hover::after{ background:var(--accent); transform:scaleX(1); }
/* header scrolled */
header.scrolled .header-inner{ background:var(--header-bg); box-shadow: var(--header-shadow); transform:translateY(0); }
/* header ctas */
.header-ctas{ display:flex; gap:10px; align-items:center; }
.btn{
display:inline-flex; gap:8px; align-items:center; text-decoration:none; padding:10px 14px; border-radius:10px; font-weight:700; cursor:pointer; border:1px solid transparent; transition: transform .12s, box-shadow .12s;
}
.btn.hire{ background:var(--accent); color:var(--accent-contrast); box-shadow: 0 14px 32px rgba(225,29,46,0.12); }
.btn.resume{ background:var(--surface); color:var(--text); border:1px solid rgba(0,0,0,0.06); }
body.dark .btn.resume{ background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.06); color:var(--text); }
/* icon button */
.icon-btn{ border:0; background:transparent; padding:8px; border-radius:8px; cursor:pointer; color:inherit; font-size:16px; }
/* ---------- HERO ---------- */
.hero-section{ position:relative; overflow:hidden; padding:140px 0 80px; min-height:520px; display:flex; align-items:center; }
#particles-container{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-inner{ position:relative; z-index:2; display:flex; gap:36px; align-items:center; justify-content:space-between; }
/* left */
.hero-left{ flex:1; max-width:720px; }
.hero-title{ font-size:2.8rem; margin:0 0 8px; font-weight:800; letter-spacing:-0.6px; }
.accent{ color:var(--accent); }
/* typing area: fixed width so words don’t shift layout */
.typing-wrap{ height:44px; display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.typed-text{
display:inline-block;
min-width:290px; /* adjust so longest role fits; change if needed */
white-space:nowrap;
font-weight:700;
color:var(--muted);
}
.typed-cursor{ display:inline-block; color:var(--accent); font-weight:700; margin-left:2px; animation: blink 800ms steps(2, start) infinite; }
@keyframes blink { 0%, 49% { opacity:1 } 50%, 100% { opacity:0 } }
/* lead */
.lead{ color:var(--muted); max-width:60ch; }
/* actions */
.hero-actions{ margin-top:18px; display:flex; gap:12px; align-items:center; }
.social-row{ margin-top:30px; display:flex; gap:10px; flex-wrap:wrap; }
.social-row a{ width:44px; height:44px; display:grid; place-items:center; border-radius:8px; text-decoration:none; color:inherit; transition: transform .12s, background .12s; }
.social-row a:hover{ transform: translateY(-6px); background: rgba(0,0,0,0.04); }
body.dark .social-row a:hover{ background: rgba(255,255,255,0.04); }
/* right: profile */
.hero-right{ flex:0 0 340px; display:flex; align-items:center; justify-content:center; }
.profile-wrap{ position:relative; width:260px; height:260px; display:grid; place-items:center; border-radius:999px; }
.profile-img{ width:210px; height:210px; object-fit:cover; border-radius:999px; border:10px solid var(--surface); box-shadow:0 20px 50px rgba(2,6,23,0.12); transition: transform .35s; }
.profile-wrap .profile-glow{ position:absolute; inset:-14px; border-radius:999px; z-index:-1; filter: blur(18px); transition: all .35s ease; }
/* default glow colors (light) */
.profile-wrap .profile-glow{ background:
radial-gradient(circle at 30% 20%, rgba(63,81,181,0.14), transparent 20%),
radial-gradient(circle at 80% 80%, rgba(233,30,99,0.10), transparent 18%); transform: scale(1); animation: pulse 3.6s ease-in-out infinite; }
body.dark .profile-wrap .profile-glow{ background:
radial-gradient(circle at 30% 20%, rgba(99,102,241,0.22), transparent 18%),
radial-gradient(circle at 80% 80%, rgba(255,90,96,0.18), transparent 16%); transform: scale(1.02); }
/* pulse */
@keyframes pulse { 0%{ transform:scale(1) } 50%{ transform:scale(1.06) } 100%{ transform:scale(1) } }
/* ---------- Sections ---------- */
.section{ padding:48px 0; }
.section h3{ font-size:1.4rem; margin:0 0 10px; font-weight:800; }
.section p{ color:var(--muted); }
/* ABOUT grid */
.section-grid{ display:grid; grid-template-columns: 1fr 320px; gap:24px; align-items:start; }
/* stats */
.about-stats{ display:flex; flex-direction:column; gap:12px; }
.stat{ background:var(--surface); padding:18px; border-radius:12px; box-shadow: 0 12px 30px rgba(2,6,23,0.04); text-align:center; }
.stat-num{ font-size:1.6rem; font-weight:800; color:var(--accent); }
.stat-label{ color:var(--muted); }
/* SKILLS */
.skills-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:14px; margin-top:12px; }
.skill-card{ background:var(--surface); padding:14px; border-radius:10px; box-shadow: 8px 14px 30px rgba(2,6,23,0.04); }
.skill-bar{ height:10px; background: rgba(0,0,0,0.05); border-radius:8px; overflow:hidden; margin-top:8px; }
.skill-fill{ height:100%; width:0%; background: linear-gradient(90deg,var(--accent), #b71c2a); transition: width .9s cubic-bezier(.2,.9,.2,1); }
/* PROJECTS */
.project-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:16px; margin-top:14px; }
.project-card{ background:var(--surface); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; box-shadow: 12px 20px 40px rgba(2,6,23,0.06); cursor:pointer; transition: transform .22s, box-shadow .22s; }
.project-card:hover{ transform:translateY(-10px); box-shadow: 18px 30px 60px rgba(2,6,23,0.09); }
.proj-media img{ width:100%; height:160px; object-fit:cover; display:block; }
.proj-body{ padding:14px; }
.proj-tags{ margin-top:8px; font-size:13px; color:var(--muted); }
/* TESTIMONIALS */
.testimonials-wrap{ display:grid; gap:12px; margin-top:12px; }
.testimonial{ display:none; background:var(--surface); padding:18px; border-radius:12px; box-shadow: 10px 20px 40px rgba(2,6,23,0.04); }
.testimonial.active{ display:block; }
/* contact form */
.contact-form{ margin-top:14px; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.form-grid label{ display:block; }
.form-grid input, .form-grid textarea{ width:100%; padding:12px; border-radius:10px; border:1px solid rgba(0,0,0,0.06); background:var(--surface); color:inherit; }
.form-grid .full{ grid-column:1/-1; }
.form-actions{ margin-top:12px; }
/* footer */
.site-footer{ border-top:1px solid rgba(0,0,0,0.04); margin-top:28px; padding:20px 0; color:var(--muted); }
/* modal */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(2,6,23,0.6); z-index:220; }
.modal.show{ display:flex; }
.modal-inner{ width:92%; max-width:900px; background:var(--surface); border-radius:12px; padding:18px; position:relative; box-shadow:0 30px 60px rgba(2,6,23,0.3); color:var(--text); }
.modal-inner .icon-btn{ position:absolute; right:14px; top:14px; }
/* Tippy theme override (uses bottom placement) */
.tippy-box[data-theme~='light-border'] { background: var(--tooltip-bg); color: var(--tooltip-color); }
.tippy-box[data-theme~='light-border'] .tippy-arrow::before { color: var(--tooltip-bg); }
/* responsive */
@media (max-width:980px){
.header-inner{ padding:10px 14px; }
.nav{ display:none; }
.section-grid{ grid-template-columns: 1fr; }
.hero-inner{ flex-direction:column-reverse; text-align:center; gap:22px; }
.hero-right{ order:-1; }
.profile-wrap{ width:200px; height:200px; }
.profile-img{ width:160px; height:160px; }
.form-grid{ grid-template-columns:1fr; }
.project-grid{ grid-template-columns:1fr; }
.typed-text{ min-width:220px; } /* smaller screen safe */
}
JavaScript
/* script.js
Final version: typing cursor effect + fade, theme, tooltips bottom,
particles, GSAP, AOS, project modal, testimonials, smooth scroll, contact mock.
*/
document.addEventListener('DOMContentLoaded', () => {
const body = document.body;
const themeToggle = document.getElementById('theme-toggle');
const themeIcon = document.getElementById('theme-icon');
const header = document.getElementById('site-header');
const yearEl = document.getElementById('year');
const skillFills = document.querySelectorAll('.skill-fill');
const profileGlow = document.querySelector('.profile-wrap .profile-glow');
const projectCards = document.querySelectorAll('.project-card');
const modal = document.getElementById('project-modal');
const modalBody = document.getElementById('modal-body');
const testimonials = document.querySelectorAll('.testimonial');
const prevTest = document.getElementById('prevTest');
const nextTest = document.getElementById('nextTest');
/* YEAR */
if (yearEl) yearEl.textContent = new Date().getFullYear();
/* THEME */
const saved = localStorage.getItem('aw_theme') || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
setTheme(saved, false);
function setTheme(theme, save = true) {
if (theme === 'dark') {
body.classList.add('dark');
themeIcon.className = 'fa-solid fa-sun';
} else {
body.classList.remove('dark');
themeIcon.className = 'fa-solid fa-moon';
}
if (profileGlow) profileGlow.style.transform = theme === 'dark' ? 'scale(1.02)' : 'scale(1)';
if (save) localStorage.setItem('aw_theme', theme);
}
themeToggle.addEventListener('click', () => {
const next = body.classList.contains('dark') ? 'light' : 'dark';
setTheme(next, true);
});
/* HEADER SCROLL */
function onScroll() {
if (window.scrollY > 40) header.classList.add('scrolled');
else header.classList.remove('scrolled');
}
window.addEventListener('scroll', onScroll);
onScroll();
/* AOS init */
if (window.AOS) AOS.init({ duration: 700, once: true, easing: 'ease-out-cubic' });
/* TIPPY (tooltips) placement bottom */
if (window.tippy) {
tippy('[data-tippy-content]', {
theme: 'light-border',
animation: 'shift-away',
delay: [70, 0],
placement: 'bottom',
maxWidth: 220
});
}
/* TYPING EFFECT (typing style with blinking cursor) */
const typedEl = document.getElementById('typed-text');
const roles = ['Full Stack Developer', 'WordPress Developer', 'Graphic Designer'];
let roleIndex = 0, charIndex = 0, typing = true;
function typeLoop() {
const current = roles[roleIndex];
if (typing) {
charIndex++;
typedEl.textContent = current.slice(0, charIndex);
if (charIndex === current.length) {
typing = false;
setTimeout(typeLoop, 900);
return;
}
setTimeout(typeLoop, 70);
} else {
charIndex--;
typedEl.textContent = current.slice(0, charIndex);
if (charIndex === 0) {
typing = true;
roleIndex = (roleIndex + 1) % roles.length;
setTimeout(typeLoop, 300);
return;
}
setTimeout(typeLoop, 30);
}
}
if (typedEl) typeLoop();
/* GSAP intro */
if (window.gsap) {
gsap.from('.logo', { y: -12, opacity: 0, duration: .6, delay: .12 });
gsap.from('.hero-title', { x: -30, opacity: 0, duration: .8, delay: .2 });
gsap.from('.typed-text, .hero-actions .btn', { opacity: 0, y: 12, stagger: .08, duration: .6, delay: .35 });
gsap.from('.profile-img', { scale: .95, opacity: 0, duration: .9, delay: .5, ease: 'power3.out' });
}
/* SKILL BARS */
window.addEventListener('load', () => {
skillFills.forEach(el => {
const v = el.getAttribute('data-value') || 0;
setTimeout(()=> el.style.width = v + '%', 500);
});
});
/* PARTICLES */
if (window.tsParticles) {
tsParticles.load('particles-container', {
fpsLimit: 60,
interactivity: {
events: {
onHover: { enable: true, mode: 'repulse' },
onClick: { enable: true, mode: 'push' }
},
modes: { repulse: { distance: 80 }, push: { quantity: 2 } }
},
particles: {
color: { value: ['#E11D2E', '#3F51B5', '#FF7A8A'] },
links: { enable: false },
move: { enable: true, speed: .6, outModes: 'bounce' },
number: { value: 22, density: { enable: true, area: 800 } },
opacity: { value: .12 },
shape: { type: 'circle' },
size: { value: { min: 3, max: 9 } }
}
});
}
/* PROJECT MODAL */
projectCards.forEach(card => {
card.addEventListener('click', () => {
const title = card.getAttribute('data-project') || 'Project';
const img = card.querySelector('img') ? card.querySelector('img').src : 'assets/project1.jpg';
openProjectModal(title, img, card.querySelector('.proj-body')?.innerHTML || '');
});
});
function openProjectModal(title, img, html) {
modal.classList.add('show');
modal.setAttribute('aria-hidden', 'false');
modalBody.innerHTML = `
<h3>${title}</h3>
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-top:12px">
<img bv-data-src="${img}" class="bv-tag-attr-replace bv-lazyload-tag-img" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" style="width:260px;border-radius:8px;object-fit:cover;">
<div style="flex:1">${html}</div>
</div>
<div style="margin-top:14px">
<a href="#" class="btn hire">View Live</a>
<a href="#" class="btn resume" style="margin-left:10px">Source</a>
</div>
`;
}
// close modal clicking outside or pressing Escape
modal.addEventListener('click', (e) => {
if (e.target === modal) closeModal();
});
document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });
function closeModal() {
modal.classList.remove('show');
modal.setAttribute('aria-hidden', 'true');
modalBody.innerHTML = '';
}
document.getElementById('modal-close')?.addEventListener('click', closeModal);
/* TESTIMONIALS */
let tIndex = 0;
const testEls = Array.from(document.querySelectorAll('.testimonial'));
function showTest(i) {
testEls.forEach((t, idx) => t.classList.toggle('active', idx === i));
}
if (testEls.length) showTest(0);
document.getElementById('prevTest')?.addEventListener('click', () => { tIndex = (tIndex - 1 + testEls.length) % testEls.length; showTest(tIndex); });
document.getElementById('nextTest')?.addEventListener('click', () => { tIndex = (tIndex + 1) % testEls.length; showTest(tIndex); });
/* SMOOTH SCROLL */
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', (e) => {
const href = a.getAttribute('href');
if (href.length > 1) {
e.preventDefault();
const el = document.querySelector(href);
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
/* CONTACT FORM (demo) */
const contactForm = document.getElementById('contact-form');
if (contactForm) {
contactForm.addEventListener('submit', (e) => {
e.preventDefault();
const btn = contactForm.querySelector('button[type="submit"]') || contactForm.querySelector('.btn.hire');
btn.setAttribute('disabled', 'disabled');
btn.textContent = 'Sending...';
setTimeout(() => {
btn.removeAttribute('disabled');
btn.textContent = 'Send Message';
contactForm.reset();
if (window.gsap) gsap.fromTo('#contact .btn.hire', { scale: .98 }, { scale: 1, duration: .2 });
alert('Message sent (demo). Integrate EmailJS or your backend to send real messages.');
}, 1100);
});
}
});
Thanks sir, you make very good website and form
Please, where you make the new one shere me the code.