feat(profile): improve layout; meet rec.

mariamarinescu · Jan 11, 2025 · 823a98b · 823a98b
1 parent 531decd
commit 823a98b
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 29 deletions.
diff --git a/src/components/icons/MicrosoftOfficeIcon.tsx b/src/components/icons/MicrosoftOfficeIcon.tsx
@@ -1,6 +1,6 @@
 export const MicrosoftOfficeIcon: React.FC<React.SVGProps<SVGSVGElement>> = ({
-  width = '30px',
-  height = '30px',
+  width = '40px',
+  height = '40px',
   fill = '#000000',
   viewBox = '0 0 24 24',
   role = 'img',

diff --git a/src/components/profile/Education.tsx b/src/components/profile/Education.tsx
@@ -3,12 +3,12 @@ import universityLogo from '../../assets/Musabi.png';
 
 export const Education = () => {
   return (
-    <div className="flex w-full flex-col">
+    <div className="flex w-fit flex-col">
       <h5 className="mt-2 text-pretty text-xl font-semibold tracking-tight text-gray-900">
         Education
       </h5>
-      <div className="flex flex-wrap items-center gap-2 py-2">
-        <img src={universityLogo} width="20%" height="" alt="University logo" />
+      <div className="flex flex-wrap items-center gap-2 py-3">
+        <img src={universityLogo} width="10%" height="" alt="University logo" />
         <div className="flex h-full flex-col">
           <p className="text-sm font-semibold text-black">
             Musashino Art University

diff --git a/src/components/profile/ProfileDescription.tsx b/src/components/profile/ProfileDescription.tsx
@@ -1,36 +1,38 @@
-import { LocationIcon, ProfileIcon } from '../icons';
-
+const textClassName = 'text-xs lg:text-base pl-1 text-gray-500';
+const quotesClassName = 'text-xl/10 lg:text-3xl/10 font-bold text-gray-900';
 export const ProfileDescription = () => {
   return (
     <>
-      <p className="mt-2 text-start text-xl/8 text-gray-700">
-        <span className="text-3xl/10 font-bold text-gray-900">„ </span>
+      <p className="lgtext-xl/8 mt-2 text-start text-base/8 text-gray-700">
+        <span className={quotesClassName}>”</span>
         As a berlin-based brand designer, with a multicultural background and I
         blend organization and analytical thinking to craft impactful,
         culturally resonant brand strategies with a focus on “diversity”. My
         work highlights identity, heritage and unity delivering meaningful brand
         experiences.
-        <span className="text-3xl/10 font-bold text-gray-900"> ”</span>
+        <span className={quotesClassName}>”</span>
       </p>
       <div className="flex h-fit w-full flex-col gap-4 py-4">
-        <p className="font-caveat ml-2 text-4xl font-bold">Ji Yun Pahk</p>
+        <p className="ml-2 font-caveat text-3xl font-bold lg:text-4xl">
+          Ji Yun Pahk
+        </p>
         <div className="flex flex-col gap-1">
           <div className="flex items-center gap-2">
-            <ProfileIcon />
+            {/* <ProfileIcon /> */}
             <div className="flex w-fit flex-wrap">
-              <p className="text-lg text-gray-500">Brand designer</p>
+              <p className={textClassName}>Brand designer</p>
               &nbsp;
-              <p className="text-lg text-gray-500">|</p>&nbsp;
-              <p className="text-lg text-gray-500">Graphic designer</p>
+              <p className={textClassName}>|</p>&nbsp;
+              <p className={textClassName}>Graphic designer</p>
               &nbsp;
-              <p className="text-lg text-gray-500">|</p>&nbsp;
-              <p className="text-lg text-gray-500">Illustrator</p>
+              <p className={textClassName}>|</p>&nbsp;
+              <p className={textClassName}>Illustrator</p>
               &nbsp;
             </div>
           </div>
           <div className="flex items-center justify-start gap-2">
-            <LocationIcon />
-            <p className="text-lg text-gray-500">Berlin, Germany</p>
+            {/* <LocationIcon /> */}
+            <p className={textClassName}>Berlin, Germany</p>
           </div>
         </div>
       </div>

diff --git a/src/components/profile/SkillSet.tsx b/src/components/profile/SkillSet.tsx
@@ -7,7 +7,7 @@ import {
 
 const iconContainerClassName = 'flex items-center gap-2';
 const skillTitleClassName =
-  'text-pretty text-lg font-semibold tracking-tight text-gray-900 sm:text-base';
+  'text-pretty text-sm font-semibold tracking-tight text-gray-900 sm:text-base';
 const iconSize = 30;
 
 const skillIconDictionary: Record<string, JSX.Element> = {
@@ -34,7 +34,7 @@ export const SkillSet = () => {
       <h5 className="mt-2 text-pretty text-xl font-semibold tracking-tight text-gray-900">
         Skillset
       </h5>
-      <div className="grid grid-cols-1 gap-6 py-6 xs:grid-cols-2">
+      <div className="flex flex-wrap gap-6 py-3">
         {skillSetNameList.map((skillName) => (
           <div className={iconContainerClassName} key={skillName}>
             {skillIconDictionary[skillName]}

diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
@@ -1,10 +1,5 @@
-import {
-  Education,
-  MotionLayoutWrapper,
-  ProfileDescription,
-  SkillSet,
-} from 'components';
-
+import { MotionLayoutWrapper } from 'components/layouts';
+import { Education, ProfileDescription, SkillSet } from 'components/profile';
 import profileImg from '../assets/profile.jpeg';
 
 const Profile = () => {
@@ -29,14 +24,38 @@ const Profile = () => {
           </div>
           <div className="-mt-12 pt-7 lg:sticky lg:top-0 lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:overflow-hidden 2xl:ml-0">
             <img
-              className="rounded-sm bg-gray-900 shadow-xl ring-1 ring-gray-400/10"
+              className="h-auto w-full transform rounded-sm bg-gray-900 object-contain shadow-xl ring-1 ring-gray-400/10 transition-transform hover:scale-105"
               src={profileImg}
               alt="Profile Image"
+              loading="lazy" // Lazy load for better performance
+              // width="100%" // Ensure the image takes up full width of the container
+              // height="auto" // Maintain aspect ratio automatically
             />
           </div>
         </div>
       </div>
     </MotionLayoutWrapper>
+    // <MotionLayoutWrapper>
+    //   <div className="flex h-full w-full flex-col gap-1 p-4 lg:flex-row">
+    //     <div className="flex w-full flex-col pt-4 lg:w-3/4">
+    //       <ProfileDescription />
+    //       <div className="flex flex-col gap-2 text-base/7 text-gray-700">
+    //         <Education />
+    //         <SkillSet />
+    //       </div>
+    //     </div>
+    //     <div className="flex h-full w-full content-center items-start pt-0 lg:w-1/4 lg:pt-10 xl:w-2/4">
+    //       <img
+    //         className="mx-auto h-fit w-fit transform rounded-none bg-gray-900 object-contain shadow-xl ring-1 ring-gray-400/10 transition-transform hover:scale-105 md:w-full"
+    //         src={profileImg}
+    //         alt="Profile Image"
+    //         loading="lazy" // Lazy load for better performance
+    //         width="100%" // Ensure the image takes up full width of the container
+    //         height="auto" // Maintain aspect ratio automatically
+    //       />
+    //     </div>
+    //   </div>
+    // </MotionLayoutWrapper>
   );
 };