-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
60773cf
commit ee950dc
Showing
9 changed files
with
237 additions
and
13 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| const LogoWithText = ({ text, imageSrc }) => { | ||
| return ( | ||
| <div className="flex items-center"> | ||
| <div className="w-3/12 bg-secondary-light dark:bg-background-dark rounded-[5rem] p-8 scale-75"> | ||
| <img | ||
| src={imageSrc} | ||
| alt="Logo" | ||
| className="w-full h-auto rounded-[3rem]" | ||
| /> | ||
| </div> | ||
| <div className="w-9/12 text-left"> | ||
| <p className="font-display text-xl">{text}</p> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| LogoWithText.propTypes = { | ||
| text: PropTypes.string.isRequired, | ||
| imageSrc: PropTypes.string.isRequired, | ||
| }; | ||
|
|
||
| export default LogoWithText; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| const TitleWithIcon = ({ text1, text2, text3 }) => { | ||
| const commonSpanClasses = "font-display"; | ||
|
|
||
| return ( | ||
| <div className="flex items-center justify-between space-x-4 pr-56"> | ||
| <span className={`${commonSpanClasses} font-bold text-3xl`}>{text1}</span> | ||
| <span className={`${commonSpanClasses} text-2xl font-thin`}>{text2}</span> | ||
| <span className={`${commonSpanClasses} text-2xl font-thin`}>{text3}</span> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| TitleWithIcon.propTypes = { | ||
| text1: PropTypes.string.isRequired, | ||
| text2: PropTypes.string.isRequired, | ||
| text3: PropTypes.string.isRequired, | ||
| }; | ||
|
|
||
| export default TitleWithIcon; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import TitleWithIcon from '../components/TitleWithIcon.jsx'; // Adjust the import path as necessary | ||
| import { GoTriangleDown } from 'react-icons/go'; | ||
| import LogoWithText from "../components/LogoWithText.jsx"; // Replace 'FaIconName' with the actual icon name you want to use | ||
|
|
||
| const experiences = [ | ||
| { | ||
| title: ( | ||
| <TitleWithIcon | ||
| text1="2023 - Present" | ||
| text2="SimplePark" | ||
| text3="Cyber Security Engineer" | ||
| icon={<GoTriangleDown />} | ||
| /> | ||
| ), | ||
| content: ( | ||
| <LogoWithText | ||
| imageSrc={"/portfolio/simplepark.png"} | ||
| text={"SimplePark is amazing - Coming Soon"} // ToDo: Add description | ||
| /> | ||
| ), | ||
| }, | ||
| { | ||
| title: ( | ||
| <TitleWithIcon | ||
| text1="2023 - Present" | ||
| text2="CitricLabs" | ||
| text3="Infrastructure Engineer" | ||
| icon={<GoTriangleDown />} | ||
| /> | ||
| ), | ||
| content: ( | ||
| <LogoWithText | ||
| imageSrc={"/portfolio/citriclabs.png"} | ||
| text={"CitricLabs is amazing - Coming Soon"} // ToDO: Add description | ||
| /> | ||
| ), | ||
| }, | ||
| { | ||
| title: ( | ||
| <TitleWithIcon | ||
| text1="2023 - Present" | ||
| text2="MediaMarkt" | ||
| text3="Smartbar Employee" | ||
| icon={<GoTriangleDown />} | ||
| /> | ||
| ), | ||
| content: ( | ||
| <LogoWithText | ||
| imageSrc={"/portfolio/mediamarkt.png"} | ||
| text={"Started in June 2023 as a sales employee at the IT department.\n" + | ||
| "I’ve always been fascinated about how things work, so became a Smartbar employee in July 2023.\n" + | ||
| "Offer technical support to customers, smartphone repairs, technical advice"} | ||
| /> | ||
| ), | ||
| }, | ||
| { | ||
| title: ( | ||
| <TitleWithIcon | ||
| text1="2021 - 2023" | ||
| text2="Karwei" | ||
| text3="Sales Employee" | ||
| icon={<GoTriangleDown />} | ||
| /> | ||
| ), | ||
| content: ( | ||
| <LogoWithText | ||
| imageSrc={"/portfolio/karwei.png"} | ||
| text={"Karwei is amazing - Coming Soon"} // ToDo: Add description | ||
| /> | ||
| ), | ||
| }, | ||
| ]; | ||
|
|
||
| export default experiences; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import { useState, useRef, useEffect } from 'react'; | ||
| import experiences from '../../data/experiences.jsx'; | ||
| import SecHead from "../../components/SecHead.jsx"; | ||
| import { GoTriangleDown, GoTriangleUp } from 'react-icons/go'; | ||
|
|
||
| const Experience = () => { | ||
| const [expandedIndex, setExpandedIndex] = useState(null); | ||
| const contentRefs = useRef([]); | ||
|
|
||
| const toggleExpand = (index) => { | ||
| setExpandedIndex(expandedIndex === index ? null : index); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (expandedIndex !== null) { | ||
| contentRefs.current[expandedIndex].style.height = `${contentRefs.current[expandedIndex].scrollHeight}px`; | ||
| } | ||
| }, [expandedIndex]); | ||
|
|
||
| return ( | ||
| <div className="space-y-0"> | ||
| <SecHead head={"Professional Experiences"} /> | ||
| {experiences.map((experience, index) => ( | ||
| <div | ||
| key={index} | ||
| className={`relative mx-auto w-full bg-gradient-to-r from-[#FF2E62] to-[#08D9D5] pl-1 pr-1 pt-1 cursor-pointer transition-all duration-300 ${ | ||
| expandedIndex === index ? 'h-auto' : 'h-auto' | ||
| } ${index === experiences.length - 1 ? 'pb-1' : ''}`} | ||
| onClick={() => toggleExpand(index)} | ||
| > | ||
| <div className="flex h-full w-full items-center justify-center bg-background-light dark:bg-background-dark p-4 shadow-inner shadow-md"> | ||
| <div className="w-full"> | ||
| <div className="font-bold">{experience.title}</div> | ||
| <div | ||
| ref={(el) => (contentRefs.current[index] = el)} | ||
| className={`overflow-hidden transition-height duration-500 ease-in-out ${expandedIndex === index ? 'h-auto' : 'h-0'}`} | ||
| style={{ height: expandedIndex === index ? `${contentRefs.current[index]?.scrollHeight}px` : '0' }} | ||
| > | ||
| <div className="mt-2"> | ||
| {experience.content} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className={`absolute ${expandedIndex === index ? 'bottom-4 right-4' : 'top-5 right-4'} transition-all duration-300`}> | ||
| <span className={`text-4xl transform transition-transform duration-300`}> | ||
| {expandedIndex === index ? <GoTriangleUp /> : <GoTriangleDown />} | ||
| </span> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Experience; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import Quote from "../../components/Quote.jsx"; | ||
|
|
||
| const Hero = () => { | ||
| return ( | ||
| <div className="px-4 md:pt-12 flex items-center justify-center"> | ||
| <div | ||
| className="relative w-full h-48 md:h-[42rem] rounded-[5rem] md:rounded-[10rem] bg-fit bg-no-repeat bg-center bg-[url('/background/profile-back.svg')]" | ||
| > | ||
| <div className="absolute inset-0 flex items-center justify-center"> | ||
| <div className={"text-center"}> | ||
| <h1 className={"antialiased text-text-dark font-display text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-bold"}> | ||
| Profile | ||
| </h1> | ||
| <span | ||
| className="block mt-4 text-base sm:text-lg md:text-xl lg:text-2xl text-text-dark max-w-2xl mx-auto"> | ||
| You’ve come far! Here you will find my professional experience, and technologies I have worked with. | ||
| </span> | ||
| <div className={"block py-6 text-text-dark max-w-[700px]"}> | ||
| <Quote | ||
| p1={`"Perfection is not attainable, but if we `} | ||
| p2={"chase perfection"} | ||
| p3={` we can catch excellence."`} | ||
| auth={"Vince Lombardi"} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default Hero; |