Merge pull request #5 from serhatozdursun/lastVersion

update to last version
serhatozdursun · Jun 10, 2024 · 7c33427 · 7c33427
2 parents e891247 + 40b87f1
commit 7c33427
Show file tree

Hide file tree

Showing 27 changed files with 1,278 additions and 903 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -1,7 +1,7 @@
 module.exports = {
     presets: [
-        '@babel/preset-env',
-        '@babel/preset-react',
-        '@babel/preset-typescript',
-    ],
+        "@babel/preset-env",
+        "@babel/preset-react",
+        "@babel/preset-typescript"
+    ]
 };
diff --git a/components/CertificatesComponents.tsx b/components/CertificatesComponents.tsx
@@ -1,9 +1,8 @@
-// CertificatesComponents.js
 import React, { useState } from 'react';
 import styled from 'styled-components';
 
 const CertificatesContainer = styled.div`
-    margin-bottom: 20px;
+    margin-top: 30px;
 `;
 
 const CertificateTitle = styled.h3`
@@ -22,11 +21,14 @@ const CertificateItem = styled.li`
     align-items: center;
 `;
 
-const CertificateLink = styled.a<{ clicked: boolean }>`
+const CertificateLink = styled.a.attrs<{ clicked: boolean }>(props => ({
+    // Ensure clicked is not passed to the DOM
+    clicked: undefined,
+}))<{ clicked: boolean }>`
     text-decoration: none;
     display: flex;
     align-items: center;
-    color: ${props => props.clicked ? 'black' : 'inherit'};
+    color: ${props => (props.clicked ? 'black' : 'inherit')};
     transition: color 0.2s ease-in-out;
 
     &:hover {
@@ -48,14 +50,25 @@ const CertificatesComponents = () => {
     const [clickedCertificates, setClickedCertificates] = useState<string[]>([]);
 
     const handleClick = (certificateName: string) => {
-        if (!clickedCertificates.includes(certificateName)) {
-            setClickedCertificates([...clickedCertificates, certificateName]);
-        }
+        setClickedCertificates(prevCertificates => {
+            if (!prevCertificates.includes(certificateName)) {
+                return [...prevCertificates, certificateName];
+            }
+            return prevCertificates;
+        });
     };
 
     const certificates = [
-        { name: 'Professional Scrum Developer™ I (PSD I)', badge: '/psd1.png', link: 'https://www.credly.com/badges/c81059a4-a85f-4b9b-83b8-aa4d7cf36c31/public_url' },
-        { name: 'ISTQB® Certified Tester Foundation Level (CTFL)', badge: '/Brightest_CTFL.png', link: 'http://scr.istqb.org/?name=&number=0515+CTFL+1465&orderBy=relevancy&orderDirection=&dateStart=&dateEnd=&expiryStart=&expiryEnd=&certificationBody=&examProvider=&certificationLevel=&country=&resultsPerPage=10' }
+        {
+            name: 'Professional Scrum Developer™ I (PSD I)',
+            badge: '/psd1.png',
+            link: 'https://www.credly.com/badges/c81059a4-a85f-4b9b-83b8-aa4d7cf36c31/public_url',
+        },
+        {
+            name: 'ISTQB® Certified Tester Foundation Level (CTFL)',
+            badge: '/Brightest_CTFL.png',
+            link: 'http://scr.istqb.org/?name=&number=0515+CTFL+1465&orderBy=relevancy&orderDirection=&dateStart=&dateEnd=&expiryStart=&expiryEnd=&certificationBody=&examProvider=&certificationLevel=&country=&resultsPerPage=10',
+        },
     ];
 
     return (

diff --git a/components/ExperienceList.tsx b/components/ExperienceList.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import ExperienceList from './ExperienceList';
+
+const App: React.FC = () => {
+    return (
+        <div>
+            <h1>My Experiences</h1>
+            <ExperienceList />
+        </div>
+    );
+};
+
+export default App;
diff --git a/components/ExperiencesComponents.tsx b/components/ExperiencesComponents.tsx
diff --git a/components/SkillsComponents.tsx b/components/SkillsComponents.tsx
@@ -1,45 +1,13 @@
-// SkillsComponents.tsx
-import styled from "styled-components";
 import React from "react";
 
-export const SkillsContainer = styled.div`
-    margin-top: 20px;
-    margin-bottom: 10px;
-    margin-right: 0;
-    background-color: #f3fafd;
-`;
-
-export const Skill = styled.div`
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-`;
-
-export const SkillName = styled.span`
-    font-weight: bold;
-    margin-right: 10px;
-    width: 100px;
-`;
-
-export const SkillLevel = styled.div`
-    width: 200px;
-    height: 20px;
-    background-color: #f3fafd;
-    border-radius: 10px;
-    overflow: hidden;
-`;
-
-export const SkillLevelFill = styled.div<{ level: number }>`
-    height: 100%;
-    width: ${({ level }) => `${level}%`};
-    background-color: #4caf50;
-    border-radius: 10px;
-`;
-
-const SkillsTitle = styled.h3`
-    margin-bottom: 15px;
-    font-size: 1.2em;
-`;
+import {
+    SkillsContainer,
+    Skill,
+    SkillName,
+    SkillLevel,
+    SkillLevelFill,
+    SkillsTitle,
+} from "./StyledComponents"
 
 export const SkillsComponents = () => {
     const skills = [

diff --git a/components/StyledComponents.tsx b/components/StyledComponents.tsx
@@ -9,7 +9,7 @@ const Container = styled.div`
 
 const LeftColumn = styled.div`
     flex: 1;
-    padding: 60px 18px 18px 0;
+    padding-top: 20px;
     position: sticky;
     display: flex;
     flex-direction: column;
@@ -25,6 +25,8 @@ const LeftColumn = styled.div`
 const RightColumn = styled.div`
     flex: 2.8;
     padding: 18px;
+    padding-right: 200px;
+    padding-right: 200px;
 `;
 
 const Header = styled.header`
@@ -43,17 +45,21 @@ const Title = styled.h2`
 `;
 
 const Summary = styled.p`
-    font-size: 1.2em;
-    line-height: 1.6;
+    font-size: 1.1em;
+    line-height: 1.2;
     font-style: italic;
-    text-align: center;
+    text-align: justify;
 `;
 
 const Image = styled.img`
     width: 150px;
-    height: 150px;
-    border-radius: 50%;
+    height: 200px; 
+    border-radius: 15px; 
     margin-bottom: 10px;
+    border: 2px solid #7B7B7B; 
+    object-fit: cover; 
+    margin-left: 80px;
+    margin-top: 30px;
 `;
 
 const IconWrapper = styled.div`
@@ -73,42 +79,109 @@ const IconImage = styled.img`
     object-fit: contain;
 `;
 
-const AccordionWrapper = styled.div`
+const BoldText = styled.span`
+    font-weight: bold;
+`;
+
+const Info = styled.p`
+    font-size: 0.98em;
+    line-height: 1;
+    text-align: center;
+`;
+
+
+const SkillsContainer = styled.div`
+    margin-right: 0;
+    background-color: #f3fafd;
+`;
+
+const Skill = styled.div`
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+`;
+
+const SkillName = styled.span`
+    font-weight: bold;
+    margin-right: 10px;
+    width: 100px;
+`;
+
+const SkillLevel = styled.div`
+    width: 200px;
+    height: 20px;
+    background-color: #f3fafd;
+    border-radius: 10px;
+    overflow: hidden;
+`;
+
+const SkillLevelFill = styled.div<{ level: number }>`
+    height: 100%;
+    width: ${({ level }) => `${level}%`};
+    background-color: #4caf50;
+    border-radius: 10px;
+`;
+
+const SkillsTitle = styled.h3`
+    margin-bottom: 15px;
+    font-size: 1.2em;
+`;
+
+const ExperienceContainer = styled.div`
     margin-top: 20px;
 `;
 
-const AccordionItem = styled.div`
-    border: 1px solid #ccc;
-    border-radius: 4px;
+const ExperienceItem = styled.div`
     margin-bottom: 10px;
 `;
 
-const AccordionHeader = styled.div`
-    background-color: #e9effa;
-    padding: 10px;
+const CompanyLogo = styled.img`
+    width: 48px;
+    height: 48px;
+    margin-right: 5px;
+    margin-top: 10px;
+    border: 1px solid #CACACA;
+    border-radius: 5px;
+`;
+
+const ExperienceHeader = styled.div`
     display: flex;
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
+    line-height: 2px;
 `;
 
-const AccordionTitle = styled.h3`
-    font-size: 1.2em;
-    margin: 0;
+const ExperienceTitle = styled.h3`
+    font-style: italic;
+    text-align: left;
+    font-size: 1.1em;
+    margin-left: 10px;
 `;
 
-const AccordionContent = styled.div`
-    padding: 10px;
+const ExperienceCompany = styled.h3`
+    font-family: "Times New Roman", Times, serif;
+    text-align: left;
+    font-size: 0.9em;
+    color: #7B7B7B;
+    margin-left: 10px;
 `;
 
-const BoldText = styled.span`
-    font-weight: bold;
+const ExperienceDateRange = styled.h3`
+    font-family: "Times New Roman", Times, serif;
+    text-align: left;
+    font-size: 0.9em;
+    color: #7B7B7B;
+    margin-left: 10px; /* Adjusted margin-left */
 `;
 
-const Info = styled.p`
-    font-size: 0.98em;
-    line-height: 1;
-    text-align: center;
+const ExperienceContent = styled.div`
+    padding: 10px;
+`;
+
+const SeeMoreLink = styled.span`
+    color: #868483;
+    cursor: pointer;
 `;
 
 export {
@@ -123,11 +196,21 @@ export {
     IconWrapper,
     IconLink,
     IconImage,
-    AccordionWrapper,
-    AccordionItem,
-    AccordionHeader,
-    AccordionTitle,
-    AccordionContent,
     BoldText,
     Info,
+    SkillsContainer,
+    Skill,
+    SkillName,
+    SkillLevel,
+    SkillLevelFill,
+    SkillsTitle,
+    ExperienceContainer,
+    ExperienceItem,
+    CompanyLogo,
+    ExperienceHeader,
+    ExperienceTitle,
+    ExperienceCompany,
+    ExperienceDateRange,
+    ExperienceContent,
+    SeeMoreLink
 };
diff --git a/components/tests/Experiences.test.tsx b/components/tests/Experiences.test.tsx
diff --git a/components/tests/SkillsComponents.test.tsx b/components/tests/SkillsComponents.test.tsx
@@ -1,7 +1,7 @@
 // SkillsComponents.test.tsx
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { SkillsComponents } from '../SkillsComponents'; // Update the path
+import { SkillsComponents } from '../SkillsComponents';
 import '@testing-library/jest-dom'