Skip to content

Akash Krishnan #6

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
akashkrishnan2004 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Akash Krishnan #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
39 changes: 39 additions & 0 deletions src/app/Akash_Krishnan/Projects/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import Navbar from "@/components/Navbar";
import { myProjects } from "../dataset";

export default function MyProjects() {
return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
<Navbar />
<div className="container mx-auto px-4 py-12">
<div className="max-w-4xl mx-auto">
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
<div className="bg-gradient-to-r from-red-600 to-blue-700 px-8 py-12">
<div className="flex items-center space-x-6">
<div className="flex-shrink-0"></div>
<div className="flex-1">
<h1 className="text-3xl md:text-4xl font-bold text-white mb-2 align-middle">
My Projects
</h1>
</div>
</div>
</div>
{myProjects.map((project) => (
<div className="p-8" key={project.id}>
<div className="mb-8">
<h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4 hover:text-blue-500">
{project.id + 1}.{project.title}
</h2>
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
{project.description}
</p>
</div>
<div className="mb-8"></div>
</div>
))}
</div>
</div>
</div>
</div>
);
}
124 changes: 124 additions & 0 deletions src/app/Akash_Krishnan/dataset.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
export const myData = [
{
id: 0,
first_letter: "A",
name: "Akash Krishnan C",
study: "Information Technology Student",
age: 21,
year: "Second Year",
},
];

export const skillsInfo = [
{
id: 0,
title: "HTML",
},
{
id: 1,
title: "CSS",
},
{
id: 2,
title: "Java Script",
},
{
id: 3,
title: "React JS",
},
{
id: 4,
title: "Node Js",
},
{
id: 5,
title: "Express",
},
{
id: 6,
title: "Tailwind",
},
{
id: 7,
title: "Mongo DB",
},
{
id: 8,
title: "Git Hub",
},
];

export const aboutMe = [
{
id: 0,
details:
"Hi, I'm a second-year B.Tech student in Information Technology. I'm a passionate Full Stack Developer with a strong interest in the MERN stack (MongoDB, Express.js, React, and Node.js). I enjoy building responsive and user-friendly web applications that solve real-world problems.I love learning new technologies, improving my coding skills, and exploring creative ways to make websites more interactive and efficient.",
},
];

export const connectWithMe = [
{
id: 0,
email_Id: "akashkrishnan806@gmail.com",
linkedin_Id: "https://linkedin.com/in/akash-krishnan2004",
github_Id: "https://github.com/akashkrishnan2004",
},
];

export const myProjects = [
{
id: 0,
title: "E-Commerce App",
description:
"A full-featured MERN stack eCommerce application for selling mobile phones. Includes user registration with OTP verification, secure login, product browsing, cart management, profile editing, admin dashboard for product control, and review system. Built with React, Node.js, Express, and MongoDB.",
tools: [
{
tool: "React",
tool: "Node JS",
tool: "Express",
tool: "Mongo DB"
},
],
},
{
id: 1,
title: "Nation View",
description:
"A responsive React application that allows users to explore countries from around the world. Users can search for countries by name, filter by region, and view detailed information about each country. The app uses a local JSON file as the data source and React Router for navigation between country lists and country detail pages.",
tools: [
{
tool: "React",
tool: "Node JS",
tool: "Express",
},
],
},
{
id: 2,
title: "Online Exam Portal",
description:
"Developed a comprehensive Online Exam Portal for streamlined exam creation and management. The portal allows user registration as Students or Instructors with secure authentication. Instructors can create dynamic exams with multiple questions, each providing four options and correct answer selection. Students can seamlessly attempt exams, with their results stored for further analysis. Built using the MERN stack, the application delivers responsive user interfaces, robust backend logic, and efficient database operations, ensuring scalability and a user-friendly experience.",
tools: [
{
tool: "React",
tool: "Node JS",
tool: "Express",
tool: "Mongo DB",
},
],
},
{
id: 3,
title: "Weather App",
description:
"A responsive web application built with the MERN stack that shows real-time weather and 5-day forecasts by city. Leveraged the OpenWeatherMap API to display temperature, humidity, wind speed, and local time. Implemented a secure Express.js backend with MongoDB to save recent searches, and used environment variables to protect API keys. Features a clean, modern UI with smooth interactions for an intuitive user experience.",
tools: [
{
tool: "React",
tool: "Node JS",
tool: "Express",
tool: "Mongo DB"
},
],
},
];
124 changes: 124 additions & 0 deletions src/app/Akash_Krishnan/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
import Navbar from "@/components/Navbar";

import { connectWithMe, skillsInfo, myData, aboutMe } from "./dataset.js";
import Link from "next/link.js";

export default function YourNamePage() {
return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
<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 */}
{myData.map((details) => (
<div
className="bg-gradient-to-r from-red-600 to-blue-700 px-8 py-12"
key={details.id}
>
<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">
{details.first_letter}
</div>
</div>
<div className="flex-1">
<h1 className="text-3xl md:text-4xl font-bold text-white mb-2">
{details.name}
</h1>
<p className="text-xl text-blue-100 mb-2">
{details.study}
</p>
<p className="text-blue-200">
Age: {details.age} • {details.year}
</p>
</div>
</div>
</div>
))}
{/* Content */}
<div className="p-8">
{/* Bio Section */}
{aboutMe.map((about) => (
<div className="mb-8" key={about.id}>
<h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
About
</h2>
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
{about.details}
</p>
</div>
))}
{/* Skills Section */}
<div className="mb-8">
<h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
Skills & Interests
</h2>
<div className="flex flex-wrap gap-3">
{skillsInfo.map((skills) => (
<span
className="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full text-sm font-medium"
key={skills.id}
>
{skills.title}
</span>
))}
</div>
</div>
<div>
<Link href="/Akash_Krishnan/Projects">
<h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4 hover:text-blue-500">
View My Projects
</h2>
</Link>
</div>

{/* Contact Section */}
{connectWithMe.map((details) => (
<div className="mb-8" key={details.id}>
<h2 className="text-2xl font-semibold text-gray-900 dark:text-white 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">
{details.email_Id}
</span>
</div>
<div className="flex items-center space-x-3">
<span className="text-gray-600 dark:text-gray-400">
🔗
</span>
<a
href={details.linkedin_Id}
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
href={details.github_Id}
className="text-blue-600 dark:text-blue-400 hover:underline"
>
GitHub Profile
</a>
</div>
</div>
</div>
))}
</div>
</div>
</div>
{/* */}
</div>
</div>
);
}
30 changes: 28 additions & 2 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import Link from "next/link";
import Navbar from "@/components/Navbar";
import { myData } from "./Akash_Krishnan/dataset";

export default function Home() {
return (
Expand All @@ -11,13 +12,13 @@ export default function Home() {
Person Directory
</h1>
<p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
Click on any person&apos;s name below to view their detailed information and profile.
Click on any person&apos;s name below to view their detailed
information and profile.
</p>
</header>

<main className="max-w-4xl mx-auto">
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">

{/* David Brown Card */}
<Link href="/david-brown" 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">
Expand All @@ -42,6 +43,31 @@ export default function Home() {
</div>
</Link>

{/* My card */}
<Link href="/Akash_Krishnan" className="group">
{myData.map((details) => (
<div key={details.id} 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-500 to-purple-600 rounded-full flex items-center justify-center text-white font-semibold text-lg">
{details.first_letter}
</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">
{details.name}
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400">
{details.study}
</p>
<p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
Age: {details.age} • {details.year}
</p>
</div>
</div>
</div>
))}
</Link>
</div>
</main>
</div>
Expand Down