Skip to content

Added Aadithya Suresh to person directory #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
xxdiii wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Added Aadithya Suresh to person directory #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
26372d9
Added Aadithya Suresh to person directory
xxdiii Oct 12, 2025
2748dca
added hover animation
xxdiii Oct 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
185 changes: 185 additions & 0 deletions src/app/aadithya-suresh/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@
import Navbar from "@/components/Navbar";

export default function AadithyaSureshPage() {
return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
<style>{`
@keyframes cardExpand {
0% {
transform: scale(1);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
100% {
transform: scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
}

@keyframes skillExpand {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
}

.project-card:hover,
.education-card:hover,
.experience-card:hover {
animation: cardExpand 0.4s ease-out forwards;
}

.skill-badge:hover {
animation: skillExpand 0.4s ease-out forwards;

}
`}</style>
<Navbar />
<div className="container mx-auto px-4 py-12">

{/* Person Profile */}
<div className="max-w-4xl mx-auto">
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
{/* Header */}
<div className="bg-gradient-to-r from-blue-500 to-green-600 px-8 py-12">
<div className="flex items-center space-x-6">
<div className="flex-shrink-0">
<div className="w-24 h-24 bg-blue-600 rounded-full flex items-center justify-center text-white font-semibold text-4xl">
A
</div>
</div>
<div className="flex-1">
<h1 className="text-3xl md:text-4xl font-bold text-white mb-2">
Aadithya Suresh
</h1>
<p className="text-xl text-blue-100 mb-2">Computer Science Student</p>
<p className="text-blue-200">Age: 19 • Third Year</p>
</div>
</div>
</div>

{/* Content */}
<div className="p-8">
{/* Bio Section */}
<div className="mb-8">
<h2 className="text-2xl font-semibold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-4">
About
</h2>
<p className="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
Hi! I'm Aadithya, a third-year Computer Science Engineering student with a strong interest in web development and software engineering. I'm currently learning the MERN stack through YouTube tutorials and official documentation, building projects to strengthen my hands-on skills.
</p>

<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
I enjoy solving problems, creating user-friendly web applications, and constantly exploring new technologies that push my learning forward. My goal is to become a full-stack developer capable of designing and building complete, scalable applications.
</p>
</div>

{/* Skills Section */}
<div className="mb-8">
<h2 className="text-2xl font-semibold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-4">
Skills & Interests
</h2>
<div className="flex flex-wrap gap-3">
<span className="skill-badge px-4 py-2 bg-blue-100 dark:bg-blue-900 to-green-100 dark:text-green-200 rounded-full text-sm font-medium border border-green-200 dark:border-green-700 ">
HTML/CSS
</span>
<span className="skill-badge px-4 py-2 bg-green-100 dark:bg-blue-900 to-green-100 dark:text-green-200 rounded-full text-sm font-medium border border-green-200 dark:border-green-700">
JavaScript
</span>
<span className="skill-badge px-4 py-2 bg-purple-100 dark:bg-blue-900 to-green-100 dark:text-green-200 rounded-full text-sm font-medium border border-green-200 dark:border-green-700">
React.js
</span>
<span className="skill-badge px-4 py-2 bg-blue-100 dark:bg-blue-900 to-green-100 dark:text-green-200 rounded-full text-sm font-medium border border-green-200 dark:border-green-700">
Node.js
</span>
<span className="skill-badge px-4 py-2 bg-blue-100 dark:bg-blue-900 to-green-100 dark:text-green-200 rounded-full text-sm font-medium border border-green-200 dark:border-green-700">
Express.js
</span>
<span className="skill-badge px-4 py-2 bg-blue-100 dark:bg-blue-900 to-green-100 dark:text-green-200 rounded-full text-sm font-medium border border-green-200 dark:border-green-700">
SQL/MongoDB
</span>
<span className="skill-badge px-4 py-2 bg-blue-100 dark:bg-blue-900 to-green-100 dark:text-green-200 rounded-full text-sm font-medium border border-green-200 dark:border-green-700">
Git & GitHub
</span>

</div>
</div>

{/* Education Section */}
<div className="mb-8">
<h2 className="text-2xl font-semibold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-4">
Education
</h2>
<div className="space-y-4">
<div className="education-card p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border-l-4 border-blue-500">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">Bachelor of Technology in Computer Science</h3>
<p className="text-gray-600 dark:text-gray-300">University College of Engineering, Kariyavattom • 2023 - 2027</p>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">CGPA: 8.5/10</p>
</div>
</div>
</div>

{/* Projects Section */}
<div className="mb-8">
<h2 className="text-2xl font-semibold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-4">
Projects
</h2>
<div className="space-y-4">
<div className="project-card p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border-l-4 border-blue-500">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">E Commerce Website</h3>
<p className="text-gray-600 dark:text-gray-300 mt-2">A full-stack web application for online shopping built with React, Node.js, and MongoDB. Features include product catalog with filtering and search, user authentication, shopping cart functionality, secure payment integration, and order management. Implemented responsive design for seamless experience across devices and integrated admin panel for inventory management.</p>
<a href="#" className="text-blue-600 dark:text-blue-400 hover:underline text-sm mt-2 inline-block">View Project →</a>
</div>
<div className="project-card p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border-l-4 border-blue-500">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">Netflix Clone</h3>
<p className="text-gray-600 dark:text-gray-300 mt-2">A streaming platform replica built with React and Firebase, replicating Netflix's core features. Displays a dynamic movie/show catalog with genres, search functionality, and detailed information pages. Implemented user authentication, personalized watchlist, and responsive UI with smooth animations. Data fetched from TMDB API for real-time movie information..</p>
<a href="#" className="text-blue-600 dark:text-blue-400 hover:underline text-sm mt-2 inline-block">View Project →</a>
</div>
<div className="project-card p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border-l-4 border-blue-500">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">CRUD App</h3>
<p className="text-gray-600 dark:text-gray-300 mt-2">A full-stack application demonstrating Create, Read, Update, and Delete operations built with React, Express, and MongoDB. Features include form validation, real-time data updates, and a clean dashboard interface. Perfect for managing tasks, notes, or any data-driven application with a focus on backend functionality and database management.</p>
<a href="#" className="text-blue-600 dark:text-blue-400 hover:underline text-sm mt-2 inline-block">View Project →</a>
</div>
<div className="project-card p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border-l-4 border-blue-500">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white"> Todo List App</h3>
<p className="text-gray-600 dark:text-gray-300 mt-2">A productivity application built with React and local storage for managing daily tasks. Features include adding, editing, and deleting todos, marking tasks as complete, filtering by status, and data persistence. Includes a clean, intuitive UI with categories and priority levels for better task organization.</p>
<a href="#" className="text-blue-600 dark:text-blue-400 hover:underline text-sm mt-2 inline-block">View Project →</a>
</div>
</div>
</div>



{/* Contact Section */}
<div className="mb-8">
<h2 className="text-2xl font-semibold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-4">
Get in Touch
</h2>
<div className="space-y-3">
<div className="flex items-center space-x-3">
<span className="text-gray-600 dark:text-gray-400">📧</span>
<span className="text-gray-700 dark:text-gray-300">asadithya26@gmail.com</span>
</div>
<div className="flex items-center space-x-3">
<span className="text-gray-600 dark:text-gray-400">🔗</span>
<a target="_blank"href="https://www.linkedin.com/in/itzaadithyasuresh/" className="text-blue-600 dark:text-blue-400 hover:underline" >
LinkedIn Profile
</a>
</div>
<div className="flex items-center space-x-3">
<span className="text-gray-600 dark:text-gray-400">🐙</span>
<a target="_blank" href="https://github.com/xxdiii" className="text-blue-600 dark:text-blue-400 hover:underline">
GitHub Profile
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
23 changes: 23 additions & 0 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,29 @@ export default function Home() {
</div>
</Link>

<Link href="/aadithya-suresh" className="group">
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-200 dark:border-gray-700 hover:scale-105">
<div className="flex items-center space-x-4">
<div className="flex-shrink-0">
<div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-green-500 rounded-full flex items-center justify-center text-white font-semibold text-lg">
A
</div>
</div>
<div className="flex-1">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
Aadithya Suresh
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400">
Computer Science Student
</p>
<p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
Age: 19 • Third Year
</p>
</div>
</div>
</div>
</Link>

</div>
</main>
</div>
Expand Down