modified: src/components/Profile.js

modified: src/components/profile/badges.js modified: src/components/profile/certifications.js modified: src/components/profile/exams.js modified: src/components/profile/experiences.js modified: src/components/profile/languages.js modified: src/components/profile/organizations.js modified: src/components/profile/personality.js modified: src/components/profile/profilePic.js modified: src/components/profile/projects.js modified: src/components/profile/skills.js modified: tailwind.config.js
iyigirisim · Mar 25, 2023 · be6220f · be6220f
1 parent 983019e
commit be6220f
Show file tree

Hide file tree

Showing 12 changed files with 106 additions and 139 deletions.
diff --git a/src/components/Profile.js b/src/components/Profile.js
@@ -12,113 +12,35 @@ import SkillsComponent from "./profile/skills"
 
 const Profile = () => {
     return (
-        <>
-            {/* For Extra Large Screens */}
-            <div className=" max-xl:hidden max-2xl:overflow-hidden w-screen  bg-[#F8F3EB] h-full  px-10 space-y-8">
-                {/* Top Section */}
-                <div className="rounded-2xl w-full h-1/4  flex space-x-5 flex-row ">
-                    <ProfilePicComponent />
-                    <ExamsComponent />
-                    <OrganizationsComponent />
-                </div>
-                {/* Middle Section */}
-                <div className="rounded-2xl w-full h-1/4 flex flex-row space-x-5">
-                    <CertificationsComponent /> 
-                    <ExperienceComponent />
-                    <LanguagesComponent />
-
+        <div className="overflow-hidden max-md:pb-10 bg-[#F8F3EB] 
+        max-md:h-full max-md:w-screen z-10 top-0   grid grid-rows-16 grid-cols-16 h-screen w-full">
+            <div className="col-start-1 col-end-17 row-start-1 row-end-17 h-full flex  flex-col">
 
-                </div>
-                {/* Bottom Section */}
-                <div className="rounded-2xl w-full h-1/4  flex flex-row space-x-5">
-                    {/* Double Section personality and badges */}
-
-                    <div className="h-full w-4/12 rounded-2xl space-y-3 ">
-                        <BadgesComponent />
-                        <PersonalityComponent />
-                    </div>
-
-                    <ProjectsComponent />
-                    <SkillsComponent />
-
-                </div>
-
-
-            </div>
-
-
-
-            {/************** For Large and Medium Screens *************/}
-            <div className="hidden max-xl:block max-xl:overflow-visible  max-2xl:overflow-hidden w-screen bg-[#F8F3EB] h-screen max-xl:h-full max-xl:pb-14  px-10 space-y-8">
-
-                <div className="rounded-2xl w-full h-1/5 flex space-x-5 flex-row ">
+                <div className="px-8 py-2 flex flex-row gap-x-5 ">
                     <ProfilePicComponent />
                     <ExamsComponent />
-                </div>
-
-                <div className="h-1/5 w-full flex flex-row space-x-5 ">
-                    <CertificationsComponent />
                     <OrganizationsComponent />
                 </div>
-
-                <div className="rounded-2xl w-full h-1/5  flex flex-row space-x-5">
-                    <div className=" w-4/12 max-xl:w-6/12 rounded-2xl space-y-3 ">
-                        <BadgesComponent />
-                        <PersonalityComponent />
-                    </div>
-                    <SkillsComponent />
-                </div>
-
-                <div className="rounded-2xl w-full h-1/5 flex flex-row space-x-5">
-                    <ExperienceComponent />
-                    <LanguagesComponent />
-                </div>
-                {/* Bottom Section */}
-
-
-                <div className="h-1/5 ">
-                    <ProjectsComponent />
-                </div>
-
-            </div>
-
-
-            {/* For Small and Extra Small  Screens */}
-            <div className="hidden  max-md:block max-2xl:overflow-hidden w-screen bg-[#F8F3EB] h-screen  px-10 space-y-8">
-                {/* Top Section */}
-                <div className="rounded-2xl w-full h-1/4  flex space-x-5 flex-row ">
-                    <ProfilePicComponent />
-                    <ExamsComponent />
-                    <OrganizationsComponent />
-                </div>
-                {/* Middle Section */}
-                <div className="rounded-2xl w-full h-1/4 flex flex-row space-x-5">
+                <div className="px-8 py-2 flex flex-row gap-x-5 ">
                     <CertificationsComponent />
                     <ExperienceComponent />
                     <LanguagesComponent />
-
-
                 </div>
-                {/* Bottom Section */}
-                <div className="rounded-2xl w-full h-1/4  flex flex-row space-x-5">
-                    {/* Double Section personality and badges */}
 
-                    <div className="h-full w-4/12 rounded-2xl space-y-3 ">
+                <div className="px-8 pt-2  flex flex-row gap-x-5 ">
+                    <div className="flex flex-col space-y-3  w-4/12">
                         <BadgesComponent />
                         <PersonalityComponent />
                     </div>
-
                     <ProjectsComponent />
                     <SkillsComponent />
-
                 </div>
 
 
             </div>
 
 
-
-        </>
+        </div>
     );
 }
 

diff --git a/src/components/profile/badges.js b/src/components/profile/badges.js
@@ -1,6 +1,6 @@
 const Badges = () => {
     return (
-        <div className="bg-white w-full h-1/2  flex rounded-2xl border-2">
+        <div className="bg-white w-full h-32  flex rounded-2xl border-2">
             <div className="w-full h-full px-4 space-x-5 justify-center py-3 rounded-2xl flex flex-row">
                 <div className="w-32 h-full bg-gray-200 rounded-2xl flex"></div>
                 <div className="w-32 h-full bg-gray-200 rounded-2xl flex"></div>

diff --git a/src/components/profile/certifications.js b/src/components/profile/certifications.js
@@ -2,7 +2,7 @@ import CertificationsData from '../../data/certifications.json';
 
 const Certifications = () => {
     return (
-        <div className="bg-white h-full w-4/12 max-xl: w-6/12 rounded-2xl  border-2">
+        <div className="bg-white h-64  max-xl: w-6/12 rounded-2xl  border-2">
             <p className="text-xl font-semibold text-[#582270] mt-3 ml-4">Sertifikalar</p>
             <div className="w-full h-0.5 bg-gray-200 mt-3"></div>
 

diff --git a/src/components/profile/exams.js b/src/components/profile/exams.js
@@ -4,14 +4,14 @@ import Exams from "../../data/exams.json";
 
 const ExamsComponent = ( ) => {
     return ( 
-        <div className="bg-white  h-full max-xl:w-9/12 w-9/12 rounded-2xl  border-2">
+        <div className="bg-white h-64 w-6/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-14 overflow-hidden">
-            <div className=" flex flex-row p-3  w-full h-full space-x-5">
+        <div className="w-full h-fit justify-center flex overflow-hidden">
+            <div className=" flex flex-row p-3 justify-center  w-full h-full space-x-5">
                 {Exams.slice(0,5).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={`text-[1.2rem] max-w-[1rem] font-semibold text-${exam.status === 'success' ? 'white' : '[#335708]'} pt-2 pb-4 pl-3`}>{exam.syntax}</div>

diff --git a/src/components/profile/experiences.js b/src/components/profile/experiences.js
@@ -3,7 +3,7 @@ import ExperienceData from '../../data/experiences.json'
 
 const Experience = () => {
     return (
-        <div className="bg-white  h-full  max-xl:w-8/12 w-7/12 rounded-2xl  border-2">
+        <div className="bg-white  h-64   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">

diff --git a/src/components/profile/languages.js b/src/components/profile/languages.js
@@ -5,7 +5,7 @@ import LanguagesData from "../../data/languages.json";
 
 const Languages = () => {
     return (
-        <div className="bg-white  h-full  max-xl:w-4/12 w-3/12 rounded-2xl  border-2">
+        <div className="bg-white  h-64  max-xl:w-4/12 w-3/12 rounded-2xl  border-2">
             <p className="text-xl font-semibold text-[#582270] mt-3 ml-4">Diller</p>
             <div className="w-full h-0.5 bg-gray-200 mt-3 flex justify-center items-center"></div>
             <div className=" flex  flex-col justify-center w-full h-full  p-4  pb-[4.5rem] space-y-3">

diff --git a/src/components/profile/organizations.js b/src/components/profile/organizations.js
@@ -2,10 +2,10 @@ import organizations from '../../data/organizations.json';
 
 const OrganizationsComponent = () => {
     return (
-        <div className="bg-white  h-full max-xl:w-6/12 w-5/12 rounded-2xl  border-2">
+        <div className="bg-white  h-64 w-4/12 rounded-2xl  border-2">
             <p className="text-xl font-semibold text-[#582270] mt-3 ml-4">Organizasyonlar</p>
             <div className="w-full h-0.5 bg-gray-200 mt-3"></div>
-            <div className="p-4 w-full h-full flex-row pb-14 space-y-3">
+            <div className="relative p-4 w-full h-fit flex-col justify-center  flex space-y-3">
                 {organizations.slice(0, 3).map((organization) => (
                     <a key={organization.organization_id} href={organization.organization_url} className="w-full h-10 bg-[#582270] rounded-2xl flex flex-row ">
                         <p className="text-white font-semibold pl-5 flex items-center w-full h-full">{organization.organization_name} </p>

diff --git a/src/components/profile/personality.js b/src/components/profile/personality.js
@@ -3,7 +3,7 @@ import { ReactComponent as ArrowGreen } from "../../assets/ArrowGreen.svg";
 
 const Personality = () => {
     return (
-        <div className="bg-[#335708] w-full h-1/2 rounded-2xl border-[#86EE03] flex justify-center items-center">
+        <div className="bg-[#335708] w-full h-28 rounded-2xl border-[#86EE03] flex justify-center items-center">
             <p className="absolute text-[5.5rem] font-semibold text-center text-[#86EE03]">ESTP</p>
 
             <div className="w-full pb-5 pr-5 flex justify-end items-end h-full">

diff --git a/src/components/profile/profilePic.js b/src/components/profile/profilePic.js
@@ -2,8 +2,8 @@ import ProfilePicture from "../../assets/profilePic.jpg";
 
 const ProfilePic = () => {
     return (
-        <div className="bg-white  h-full w-[22rem]  max-xl:w-3/12 max-xl:h-[17rem] rounded-2xl border-2 flex justify-center items-center overflow-hidden transition-all  filter grayscale-0 hover:grayscale-[20%] ">
-            <img className="object-cover aspect-square h-full  w-full" src={ProfilePicture} alt="Profile Pic" />
+        <div className="bg-white h-64 relative w-64 rounded-2xl border-2 flex justify-center items-center overflow-hidden transition-all  filter grayscale-0 hover:grayscale-[20%] ">
+            <img className="object-cover object-center   w-full " src={ProfilePicture} alt="Profile Pic" />
             <div className="z-50 absolute flex flex-col w-full h-full  justify-end items-end  pb-4 pr-4">
                 <p className="text-lg  text-white font-semibold transition-all ">Tayfun Sönmez, 24</p>
                 <p className="text-sm  text-white font-light transition-all ">Front-end Developer</p>

diff --git a/src/components/profile/projects.js b/src/components/profile/projects.js
@@ -4,7 +4,7 @@ import ProjectsData from '../../data/projects.json'
 
 const Projects = () => {
     return (
-        <div className="bg-white  h-full max-xl:w-full w-5/12 rounded-2xl  border-2">
+        <div className="bg-white  h-64 w-6/12 rounded-2xl  border-2">
             <p className="text-xl font-semibold text-[#335708] mt-3 ml-4">Projeler</p>
             <div className="w-full h-0.5  mt-3 bg-gray-200"></div>
 

diff --git a/src/components/profile/skills.js b/src/components/profile/skills.js
@@ -1,6 +1,6 @@
 const Skills = () => {
     return (
-        <div className="bg-white  h-full max-xl:w-6/12  w-3/12 rounded-2xl pb-14  border-2">
+        <div className="bg-white h-64 max-xl:w-6/12  w-3/12 rounded-2xl pb-14  border-2">
             <p className="text-xl font-semibold text-[#582270] mt-3 ml-4">Skiller</p>
             <div className="w-full h-0.5 bg-gray-200 mt-3"></div>
             <div className="h-full w-full grid grid-cols-2 grid-rows-2  gap-2 p-4">

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -10,51 +10,96 @@ module.exports = {
         // Simple 16 column grid
         '16': 'repeat(16, minmax(0, 1fr))'
 
-  },
-  gridTemplateRows: {
-    // Simple 16 column grid
-    '16': 'repeat(16, minmax(0, 1fr))'
-
-},
-  gridColumnStart: {
-
-    '12': '12',
-    '13': '13',
-    '14': '14',
-    '15': '15',
-    '16': '16',
-    '17': '17',
-  },
-  gridColumnEnd: {
-    '12': '12',
-
-    '13': '13',
-    '14': '14',
-    '15': '15',
-    '16': '16',
-    '17': '17',
-  },
-  gridRowStart: {
-    '13': '13',
-    '14': '14',
-    '15': '15',
-    '16': '16',
-    '17': '17',
-  },
-  gridRowEnd: {
-    '13': '13',
-    '14': '14',
-    '15': '15',
-    '16': '16',
-    '17': '17',
-  },
+      },
+      gridTemplateRows: {
+        // Simple 16 column grid
+        '16': 'repeat(16, minmax(0, 1fr))'
 
-  },
+      },
+      gridColumnStart: {
+        '1': '1',
+        '2': '2',
+        '3': '3',
+        '4': '4',
+        '5': '5',
+        '6': '6',
+        '7': '7',
+        '8': '8',
+        '9': '9',
+        '10': '10',
+        '11': '11',
+        '12': '12',
+        '13': '13',
+        '14': '14',
+        '15': '15',
+        '16': '16',
+        '17': '17',
+      },
+      gridColumnEnd: {
+        '1': '1',
+        '2': '2',
+        '3': '3',
+        '4': '4',
+        '5': '5',
+        '6': '6',
+        '7': '7',
+        '8': '8',
+        '9': '9',
+        '10': '10',
+        '11': '11',
+        '12': '12',
+        '13': '13',
+        '14': '14',
+        '15': '15',
+        '16': '16',
+        '17': '17',
+      },
+      gridRowStart: {
+        '1': '1',
+        '2': '2',
+        '3': '3',
+        '4': '4',
+        '5': '5',
+        '6': '6',
+        '7': '7',
+        '8': '8',
+        '9': '9',
+        '10': '10',
+        '11': '11',
+        '12': '12',
+        '13': '13',
+        '14': '14',
+        '15': '15',
+        '16': '16',
+        '17': '17',
+      },
+      gridRowEnd: {
+        '1': '1',
+        '2': '2',
+        '3': '3',
+        '4': '4',
+        '5': '5',
+        '6': '6',
+        '7': '7',
+        '8': '8',
+        '9': '9',
+        '10': '10',
+        '11': '11',
+        '12': '12',
+        '13': '13',
+        '14': '14',
+        '15': '15',
+        '16': '16',
+        '17': '17',
+      },
+
+    },
   },
 
 
 
 
   plugins: [
+
   ],
 }