realstoman · Ibrahim25-ai · Sep 22, 2024 · Sep 22, 2024 · Sep 22, 2024 · Sep 22, 2024
diff --git a/Nouveau Document texte.txt b/Nouveau Document texte.txt
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,11 +15,13 @@
 		"react-router-dom": "^6.0.2",
 		"react-scripts": "4.0.3",
 		"react-scroll": "^1.8.4",
+		"react-vertical-timeline-component": "^3.6.0",
 		"styled-components": "^5.3.3",
-		"web-vitals": "^1.0.1"
+		"web-vitals": "^1.0.1",
+		"yarn": "^1.22.22"
 	},
 	"scripts": {
-		"start": "react-scripts --openssl-legacy-provider start",
+		"start": "react-scripts start",
 		"build": "yarn run react-scripts build",
 		"test": "react-scripts test",
 		"eject": "react-scripts eject",

diff --git a/public/files/CV_Ibrahim_BENLAKHAL.pdf b/public/files/CV_Ibrahim_BENLAKHAL.pdf
diff --git a/public/files/Stoman-Resume.pdf b/public/files/Stoman-Resume.pdf
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
+		<link rel="icon" href="%PUBLIC_URL%/logo.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="theme-color" content="#000000" />
 		<meta
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-		<title>Stoman</title>
+		<title>Ibrahim | Software Engineer</title>
 	</head>
 	<body>
 		<noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo.png b/public/logo.png
diff --git a/src/App.js b/src/App.js
@@ -6,6 +6,7 @@ import AppFooter from './components/shared/AppFooter';
 import AppHeader from './components/shared/AppHeader';
 import './css/App.css';
 import UseScrollToTop from './hooks/useScrollToTop';
+import { ThemeProvider } from './ThemeContext';
 
 const About = lazy(() => import('./pages/AboutMe'));
 const Contact = lazy(() => import('./pages/Contact.jsx'));
@@ -16,6 +17,7 @@ const ProjectSingle = lazy(() => import('./pages/ProjectSingle.jsx'));
 
 function App() {
 	return (
+		<ThemeProvider>
 		<AnimatePresence>
 			<div className=" bg-secondary-light dark:bg-primary-dark transition duration-300">
 				<Router>
@@ -25,10 +27,7 @@ function App() {
 						<Routes>
 							<Route path="/" element={<Home />} />
 							<Route path="projects" element={<Projects />} />
-							<Route
-								path="projects/single-project"
-								element={<ProjectSingle />}
-							/>
+							<Route path="/projects/:title" element={<ProjectSingle />} />
 
 							<Route path="about" element={<About />} />
 							<Route path="contact" element={<Contact />} />
@@ -39,6 +38,7 @@ function App() {
 				<UseScrollToTop />
 			</div>
 		</AnimatePresence>
+		</ThemeProvider>
 	);
 }
 

diff --git a/src/ThemeContext.js b/src/ThemeContext.js
@@ -0,0 +1,24 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+
+const ThemeContext = createContext();
+
+export const ThemeProvider = ({ children }) => {
+    const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
+
+    useEffect(() => {
+        const root = window.document.documentElement;
+        const activeTheme = theme === 'dark' ? 'light' : 'dark';
+
+        root.classList.remove(activeTheme);
+        root.classList.add(theme);
+        localStorage.setItem('theme', theme);
+    }, [theme]);
+
+    return (
+        <ThemeContext.Provider value={{ theme, setTheme }}>
+            {children}
+        </ThemeContext.Provider>
+    );
+};
+
+export const useTheme = () => useContext(ThemeContext);
diff --git a/src/__tests__/Banner.test.js b/src/__tests__/Banner.test.js
@@ -39,7 +39,7 @@ test('can download cv when clicked on download cv button', async () => {
 	// 	() => downloadLink
 	// );
 
-	// expect(downloadLink.download).toEqual('Stoman-Resume.pdf');
-	// expect(downloadLink.href).toEqual('/files/Stoman-Resume.pdf');
+	// expect(downloadLink.download).toEqual('CV_Ibrahim_BENLAKHAL.pdf');
+	// expect(downloadLink.href).toEqual('/files/CV_Ibrahim_BENLAKHAL.pdf');
 	// expect(downloadLink.click).toHaveBeenCalledTimes(1);
 });
diff --git a/src/components/about/AboutCounter.jsx b/src/components/about/AboutCounter.jsx
@@ -2,8 +2,8 @@ import { useCountUp } from 'react-countup';
 import CounterItem from './CounterItem';
 
 const AboutCounter = () => {
-	useCountUp({ ref: 'experienceCounter', end: 12, duration: 2 });
-	useCountUp({ ref: 'githubStarsCounter', end: 20, duration: 2 });
+	useCountUp({ ref: 'experienceCounter', end: 1, duration: 2 });
+	useCountUp({ ref: 'githubStarsCounter', end: 22, duration: 2 });
 	useCountUp({ ref: 'feedbackCounter', end: 92, duration: 2 });
 	useCountUp({ ref: 'projectsCounter', end: 77, duration: 2 });
 
@@ -19,7 +19,7 @@ const AboutCounter = () => {
 				<CounterItem
 					title="Stars on GitHub"
 					counter={<span id="githubStarsCounter" />}
-					measurement="k+"
+					measurement="+"
 				/>
 
 				<CounterItem

diff --git a/src/components/contact/ContactDetails.jsx b/src/components/contact/ContactDetails.jsx
@@ -3,17 +3,17 @@ import { FiPhone, FiMapPin, FiMail } from 'react-icons/fi';
 const contacts = [
 	{
 		id: 1,
-		name: 'Your Address, Your City, Your Country',
+		name: 'Sfax, Tunisia',
 		icon: <FiMapPin />,
 	},
 	{
 		id: 2,
-		name: 'email@domain.com',
+		name: 'benlakhallibrahim@gmail.com',
 		icon: <FiMail />,
 	},
 	{
 		id: 3,
-		name: '555 8888 888',
+		name: '+21651747806',
 		icon: <FiPhone />,
 	},
 ];

diff --git a/src/components/experiences/Exp.jsx b/src/components/experiences/Exp.jsx
@@ -0,0 +1,122 @@
+
+import {useTheme} from "../../ThemeContext";
+
+import {
+	VerticalTimeline,
+	VerticalTimelineElement,
+}  from "react-vertical-timeline-component";
+import { motion } from "framer-motion";
+
+import "react-vertical-timeline-component/style.min.css";
+
+import { styles } from "../styles";
+import { experiences } from "../../components/styles";
+import { SectionWrapper } from "../../hoc";
+
+
+
+
+const ExperienceCard = ({ experience }) => {
+	const {theme} = useTheme();
+	const backgroundColor = theme === 'dark' ? "#fff" : "#F5F5F5"; // Dark or light background
+	const textColor = theme === 'dark' ? "#fff" : "#000000"; // Text color based on theme
+	const arrowColor = theme === 'dark' ? "#fff" : "#F5F5F5";
+
+	return (
+		<VerticalTimelineElement
+			contentStyle={{
+				background: backgroundColor,
+				color: textColor,
+			}}
+			contentArrowStyle={{ borderRight: `7px solid ${arrowColor}` }}
+			date={experience.date}
+			iconStyle={{ background: 'rgb(33, 150, 243)', color: '#000000' , backgroundColor :'#000000' }}
+
+			icon={
+				<div className="flex justify-center items-center w-full h-full">
+					<img
+						src={experience.icon}
+						alt={experience.company_name}
+						className="w-[80%] h-[80%] object-contain"
+					/>
+				</div>
+			}
+		>
+			<div>
+					<h3 className=" text-ternary-dark  sm:text-l md:text-xl lg:text-1xl xl:text-2xl font-bold">{experience.title}</h3>
+				<p
+					className=" text-ternary-dark text-[16px] font-semibold"
+					style={{ margin: 0 }}
+				>
+					{experience.company_name}
+				</p>
+			</div>
+
+			<ul className=" text-ternary-dark mt-5 list-disc ml-5 space-y-2 ">
+				{experience.points.map((point, index) => (
+					<li
+						key={`experience-point-${index}`}
+						className=" text-[14px] pl-1 tracking-wider"
+					>
+						{point}
+					</li>
+				))}
+			</ul>
+		</VerticalTimelineElement>
+	);
+};
+
+const Experience = () => {
+	const {theme} = useTheme();
+	const color = theme === 'dark' ? "#fff" : "#000000";
+	return (
+		<motion.section
+			initial={{ opacity: 0 }}
+			animate={{ opacity: 1 }}
+			transition={{ ease: 'easeInOut', duration: 0.9, delay: 0.2 }}
+				className=" section sm:justify-between items-center sm:flex-row "
+		>
+
+
+			<motion.div className=" text-center sm:text-left leading-normal   text-custom-purple text-center sm:text-left text-ternary-dark dark:text-primary-light ">
+				<p className={`${styles.sectionSubText} text-center font-general-medium mt-4 text-lg md:text-lg lg:text-xl xl:text-2xl text-center  leading-normal text-gray-500`}>
+					What I have done so far
+				</p>
+				<h2 className={`${styles.sectionHeadText} text-heroExp text-lg md:text-lg lg:text-xl xl:text-2xl font-general-bold  text-center  leading-normal   text-ternary-dark dark:text-primary-light`}>
+					Education & Experience.
+				</h2>
+			</motion.div>
+
+			<div className="mt-20">
+
+				<motion.div
+					initial={{ opacity: 0, y: -180 }}
+					animate={{ opacity: 1, y: 0 }}
+					transition={{ ease: 'easeInOut', duration: 0.9, delay: 0.2 }}
+
+				>
+
+						<VerticalTimeline
+							key={theme} // Forces re-render on theme change
+							lineColor={color}
+
+						>
+							{experiences.map((experience, index) => (
+								<ExperienceCard
+									key={`experience-${index}`}
+									experience={experience}
+								/>
+							))}
+						</VerticalTimeline>
+
+
+
+
+				</motion.div>
+
+			</div>
+		</motion.section>
+	);
+};
+
+export default SectionWrapper(Experience, "work");
diff --git a/src/components/projects/ProjectGallery.jsx b/src/components/projects/ProjectGallery.jsx
@@ -1,12 +1,10 @@
-import { useContext } from 'react';
-import SingleProjectContext from '../../context/SingleProjectContext';
 
-const ProjectGallery = () => {
-	const { singleProjectData } = useContext(SingleProjectContext);
+
+const ProjectGallery = ({ project }) => {
 
 	return (
 		<div className="grid grid-cols-1 sm:grid-cols-3 sm:gap-10 mt-12">
-			{singleProjectData.ProjectImages.map((project) => {
+			{project.ProjectImages.map((project) => {
 				return (
 					<div className="mb-10 sm:mb-0" key={project.id}>
 						<img

diff --git a/src/components/projects/ProjectHeader.jsx b/src/components/projects/ProjectHeader.jsx
@@ -1,26 +1,24 @@
-import { useContext } from 'react';
-import { FiClock, FiTag } from 'react-icons/fi';
-import SingleProjectContext from '../../context/SingleProjectContext';
 
-const ProjectSingleHeader = () => {
-	const { singleProjectData } = useContext(SingleProjectContext);
+import { FiClock, FiTag } from 'react-icons/fi';
+const ProjectSingleHeader = ({ project }) => {
+
 
 	return (
 		<div>
 			<p className="font-general-medium text-left text-3xl sm:text-4xl font-bold text-primary-dark dark:text-primary-light mt-14 sm:mt-20 mb-7">
-				{singleProjectData.ProjectHeader.title}
+				{project.ProjectHeader.subTitle}
 			</p>
 			<div className="flex">
 				<div className="flex items-center mr-10">
 					<FiClock className="text-lg text-ternary-dark dark:text-ternary-light" />
 					<span className="font-general-regular ml-2 leading-none text-primary-dark dark:text-primary-light">
-						{singleProjectData.ProjectHeader.publishDate}
+						{project.ProjectHeader.publishDate}
 					</span>
 				</div>
 				<div className="flex items-center">
 					<FiTag className="text-lg text-ternary-dark dark:text-ternary-light" />
 					<span className="font-general-regular ml-2 leading-none text-primary-dark dark:text-primary-light">
-						{singleProjectData.ProjectHeader.tags}
+						{project.ProjectHeader.tags}
 					</span>
 				</div>
 			</div>