<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Amara Dhanush Kumar - CSE Student, Radio Club President, Web Developer">
<title>Amara Dhanush Kumar | Portfolio</title>
<link rel="stylesheet" href="styles.css">
<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=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<!-- Loading Screen -->
<div id="loading-screen">
<div class="loader">
<div class="loader-circle"></div>
<p class="loader-text">Loading...</p>
</div>
</div>
<!-- Background Particles -->
<div id="particles"></div>
<!-- Navigation -->
<nav id="navbar">
<div class="nav-container">
<div class="nav-logo">
<span class="gradient-text">Dhanush Kumar</span>
</div>
<ul class="nav-menu" id="nav-menu">
<li><a href="#home" class="nav-link active">Home</a></li>
<li><a href="#about" class="nav-link">About</a></li>
<li><a href="#education" class="nav-link">Education</a></li>
<li><a href="#experience" class="nav-link">Experience</a></li>
<li><a href="#skills" class="nav-link">Skills</a></li>
<li><a href="#projects" class="nav-link">Projects</a></li>
<li><a href="#achievements" class="nav-link">Achievements</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
</ul>
<div class="hamburger" id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero-section">
<div class="hero-content">
<div class="hero-image">
<div class="image-glow"></div>
<img src="me.jpg" alt="Amara Dhanush Kumar" id="profile-pic">
</div>
<h1 class="hero-title">
<span class="gradient-text typing-text">Amara Dhanush Kumar</span>
</h1>
<p class="hero-subtitle" id="typing-subtitle"></p>
<div class="hero-buttons">
<a href="#contact" class="btn btn-primary">
<i class="fas fa-envelope"></i> Get In Touch
</a>
<a href="#" class="btn btn-secondary" id="download-resume">
<i class="fas fa-download"></i> Download Resume
</a>
</div>
<div class="social-links-hero">
<a href="https://www.linkedin.com/in/amara-dhanush-kumar-319a33308" target="_blank" class="social-icon">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="https://github.com/dhanush-the-versatile" target="_blank" class="social-icon">
<i class="fab fa-github"></i>
</a>
<a href="https://www.instagram.com/dhanush_the_versatile/" target="_blank" class="social-icon">
<i class="fab fa-instagram"></i>
</a>
</div>
</div>
<div class="scroll-indicator">
<div class="mouse">
<div class="wheel"></div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="section">
<div class="container">
<h2 class="section-title">About <span class="gradient-text">Me</span></h2>
<div class="about-content">
<div class="about-image">
<div class="about-img-wrapper">
<img src="about.jpg" alt="About Amara Dhanush Kumar">
</div>
</div>
<div class="about-text">
<p class="about-description">
I am currently pursuing a <strong>Bachelor of Technology in Computer Science and Engineering</strong> at
Lendi Institute of Engineering and Technology. As <strong>President of the Lendi Radio Club</strong> and
<strong>Mr. Fresher at LIET</strong>, I'm passionate about technology, innovation, and leadership.
</p>
<p class="about-description">
I specialize in <strong>full-stack web development</strong>, <strong>mobile app development</strong>,
and <strong>business automation solutions</strong>. My versatile skill set spans from creating tourism
platforms to developing inventory management systems.
</p>
<div class="about-highlights">
<div class="highlight-item">
<i class="fas fa-graduation-cap"></i>
<span>CSE Student at LIET</span>
</div>
<div class="highlight-item">
<i class="fas fa-trophy"></i>
<span>Radio Club President</span>
</div>
<div class="highlight-item">
<i class="fas fa-code"></i>
<span>Full Stack Developer</span>
</div>
<div class="highlight-item">
<i class="fas fa-briefcase"></i>
<span>Business Owner</span>
</div>
</div>
<div class="about-stats">
<div class="stat-item">
<h3 class="stat-number" data-target="15">0</h3>
<p>Projects Completed</p>
</div>
<div class="stat-item">
<h3 class="stat-number" data-target="10">0</h3>
<p>Technologies</p>
</div>
<div class="stat-item">
<h3 class="stat-number" data-target="3">0</h3>
<p>Achievements</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Education Section -->
<section id="education" class="section">
<div class="container">
<h2 class="section-title">My <span class="gradient-text">Education</span></h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-icon">
<i class="fas fa-university"></i>
</div>
<div class="timeline-content glass-card">
<span class="timeline-date">2024 - 2028</span>
<h3>Bachelor of Technology - CSE</h3>
<h4>Lendi Institute of Engineering and Technology</h4>
<p>Pursuing Computer Science and Engineering with focus on full-stack development, mobile applications, and emerging technologies.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">
<i class="fas fa-school"></i>
</div>
<div class="timeline-content glass-card">
<span class="timeline-date">Completed</span>
<h3>Intermediate / 12th Class</h3>
<h4>Narayana Junior College</h4>
<p>Completed higher secondary education with strong foundation in science and mathematics.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Experience Section -->
<section id="experience" class="section">
<div class="container">
<h2 class="section-title">My <span class="gradient-text">Experience</span></h2>
<div class="experience-grid">
<div class="experience-card glass-card">
<div class="exp-icon">
<i class="fas fa-radio"></i>
</div>
<h3>President</h3>
<h4>Lendi Radio Club</h4>
<span class="exp-duration">Feb 2025 - Current</span>
<p>Leading the radio club initiatives, organizing events, and fostering community engagement. Managing club activities and representing the club in college events.</p>
<div class="exp-tags">
<span class="tag">Leadership</span>
<span class="tag">Event Management</span>
<span class="tag">Broadcasting</span>
</div>
</div>
<div class="experience-card glass-card">
<div class="exp-icon">
<i class="fas fa-store"></i>
</div>
<h3>Business Owner</h3>
<h4>Grocery Store</h4>
<span class="exp-duration">Ongoing</span>
<p>Managing a retail grocery business with focus on inventory management, customer relations, and business automation using technology solutions.</p>
<div class="exp-tags">
<span class="tag">Business Management</span>
<span class="tag">Automation</span>
<span class="tag">Inventory</span>
</div>
</div>
<div class="experience-card glass-card">
<div class="exp-icon">
<i class="fas fa-star"></i>
</div>
<h3>Mr. Fresher</h3>
<h4>Lendi Institute of Engineering & Technology</h4>
<span class="exp-duration">Achievement</span>
<p>Awarded Mr. Fresher title at LIET, showcasing leadership and talent among the freshman batch.</p>
<div class="exp-tags">
<span class="tag">Award</span>
<span class="tag">Recognition</span>
</div>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="section">
<div class="container">
<h2 class="section-title">My <span class="gradient-text">Skills</span></h2>
<div class="skills-container">
<div class="skill-category glass-card">
<h3><i class="fas fa-laptop-code"></i> Web Development</h3>
<div class="skill-bars">
<div class="skill-bar">
<div class="skill-info">
<span>HTML</span>
<span>90%</span>
</div>
<div class="progress-bar">
<div class="progress" data-progress="90"></div>
</div>
</div>
<div class="skill-bar">
<div class="skill-info">
<span>CSS</span>
<span>85%</span>
</div>
<div class="progress-bar">
<div class="progress" data-progress="85"></div>
</div>
</div>
<div class="skill-bar">
<div class="skill-info">
<span>JavaScript</span>
<span>85%</span>
</div>
<div class="progress-bar">
<div class="progress" data-progress="85"></div>
</div>
</div>
<div class="skill-bar">
<div class="skill-info">
<span>PHP</span>
<span>75%</span>
</div>
<div class="progress-bar">
<div class="progress" data-progress="75"></div>
</div>
</div>
<div class="skill-bar">
<div class="skill-info">
<span>Google Apps Script</span>
<span>80%</span>
</div>
<div class="progress-bar">
<div class="progress" data-progress="80"></div>
</div>
</div>
</div>
</div>
<div class="skill-category glass-card">
<h3><i class="fas fa-code"></i> Programming</h3>
<div class="skill-bars">
<div class="skill-bar">
<div class="skill-info">
<span>Kotlin</span>
<span>70%</span>
</div>
<div class="progress-bar">
<div class="progress" data-progress="70"></div>
</div>
</div>
<div class="skill-bar">
<div class="skill-info">
<span>Python</span>
<span>65%</span>
</div>
<div class="progress-bar">
<div class="progress" data-progress="65"></div>
</div>
</div>
<div class="skill-bar">
<div class="skill-info">
<span>Java</span>
<span>60%</span>
</div>
<div class="progress-bar">
<div class="progress" data-progress="60"></div>
</div>
</div>
</div>
</div>
<div class="skill-category glass-card">
<h3><i class="fas fa-database"></i> Database</h3>
<div class="skill-bars">
<div class="skill-bar">
<div class="skill-info">
<span>MySQL</span>
<span>80%</span>
</div>
<div class="progress-bar">
<div class="progress" data-progress="80"></div>
</div>
</div>
<div class="skill-bar">
<div class="skill-info">
<span>Oracle Database</span>
<span>70%</span>
</div>
<div class="progress-bar">
<div class="progress" data-progress="70"></div>
</div>
</div>
<div class="skill-bar">
<div class="skill-info">
<span>Microsoft Access</span>
<span>75%</span>
</div>
<div class="progress-bar">
<div class="progress" data-progress="75"></div>
</div>
</div>
</div>
</div>
<div class="skill-category glass-card">
<h3><i class="fas fa-tools"></i> Tools & Platforms</h3>
<div class="skill-bars">
<div class="skill-bar">
<div class="skill-info">
<span>Android Studio</span>
<span>75%</span>
</div>
<div class="progress-bar">
<div class="progress" data-progress="75"></div>
</div>
</div>
<div class="skill-bar">
<div class="skill-info">
<span>Docker</span>
<span>60%</span>
</div>
<div class="progress-bar">
<div class="progress" data-progress="60"></div>
</div>
</div>
<div class="skill-bar">
<div class="skill-info">
<span>GitHub</span>
<span>85%</span>
</div>
<div class="progress-bar">
<div class="progress" data-progress="85"></div>
</div>
</div>
<div class="skill-bar">
<div class="skill-info">
<span>Figma</span>
<span>70%</span>
</div>
<div class="progress-bar">
<div class="progress" data-progress="70"></div>
</div>
</div>
<div class="skill-bar">
<div class="skill-info">
<span>Hostinger</span>
<span>80%</span>
</div>
<div class="progress-bar">
<div class="progress" data-progress="80"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="section">
<div class="container">
<h2 class="section-title">My <span class="gradient-text">Projects</span></h2>
<div class="project-filters">
<button class="filter-btn active" data-filter="all">All</button>
<button class="filter-btn" data-filter="web">Web</button>
<button class="filter-btn" data-filter="mobile">Mobile</button>
<button class="filter-btn" data-filter="automation">Automation</button>
</div>
<div class="projects-grid">
<div class="project-card glass-card" data-category="web">
<div class="project-image">
<img src="tourism.png" alt="Tourism Platform">
<div class="project-overlay">
<div class="project-links">
<a href="https://dhanush-the-versatile.github.io/JatayuNetra/" class="project-link"><i class="fas fa-external-link-alt"></i></a>
<a href="https://github.com/dhanush-the-versatile/JatayuNetra" class="project-link"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
<div class="project-info">
<h3>Tourism & Travel Management Platform</h3>
<p>Comprehensive tourism platform with multiple user dashboards, authentication systems, and real-time database integration.</p>
<div class="project-tech">
<span class="tech-tag">HTML</span>
<span class="tech-tag">CSS</span>
<span class="tech-tag">JavaScript</span>
<span class="tech-tag">PHP</span>
<span class="tech-tag">MySQL</span>
</div>
</div>
</div>
<div class="project-card glass-card" data-category="web">
<div class="project-image">
<img src="etf.png" alt="ETF Management">
<div class="project-overlay">
<div class="project-links">
<a href="https://englishteachersforumbharath.com/" class="project-link"><i class="fas fa-external-link-alt"></i></a>
<a href="https://github.com/dhanush-the-versatile/ETF_project" class="project-link"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
<div class="project-info">
<h3>ETF Management Website</h3>
<p>English courses management website featuring 8 subpages with payment integration and PDF generation capabilities.</p>
<div class="project-tech">
<span class="tech-tag">HTML</span>
<span class="tech-tag">CSS</span>
<span class="tech-tag">JavaScript</span>
<span class="tech-tag">Payment API</span>
</div>
</div>
</div>
<div class="project-card glass-card" data-category="automation">
<div class="project-image">
<img src="shop.png" alt="Inventory System">
<div class="project-overlay">
<div class="project-links">
<a href="https://dhanush-the-versatile.github.io/Shop_DBMS/" class="project-link"><i class="fas fa-external-link-alt"></i></a>
<a href="https://github.com/dhanush-the-versatile/Shop_DBMS" class="project-link"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
<div class="project-info">
<h3>Grocery Store Inventory System</h3>
<p>Comprehensive inventory management with automated billing, reporting, and WhatsApp integration.</p>
<div class="project-tech">
<span class="tech-tag">Google Apps Script</span>
<span class="tech-tag">Google Sheets</span>
<span class="tech-tag">WhatsApp API</span>
</div>
</div>
</div>
<!--<div class="project-card glass-card" data-category="web">
<div class="project-image">
<img src="https://via.placeholder.com/400x250" alt="User Safety Website">
<div class="project-overlay">
<div class="project-links">
<a href="#" class="project-link"><i class="fas fa-external-link-alt"></i></a>
<a href="#" class="project-link"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
<div class="project-info">
<h3>User Safety Website</h3>
<p>Fully functional user-safety focused website with PHP/MySQL backend and user authentication.</p>
<div class="project-tech">
<span class="tech-tag">HTML</span>
<span class="tech-tag">PHP</span>
<span class="tech-tag">MySQL</span>
<span class="tech-tag">Hostinger</span>
</div>
</div>
</div>-->
<div class="project-card glass-card" data-category="web">
<div class="project-image">
<img src="portfolio.png" alt="Portfolio Websites">
<div class="project-overlay">
<div class="project-links">
<a href="#" class="project-link"><i class="fas fa-external-link-alt"></i></a>
<a href="#" class="project-link"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
<div class="project-info">
<h3>Portfolio Websites</h3>
<p>Multiple responsive and interactive portfolio websites with amazing designs and smooth animations.</p>
<div class="project-tech">
<span class="tech-tag">HTML</span>
<span class="tech-tag">CSS</span>
<span class="tech-tag">JavaScript</span>
<span class="tech-tag">Responsive</span>
</div>
</div>
</div>
<div class="project-card glass-card" data-category="mobile">
<div class="project-image">
<img src="dev.png" alt="Mobile App Development">
<div class="project-overlay">
<div class="project-links">
<a href="https://developers.google.com/profile/u/dhanush_the_versatile" class="project-link"><i class="fas fa-external-link-alt"></i></a>
<!--<a href="#" class="project-link"><i class="fab fa-github"></i></a>-->
</div>
</div>
</div>
<div class="project-info">
<h3>Mobile App Development</h3>
<p>Android applications developed using Android Studio with proper deployment procedures.</p>
<div class="project-tech">
<span class="tech-tag">Kotlin</span>
<span class="tech-tag">Android Studio</span>
<span class="tech-tag">Java</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Achievements Section -->
<section id="achievements" class="section">
<div class="container">
<h2 class="section-title">My <span class="gradient-text">Achievements</span></h2>
<div class="achievements-grid">
<div class="achievement-card glass-card">
<div class="achievement-icon">
<i class="fas fa-trophy"></i>
</div>
<h3>President - Lendi Radio Club</h3>
<p>Elected as President of the Lendi Radio Club, leading initiatives and events for the college community.</p>
</div>
<div class="achievement-card glass-card">
<div class="achievement-icon">
<i class="fas fa-star"></i>
</div>
<h3>Mr. Fresher - LIET</h3>
<p>Awarded the prestigious title of Mr. Fresher at Lendi Institute of Engineering and Technology.</p>
</div>
<div class="achievement-card glass-card">
<div class="achievement-icon">
<i class="fas fa-medal"></i>
</div>
<h3>Competition Runner-up</h3>
<p>Stood as the runner-up in college competitions, demonstrating excellence and competitive spirit.</p>
</div>
<div class="achievement-card glass-card">
<div class="achievement-icon">
<i class="fas fa-briefcase"></i>
</div>
<h3>Business Management</h3>
<p>Successfully managing a grocery store business while pursuing engineering degree.</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="section">
<div class="container">
<h2 class="section-title">Get In <span class="gradient-text">Touch</span></h2>
<div class="contact-content">
<div class="contact-info">
<div class="contact-card glass-card">
<div class="contact-icon">
<i class="fas fa-envelope"></i>
</div>
<h3>Email</h3>
<p>amaradhanushkumar@gmail.com</p>
</div>
<div class="contact-card glass-card">
<div class="contact-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<h3>Location</h3>
<p>Vizianagaram, Andhra Pradesh, India</p>
</div>
<div class="contact-card glass-card">
<div class="contact-icon">
<i class="fas fa-share-alt"></i>
</div>
<h3>Social Media</h3>
<div class="social-links-contact">
<a href="https://www.linkedin.com/in/amara-dhanush-kumar-319a33308" target="_blank"><i class="fab fa-linkedin-in"></i></a>
<a href="https://github.com/dhanush-the-versatile" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://www.instagram.com/dhanush_the_versatile/" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<div class="contact-form-container">
<form id="contact-form" class="glass-card">
<div class="form-group">
<input type="text" id="name" name="name" placeholder="Your Name" required>
</div>
<div class="form-group">
<input type="email" id="email" name="email" placeholder="Your Email" required>
</div>
<div class="form-group">
<input type="text" id="subject" name="subject" placeholder="Subject" required>
</div>
<div class="form-group">
<textarea id="message" name="message" rows="5" placeholder="Your Message" required></textarea>
</div>
<button type="submit" class="btn btn-primary btn-block">
<i class="fas fa-paper-plane"></i> Send Message
</button>
</form>
<div id="form-message" class="form-message"></div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3 class="gradient-text">Amara Dhanush Kumar</h3>
<p>Building innovative solutions with passion and dedication.</p>
</div>
<div class="footer-section">
<h4>Quick Links</h4>
<ul class="footer-links">
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="https://developers.google.com/profile/u/dhanush_the_versatile">Google Developer Profile</a></li>
<li><a href="https://api.whatsapp.com/send/?phone=9492895382&text&type=phone_number&app_absent=0">Whatsapp</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Connect</h4>
<div class="footer-social">
<a href="https://www.linkedin.com/in/amara-dhanush-kumar-319a33308" target="_blank"><i class="fab fa-linkedin-in"></i></a>
<a href="https://github.com/dhanush-the-versatile" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://www.instagram.com/dhanush_the_versatile/" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 Amara Dhanush Kumar. Made with <span class="heart">❤️</span></p>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<button id="back-to-top" class="back-to-top">
<i class="fas fa-arrow-up"></i>
</button>
<script src="script.js"></script>
</body>
</html>