Skills & Responsiveness

jasperdemmers · Jun 9, 2024 · b05174b · b05174b
1 parent ee950dc
commit b05174b
Show file tree

Hide file tree

Showing 9 changed files with 160 additions and 19 deletions.
diff --git a/src/components/LogoWithText.jsx b/src/components/LogoWithText.jsx
@@ -3,15 +3,15 @@ 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">
+            <div className="w-1/4 md:w-3/12 bg-secondary-light dark:bg-background-dark rounded-3xl md:rounded-[2rem] lg:rounded-[4rem] p-2 lg:p-5 scale-10 md:scale-90 lg:scale-75">
                 <img
                     src={imageSrc}
                     alt="Logo"
-                    className="w-full h-auto rounded-[3rem]"
+                    className="w-full h-auto rounded-2xl md:rounded-[2rem] lg:rounded-[3rem]"
                 />
             </div>
-            <div className="w-9/12 text-left">
-                <p className="font-display text-xl">{text}</p>
+            <div className="w-3/4 md:w-9/12 text-left pl-2 md:pl-0">
+                <p className="font-display md:text-xl">{text}</p>
             </div>
         </div>
     );

diff --git a/src/components/ProgressBar.jsx b/src/components/ProgressBar.jsx
@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+
+const ProgressBar = ({ progress }) => {
+    const gradient = 'bg-gradient-to-r from-accent-light  to-primary-light dark:from-accent-dark dark:to-primary-dark';
+
+    return (
+        <div className="w-full h-6 bg-secondary-light dark:bg-secondary-dark rounded-full overflow-hidden">
+            <div
+                className={`h-full rounded-full ${gradient}`}
+                style={{
+                    width: `${progress}%`,
+                    backgroundSize: `${100 / progress * 100}% 100%`,
+                    backgroundPosition: '0 0',
+                }}
+            ></div>
+        </div>
+    );
+};
+
+ProgressBar.propTypes = {
+    progress: PropTypes.number.isRequired,
+};
+
+export default ProgressBar;
diff --git a/src/components/TitleWithIcon.jsx b/src/components/TitleWithIcon.jsx
@@ -1,13 +1,37 @@
 import PropTypes from 'prop-types';
+import { useState, useEffect } from 'react';
 
 const TitleWithIcon = ({ text1, text2, text3 }) => {
+    const [windowSize, setWindowSize] = useState({
+        width: undefined,
+        height: undefined,
+    });
+
+    useEffect(() => {
+        const handleResize = () => {
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        };
+
+        window.addEventListener('resize', handleResize);
+        handleResize();
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    const isSmallScreen = windowSize.width <= 640; // sm breakpoint is 640px
+
     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 className="flex items-center justify-between space-x-2 sm:pr-8 lg:pr-16">
+            <span className={`${commonSpanClasses} font-bold text-md xs:text-xl sm:text-xl md:text-2xl lg:text-3xl`}>
+                {isSmallScreen && text1.includes('Present') ? text1.replace('Present', 'Now') : text1}
+            </span>
+            <span className={`${commonSpanClasses} text-md xs:text-lg sm:text-xl md:text-xl lg:text-2xl font-thin`}>{text2}</span>
+            <span
+                className={`${commonSpanClasses} text-md xs:text-lg sm:text-xl md:text-xl lg:text-2xl font-thin truncate overflow-hidden whitespace-nowrap`}>{text3}</span>
         </div>
     );
 };

diff --git a/src/data/skills.jsx b/src/data/skills.jsx
@@ -0,0 +1,47 @@
+// Define personal skills data
+export const personalSkillsData = [
+    {
+        skillName: "Resilience",
+        progress: 90,
+    },
+    {
+        skillName: "Cultural Awareness",
+        progress: 75,
+    },
+    {
+        skillName: "Curiosity",
+        progress: 80,
+    },
+    {
+        skillName: "Time Management",
+        progress: 70,
+    },
+    {
+        skillName: "Communication",
+        progress: 75,
+    }
+];
+
+// Define professional skills data
+export const professionalSkillsData = [
+    {
+        skillName: "Networking",
+        progress: 95,
+    },
+    {
+        skillName: "Programming",
+        progress: 70,
+    },
+    {
+        skillName: "Cybersecurity",
+        progress: 65,
+    },
+    {
+        skillName: "Cloud Computing",
+        progress: 75,
+    },
+    {
+        skillName: "Project Management",
+        progress: 85,
+    },
+];
diff --git a/src/pages/Profile.jsx b/src/pages/Profile.jsx
@@ -1,12 +1,16 @@
 import Hero from "../sections/profile/Hero.jsx";
 import Experience from "../sections/profile/Experience.jsx";
+import Skills from "../sections/profile/Skills.jsx";
+import Quote from "../sections/profile/Quote.jsx";
 
 const Profile = () => {
   return (
     <div className={"text-text-light dark:text-text-dark mx-auto"}>
         <div className={"constrained-container"}>
             <Hero/>
+            <Quote/>
             <Experience/>
+            <Skills/>
         </div>
     </div>
   )

diff --git a/src/sections/profile/Experience.jsx b/src/sections/profile/Experience.jsx
@@ -28,7 +28,7 @@ const Experience = () => {
                     } ${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="flex h-full w-full items-center justify-center bg-background-light dark:bg-background-dark p-4 shadow-inner">
                         <div className="w-full">
                             <div className="font-bold">{experience.title}</div>
                             <div
@@ -43,7 +43,7 @@ const Experience = () => {
                         </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`}>
+                        <span className={`text-4xl transform transition-transform duration-300 hidden sm:inline`}>
                             {expandedIndex === index ? <GoTriangleUp /> : <GoTriangleDown />}
                         </span>
                     </div>

diff --git a/src/sections/profile/Hero.jsx b/src/sections/profile/Hero.jsx
@@ -1,12 +1,10 @@
-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="absolute inset-0 flex items-center justify-center pt-8">
                     <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
@@ -16,12 +14,6 @@ const Hero = () => {
                             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>

diff --git a/src/sections/profile/Quote.jsx b/src/sections/profile/Quote.jsx
@@ -0,0 +1,15 @@
+import QuoteComponent from "../../components/Quote.jsx";
+
+const Quote = () => {
+    return (
+        <div className="text-center max-w-2xl mx-auto w-full pt-16 md:pt-14 lg:pt-8">
+            <QuoteComponent
+                p1={`"Perfection is not attainable, but if we `}
+                p2={"chase perfection"}
+                p3={` we can catch excellence."`}
+                auth={"Vince Lombardi"}
+            />
+        </div>
+    )
+}
+export default Quote;
diff --git a/src/sections/profile/Skills.jsx b/src/sections/profile/Skills.jsx
@@ -0,0 +1,35 @@
+import SecHead from "../../components/SecHead.jsx";
+import ProgressBar from "../../components/ProgressBar.jsx";
+import { personalSkillsData, professionalSkillsData } from '../../data/skills.jsx'; // Adjust the import path as necessary
+
+const Skills = () => {
+    return (
+        <div className="container mx-auto px-4">
+            <SecHead head={"Personal Skills"} />
+            {personalSkillsData.map((skill, index) => (
+                <div className="grid grid-cols-12 gap-4 mt-4" key={index}>
+                    <div className="col-span-12 md:col-span-4 md:col-start-3">
+                        <p className="text-lg font-thin font-display">{skill.skillName}</p>
+                    </div>
+                    <div className="col-span-12 md:col-span-4">
+                        <ProgressBar progress={skill.progress} />
+                    </div>
+                </div>
+            ))}
+
+            <SecHead head={"Professional Skills"} />
+            {professionalSkillsData.map((skill, index) => (
+                <div className="grid grid-cols-12 gap-4 mt-4" key={index}>
+                    <div className="col-span-12 md:col-span-4 md:col-start-3">
+                        <p className="text-lg font-thin font-display">{skill.skillName}</p>
+                    </div>
+                    <div className="col-span-12 md:col-span-4">
+                        <ProgressBar progress={skill.progress} />
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default Skills;