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