Skip to content

Commit 0f5410a

Browse files
Ibrahim25-aiIbrahim25-ai
authored
Merge pull request #1 from Ibrahim25-ai/ibrahim
Ibrahim
2 parents 4994be3 + cc8c48a commit 0f5410a

25 files changed

+25219
-1184
lines changed

‎package-lock.json‎

Lines changed: 23366 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"react-router-dom": "^6.0.2",
1616
"react-scripts": "4.0.3",
1717
"react-scroll": "^1.8.4",
18+
"react-vertical-timeline-component": "^3.6.0",
1819
"styled-components": "^5.3.3",
1920
"web-vitals": "^1.0.1"
2021
},

‎src/App.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import AppFooter from './components/shared/AppFooter';
66
import AppHeader from './components/shared/AppHeader';
77
import './css/App.css';
88
import UseScrollToTop from './hooks/useScrollToTop';
9+
import { ThemeProvider } from './ThemeContext';
910

1011
const About = lazy(() => import('./pages/AboutMe'));
1112
const Contact = lazy(() => import('./pages/Contact.jsx'));
@@ -16,6 +17,7 @@ const ProjectSingle = lazy(() => import('./pages/ProjectSingle.jsx'));
1617

1718
function App() {
1819
return (
20+
<ThemeProvider>
1921
<AnimatePresence>
2022
<div className=" bg-secondary-light dark:bg-primary-dark transition duration-300">
2123
<Router>
@@ -39,6 +41,7 @@ function App() {
3941
<UseScrollToTop />
4042
</div>
4143
</AnimatePresence>
44+
</ThemeProvider>
4245
);
4346
}
4447

‎src/ThemeContext.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { createContext, useContext, useEffect, useState } from 'react';
2+
3+
const ThemeContext = createContext();
4+
5+
export const ThemeProvider = ({ children }) => {
6+
const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
7+
8+
useEffect(() => {
9+
const root = window.document.documentElement;
10+
const activeTheme = theme === 'dark' ? 'light' : 'dark';
11+
12+
root.classList.remove(activeTheme);
13+
root.classList.add(theme);
14+
localStorage.setItem('theme', theme);
15+
}, [theme]);
16+
17+
return (
18+
<ThemeContext.Provider value={{ theme, setTheme }}>
19+
{children}
20+
</ThemeContext.Provider>
21+
);
22+
};
23+
24+
export const useTheme = () => useContext(ThemeContext);

‎src/components/experiences/Exp.jsx‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
2+
import {useTheme} from "../../ThemeContext"
3+
4+
import {
5+
VerticalTimeline,
6+
VerticalTimelineElement,
7+
} from "react-vertical-timeline-component";
8+
import { motion } from "framer-motion";
9+
10+
import "react-vertical-timeline-component/style.min.css";
11+
12+
import { styles } from "../styles";
13+
import { experiences } from "../../components/styles";
14+
import { SectionWrapper } from "../../hoc";
15+
import { textVariant } from "../../utils/motion";
16+
17+
18+
19+
const ExperienceCard = ({ experience }) => {
20+
const {theme} = useTheme();
21+
const backgroundColor = theme === 'dark' ? "#fff" : "#F5F5F5"; // Dark or light background
22+
const textColor = theme === 'dark' ? "#fff" : "#000000"; // Text color based on theme
23+
const arrowColor = theme === 'dark' ? "#fff" : "#F5F5F5";
24+
const textColor1 = theme === 'dark' ? "#000000" : "#000000"; // Text color based on theme
25+
return (
26+
<VerticalTimelineElement
27+
contentStyle={{
28+
background: backgroundColor,
29+
color: textColor,
30+
}}
31+
contentArrowStyle={{ borderRight: `7px solid ${arrowColor}` }}
32+
date={experience.date}
33+
iconStyle={{ background: 'rgb(33, 150, 243)', color: '#000000' , backgroundColor :'#000000' }}
34+
35+
icon={
36+
<div className="flex justify-center items-center w-full h-full">
37+
<img
38+
src={experience.icon}
39+
alt={experience.company_name}
40+
className="w-[80%] h-[80%] object-contain"
41+
/>
42+
</div>
43+
}
44+
>
45+
<div>
46+
<h3 className=" text-ternary-dark sm:text-l md:text-xl lg:text-1xl xl:text-2xl font-bold">{experience.title}</h3>
47+
<p
48+
className=" text-ternary-dark text-[16px] font-semibold"
49+
style={{ margin: 0 }}
50+
>
51+
{experience.company_name}
52+
</p>
53+
</div>
54+
55+
<ul className=" text-ternary-dark mt-5 list-disc ml-5 space-y-2 ">
56+
{experience.points.map((point, index) => (
57+
<li
58+
key={`experience-point-${index}`}
59+
className=" text-[14px] pl-1 tracking-wider"
60+
>
61+
{point}
62+
</li>
63+
))}
64+
</ul>
65+
</VerticalTimelineElement>
66+
);
67+
};
68+
69+
const Experience = () => {
70+
const {theme} = useTheme();
71+
const color = theme === 'dark' ? "#fff" : "#000000";
72+
return (
73+
<motion.section
74+
initial={{ opacity: 0 }}
75+
animate={{ opacity: 1 }}
76+
transition={{ ease: 'easeInOut', duration: 0.9, delay: 0.2 }}
77+
className=" sm:justify-between items-center sm:flex-row mt-12 md:mt-2"
78+
>
79+
80+
81+
<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 ">
82+
<p className={`${styles.sectionSubText} text-center`}>
83+
What I have done so far
84+
</p>
85+
<h2 className={`${styles.sectionHeadText} text-center mt-10 text-gray-500 dark:text-gray-200`}>
86+
Education & Experience
87+
</h2>
88+
</motion.div>
89+
90+
<div className="mt-20">
91+
92+
<motion.div
93+
initial={{ opacity: 0, y: -180 }}
94+
animate={{ opacity: 1, y: 0 }}
95+
transition={{ ease: 'easeInOut', duration: 0.9, delay: 0.2 }}
96+
97+
>
98+
99+
<VerticalTimeline
100+
key={theme} // Forces re-render on theme change
101+
lineColor={color}
102+
103+
>
104+
{experiences.map((experience, index) => (
105+
<ExperienceCard
106+
key={`experience-${index}`}
107+
experience={experience}
108+
/>
109+
))}
110+
</VerticalTimeline>
111+
112+
113+
114+
115+
</motion.div>
116+
117+
</div>
118+
</motion.section>
119+
);
120+
};
121+
122+
export default SectionWrapper(Experience, "work");

‎src/components/projects/ProjectsGrid.jsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { FiSearch } from 'react-icons/fi';
33
import ProjectSingle from './ProjectSingle';
44
import { ProjectsContext } from '../../context/ProjectsContext';
55
import ProjectsFilter from './ProjectsFilter';
6+
import {styles} from "../styles";
7+
import {motion} from "framer-motion";
68

79
const ProjectsGrid = () => {
810
const {
@@ -17,12 +19,11 @@ const ProjectsGrid = () => {
1719

1820
return (
1921
<section className="py-5 sm:py-10 mt-5 sm:mt-10">
20-
<div className="text-center">
21-
<p className="font-general-medium text-2xl sm:text-4xl mb-1 text-ternary-dark dark:text-ternary-light">
22+
<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 ">
23+
<p className={`${styles.sectionSubText} text-center`}>
2224
Projects portfolio
2325
</p>
24-
</div>
25-
26+
</motion.div>
2627
<div className="mt-10 sm:mt-16">
2728
<h3
2829
className="font-general-regular

‎src/components/shared/AppBanner.jsx‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
1-
import useThemeSwitcher from '../../hooks/useThemeSwitcher';
21
import { FiArrowDownCircle } from 'react-icons/fi';
32
import developerLight from '../../images/developer.svg';
43
import developerDark from '../../images/developer-dark.svg';
54
import { motion } from 'framer-motion';
5+
import logoDark from "../../images/logo-dark.svg";
6+
import logoLight from "../../images/logo-light.svg";
7+
import {experiences} from "../styles";
8+
import {VerticalTimeline, VerticalTimelineElement} from "react-vertical-timeline-component";
9+
import {useTheme} from "../../ThemeContext";
10+
611

712
const AppBanner = () => {
8-
const [activeTheme] = useThemeSwitcher();
13+
14+
const { theme } = useTheme();
915

1016
return (
1117
<motion.section
@@ -23,9 +29,10 @@ const AppBanner = () => {
2329
duration: 0.9,
2430
delay: 0.1,
2531
}}
26-
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"
32+
className="w-full text-hero font-general-bold text-custom-purple text-center sm:text-left text-ternary-dark dark:text-primary-light "
2733
>
28-
Hi, Iam Stoman
34+
35+
Hi, I&apos;m <span className=" text-custom-purple">Ibrahim</span>
2936
</motion.h1>
3037
<motion.p
3138
initial={{ opacity: 0 }}
@@ -37,7 +44,7 @@ const AppBanner = () => {
3744
}}
3845
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"
3946
>
40-
A Full-Stack Developer & Design Enthusiast
47+
A Software Engineer & Full-Stack Developer
4148
</motion.p>
4249
<motion.div
4350
initial={{ opacity: 0 }}
@@ -66,14 +73,16 @@ const AppBanner = () => {
6673
initial={{ opacity: 0, y: -180 }}
6774
animate={{ opacity: 1, y: 0 }}
6875
transition={{ ease: 'easeInOut', duration: 0.9, delay: 0.2 }}
69-
className="w-full sm:w-2/3 text-right float-right mt-8 sm:mt-0"
76+
className="w-full sm:w-2/3 justify-center align-middle mt-8 sm:mt-0"
7077
>
7178
<img
7279
src={
73-
activeTheme === 'dark' ? developerLight : developerDark
80+
theme === 'dark' ? developerLight : developerDark
7481
}
7582
alt="Developer"
83+
className="small-image"
7684
/>
85+
7786
</motion.div>
7887
</motion.section>
7988
);

‎src/components/shared/AppFooterCopyright.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function AppFooterCopyright() {
1616
target="__blank"
1717
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"
1818
>
19-
Stoman
19+
Ibrahim
2020
</a>
2121
</div>
2222
</div>

‎src/components/shared/AppHeader.jsx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,16 @@ import logoLight from '../../images/logo-light.svg';
77
import logoDark from '../../images/logo-dark.svg';
88
import { motion } from 'framer-motion';
99
import Button from '../reusable/Button';
10-
10+
import {useTheme} from "../../ThemeContext";
1111
const AppHeader = () => {
12+
const { theme, setTheme } = useTheme(); // Use theme from context
13+
14+
const toggleTheme = () => {
15+
setTheme(theme === 'dark' ? 'light' : 'dark');
16+
};
1217
const [showMenu, setShowMenu] = useState(false);
1318
const [showModal, setShowModal] = useState(false);
14-
const [activeTheme, setTheme] = useThemeSwitcher();
19+
1520

1621
function toggleMenu() {
1722
if (!showMenu) {
@@ -47,7 +52,7 @@ const AppHeader = () => {
4752
<div className="flex justify-between items-center px-4 sm:px-0">
4853
<div>
4954
<Link to="/">
50-
{activeTheme === 'dark' ? (
55+
{theme === 'dark' ? (
5156
<img
5257
src={logoDark}
5358
className="w-36"
@@ -65,11 +70,11 @@ const AppHeader = () => {
6570

6671
{/* Theme switcher small screen */}
6772
<div
68-
onClick={() => setTheme(activeTheme)}
73+
onClick={toggleTheme}
6974
aria-label="Theme Switcher"
7075
className="block sm:hidden ml-0 bg-primary-light dark:bg-ternary-dark p-3 shadow-sm rounded-xl cursor-pointer"
7176
>
72-
{activeTheme === 'dark' ? (
77+
{theme === 'dark' ? (
7378
<FiMoon className="text-ternary-dark hover:text-gray-400 dark:text-ternary-light dark:hover:text-primary-light text-xl" />
7479
) : (
7580
<FiSun className="text-gray-200 hover:text-gray-50 text-xl" />
@@ -177,15 +182,16 @@ const AppHeader = () => {
177182
</div>
178183

179184
{/* Theme switcher large screen */}
185+
180186
<div
181-
onClick={() => setTheme(activeTheme)}
187+
onClick={toggleTheme}
182188
aria-label="Theme Switcher"
183189
className="ml-8 bg-primary-light dark:bg-ternary-dark p-3 shadow-sm rounded-xl cursor-pointer"
184190
>
185-
{activeTheme === 'dark' ? (
191+
{theme === 'dark' ? (
186192
<FiMoon className="text-ternary-dark hover:text-gray-400 dark:text-ternary-light dark:hover:text-primary-light text-xl" />
187193
) : (
188-
<FiSun className="text-gray-200 hover:text-gray-50 text-xl" />
194+
<FiSun className="text-gray-400 hover:text-gray-50 text-xl" />
189195
)}
190196
</div>
191197
</div>

0 commit comments

Comments
 (0)