Ibrahim

package.json

@@ -15,6 +15,7 @@
 		"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"
 	},

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>
@@ -39,6 +41,7 @@ function App() {
 				<UseScrollToTop />
 			</div>
 		</AnimatePresence>
+		</ThemeProvider>
 	);
 }
 

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);

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";
+import { textVariant } from "../../utils/motion";
+
+
+
+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";
+	const textColor1 = theme === 'dark' ? "#000000" : "#000000"; // Text color based on theme
+	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=" sm:justify-between items-center sm:flex-row mt-12 md:mt-2"
+		>
+
+
+			<motion.div className="mt-20 md:text-xl lg:text-2xl xl:text-3xl text-center sm:text-left leading-normal  font-general-bold text-custom-purple text-center sm:text-left text-ternary-dark dark:text-primary-light ">
+				<p className={`${styles.sectionSubText} text-center`}>
+					What I have done so far
+				</p>
+				<h2 className={`${styles.sectionHeadText} text-center  mt-10 text-gray-500 dark:text-gray-200`}>
+					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");

src/components/projects/ProjectsGrid.jsx

@@ -3,6 +3,8 @@ import { FiSearch } from 'react-icons/fi';
 import ProjectSingle from './ProjectSingle';
 import { ProjectsContext } from '../../context/ProjectsContext';
 import ProjectsFilter from './ProjectsFilter';
+import {styles} from "../styles";
+import {motion} from "framer-motion";
 
 const ProjectsGrid = () => {
 	const {
@@ -17,12 +19,11 @@ const ProjectsGrid = () => {
 
 	return (
 		<section className="py-5 sm:py-10 mt-5 sm:mt-10">
-			<div className="text-center">
-				<p className="font-general-medium text-2xl sm:text-4xl mb-1 text-ternary-dark dark:text-ternary-light">
+			<motion.div className="mt-20 md:text-xl lg:text-2xl xl:text-3xl text-center sm:text-left leading-normal  font-general-bold text-custom-purple text-center sm:text-left text-ternary-dark dark:text-primary-light ">
+				<p className={`${styles.sectionSubText} text-center`}>
 					Projects portfolio
 				</p>
-			</div>
-
+			</motion.div>
 			<div className="mt-10 sm:mt-16">
 				<h3
 					className="font-general-regular 

src/components/shared/AppBanner.jsx

@@ -1,11 +1,17 @@
-import useThemeSwitcher from '../../hooks/useThemeSwitcher';
 import { FiArrowDownCircle } from 'react-icons/fi';
 import developerLight from '../../images/developer.svg';
 import developerDark from '../../images/developer-dark.svg';
 import { motion } from 'framer-motion';
+import logoDark from "../../images/logo-dark.svg";
+import logoLight from "../../images/logo-light.svg";
+import {experiences} from "../styles";
+import {VerticalTimeline, VerticalTimelineElement} from "react-vertical-timeline-component";
+import {useTheme} from "../../ThemeContext";
+
 
 const AppBanner = () => {
-	const [activeTheme] = useThemeSwitcher();
+
+	const { theme } = useTheme();
 
 	return (
 		<motion.section
@@ -23,9 +29,10 @@ const AppBanner = () => {
 						duration: 0.9,
 						delay: 0.1,
 					}}
-					className="font-general-semibold text-2xl lg:text-3xl xl:text-4xl text-center sm:text-left text-ternary-dark dark:text-primary-light uppercase"
+					className="w-full text-hero font-general-bold text-custom-purple text-center sm:text-left text-ternary-dark dark:text-primary-light "
 				>
-					Hi, Iam Stoman
+
+					Hi, I&apos;m <span className=" text-custom-purple">Ibrahim</span>
 				</motion.h1>
 				<motion.p
 					initial={{ opacity: 0 }}
@@ -37,7 +44,7 @@ const AppBanner = () => {
 					}}
 					className="font-general-medium mt-4 text-lg md:text-xl lg:text-2xl xl:text-3xl text-center sm:text-left leading-normal text-gray-500 dark:text-gray-200"
 				>
-					A Full-Stack Developer & Design Enthusiast
+					A Software Engineer & Full-Stack Developer
 				</motion.p>
 				<motion.div
 					initial={{ opacity: 0 }}
@@ -66,14 +73,16 @@ const AppBanner = () => {
 				initial={{ opacity: 0, y: -180 }}
 				animate={{ opacity: 1, y: 0 }}
 				transition={{ ease: 'easeInOut', duration: 0.9, delay: 0.2 }}
-				className="w-full sm:w-2/3 text-right float-right mt-8 sm:mt-0"
+				className="w-full sm:w-2/3 justify-center align-middle mt-8 sm:mt-0"
 			>
 				<img
 					src={
-						activeTheme === 'dark' ? developerLight : developerDark
+						theme === 'dark' ? developerLight : developerDark
 					}
 					alt="Developer"
+					className="small-image"
 				/>
+
 			</motion.div>
 		</motion.section>
 	);

src/components/shared/AppFooterCopyright.jsx

@@ -16,7 +16,7 @@ function AppFooterCopyright() {
 					target="__blank"
 					className="text-secondary-dark dark:text-secondary-light font-medium uppercase hover:underline hover:text-indigo-600 dark:hover:text-indigo-300 ml-1 duration-500"
 				>
-					Stoman
+					Ibrahim
 				</a>
 			</div>
 		</div>

src/components/shared/AppHeader.jsx

@@ -7,11 +7,16 @@ import logoLight from '../../images/logo-light.svg';
 import logoDark from '../../images/logo-dark.svg';
 import { motion } from 'framer-motion';
 import Button from '../reusable/Button';
-
+import {useTheme} from "../../ThemeContext";
 const AppHeader = () => {
+	const { theme, setTheme } = useTheme();  // Use theme from context
+
+	const toggleTheme = () => {
+		setTheme(theme === 'dark' ? 'light' : 'dark');
+	};
 	const [showMenu, setShowMenu] = useState(false);
 	const [showModal, setShowModal] = useState(false);
-	const [activeTheme, setTheme] = useThemeSwitcher();
+
 
 	function toggleMenu() {
 		if (!showMenu) {
@@ -47,7 +52,7 @@ const AppHeader = () => {
 				<div className="flex justify-between items-center px-4 sm:px-0">
 					<div>
 						<Link to="/">
-							{activeTheme === 'dark' ? (
+							{theme === 'dark' ? (
 								<img
 									src={logoDark}
 									className="w-36"
@@ -65,11 +70,11 @@ const AppHeader = () => {
 
 					{/* Theme switcher small screen */}
 					<div
-						onClick={() => setTheme(activeTheme)}
+						onClick={toggleTheme}
 						aria-label="Theme Switcher"
 						className="block sm:hidden ml-0 bg-primary-light dark:bg-ternary-dark p-3 shadow-sm rounded-xl cursor-pointer"
 					>
-						{activeTheme === 'dark' ? (
+						{theme === 'dark' ? (
 							<FiMoon className="text-ternary-dark hover:text-gray-400 dark:text-ternary-light dark:hover:text-primary-light text-xl" />
 						) : (
 							<FiSun className="text-gray-200 hover:text-gray-50 text-xl" />
@@ -177,15 +182,16 @@ const AppHeader = () => {
 					</div>
 
 					{/* Theme switcher large screen */}
+
 					<div
-						onClick={() => setTheme(activeTheme)}
+						onClick={toggleTheme}
 						aria-label="Theme Switcher"
 						className="ml-8 bg-primary-light dark:bg-ternary-dark p-3 shadow-sm rounded-xl cursor-pointer"
 					>
-						{activeTheme === 'dark' ? (
+						{theme === 'dark' ? (
 							<FiMoon className="text-ternary-dark hover:text-gray-400 dark:text-ternary-light dark:hover:text-primary-light text-xl" />
 						) : (
-							<FiSun className="text-gray-200 hover:text-gray-50 text-xl" />
+							<FiSun className="text-gray-400 hover:text-gray-50 text-xl" />
 						)}
 					</div>
 				</div>