| Linux server27.hostingraja.org 2.6.32-954.3.5.lve1.4.93.el6.x86_64 #1 SMP Wed Oct 4 17:04:29 UTC 2023 x86_64 Path : /home/udaipurk/public_html/websites/rohitnagda.com/ |
| Current File : /home/udaipurk/public_html/websites/rohitnagda.com/about.php |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Rohit Nagda | Product Design | UI/UX Designer | UX Engineer</title>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<!--custome-css-->
<link href="css/style.css" rel="stylesheet" />
<!-- Google Fonts: Syne (display) + DM Sans (body) -->
<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=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap" rel="stylesheet" />
<!-- Font Awesome 6 (icons) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" />
</head>
<body>
<!-- ─── NAVBAR ─────────────────────────────────────────────────────────── -->
<nav class="site-nav" id="mainNav">
<div class="container d-flex align-items-center justify-content-between">
<a href="#section1" class="brand">ROHIT</a>
<ul class="nav-links desktop-nav">
<li><a href="#section1" class="active" data-nav>Home</a></li>
<li><a href="#section2" data-nav>About</a></li>
<li><a href="#section3" data-nav>Skills</a></li>
<li><a href="#section4" data-nav>Experience</a></li>
<li><a href="#section5" data-nav>Education</a></li>
<li><a href="#section6" data-nav>Work</a></li>
<li><a href="#section7" data-nav class="nav-cta">Contact</a></li>
</ul>
<button class="nav-toggle" id="navToggle" aria-label="Open menu">
<i class="fa fa-bars"></i>
</button>
</div>
</nav>
<!-- Mobile Nav -->
<div class="overlay" id="navOverlay"></div>
<div class="mobile-nav" id="mobileNav">
<button class="mobile-nav-close" id="mobileNavClose"><i class="fa fa-xmark"></i></button>
<ul class="mobile-nav-links">
<li><a href="#section1" class="mobile-link">Home</a></li>
<li><a href="#section2" class="mobile-link">About</a></li>
<li><a href="#section3" class="mobile-link">Skills</a></li>
<li><a href="#section4" class="mobile-link">Experience</a></li>
<li><a href="#section5" class="mobile-link">Education</a></li>
<li><a href="#section6" class="mobile-link">Work</a></li>
<li><a href="#section7" class="mobile-link">Contact</a></li>
</ul>
</div>
<!-- ─── HERO ────────────────────────────────────────────────────────────── -->
<section id="section1">
<div class="glow-blob glow-blob-1"></div>
<div class="glow-blob glow-blob-2"></div>
<div class="hero-grid-bg"></div>
<div class="container" style="position:relative;z-index:2;padding-top:90px;padding-bottom:80px;">
<div class="row align-items-center">
<div class="col-lg-6 mb-5 mb-lg-0">
<div class="hero-eyebrow">
<span class="dot"></span>
Available for New Projects
</div>
<h1 class="hero-h1">
Crafting<br>
<span class="line-grad">Digital</span><br>
Experiences
</h1>
<p class="hero-sub">
<strong>Hi, I'm Rohit Nagda</strong> — a Senior Product Designer with <strong>10+ years</strong> of experience turning complex challenges into intuitive, beautiful solutions.
</p>
<div class="hero-btns">
<a href="images/Rohit-Product-Designer-2026.pdf" target="_blank" class="btn-primary-rn">
<i class="fa fa-download"></i> Download CV
</a>
<a href="#section6" class="btn-ghost-rn">
View Work <i class="fa fa-arrow-right"></i>
</a>
</div>
<div class="hero-stats">
<div class="hstat">
<div class="hstat-num">10+</div>
<div class="hstat-lbl">Years Exp.</div>
</div>
<div class="hstat">
<div class="hstat-num">50+</div>
<div class="hstat-lbl">Projects</div>
</div>
<div class="hstat">
<div class="hstat-num">100%</div>
<div class="hstat-lbl">Satisfaction</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="hero-img-wrap">
<div class="hero-img-ring"></div>
</div>
</div>
</div>
</div>
<div class="scroll-down">
<i class="fa fa-chevron-down"></i>
<span>Scroll</span>
</div>
</section>
<!-- ─── ABOUT ───────────────────────────────────────────────────────────── -->
<section id="section2">
<div class="glow-blob" style="width:500px;height:500px;background:rgba(108,99,255,0.08);top:-100px;left:-150px;position:absolute;z-index:0;border-radius:50%;filter:blur(80px);"></div>
<div class="container" style="position:relative;z-index:1;">
<div class="section-label reveal">About</div>
<h2 class="section-title reveal reveal-delay-1">Who I <span class="grad">Am</span></h2>
<div class="row g-5 mt-2">
<div class="col-lg-4 col-md-5 reveal">
<div class="about-photo-wrap">
<img src="images/man02.jpeg" alt="Rohit Nagda" />
<div class="exp-badge">
<div class="num">10+</div>
<div class="lbl">Years</div>
</div>
</div>
</div>
<div class="col-lg-8 col-md-7 reveal reveal-delay-1">
<h3 style="font-size:1.8rem;font-weight:800;margin-bottom:4px;">Rohit Nagda</h3>
<p style="color:var(--accent);font-size:0.9rem;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:20px;">Sr. Product Designer · UI/UX Engineer</p>
<p style="color:var(--text-dim);line-height:1.9;margin-bottom:28px;font-size:0.93rem;">
I specialize in bridging the gap between complex user problems and elegant, scalable solutions. With over a decade of experience across UI/UX and front-end development, I don't just design interfaces—I build systems that drive user engagement and business growth.
</p>
<ul class="info-list mb-4">
<li><b>Phone</b>+91 8209877351</li>
<li><b>Email</b><a href="mailto:nagda.rohit86@gmail.com" style="color:var(--accent);">nagda.rohit86@gmail.com</a></li>
<li><b>Location</b> Bangalore–560068, India</li>
</ul>
<div class="row g-3">
<div class="col-md-4 col-sm-6">
<div class="service-card">
<div class="icon"><i class="fa fa-layer-group"></i></div>
<h5>Product Strategy & UX</h5>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="service-card">
<div class="icon"><i class="fa fa-pen-ruler"></i></div>
<h5>UI/UX Design</h5>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="service-card">
<div class="icon"><i class="fa fa-sitemap"></i></div>
<h5>Design Systems</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ─── SKILLS ──────────────────────────────────────────────────────────── -->
<section id="section3">
<div class="container" style="position:relative;z-index:1;">
<div class="section-label reveal">Skills</div>
<h2 class="section-title reveal reveal-delay-1">My <span class="grad">Capabilities</span></h2>
<div class="row g-5 mt-2">
<!-- Progress bars -->
<div class="col-lg-6 reveal">
<h4 style="font-size:1rem;font-weight:700;margin-bottom:24px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;">Technical Skills</h4>
<div class="skill-row" data-pct="70">
<div class="skill-label"><span>Product Design</span><span class="skill-pct">70%</span></div>
<div class="skill-bar"><div class="skill-fill"></div></div>
</div>
<div class="skill-row" data-pct="90">
<div class="skill-label"><span>Figma</span><span class="skill-pct">90%</span></div>
<div class="skill-bar"><div class="skill-fill"></div></div>
</div>
<div class="skill-row" data-pct="90">
<div class="skill-label"><span>System Design</span><span class="skill-pct">80%</span></div>
<div class="skill-bar"><div class="skill-fill"></div></div>
</div>
<div class="skill-row" data-pct="80">
<div class="skill-label"><span>Design Thinking</span><span class="skill-pct">80%</span></div>
<div class="skill-bar"><div class="skill-fill"></div></div>
</div>
<div class="skill-row" data-pct="90">
<div class="skill-label"><span>HTML & CSS</span><span class="skill-pct">90%</span></div>
<div class="skill-bar"><div class="skill-fill"></div></div>
</div>
<div class="skill-row" data-pct="90">
<div class="skill-label"><span>Less / Sass</span><span class="skill-pct">90%</span></div>
<div class="skill-bar"><div class="skill-fill"></div></div>
</div>
<div class="skill-row" data-pct="80">
<div class="skill-label"><span>User Research</span><span class="skill-pct">80%</span></div>
<div class="skill-bar"><div class="skill-fill"></div></div>
</div>
<div class="skill-row" data-pct="90">
<div class="skill-label"><span>Bootstrap Framework</span><span class="skill-pct">90%</span></div>
<div class="skill-bar"><div class="skill-fill"></div></div>
</div>
<div class="skill-row" data-pct="70">
<div class="skill-label"><span>React JS</span><span class="skill-pct">70%</span></div>
<div class="skill-bar"><div class="skill-fill"></div></div>
</div>
<div class="skill-row" data-pct="80">
<div class="skill-label"><span>Wireframing</span><span class="skill-pct">80%</span></div>
<div class="skill-bar"><div class="skill-fill"></div></div>
</div>
</div>
<!-- Knowledge tags -->
<div class="col-lg-6 reveal reveal-delay-1">
<h4 style="font-size:1rem;font-weight:700;margin-bottom:24px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;">Knowledge Areas</h4>
<div class="mb-4" style="line-height:1;">
<span class="knowledge-tag"><i class="fa fa-circle"></i>Prototyping</span>
<span class="knowledge-tag"><i class="fa fa-circle"></i>UX Design</span>
<span class="knowledge-tag"><i class="fa fa-circle"></i>Responsive Design</span>
<span class="knowledge-tag"><i class="fa fa-circle"></i>Web Dev: React JS</span>
<span class="knowledge-tag"><i class="fa fa-circle"></i>SEO</span>
<span class="knowledge-tag"><i class="fa fa-circle"></i>Figma</span>
<span class="knowledge-tag"><i class="fa fa-circle"></i>Human Centric Design</span>
<span class="knowledge-tag"><i class="fa fa-circle"></i>User Centered Design</span>
<span class="knowledge-tag"><i class="fa fa-circle"></i>Agile Methodology</span>
<span class="knowledge-tag"><i class="fa fa-circle"></i>UX Research</span>
<span class="knowledge-tag"><i class="fa fa-circle"></i>Usability Testing</span>
<span class="knowledge-tag"><i class="fa fa-circle"></i>UI/UX Designer</span>
<span class="knowledge-tag"><i class="fa fa-circle"></i>Product Design</span>
<span class="knowledge-tag"><i class="fa fa-circle"></i>Figma → HTML/Angular/React</span>
<span class="knowledge-tag"><i class="fa fa-circle"></i>Tailwind CSS</span>
<span class="knowledge-tag"><i class="fa fa-circle"></i>Dashboard Designs</span>
<span class="knowledge-tag"><i class="fa fa-circle"></i>System Design</span>
<span class="knowledge-tag"><i class="fa fa-circle"></i>Emailer & Banner Designs</span>
<span class="knowledge-tag"><i class="fa fa-circle"></i>Wireframes & Prototype</span>
<span class="knowledge-tag"><i class="fa fa-circle"></i>Information Architecture</span>
<span class="knowledge-tag"><i class="fa fa-circle"></i>Design Systems</span>
<span class="knowledge-tag"><i class="fa fa-circle"></i>Material UI</span>
<span class="knowledge-tag"><i class="fa fa-circle"></i>Interaction Design</span>
<span class="knowledge-tag"><i class="fa fa-circle"></i>Healthcare / Finance / E-Commerce</span>
</div>
<!-- Language skills -->
<h4 style="font-size:1rem;font-weight:700;margin-bottom:20px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;">Language Skills</h4>
<div class="d-flex gap-4 flex-wrap">
<div class="lang-circle">
<div class="lang-ring" data-pct="90">
<svg width="100" height="100" viewBox="0 0 100 100">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#6c63ff"/>
<stop offset="100%" style="stop-color:#00d4ff"/>
</linearGradient>
</defs>
<circle class="track" cx="50" cy="50" r="45" />
<circle class="fill" cx="50" cy="50" r="45" />
</svg>
<div class="pct-label">90%</div>
</div>
<div class="lang-lbl">English</div>
</div>
<div class="lang-circle">
<div class="lang-ring" data-pct="100">
<svg width="100" height="100" viewBox="0 0 100 100">
<defs>
<linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#6c63ff"/>
<stop offset="100%" style="stop-color:#00d4ff"/>
</linearGradient>
</defs>
<circle class="track" cx="50" cy="50" r="45" />
<circle class="fill" cx="50" cy="50" r="45" style="stroke:url(#grad3);" />
</svg>
<div class="pct-label">100%</div>
</div>
<div class="lang-lbl">Hindi</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ─── EXPERIENCE ──────────────────────────────────────────────────────── -->
<section id="section4">
<div class="glow-blob" style="width:600px;height:600px;background:rgba(0,212,255,0.05);top:-100px;right:-200px;position:absolute;z-index:0;border-radius:50%;filter:blur(100px);"></div>
<div class="container" style="position:relative;z-index:1;">
<div class="section-label reveal">Career</div>
<h2 class="section-title reveal reveal-delay-1">10+ Years of <span class="grad">Experience</span></h2>
<div class="row g-5 mt-2">
<div class="col-lg-8 reveal">
<div class="timeline">
<div class="tl-item">
<div class="tl-dot"></div>
<div class="tl-card">
<div class="tl-meta">
<span class="tl-year">Mar 2024 – Present</span>
<span class="tl-company">Dataflow Group, Bangalore</span>
</div>
<h5>Senior Product Designer | UI UX Engineer </h5>
<p>Leading end-to-end product design initiatives for data management solutions, creating intuitive dashboards and streamlining complex data workflows for enterprise users.</p>
</div>
</div>
<div class="tl-item">
<div class="tl-dot"></div>
<div class="tl-card">
<div class="tl-meta">
<span class="tl-year">Jul 2023 – Dec 2023</span>
<span class="tl-company">Purview India Consulting Services, Hyderabad</span>
</div>
<h5>Senior Product Designer | UI UX Engineer</h5>
<p>Drove UX strategy for consulting platform products, conducting user research and translating insights into high-fidelity prototypes and production-ready interfaces.</p>
</div>
</div>
<div class="tl-item">
<div class="tl-dot"></div>
<div class="tl-card">
<div class="tl-meta">
<span class="tl-year">Aug 2018 – May 2023</span>
<span class="tl-company">emids technologies Pvt. Ltd., Bengaluru</span>
</div>
<h5>Senior UXP-Analyst / UI UX Engineer</h5>
<p>Spearheaded healthcare product design across multiple clients, building scalable design systems and bridging the gap between design and engineering with React/Angular integration.</p>
</div>
</div>
<div class="tl-item">
<div class="tl-dot"></div>
<div class="tl-card">
<div class="tl-meta">
<span class="tl-year">Aug 2017 – Jul 2018</span>
<span class="tl-company">Mailkoot Communications Pvt. Ltd., Bengaluru</span>
</div>
<h5>Senior UI/UX Designer & Developer</h5>
<p>Designed and developed email marketing platforms and communication tools, focusing on template design systems and A/B tested landing pages.</p>
</div>
</div>
<div class="tl-item">
<div class="tl-dot"></div>
<div class="tl-card">
<div class="tl-meta">
<span class="tl-year">Jul 2016 – Jan 2017</span>
<span class="tl-company">Kaira Software Pvt. Ltd., Ahmedabad</span>
</div>
<h5>UI/UX Designer & Developer</h5>
<p>Delivered web and mobile UI solutions for software products, managing full project lifecycle from wireframing to pixel-perfect front-end implementation.</p>
</div>
</div>
<div class="tl-item">
<div class="tl-dot"></div>
<div class="tl-card">
<div class="tl-meta">
<span class="tl-year">Jan 2015 – Jan 2016</span>
<span class="tl-company">SRG Global Solutions, Udaipur</span>
</div>
<h5>UI/UX Designer & Developer</h5>
<p>Designed responsive websites and digital marketing assets for diverse business clients, building foundational expertise in user-centered design.</p>
</div>
</div>
<div class="tl-item">
<div class="tl-dot"></div>
<div class="tl-card">
<div class="tl-meta">
<span class="tl-year">Jun 2012 – Jul 2014</span>
<span class="tl-company">Freelance UI Designer</span>
</div>
<h5>UI/UX Designer & Developer</h5>
<p>Delivered freelance web design and front-end development projects, establishing core skills in visual design, HTML/CSS, and client collaboration.</p>
</div>
</div>
</div>
</div>
<!-- Testimonials -->
<div class="col-lg-4 reveal reveal-delay-2">
<h4 style="font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:20px;">What People Say</h4>
<div class="testimonial-wrap">
<div class="testimonial-cards" id="testimonialCards">
<div class="testimonial-card active">
<!-- <img src="images/testimonial.jpg" alt="Amrit Raj" class="t-avatar" /> -->
<p class="t-quote">Awesome to work with Rohit. Incredibly organized, easy to communicate with, responsive with next iterations, and beautiful work.</p>
<span class="t-author">Amrit Raj, Emids tech – Bengaluru</span>
</div>
<div class="testimonial-card">Dataflow group – Bengaluru
<!-- <img src="images/sukrit.png" alt="Sandeep Sahadeokar" class="t-avatar" /> -->
<p class="t-quote">Rohit is a true expert. They took our complex ideas and turned them into a clean, intuitive product that our users absolutely love.</p>
<span class="t-author">Sandeep Sahadeokar, Emids tech – Bengaluru</span>
</div>
<div class="testimonial-card">
<!-- <img src="images/radha.png" alt="Laxmi HS" class="t-avatar" /> -->
<p class="t-quote">Working with Rohit was seamless. They have a deep understanding of design strategy and delivered high-quality work faster than we expected. I highly recommend them for any senior-level project.</p>
<span class="t-author">Laxmi HS, Dataflow group – Bengaluru</span>
</div>
</div>
<div class="testimonial-dots" id="testimonialDots">
<div class="t-dot active" data-idx="0"></div>
<div class="t-dot" data-idx="1"></div>
<div class="t-dot" data-idx="2"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ─── EDUCATION ────────────────────────────────────────────────────────── -->
<section id="section5">
<div class="container" style="position:relative;z-index:1;">
<div class="section-label reveal">Background</div>
<h2 class="section-title reveal reveal-delay-1">Educational <span class="grad">Value</span></h2>
<div class="row g-5 mt-2">
<div class="col-lg-7 reveal">
<div class="edu-item">
<div class="edu-year">2015</div>
<div class="edu-content">
<h4>B.Tech – Computer Science & Engineering</h4>
<span>Pacific University, Udaipur (Raj.)</span>
</div>
</div>
<div class="edu-item">
<div class="edu-year">2011</div>
<div class="edu-content">
<h4>Diploma in Computer Science & Engineering</h4>
<span>Vidhya Bhawan Polytechnic College, Udaipur (Raj.)</span>
</div>
</div>
<div class="edu-item">
<div class="edu-year">2008</div>
<div class="edu-content">
<h4>Microsoft Certified Professional</h4>
<span>Certification</span>
</div>
</div>
<div class="edu-item">
<div class="edu-year">2008</div>
<div class="edu-content">
<h4>Microsoft Certified System Engineer</h4>
<span>Certification – Jetking, Udaipur</span>
</div>
</div>
</div>
<div class="col-lg-5 reveal reveal-delay-1">
<h4 style="font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:20px;">Hobbies & Interests</h4>
<div class="hobby-grid">
<div class="hobby-chip"><i class="fa fa-globe"></i> Web Research</div>
<div class="hobby-chip"><i class="fa fa-camera"></i> Photography</div>
<div class="hobby-chip"><i class="fa fa-plane"></i> Travelling</div>
<div class="hobby-chip"><i class="fa fa-book-open"></i> Book Reading</div>
<div class="hobby-chip"><i class="fa fa-music"></i> Music</div>
</div>
</div>
</div>
</div>
</section>
<!-- ─── PORTFOLIO ────────────────────────────────────────────────────────── -->
<section id="section6">
<div class="glow-blob" style="width:700px;height:700px;background:rgba(108,99,255,0.06);top:-200px;left:-200px;position:absolute;z-index:0;border-radius:50%;filter:blur(120px);"></div>
<div class="container" style="position:relative;z-index:1;">
<div class="section-label reveal">Portfolio</div>
<h2 class="section-title reveal reveal-delay-1">Selected <span class="grad">Work</span></h2>
<div class="privacy-note reveal reveal-delay-2">
<i class="fa fa-shield-halved"></i>
<span>To comply with organizational privacy policies, all branding and logos have been removed from these images.</span>
</div>
<!-- Filter bar -->
<div class="filter-bar reveal reveal-delay-2">
<button class="filter-btn active" data-filter="all">View All</button>
<button class="filter-btn" data-filter="Case-Study">Case Studies</button>
<button class="filter-btn" data-filter="Websites">Websites</button>
<button class="filter-btn" data-filter="Admin-Panel">Admin Panel</button>
<button class="filter-btn" data-filter="E-commerce">E-Commerce</button>
<button class="filter-btn" data-filter="Template-Design">Templates</button>
<button class="filter-btn" data-filter="App-Design">App Design</button>
</div>
<!-- Bento Grid -->
<div class="bento-grid" id="bentoGrid">
<!-- CASE STUDIES -->
<div class="bento-item bento-w2 bento-h2 case-study-item" data-filter="Case-Study" data-href="images/work-portfolio/navvis-coreo-case-study.html" data-case="true">
<img src="images/work-portfolio/Case-study/service-provider-web.png" alt="NavVis Coreo Case Study" class="clickable" />
<div class="bento-overlay">
<span class="cat-tag">Case Study</span>
<span class="view-label">NavVis Coreo · Click to view</span>
</div>
</div>
<div class="bento-item bento-w1 bento-h1 case-study-item" data-filter="Case-Study" data-href="images/work-portfolio/hyperBus-case-study.html" data-case="true">
<img src="images/work-portfolio/Case-study/login.png" alt="HyperBus Case Study" class="clickable" />
<div class="bento-overlay">
<span class="cat-tag">Case Study</span>
<span class="view-label">HyperBus · Click to view</span>
</div>
</div>
<div class="bento-item bento-w1 bento-h1 case-study-item" data-filter="Case-Study" data-href="images/work-portfolio/tawkeel-ux-case-study.html" data-case="true">
<img src="images/work-portfolio/Case-study/dasboard-tawkeel.jpg" alt="Tawkeel UX Case Study" class="clickable" />
<div class="bento-overlay">
<span class="cat-tag">Case Study</span>
<span class="view-label">Tawkeel · Click to view</span>
</div>
</div>
<div class="bento-item bento-w1 bento-h1 case-study-item" data-filter="Case-Study" data-href="images/work-portfolio/moheri-case-study.html" data-case="true">
<img src="images/work-portfolio/Case-study/application-process-identity.png" alt="Moheri Case Study" class="clickable" />
<div class="bento-overlay">
<span class="cat-tag">Case Study</span>
<span class="view-label">Moheri · Click to view</span>
</div>
</div>
<!-- ADMIN PANEL -->
<div class="bento-item bento-w1 bento-h2" data-filter="Admin-Panel" data-src="images/work-portfolio/Admin-Panel/compress/admin-2.png">
<img src="images/work-portfolio/Admin-Panel/compress/admin-2.png" alt="Admin Panel" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Admin</span></div>
</div>
<div class="bento-item bento-w2 bento-h1" data-filter="Admin-Panel" data-src="images/work-portfolio/Admin-Panel/compress/admin-3.png">
<img src="images/work-portfolio/Admin-Panel/compress/admin-3.png" alt="Admin Panel" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Admin</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="Admin-Panel" data-src="images/work-portfolio/Admin-Panel/compress/admin-4.jpeg">
<img src="images/work-portfolio/Admin-Panel/compress/admin-4.jpeg" alt="Admin Panel" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Admin</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="Admin-Panel" data-src="images/work-portfolio/Admin-Panel/compress/admin-6.jpeg">
<img src="images/work-portfolio/Admin-Panel/compress/admin-6.jpeg" alt="Admin Panel" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Admin</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="Admin-Panel" data-src="images/work-portfolio/Admin-Panel/compress/admin-7.jpeg">
<img src="images/work-portfolio/Admin-Panel/compress/admin-7.jpeg" alt="Admin Panel" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Admin</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="Admin-Panel" data-src="images/work-portfolio/Admin-Panel/compress/admin-8.png">
<img src="images/work-portfolio/Admin-Panel/compress/admin-8.png" alt="Admin Panel" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Admin</span></div>
</div>
<div class="bento-item bento-w2 bento-h1" data-filter="Admin-Panel" data-src="images/work-portfolio/Admin-Panel/compress/admin-9.png">
<img src="images/work-portfolio/Admin-Panel/compress/admin-9.png" alt="Admin Panel" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Admin</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="Admin-Panel" data-src="images/work-portfolio/Admin-Panel/compress/admin-13.png">
<img src="images/work-portfolio/Admin-Panel/compress/admin-13.png" alt="Admin Panel" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Admin</span></div>
</div>
<!-- E-COMMERCE -->
<div class="bento-item bento-w2 bento-h2" data-filter="E-commerce" data-src="images/work-portfolio/E-commerce/compress/ecomm1.png">
<img src="images/work-portfolio/E-commerce/compress/ecomm1.png" alt="E-commerce" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">E-Commerce</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="E-commerce" data-src="images/work-portfolio/E-commerce/compress/ecomm2.png">
<img src="images/work-portfolio/E-commerce/compress/ecomm2.png" alt="E-commerce" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">E-Commerce</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="E-commerce" data-src="images/work-portfolio/E-commerce/compress/ecomm3.png">
<img src="images/work-portfolio/E-commerce/compress/ecomm3.png" alt="E-commerce" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">E-Commerce</span></div>
</div>
<!-- TEMPLATE DESIGN -->
<div class="bento-item bento-w1 bento-h1" data-filter="Template-Design" data-src="images/work-portfolio/Template-Design/compress/temp-design1.png">
<img src="images/work-portfolio/Template-Design/compress/temp-design1.png" alt="Template" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Template</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="Template-Design" data-src="images/work-portfolio/Template-Design/compress/temp-design2.png">
<img src="images/work-portfolio/Template-Design/compress/temp-design2.png" alt="Template" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Template</span></div>
</div>
<div class="bento-item bento-w1 bento-h2" data-filter="Template-Design" data-src="images/work-portfolio/Template-Design/compress/temp-design5.png">
<img src="images/work-portfolio/Template-Design/compress/temp-design5.png" alt="Template" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Template</span></div>
</div>
<div class="bento-item bento-w2 bento-h1" data-filter="Template-Design" data-src="images/work-portfolio/Template-Design/compress/temp-design6.png">
<img src="images/work-portfolio/Template-Design/compress/temp-design6.png" alt="Template" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Template</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="Template-Design" data-src="images/work-portfolio/Template-Design/compress/temp-design7.png">
<img src="images/work-portfolio/Template-Design/compress/temp-design7.png" alt="Template" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Template</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="Template-Design" data-src="images/work-portfolio/Template-Design/compress/temp-design8.png">
<img src="images/work-portfolio/Template-Design/compress/temp-design8.png" alt="Template" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Template</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="Template-Design" data-src="images/work-portfolio/Template-Design/compress/temp-design9.png">
<img src="images/work-portfolio/Template-Design/compress/temp-design9.png" alt="Template" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Template</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="Template-Design" data-src="images/work-portfolio/Template-Design/compress/temp-design10.png">
<img src="images/work-portfolio/Template-Design/compress/temp-design10.png" alt="Template" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Template</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="Template-Design" data-src="images/work-portfolio/Template-Design/compress/temp-design11.png">
<img src="images/work-portfolio/Template-Design/compress/temp-design11.png" alt="Template" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Template</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="Template-Design" data-src="images/work-portfolio/Template-Design/compress/temp-design12.png">
<img src="images/work-portfolio/Template-Design/compress/temp-design12.png" alt="Template" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Template</span></div>
</div>
<!-- WEBSITES -->
<div class="bento-item bento-w2 bento-h2" data-filter="Websites" data-src="images/work-portfolio/Website/emids/home-page.png">
<img src="images/work-portfolio/Website/emids/home-page.png" alt="Website" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Website</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="Websites" data-src="images/work-portfolio/Website/geneotech/geneo1.png">
<img src="images/work-portfolio/Website/geneotech/geneo1.png" alt="Website" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Website</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="Websites" data-src="images/work-portfolio/Website/geneotech/geneo3.png">
<img src="images/work-portfolio/Website/geneotech/geneo3.png" alt="Website" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Website</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="Websites" data-src="images/work-portfolio/Website/geneotech/geneo4.png">
<img src="images/work-portfolio/Website/geneotech/geneo4.png" alt="Website" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Website</span></div>
</div>
<div class="bento-item bento-w2 bento-h1" data-filter="Websites" data-src="images/work-portfolio/Website/kaira/kaira1.png">
<img src="images/work-portfolio/Website/kaira/kaira1.png" alt="Website" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Website</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="Websites" data-src="images/work-portfolio/Website/kaira/kaira2.png">
<img src="images/work-portfolio/Website/kaira/kaira2.png" alt="Website" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Website</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="Websites" data-src="images/work-portfolio/Website/kaira/kaira3.png">
<img src="images/work-portfolio/Website/kaira/kaira3.png" alt="Website" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Website</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="Websites" data-src="images/work-portfolio/Website/srg/compress/SRG1.png">
<img src="images/work-portfolio/Website/srg/compress/SRG1.png" alt="Website" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Website</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="Websites" data-src="images/work-portfolio/Website/srg/compress/SRG2.png">
<img src="images/work-portfolio/Website/srg/compress/SRG2.png" alt="Website" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Website</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="Websites" data-src="images/work-portfolio/Website/srg/compress/SRG3.png">
<img src="images/work-portfolio/Website/srg/compress/SRG3.png" alt="Website" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">Website</span></div>
</div>
<!-- APP DESIGN -->
<div class="bento-item bento-w1 bento-h2" data-filter="App-Design" data-src="images/work-portfolio/App-design/app-design-2.png">
<img src="images/work-portfolio/App-design/app-design-2.png" alt="App Design" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">App</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="App-Design" data-src="images/work-portfolio/App-design/app-design-3.png">
<img src="images/work-portfolio/App-design/app-design-3.png" alt="App Design" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">App</span></div>
</div>
<div class="bento-item bento-w2 bento-h1" data-filter="App-Design" data-src="images/work-portfolio/App-design/app-design-6.png">
<img src="images/work-portfolio/App-design/app-design-6.png" alt="App Design" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">App</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="App-Design" data-src="images/work-portfolio/App-design/app-design-4.png">
<img src="images/work-portfolio/App-design/app-design-4.png" alt="App Design" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">App</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="App-Design" data-src="images/work-portfolio/App-design/app-design-5.png">
<img src="images/work-portfolio/App-design/app-design-5.png" alt="App Design" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">App</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="App-Design" data-src="images/work-portfolio/App-design/app-design-7.png">
<img src="images/work-portfolio/App-design/app-design-7.png" alt="App Design" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">App</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="App-Design" data-src="images/work-portfolio/App-design/app-design-9.png">
<img src="images/work-portfolio/App-design/app-design-9.png" alt="App Design" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">App</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="App-Design" data-src="images/work-portfolio/App-design/app-design-8.png">
<img src="images/work-portfolio/App-design/app-design-8.png" alt="App Design" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">App</span></div>
</div>
<div class="bento-item bento-w1 bento-h1" data-filter="App-Design" data-src="images/work-portfolio/App-design/app-design-11.jpg">
<img src="images/work-portfolio/App-design/app-design-11.jpg" alt="App Design" class="clickable" />
<div class="bento-overlay"><span class="cat-tag">App</span></div>
</div>
</div><!-- /bento-grid -->
</div>
</section>
<!-- ─── CONTACT ──────────────────────────────────────────────────────────── -->
<section id="section7">
<div class="glow-blob" style="width:500px;height:500px;background:rgba(0,212,255,0.06);bottom:-100px;right:-150px;position:absolute;z-index:0;border-radius:50%;filter:blur(80px);"></div>
<div class="container" style="position:relative;z-index:1;">
<div class="section-label reveal">Contact</div>
<h2 class="section-title reveal reveal-delay-1">Get In <span class="grad">Touch</span></h2>
<p class="reveal reveal-delay-2" style="color:var(--text-muted);font-size:0.95rem;margin-bottom:48px;max-width:540px;">
Have a project in mind or want to connect? I'm always open to discussing product design work or opportunities.
</p>
<div class="row g-4">
<div class="col-lg-5 reveal">
<div class="contact-card">
<div class="contact-item">
<div class="ci-icon"><i class="fa fa-location-dot"></i></div>
<div class="ci-text">Bangalore – 560068, India</div>
</div>
<div class="contact-item">
<div class="ci-icon"><i class="fa fa-phone"></i></div>
<div class="ci-text"><a href="tel:8209877351">+91 8209877351</a></div>
</div>
<div class="contact-item">
<div class="ci-icon"><i class="fa fa-envelope"></i></div>
<div class="ci-text"><a href="mailto:nagda.rohit86@gmail.com">nagda.rohit86@gmail.com</a></div>
</div>
<!-- <div class="contact-item">
<div class="ci-icon"><i class="fa fa-globe"></i></div>
<div class="ci-text"><a href="http://www.rohitnagda.com" target="_blank">rohitnagda.com</a></div>
</div> -->
<div class="social-row">
<!-- <a href="https://www.facebook.com/rohit.nagda.796" target="_blank" class="social-btn" aria-label="Facebook">
<i class="fab fa-facebook-f"></i>
</a> -->
<a href="https://www.linkedin.com/in/rohit-nagda-195a60106/" target="_blank" class="social-btn" aria-label="LinkedIn">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-7 reveal reveal-delay-1">
<div class="contact-card">
<div class="row g-3">
<div class="col-sm-6">
<label class="form-label-rn">Name</label>
<input type="text" class="form-ctrl-rn" placeholder="Your name" name="contact-name" />
</div>
<div class="col-sm-6">
<label class="form-label-rn">Email</label>
<input type="email" class="form-ctrl-rn" placeholder="your@email.com" name="contact-email" />
</div>
<div class="col-12">
<label class="form-label-rn">Message</label>
<textarea class="form-ctrl-rn" rows="5" placeholder="Tell me about your project..." name="contact-message"></textarea>
</div>
<div class="col-12">
<button type="button" class="btn-primary-rn" style="width:100%;justify-content:center;">
<i class="fa fa-paper-plane"></i> Send Message
</button>
</div>
</div>
<div class="contact-loading alert alert-info form-alert mt-3" style="display:none;">Loading...</div>
<div class="contact-success alert alert-success form-alert mt-3" style="display:none;">Success!</div>
<div class="contact-error alert alert-danger form-alert mt-3" style="display:none;">Error!</div>
</div>
</div>
</div>
</div>
</section>
<!-- ─── FOOTER ────────────────────────────────────────────────────────────── -->
<footer>
<div class="container">
<div class="footer-inner">
<div class="footer-brand">ROHIT NAGDA</div>
<ul class="footer-links">
<li><a href="#section1">Home</a></li>
<li><a href="#section2">About</a></li>
<li><a href="#section6">Work</a></li>
<li><a href="#section7">Contact</a></li>
</ul>
<div class="footer-copy">Copyright 2026 © Rohit Nagda. All Rights Reserved.</div>
</div>
</div>
</footer>
<!-- ─── LIGHTBOX ──────────────────────────────────────────────────────────── -->
<div id="lightbox">
<button id="lightbox-close"><i class="fa fa-xmark"></i></button>
<button id="lightbox-expand"><i class="fa fa-expand"></i></button>
<img id="lightbox-img" src="" alt="" />
<div id="lightbox-nav">
<button class="lb-btn" id="lb-prev"><i class="fa fa-chevron-left"></i> Prev</button>
<button class="lb-btn" id="lb-next">Next <i class="fa fa-chevron-right"></i></button>
</div>
</div>
<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>