Skip to content

Commit

Permalink
[pre-commit.ci] auto fixes from pre-commit.com hooks
Browse files Browse the repository at this point in the history 
for more information, see https://pre-commit.ci
  • Loading branch information
@pre-commit-ci
pre-commit-ci[bot] committed Oct 2, 2023
1 parent 1b00435 commit 382ec27
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 71 deletions.
86 changes: 50 additions & 36 deletions src/containers/achievement/Achievement.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,29 @@ import AchievementCard from "../../components/achievementCard/AchievementCard";
import {achievementSection} from "../../portfolio";
import {Fade} from "react-reveal";
import StyleContext from "../../contexts/StyleContext";
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';
import {Carousel} from "react-responsive-carousel";
import "react-responsive-carousel/lib/styles/carousel.min.css";
export default function Achievement() {
const {isDark} = useContext(StyleContext);
const [currentIndex, setCurrentIndex] = useState();
function handleChange(index){
const [currentIndex, setCurrentIndex] = useState();
function handleChange(index) {
setCurrentIndex(index);
}
if (!achievementSection.display) {
return null;
}
const section = Object.values(achievementSection);
const renderSlide = section.map((achievementCards)=>{
return(
<div key={achievementCards.image}>
<p className="titles">{achievementCards.title},{achievementCards.subtitle}</p>
<img src={achievementCards.image} alt={achievementCards.imageAlt}/>
<p className="footer">{achievementCards.footerLink}</p>
</div>
)
})
const section = Object.values(achievementSection);
const renderSlide = section.map(achievementCards => {
return (
<div key={achievementCards.image}>
<p className="titles">
{achievementCards.title},{achievementCards.subtitle}
</p>
<img src={achievementCards.image} alt={achievementCards.imageAlt} />
<p className="footer">{achievementCards.footerLink}</p>
</div>
);
});
return (
<Fade bottom duration={1000} distance="20px">
<div className="main" id="achievements">
Expand All @@ -50,28 +52,40 @@ return(
{achievementSection.subtitle}
</p>
</div>
<Carousel showArrows={true} showThumbs={false} showIndicators={true} showStatus={false} infiniteLoop={true} onChange={handleChange} selectedItem={achievementSection[currentIndex]} className="custom-carousel"
style={{backgroundColor: '#CCCCFF', padding: '20px',
borderRadius: '20px',}}>
<div className="achievement-cards-div">
{achievementSection.achievementsCards.map((card, i) => {
return (
<AchievementCard
key={i}
isDark={isDark}
cardInfo={{
title: card.title,
description: card.subtitle,
image: card.image,
imageAlt: card.imageAlt,
footer: card.footerLink
}}
/>
);
})}
</div>
{renderSlide}
</Carousel>
<Carousel
showArrows={true}
showThumbs={false}
showIndicators={true}
showStatus={false}
infiniteLoop={true}
onChange={handleChange}
selectedItem={achievementSection[currentIndex]}
className="custom-carousel"
style={{
backgroundColor: "#CCCCFF",
padding: "20px",
borderRadius: "20px"
}}
>
<div className="achievement-cards-div">
{achievementSection.achievementsCards.map((card, i) => {
return (
<AchievementCard
key={i}
isDark={isDark}
cardInfo={{
title: card.title,
description: card.subtitle,
image: card.image,
imageAlt: card.imageAlt,
footer: card.footerLink
}}
/>
);
})}
</div>
{renderSlide}
</Carousel>
</div>
</div>
</Fade>
Expand Down
86 changes: 51 additions & 35 deletions src/containers/workExperience/WorkExperience.js
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,30 @@
import React, {useContext} from "react";
import { useState } from "react";
import {useState} from "react";
import "./WorkExperience.scss";
import ExperienceCard from "../../components/experienceCard/ExperienceCard";
import {workExperiences} from "../../portfolio";
import {Fade} from "react-reveal";
import StyleContext from "../../contexts/StyleContext";
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';
import {Carousel} from "react-responsive-carousel";
import "react-responsive-carousel/lib/styles/carousel.min.css";

export default function WorkExperience() {
const {isDark} = useContext(StyleContext);
const [currentIndex, setCurrentIndex] = useState();
function handleChange(index){
const [currentIndex, setCurrentIndex] = useState();
function handleChange(index) {
setCurrentIndex(index);
}
const experience = Object.values(workExperiences);
const renderSlides = experience.map((experience)=>{
return(
<div key={experience.company}>
<p className="roles">{experience.roles},{experience.dates},{experience.desc},{experience.descBullets}</p>
<img src={experience.companylogo} alt={experience.companylogo}/>
</div>
);
const renderSlides = experience.map(experience => {
return (
<div key={experience.company}>
<p className="roles">
{experience.roles},{experience.dates},{experience.desc},
{experience.descBullets}
</p>
<img src={experience.companylogo} alt={experience.companylogo} />
</div>
);
});
if (workExperiences.display) {
return (
Expand All @@ -30,29 +33,42 @@ export default function WorkExperience() {
<div className="experience-container" id="workExperience">
<div>
<h1 className="experience-heading">Experiences</h1>
<Carousel showArrows={true} showThumbs={false} showIndicators={true} showStatus={false} infiniteLoop={true} onChange={handleChange} selectedItem={workExperiences[currentIndex]} className="custom-carousel" style={{backgroundColor: '#CCCCFF', padding: '20px',
borderRadius: '20px',}} emulateTouch={true}>

<div className="experience-cards-div">
{workExperiences.experience.map((card, i) => {
return (
<ExperienceCard
key={i}
isDark={isDark}
cardInfo={{
company: card.company,
desc: card.desc,
date: card.date,
companylogo: card.companylogo,
role: card.role,
descBullets: card.descBullets
}}
/>
);
})}
</div>
{renderSlides}
</Carousel>
<Carousel
showArrows={true}
showThumbs={false}
showIndicators={true}
showStatus={false}
infiniteLoop={true}
onChange={handleChange}
selectedItem={workExperiences[currentIndex]}
className="custom-carousel"
style={{
backgroundColor: "#CCCCFF",
padding: "20px",
borderRadius: "20px"
}}
emulateTouch={true}
>
<div className="experience-cards-div">
{workExperiences.experience.map((card, i) => {
return (
<ExperienceCard
key={i}
isDark={isDark}
cardInfo={{
company: card.company,
desc: card.desc,
date: card.date,
companylogo: card.companylogo,
role: card.role,
descBullets: card.descBullets
}}
/>
);
})}
</div>
{renderSlides}
</Carousel>
</div>
</div>
</Fade>
Expand Down

0 comments on commit 382ec27

Please sign in to comment.