modified: src/components/profile/exams.js

modified: src/components/profile/experiences.js
iyigirisim · Apr 7, 2023 · 278833f · 278833f
1 parent be58387
commit 278833f
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 36 deletions.
diff --git a/src/components/profile/exams.js b/src/components/profile/exams.js
@@ -1,39 +1,44 @@
 import Exams from "../../data/exams.json";
+import { useState, useEffect } from 'react';
 
 
 
-const ExamsComponent = ( ) => {
-    return ( 
-        <div className="bg-white max-lg:h-56 max-sm:w-full  h-64 w-6/12  max-[510px]:w-full  max-xl:w-9/12 rounded-2xl  border-2">
+const ExamsComponent = () => {
+    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
 
-        <div>
-            <p className="text-xl font-semibold text-[#335708] mt-3 ml-4">Geçtiği Sınavlar</p>
-            <div className="w-full h-0.5 bg-gray-200 mt-3"></div>
-        </div>
-        <div className="w-full h-full pb-[4rem] justify-center flex overflow-hidden">
-            <div className=" flex flex-row p-3 justify-center items-center  w-full h-full space-x-5">
-                {window.innerWidth > 510 ? Exams.slice(0, 4).map((exam) => (
-                    <div key={exam.id} className={`bg-${exam.status === 'success' ? '[#335708]' : 'gray-200'} rounded-2xl w-full h-full flex flex-col`}>
-                    <div className={`w-full h-full text-[1.2vw] max-xl:text-[1.7vw] max-md:text-[1rem] max-sm:[2.8vw] max-lg:text-[1.9vw] max-w-[1rem] font-semibold text-${exam.status === 'success' ? 'white' : '[#335708]'} pt-2 pb-4 pl-3`}>{exam.syntax}</div>
-                    <div className={`w-full h-1 bg-${exam.status === 'success' ? '[#86EE03]' : '[#335708]'} `} />
-                    <p className={`w-full h-full   max-xl:text-[1.2vw] max-md:text-[2vw] font-semibold text-${exam.status === 'success' ? '[#86EE03]' : '[#335708]'} text-[1.2vw] max-xl:text-[1.4vw] flex justify-end items-end pb-2 pt-2  pr-2`}><span className="text-4xl pr-0.5">{exam.score}</span>/100</p>
-                </div>
-
-                )) : Exams.slice(0, 2).map((exam) => (
-                    <div key={exam.id} className={`bg-${exam.status === 'success' ? '[#335708]' : 'gray-200'} rounded-2xl w-full h-full flex flex-col`}>
-                    <div className={`w-full h-full text-[1.2vw] max-xl:text-[1.7vw] max-md:text-[1rem] max-sm:[2.8vw] max-lg:text-[1.9vw] max-w-[1rem] font-semibold text-${exam.status === 'success' ? 'white' : '[#335708]'} pt-2 pb-4 pl-3`}>{exam.syntax}</div>
-                    <div className={`w-full h-1 bg-${exam.status === 'success' ? '[#86EE03]' : '[#335708]'} `} />
-                    <p className={`w-full h-full   max-xl:text-[1.2vw] max-md:text-[2vw] font-semibold text-${exam.status === 'success' ? '[#86EE03]' : '[#335708]'} text-[1.2vw] max-xl:text-[1.4vw] flex justify-end items-end pb-2 pt-2  pr-2`}><span className="text-4xl pr-0.5">{exam.score}</span>/100</p>
-                </div>
-                ))}
+    useEffect(() => {
+        const handleResize = () => setWindowWidth(window.innerWidth);
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
 
+    const ExamSlice = windowWidth > 768 ? Exams.slice(0, 4) : Exams.slice(0, 2);
 
 
+
+    return (
+        <div className="bg-white max-lg:h-56 max-sm:w-full  h-64 w-6/12  max-[510px]:w-full  max-xl:w-9/12 rounded-2xl  border-2">
+
+            <div>
+                <p className="text-xl font-semibold text-[#335708] mt-3 ml-4">Geçtiği Sınavlar</p>
+                <div className="w-full h-0.5 bg-gray-200 mt-3"></div>
+            </div>
+            <div className="w-full h-full pb-[4rem] justify-center flex overflow-hidden">
+                <div className=" flex flex-row p-3 justify-center items-center  w-full h-full space-x-5">
+
+                    {ExamSlice.map((exam, index) => (
+                        <div key={exam.id} className={`bg-${exam.status === 'success' ? '[#335708]' : 'gray-200'} rounded-2xl w-full h-full flex flex-col`}>
+                            <div className={`w-full h-full text-[1.2vw] max-xl:text-[1.7vw] max-md:text-[1rem] max-sm:[2.8vw] max-lg:text-[1.9vw] max-w-[1rem] font-semibold text-${exam.status === 'success' ? 'white' : '[#335708]'} pt-2 pb-4 pl-3`}>{exam.syntax}</div>
+                            <div className={`w-full h-1 bg-${exam.status === 'success' ? '[#86EE03]' : '[#335708]'} `} />
+                            <p className={`w-full h-full   max-xl:text-[1.2vw] max-md:text-[2vw] font-semibold text-${exam.status === 'success' ? '[#86EE03]' : '[#335708]'} text-[1.2vw] max-xl:text-[1.4vw] flex justify-end items-end pb-2 pt-2  pr-2`}><span className="text-4xl pr-0.5">{exam.score}</span>/100</p>
+                        </div>
+
+                    ))}
+                </div>
             </div>
-        </div>
 
 
-    </div>
+        </div>
     )
 }
 

diff --git a/src/components/profile/experiences.js b/src/components/profile/experiences.js
@@ -1,22 +1,24 @@
 import ExperienceData from '../../data/experiences.json'
-
+import { useState, useEffect } from 'react';
 
 const Experience = () => {
+    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+    useEffect(() => {
+        const handleResize = () => setWindowWidth(window.innerWidth);
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    const experienceSlice = windowWidth > 768 ? ExperienceData.slice(0, 4) : ExperienceData.slice(0, 2);
+
     return (
         <div className="bg-white  h-64 max-xl:w-full  w-7/12 rounded-2xl  border-2">
             <p className="text-xl font-semibold text-[#335708] mt-3 ml-4">Deneyimler</p>
             <div className="w-full h-0.5 bg-gray-200 mt-3"></div>
             <div className="w-full h-full p-4 pb-[4.5rem] flex flex-row space-x-5">
 
-                {window.innerWidth > 510 ? ExperienceData.slice(0, 4).map((experience, index) => (
-                    <div key={index} className="flex flex-col h-full w-full bg-[#335708] rounded-2xl">
-                        <p className="text-white  text-[1.2rem] max-xl:text-[1.2rem] max-xl:pb-8 max-xl:max-w-[120px] font-semibold pt-2 pl-3 max-w-[120px] pb-7">{experience.title}</p>
-                        <div className="w-full h-0.5 bg-[#86EE03]" />
-                        <div className="flex justify-end content-end text-[#86EE03] font-semibold text-xl  pt-2 pr-3">{experience.company}</div>
-                        <div className="flex justify-end content-end text-[#86EE03] font-semibold text-sm italic  pt-0 pr-3">{experience.startDate}-{experience.endDate}</div>
-                    </div>
-
-                )) : ExperienceData.slice(0, 2).map((experience, index) => (
+                {experienceSlice.map((experience, index) => (
                     <div key={index} className="flex flex-col h-full w-full bg-[#335708] rounded-2xl">
                         <p className="text-white  text-[1.2rem] max-xl:text-[1.2rem] max-xl:pb-8 max-xl:max-w-[120px] font-semibold pt-2 pl-3 max-w-[120px] pb-7">{experience.title}</p>
                         <div className="w-full h-0.5 bg-[#86EE03]" />
@@ -30,4 +32,5 @@ const Experience = () => {
     )
 }
 
-export default Experience;
+export default Experience;
+