Skip to content

Commit

Permalink
work experience
Browse files Browse the repository at this point in the history
  • Loading branch information
@VadhwanaParth15
VadhwanaParth15 committed May 23, 2024
1 parent 2c57fb4 commit 5d7ac78
Show file tree
Hide file tree
Showing 10 changed files with 335 additions and 167 deletions.
50 changes: 43 additions & 7 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,13 @@
"@testing-library/user-event": "^13.5.0",
"aos": "^2.3.4",
"emailjs-com": "^3.2.0",
"framer-motion": "^10.16.3",
"framer-motion": "^10.18.0",
"react": "^18.2.0",
"react-bootstrap": "^2.7.2",
"react-dom": "^18.2.0",
"react-icons": "^4.7.1",
"react-scripts": "^5.0.1",
"react-vertical-timeline-component": "^3.6.0",
"web-vitals": "^2.1.4"
},
"scripts": {
Expand Down
Binary file added public/company/Easeteq.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/company/easeteq1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { lazy, Suspense } from "react";
import Loader from "./components/loader/Loader";
const Skill= lazy(() => import("./components/skill/Skill"));
const Header = lazy(() => import("./components/header/Header"));
const Nav = lazy(() => import("./components/nav/Nav"));
const About = lazy(() => import("./components/about/About"));
Expand All @@ -15,6 +16,7 @@ const App = () => {
<Nav />
<About />
<Experience />
<Skill />
<Portfolio/>
<Contact />
<Footer/>
Expand Down
161 changes: 62 additions & 99 deletions src/components/experience/Experience.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,104 +1,67 @@
import React from 'react'
import './experience.css'
import {BsFillPatchCheckFill} from 'react-icons/bs'
const experience = () => {
return (
<section id='experience'>
<h5 data-aos="zoom-in-up" data-aos-duration="1300">What Skills I Have</h5>
<h2 data-aos="zoom-in-up" data-aos-duration="1300">My Experience</h2>
import React from 'react';
import {
VerticalTimeline,
VerticalTimelineElement,
} from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';
import './experience.css'; // Make sure to create this CSS file

<div className="container experience__container">
<div className="experience__frontend" data-aos="zoom-in-up" data-aos-duration="1300">
<h3>Frontend Development</h3>
<div className="experience__content">
<article className="experience__details">
<BsFillPatchCheckFill className="experience__details-icon" />
<div>
<h4>HTML</h4>
<small className="text-light">Experienced</small>
</div>
</article>
<article className="experience__details">
<BsFillPatchCheckFill className="experience__details-icon"/>
<div>
<h4>CSS</h4>
<small className="text-light">Intermediate</small>
</div>
</article>
<article className="experience__details">
<BsFillPatchCheckFill className="experience__details-icon"/>
<div>
<h4>JavaScript</h4>
<small className="text-light">Intermediate</small>
</div>
</article>
<article className="experience__details">
<BsFillPatchCheckFill className="experience__details-icon"/>
<div>
<h4>Bootstrap</h4>
<small className="text-light">Basic</small>
</div>
</article>
<article className="experience__details">
<BsFillPatchCheckFill className="experience__details-icon"/>
<div>
<h4>React</h4>
<small className="text-light">Intermediate</small>
</div>
</article>
</div>
</div>
<div className="experience__backend" data-aos="zoom-in-up" data-aos-duration="1300">
<h3>Backend Development</h3>
<div className="experience__content">
<article className="experience__details">
<BsFillPatchCheckFill className="experience__details-icon"/>
<div>
<h4>PHP</h4>
<small className="text-light">Basic</small>
</div>
</article>
<article className="experience__details">
<BsFillPatchCheckFill className="experience__details-icon"/>
<div>
<h4>MongoDB</h4>
<small className="text-light">Intermediate</small>
</div>
</article>
<article className="experience__details">
<BsFillPatchCheckFill className="experience__details-icon"/>
<div>
<h4>MySQL</h4>
<small className="text-light">Intermediate</small>
</div>
</article>
<article className="experience__details">
<BsFillPatchCheckFill className="experience__details-icon"/>
<div>
<h4>Python</h4>
<small className="text-light">Basic</small>
</div>
</article>
<article className="experience__details">
<BsFillPatchCheckFill className="experience__details-icon"/>
<div>
<h4>JAVA</h4>
<small className="text-light">Intermediate</small>
</div>
</article>
<article className="experience__details">
<BsFillPatchCheckFill className="experience__details-icon"/>
<div>
<h4>NodeJS</h4>
<small className="text-light">Intermediate</small>
</div>
</article>
</div>
</div>
const experiences = [
{
date: 'Jan 2024 - April 2024',
title: 'Software Developer',
company_name: 'Easeteq Software Solutions',
icon: 'company/easeteq1.png',
iconBg: '#1f242d',
}
];

const ExperienceCard = ({ experience }) => (
<VerticalTimelineElement
contentStyle={{
background: 'transparent',
color: '#292929',
boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
borderRadius: '10px',
border: '1px solid #fff',
}}
contentArrowStyle={{ borderRight: '7px solid #fff' }}
date={<h3 className="text-dim text-18px font-bold" style={{color:"#fff"}}>{experience.date}</h3>}
iconStyle={{ background: experience.iconBg }}
icon={
<div className="flex justify-center items-center w-full h-full">
<img
src={experience.icon}
alt={experience.company_name}
className="w-60% h-60% object-contain"
/>
</div>
}>
<div>
<h3 className="text-jetLight text-24px font-bold">{experience.title}</h3>
<p className="text-taupe text-22px font-semibold" style={{ margin: 0 }}>
{experience.company_name}
</p>
</div>
</VerticalTimelineElement>
);

const Experience = () => (
<div>
<section id='experience'>
<h5 data-aos="zoom-in-up" data-aos-duration="1200">What I've done so far</h5>
<h2 data-aos="zoom-in-up" data-aos-duration="1300">Work Experience</h2>

<div className="timeline">
<VerticalTimeline>
{experiences.map((experience, index) => (
<ExperienceCard key={index} experience={experience} />
))}
</VerticalTimeline>
</div>

</section>
)
}
</div>
);

export default experience
export default Experience;
Loading

0 comments on commit 5d7ac78

Please sign in to comment.