mirror of
https://github.com/harivansh-afk/Resume-website.git
synced 2026-04-15 07:04:48 +00:00
first commit
This commit is contained in:
commit
224b56efc0
17 changed files with 3239 additions and 0 deletions
58
.gitignore
vendored
Normal file
58
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
# Dependencies
|
||||||
|
node_modules/
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# Testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# Production
|
||||||
|
/build
|
||||||
|
/dist
|
||||||
|
|
||||||
|
# Environment files
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
# Debug logs
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# IDE and Editor files
|
||||||
|
.idea/
|
||||||
|
.vscode/
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
.DS_Store
|
||||||
|
*.sublime-workspace
|
||||||
|
*.sublime-project
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# TypeScript cache
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# Next.js
|
||||||
|
.next/
|
||||||
|
out/
|
||||||
|
|
||||||
|
# Misc
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
13
index.html
Normal file
13
index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Harivansh Rathi - Resume</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
2598
package-lock.json
generated
Normal file
2598
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
27
package.json
Normal file
27
package.json
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"name": "modern-resume",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-icons": "^4.11.0",
|
||||||
|
"framer-motion": "^10.16.4",
|
||||||
|
"react-intersection-observer": "^9.5.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.2.15",
|
||||||
|
"@types/react-dom": "^18.2.7",
|
||||||
|
"@vitejs/plugin-react": "^4.0.3",
|
||||||
|
"autoprefixer": "^10.4.16",
|
||||||
|
"postcss": "^8.4.31",
|
||||||
|
"tailwindcss": "^3.3.3",
|
||||||
|
"vite": "^4.4.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
BIN
public/img/profile.jpg
Normal file
BIN
public/img/profile.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
24
src/App.jsx
Normal file
24
src/App.jsx
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import React from 'react';
|
||||||
|
import Navbar from './components/Navbar';
|
||||||
|
import About from './components/About';
|
||||||
|
import Experience from './components/Experience';
|
||||||
|
import Education from './components/Education';
|
||||||
|
import Skills from './components/Skills';
|
||||||
|
import Projects from './components/Projects';
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<div className="bg-gray-50">
|
||||||
|
<Navbar />
|
||||||
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<About />
|
||||||
|
<Experience />
|
||||||
|
<Education />
|
||||||
|
<Skills />
|
||||||
|
<Projects />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
103
src/components/About.jsx
Normal file
103
src/components/About.jsx
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { FaLinkedin, FaGithub } from 'react-icons/fa';
|
||||||
|
|
||||||
|
const About = () => {
|
||||||
|
return (
|
||||||
|
<motion.section
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
id="about"
|
||||||
|
className="min-h-screen pt-20 flex items-center bg-gradient-to-b from-white to-gray-50"
|
||||||
|
>
|
||||||
|
<div className="max-w-4xl mx-auto text-center px-4">
|
||||||
|
<div className="mb-8">
|
||||||
|
<motion.div
|
||||||
|
initial={{ scale: 0 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className="relative w-48 h-48 mx-auto mb-6"
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 bg-blue-600 rounded-full opacity-10 blur-lg transform scale-110"></div>
|
||||||
|
<img
|
||||||
|
src="/img/profile.jpg"
|
||||||
|
alt="Harivansh Rathi"
|
||||||
|
className="w-full h-full rounded-full object-cover shadow-xl ring-4 ring-blue-600 ring-opacity-50"
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
>
|
||||||
|
<h1 className="text-5xl font-bold mb-4">
|
||||||
|
Harivansh <span className="text-blue-600">Rathi</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-gray-600 font-medium">Software Developer & ML Enthusiast</p>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<motion.p
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ delay: 0.3 }}
|
||||||
|
className="text-lg text-gray-700 mb-8 leading-relaxed max-w-2xl mx-auto"
|
||||||
|
>
|
||||||
|
I'm a software developer with expertise in full-stack web development
|
||||||
|
and a strong interest in machine learning. I enjoy working with both front-end and
|
||||||
|
back-end technologies to build complete solutions.
|
||||||
|
</motion.p>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ delay: 0.4 }}
|
||||||
|
className="mb-8 bg-white p-6 rounded-xl shadow-lg"
|
||||||
|
>
|
||||||
|
<h2 className="text-xl font-semibold mb-4 text-gray-800">Contact me</h2>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<a
|
||||||
|
href="mailto:rathiharivansh@gmail.com"
|
||||||
|
className="block text-blue-600 hover:text-blue-700 transition-colors"
|
||||||
|
>
|
||||||
|
rathiharivansh@gmail.com
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="mailto:zng2gc@virginia.edu"
|
||||||
|
className="block text-blue-600 hover:text-blue-700 transition-colors"
|
||||||
|
>
|
||||||
|
zng2gc@virginia.edu
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ delay: 0.5 }}
|
||||||
|
className="flex justify-center space-x-6"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="https://www.linkedin.com/in/harivansh-rathi"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-4xl text-gray-600 hover:text-blue-600 transition-colors transform hover:scale-110"
|
||||||
|
>
|
||||||
|
<FaLinkedin />
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://github.com/harivansh-afk"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-4xl text-gray-600 hover:text-gray-800 transition-colors transform hover:scale-110"
|
||||||
|
>
|
||||||
|
<FaGithub />
|
||||||
|
</a>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</motion.section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default About;
|
||||||
50
src/components/Education.jsx
Normal file
50
src/components/Education.jsx
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { useInView } from 'react-intersection-observer';
|
||||||
|
|
||||||
|
const Education = () => {
|
||||||
|
const [ref, inView] = useInView({
|
||||||
|
triggerOnce: true,
|
||||||
|
threshold: 0.1,
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section id="education" className="py-20">
|
||||||
|
<motion.h2
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
className="text-3xl font-bold mb-10 text-center"
|
||||||
|
>
|
||||||
|
Education
|
||||||
|
</motion.h2>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
ref={ref}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className="max-w-3xl mx-auto bg-white rounded-lg shadow-lg p-6"
|
||||||
|
>
|
||||||
|
<h3 className="text-xl font-bold text-blue-600">
|
||||||
|
University of Virginia, Charlottesville, VA
|
||||||
|
</h3>
|
||||||
|
<div className="text-lg font-semibold mb-2">
|
||||||
|
Bachelor of Arts, Computer Science
|
||||||
|
</div>
|
||||||
|
<div className="text-gray-600 mb-4">Expected May 2026</div>
|
||||||
|
<div className="mb-2">
|
||||||
|
<span className="font-semibold">GPA:</span> 3.7/4.0
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="font-semibold">Relevant Coursework:</span>
|
||||||
|
<p className="text-gray-700">
|
||||||
|
Data structures and algorithms, Computer systems and organization,
|
||||||
|
Software development essentials
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Education;
|
||||||
83
src/components/Experience.jsx
Normal file
83
src/components/Experience.jsx
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { useInView } from 'react-intersection-observer';
|
||||||
|
|
||||||
|
const ExperienceItem = ({ title, company, date, description }) => {
|
||||||
|
const [ref, inView] = useInView({
|
||||||
|
triggerOnce: true,
|
||||||
|
threshold: 0.1,
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
ref={ref}
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: -20 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className="mb-8 border-l-4 border-blue-600 pl-4"
|
||||||
|
>
|
||||||
|
<h3 className="text-xl font-bold">{title}</h3>
|
||||||
|
<div className="text-lg text-blue-600 mb-2">{company}</div>
|
||||||
|
<div className="text-gray-600 mb-2">{date}</div>
|
||||||
|
<ul className="list-disc list-inside text-gray-700">
|
||||||
|
{description.map((item, index) => (
|
||||||
|
<li key={index}>{item}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Experience = () => {
|
||||||
|
const experiences = [
|
||||||
|
{
|
||||||
|
title: "Front End Development Intern",
|
||||||
|
company: "UNIKOVE TECHNOLOGIES",
|
||||||
|
date: "Mar 2022 - Apr 2022",
|
||||||
|
description: [
|
||||||
|
"Utilized JavaScript and React.js to refine UX design elements, ensuring seamless functionality and user-centric interfaces",
|
||||||
|
"Collaborated with the design team to conceptualize and implement new web interfaces, improving user experience",
|
||||||
|
"Optimized front-end code by reducing JavaScript file sizes by 20%, improving website load time"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Backend Development Intern",
|
||||||
|
company: "Moglix",
|
||||||
|
date: "May 2023 - Jul 2023",
|
||||||
|
description: [
|
||||||
|
"Developed Python algorithm to optimize routes for transportation of materials, increasing time and supply chain efficiency by 20%",
|
||||||
|
"Developed ETL pipelines to streamline lead data processing, enabling faster outreach",
|
||||||
|
"Automated data extraction and transformation using various libraries in Python, reducing manual workload"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Mechanical Engineering Intern",
|
||||||
|
company: "SAN AUTO",
|
||||||
|
date: "Dec 2021 - Jan 2022",
|
||||||
|
description: [
|
||||||
|
"Learned 3D modeling, operating AutoCAD, and managed small projects with professionals in the field",
|
||||||
|
"Assisted head engineer with analyzing and improving manufacturing processes for aircraft components",
|
||||||
|
"Acquired skills in operating and maintaining CNC machines to ensure precision in manufacturing"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section id="experience" className="py-20">
|
||||||
|
<motion.h2
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
className="text-3xl font-bold mb-10 text-center"
|
||||||
|
>
|
||||||
|
Experience
|
||||||
|
</motion.h2>
|
||||||
|
<div className="max-w-3xl mx-auto">
|
||||||
|
{experiences.map((exp, index) => (
|
||||||
|
<ExperienceItem key={index} {...exp} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Experience;
|
||||||
73
src/components/Navbar.jsx
Normal file
73
src/components/Navbar.jsx
Normal file
|
|
@ -0,0 +1,73 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
|
||||||
|
const Navbar = () => {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
|
||||||
|
const navItems = ['About', 'Experience', 'Education', 'Skills', 'Projects'];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav className="bg-blue-600 fixed w-full z-50">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="flex items-center justify-between h-16">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className="flex-shrink-0 text-white font-bold text-xl"
|
||||||
|
>
|
||||||
|
HR
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="hidden md:block">
|
||||||
|
<div className="ml-10 flex items-baseline space-x-4">
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<a
|
||||||
|
key={item}
|
||||||
|
href={`#${item.toLowerCase()}`}
|
||||||
|
className="text-white hover:bg-blue-500 px-3 py-2 rounded-md text-sm font-medium"
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:hidden">
|
||||||
|
<button
|
||||||
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
|
className="text-white hover:bg-blue-500 p-2 rounded-md"
|
||||||
|
>
|
||||||
|
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
{isOpen ? (
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||||
|
) : (
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||||
|
)}
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isOpen && (
|
||||||
|
<div className="md:hidden">
|
||||||
|
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<a
|
||||||
|
key={item}
|
||||||
|
href={`#${item.toLowerCase()}`}
|
||||||
|
className="text-white hover:bg-blue-500 block px-3 py-2 rounded-md text-base font-medium"
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Navbar;
|
||||||
97
src/components/Projects.jsx
Normal file
97
src/components/Projects.jsx
Normal file
|
|
@ -0,0 +1,97 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { useInView } from 'react-intersection-observer';
|
||||||
|
import { FaGithub, FaExternalLinkAlt } from 'react-icons/fa';
|
||||||
|
|
||||||
|
const ProjectCard = ({ title, description, github, demo }) => {
|
||||||
|
const [ref, inView] = useInView({
|
||||||
|
triggerOnce: true,
|
||||||
|
threshold: 0.1,
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
ref={ref}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className="bg-white rounded-lg shadow-lg p-6 mb-6"
|
||||||
|
>
|
||||||
|
<h3 className="text-xl font-bold mb-3">{title}</h3>
|
||||||
|
<ul className="list-disc list-inside mb-4 text-gray-700">
|
||||||
|
{description.map((item, index) => (
|
||||||
|
<li key={index}>{item}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<div className="flex space-x-4">
|
||||||
|
{github && (
|
||||||
|
<a
|
||||||
|
href={github}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center text-gray-600 hover:text-blue-600"
|
||||||
|
>
|
||||||
|
<FaGithub className="mr-2" />
|
||||||
|
GitHub
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
{demo && (
|
||||||
|
<a
|
||||||
|
href={demo}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center text-gray-600 hover:text-blue-600"
|
||||||
|
>
|
||||||
|
<FaExternalLinkAlt className="mr-2" />
|
||||||
|
View Project
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Projects = () => {
|
||||||
|
const projects = [
|
||||||
|
{
|
||||||
|
title: "Efficiency of ML Algorithms in Financial Markets",
|
||||||
|
description: [
|
||||||
|
"Co-authored a research paper on cryptocurrency market predictability with a PHD student at CMU",
|
||||||
|
"Created dynamic data visualizations with Matplotlib to compare model performance and analyze trends effectively",
|
||||||
|
"Built a LSTM machine learning model using sk-learn for predicting cryptocurrency trends with up to 65% accuracy"
|
||||||
|
],
|
||||||
|
github: "https://github.com/harivansh-afk/CryptoCurrencyPredictionLSTM",
|
||||||
|
demo: "https://docs.google.com/document/d/1i0IZgHYEERKVdRMBtCdK6jJGRoEoZUY7T43fuGKEDm8/edit?usp=sharing"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Habit Tracker",
|
||||||
|
description: [
|
||||||
|
"Built and deployed a full-stack habit tracker web app using React.js and TypeScript, enabling efficient habit tracking",
|
||||||
|
"Designed reusable components and state management, enhancing scalability and maintainability",
|
||||||
|
"Optimized front-end performance with TypeScript and Vite, reducing build times and runtime errors"
|
||||||
|
],
|
||||||
|
github: "#", // Replace with actual GitHub link
|
||||||
|
demo: "#" // Replace with actual demo link
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section id="projects" className="py-20">
|
||||||
|
<motion.h2
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
className="text-3xl font-bold mb-10 text-center"
|
||||||
|
>
|
||||||
|
Projects and Research Work
|
||||||
|
</motion.h2>
|
||||||
|
|
||||||
|
<div className="max-w-3xl mx-auto">
|
||||||
|
{projects.map((project, index) => (
|
||||||
|
<ProjectCard key={index} {...project} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Projects;
|
||||||
69
src/components/Skills.jsx
Normal file
69
src/components/Skills.jsx
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { useInView } from 'react-intersection-observer';
|
||||||
|
|
||||||
|
const SkillCategory = ({ title, skills }) => {
|
||||||
|
const [ref, inView] = useInView({
|
||||||
|
triggerOnce: true,
|
||||||
|
threshold: 0.1,
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
ref={ref}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className="mb-6"
|
||||||
|
>
|
||||||
|
<h3 className="text-xl font-bold mb-3 text-blue-600">{title}</h3>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{skills.map((skill, index) => (
|
||||||
|
<span
|
||||||
|
key={index}
|
||||||
|
className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm"
|
||||||
|
>
|
||||||
|
{skill}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Skills = () => {
|
||||||
|
const skillCategories = [
|
||||||
|
{
|
||||||
|
title: "Programming Languages",
|
||||||
|
skills: ["Python", "Java", "JavaScript", "TypeScript","C/C++", "HTML", "CSS/Tailwind"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Frameworks",
|
||||||
|
skills: ["React.js", "Node.js","Express.js", "Vite", "Next.js"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Tools & Databases",
|
||||||
|
skills: ["Git/Github", "SQL", "MongoDB"]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section id="skills" className="py-20">
|
||||||
|
<motion.h2
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
className="text-3xl font-bold mb-10 text-center"
|
||||||
|
>
|
||||||
|
Technical Skills
|
||||||
|
</motion.h2>
|
||||||
|
|
||||||
|
<div className="max-w-3xl mx-auto bg-white rounded-lg shadow-lg p-6">
|
||||||
|
{skillCategories.map((category, index) => (
|
||||||
|
<SkillCategory key={index} {...category} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Skills;
|
||||||
11
src/index.css
Normal file
11
src/index.css
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
@apply bg-gray-50;
|
||||||
|
}
|
||||||
10
src/main.jsx
Normal file
10
src/main.jsx
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom/client'
|
||||||
|
import App from './App.jsx'
|
||||||
|
import './index.css'
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>,
|
||||||
|
)
|
||||||
11
tailwind.config.js
Normal file
11
tailwind.config.js
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./src/**/*.{js,ts,jsx,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
6
vite.config.js
Normal file
6
vite.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
Loading…
Add table
Add a link
Reference in a new issue