Merge pull request #2 from justforworkandstuff/fix/bug_mobile_view_issue

justforworkandstuff · web-flow · commit cd1650fe63a9 · 2025-03-19T18:29:14.000+08:00
fix: mobile view content cropped off issue
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,18 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.1] - 2025-03-19 
+
+### Fixed 
+
+- Fix mobile view content cropped off [#1](https://github.com/justforworkandstuff/justforworkandstuff.github.io/issues/1)
+
+## [1.0.0] - 2025-03-18
+
+### Added
+
+- Setup project portfolio website to be host on Github Pages.
diff --git a/my-app/package.json b/my-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-app",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.14.0",
diff --git a/my-app/public/index.html b/my-app/public/index.html
@@ -27,7 +27,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>justforworkandstuff - Personal Portfolio</title>
+    <title>Vitti Ng - Personal Portfolio</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/my-app/public/manifest.json b/my-app/public/manifest.json
@@ -1,6 +1,6 @@
 {
-    "name": "justforworkandstuff - Personal Portfolio",
-    "short_name": "justforworkandstuff - Personal Portfolio",
+    "name": "Vitti Ng - Personal Portfolio",
+    "short_name": "Vitti Ng - Personal Portfolio",
     "icons": [
         {
             "src": "android-chrome-192.png",
diff --git a/my-app/src/modules/contact/components/contactDescription.tsx b/my-app/src/modules/contact/components/contactDescription.tsx
@@ -38,7 +38,7 @@ const ContactDescription = (props: ContactDescriptionProps) => {
       initial={{ opacity: 0, y: -20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.5, delay: 0.2, ease: "easeIn" }}
-      className={`w-full h-full ml-auto flex flex-col items-end justify-end max-w-sm text-right text-lg md:text-base leading-6 md:leading-4 ${
+      className={`w-full h-full ml-auto flex flex-col items-end justify-end max-w-sm text-right text-base leading-5 md:leading-4 ${
         isThemeLight ? "text-black" : "text-gray-300"
       }`}
     >
diff --git a/my-app/src/modules/contact/contactPage.tsx b/my-app/src/modules/contact/contactPage.tsx
@@ -21,7 +21,7 @@ const ContactPage = () => {
 
   return (
     <div
-      className={`min-h-screen w-full flex flex-col items-center justify-center ${
+      className={`min-h-screen w-full flex flex-col flex-1 items-center md:justify-center pt-4 md:pt-0 ${
         isThemeLight ? "bg-white text-black" : "bg-black text-white"
       }`}
     >
@@ -42,7 +42,7 @@ const ContactPage = () => {
       )}
 
       <div
-        className={`w-[95%] h-[90vh] border relative xl:p-8 p-10 flex md:flex-row flex-col ${
+        className={`w-[95%] md:min-h-[90vh] border relative p-8 flex md:flex-row flex-col ${
           isThemeLight ? "border-black" : "border-gray-500"
         }`}
       >
@@ -53,7 +53,7 @@ const ContactPage = () => {
           />
         </div>
 
-        <div className="md:flex-[4] mt-auto">
+        <div className="md:flex-[4] mt-12 md:mt-0">
           <ContactDescription
             isThemeLight={isThemeLight}
           />
diff --git a/my-app/src/modules/home/components/aboutDescription.tsx b/my-app/src/modules/home/components/aboutDescription.tsx
@@ -13,7 +13,7 @@ const AboutDescription = (props: AboutDescriptionProps) => {
       initial={{ opacity: 0, y: -20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.5, delay: 0.2, ease: "easeIn" }}
-      className={`w-full h-full ml-auto flex flex-col items-end justify-end max-w-sm text-right text-lg md:text-base leading-6 md:leading-4 ${
+      className={`w-full h-full ml-auto flex flex-col items-end justify-end max-w-sm text-right text-base leading-5 md:leading-4 ${
         isThemeLight ? "text-black" : "text-gray-300"
       }`}
     >
diff --git a/my-app/src/modules/home/homePage.tsx b/my-app/src/modules/home/homePage.tsx
@@ -33,7 +33,7 @@ const HomePage = () => {
 
   return (
     <div
-      className={`min-h-screen w-full flex flex-col items-center justify-center ${
+      className={`min-h-screen w-full flex flex-col flex-1 items-center md:justify-center pt-4 md:pt-0 ${
         isThemeLight ? "bg-white text-black" : "bg-black text-white"
       }`}
     >
@@ -54,7 +54,7 @@ const HomePage = () => {
       )}
 
       <div
-        className={`w-[95%] h-[90vh] border relative xl:p-8 p-10 flex md:flex-row flex-col ${
+        className={`w-[95%] md:min-h-[90vh] border relative p-8 flex md:flex-row flex-col ${
           isThemeLight ? "border-black" : "border-gray-500"
         }`}
       >
@@ -65,7 +65,7 @@ const HomePage = () => {
           />
         </div>
 
-        <div className="md:flex-[4] mt-auto">
+        <div className="md:flex-[4] mt-32 md:mt-0">
           <AboutDescription
             isThemeLight={isThemeLight}
             aboutDescription={userData?.aboutDescription ?? []}
diff --git a/my-app/src/modules/journey/components/experienceCardMobile.tsx b/my-app/src/modules/journey/components/experienceCardMobile.tsx
@@ -29,7 +29,7 @@ const ExperienceCardMobile = (props: ExperienceCardMobileProps) => {
       initial={{ opacity: 0, y: -20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.5, delay: 0.2, ease: "easeIn" }}
-      className={`w-full h-full flex items-start justify-start text-lg leading-6 overflow-y-auto scrollbar-hide flex-nowrap ${
+      className={`w-full h-full flex items-start justify-start text-base leading-5 overflow-y-auto scrollbar-hide flex-nowrap ${
         isThemeLight ? "text-black" : "text-gray-300"
       }`}
     >
diff --git a/my-app/src/modules/journey/journeyPage.tsx b/my-app/src/modules/journey/journeyPage.tsx
@@ -34,7 +34,7 @@ const JourneyPage = () => {
 
   return (
     <div
-      className={`min-h-screen w-screen flex flex-col items-center justify-center ${
+      className={`min-h-screen w-full flex flex-col flex-1 items-center md:justify-center pt-4 md:pt-0 mb-6 md:mb-0 ${
         isThemeLight ? "bg-white text-black" : "bg-black text-white"
       }`}
     >
@@ -60,7 +60,7 @@ const JourneyPage = () => {
       )}
 
       <div
-        className={`w-[95%] h-[90vh] border relative xl:p-8 p-10 flex md:flex-row flex-col overflow-y-auto scrollbar-hide ${
+        className={`w-[95%] h-[90vh] border relative p-8 flex md:flex-row flex-col overflow-y-auto scrollbar-hide ${
           isThemeLight ? "border-black" : "border-gray-500"
         }`}
       >
@@ -78,7 +78,7 @@ const JourneyPage = () => {
           />
         </div>
 
-        <div className="block md:hidden">
+        <div className="block md:hidden flex-1">
           <ExperienceCardMobile
             isThemeLight={isThemeLight}
             experienceList={userData?.experienceList ?? []}
diff --git a/my-app/src/modules/projects/components/projectDetailCard.tsx b/my-app/src/modules/projects/components/projectDetailCard.tsx
@@ -29,13 +29,13 @@ const ProjectDetailCard = (props: ProjectDetailCardProps) => {
       initial={{ opacity: 0, scale: 0.8, x: 150 }}
       animate={{ opacity: 1, scale: 1, x: 0 }}
       transition={{ duration: 0.5, ease: "easeOut" }}
-      className={`w-full h-full flex flex-col text-start items-start md:items-end justify-start md:justify-center leading-6 md:leading-4 ${
+      className={`w-full h-full flex flex-col text-start items-end justify-center leading-4 ${
         isThemeLight ? "text-black" : "text-gray-300"
       }`}
     >
       <div className="flex flex-col items-start justify-start max-w-lg">
         {/* Project Title & Stack */}
-        <div className="min-w-full flex flex-row items-center md:mb-4">
+        <div className="min-w-full flex flex-row items-center mb-4">
           <p className="hidden md:block text-2xl font-semibold">{item.title}</p>
           <p className="block md:hidden text-2xl font-semibold pr-2">
             {item.title}
diff --git a/my-app/src/modules/projects/components/projectDetailCardMobile.tsx b/my-app/src/modules/projects/components/projectDetailCardMobile.tsx
@@ -29,13 +29,13 @@ const ProjectDetailCardMobile = (props: ProjectDetailCardMobileProps) => {
       initial={{ opacity: 0, y: -20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.5, delay: 0.2, ease: "easeIn" }}
-      className={`w-full h-full flex flex-col text-start items-start justify-start leading-6 ${
+      className={`w-full h-full flex flex-col text-start items-start justify-start leading-5 ${
         isThemeLight ? "text-black" : "text-gray-300"
       }`}
     >
       <div className="flex flex-col items-start justify-start max-w-lg">
         {/* Project Title & Stack */}
-        <div className="min-w-full flex flex-row items-center md:mb-4">
+        <div className="min-w-full flex flex-row items-center">
           <p className="text-2xl font-semibold pr-2">{item.title}</p>
 
           <div className="flex-1 flex flex-row justify-end space-x-2">
diff --git a/my-app/src/modules/projects/components/projectItemListing.tsx b/my-app/src/modules/projects/components/projectItemListing.tsx
@@ -16,7 +16,7 @@ const ProjectItemListing = (props: ProjectItemListingProps) => {
       initial={{ opacity: 0, y: -20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.5, delay: 0.2, ease: "easeIn" }}
-      className={`w-full h-full flex flex-col items-start md:items-end justify-start text-right text-lg md:text-sm leading-6 md:leading-4 md:max-h-[70vh] overflow-y-auto scrollbar-hide ${
+      className={`w-full h-full flex flex-col items-start md:items-end justify-start text-right text-lg md:text-sm leading-5 md:leading-4 md:max-h-[70vh] overflow-y-auto scrollbar-hide ${
         isThemeLight ? "text-black" : "text-gray-300"
       }`}
     >
diff --git a/my-app/src/modules/projects/projectDetailPage.tsx b/my-app/src/modules/projects/projectDetailPage.tsx
@@ -36,7 +36,7 @@ const ProjectDetailPage = () => {
 
   return (
     <div
-      className={`min-h-screen w-screen flex flex-col items-center justify-center ${
+      className={`min-h-screen w-full flex flex-col flex-1 items-center md:justify-center pt-4 md:pt-0 ${
         isThemeLight ? "bg-white text-black" : "bg-black text-white"
       }`}
     >
@@ -54,15 +54,15 @@ const ProjectDetailPage = () => {
           onCloseDrawerCallback={toggleDrawer}
           contentItem={
             <DrawerMenuContent
-              newMenuType={MenuType.Journey}
+              newMenuType={MenuType.Projects}
               isThemeLight={isThemeLight}
             />
           }
         />
       )}
 
       <div
-        className={`w-[95%] h-[90vh] border relative xl:p-8 p-10 flex md:flex-row flex-col overflow-y-auto scrollbar-hide ${
+        className={`w-[95%] h-[90vh] border relative p-8 flex md:flex-row flex-col overflow-y-auto scrollbar-hide ${
           isThemeLight ? "border-black" : "border-gray-500"
         }`}
       >
diff --git a/my-app/src/modules/projects/projectsPage.tsx b/my-app/src/modules/projects/projectsPage.tsx
@@ -66,7 +66,7 @@ const ProjectsPage = () => {
       )}
 
       <div
-        className={`w-[95%] h-[90vh] border relative xl:p-8 p-10 flex md:flex-row flex-col overflow-y-auto scrollbar-hide ${
+        className={`w-[95%] h-[90vh] border relative p-8 flex md:flex-row flex-col overflow-y-auto scrollbar-hide ${
           isThemeLight ? "border-black" : "border-gray-500"
         }`}
       >
diff --git a/my-app/src/tailwind.css b/my-app/src/tailwind.css

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "my-app",`
`3`		`- "version": "1.0.0",`
	`3`	`+ "version": "1.0.1",`
`4`	`4`	`"private": true,`
`5`	`5`	`"dependencies": {`
`6`	`6`	`"@emotion/react": "^11.14.0",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`		`- "name": "justforworkandstuff - Personal Portfolio",`
`3`		`- "short_name": "justforworkandstuff - Personal Portfolio",`
	`2`	`+ "name": "Vitti Ng - Personal Portfolio",`
	`3`	`+ "short_name": "Vitti Ng - Personal Portfolio",`
`4`	`4`	`"icons": [`
`5`	`5`	`{`
`6`	`6`	`"src": "android-chrome-192.png",`
Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ const ContactDescription = (props: ContactDescriptionProps) => {`
`38`	`38`	`initial={{ opacity: 0, y: -20 }}`
`39`	`39`	`animate={{ opacity: 1, y: 0 }}`
`40`	`40`	`transition={{ duration: 0.5, delay: 0.2, ease: "easeIn" }}`
`41`		- className={`w-full h-full ml-auto flex flex-col items-end justify-end max-w-sm text-right text-lg md:text-base leading-6 md:leading-4 ${
	`41`	+ className={`w-full h-full ml-auto flex flex-col items-end justify-end max-w-sm text-right text-base leading-5 md:leading-4 ${
`42`	`42`	`isThemeLight ? "text-black" : "text-gray-300"`
`43`	`43`	}`}
`44`	`44`	`>`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ const AboutDescription = (props: AboutDescriptionProps) => {`
`13`	`13`	`initial={{ opacity: 0, y: -20 }}`
`14`	`14`	`animate={{ opacity: 1, y: 0 }}`
`15`	`15`	`transition={{ duration: 0.5, delay: 0.2, ease: "easeIn" }}`
`16`		- className={`w-full h-full ml-auto flex flex-col items-end justify-end max-w-sm text-right text-lg md:text-base leading-6 md:leading-4 ${
	`16`	+ className={`w-full h-full ml-auto flex flex-col items-end justify-end max-w-sm text-right text-base leading-5 md:leading-4 ${
`17`	`17`	`isThemeLight ? "text-black" : "text-gray-300"`
`18`	`18`	}`}
`19`	`19`	`>`
Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ const ExperienceCardMobile = (props: ExperienceCardMobileProps) => {`
`29`	`29`	`initial={{ opacity: 0, y: -20 }}`
`30`	`30`	`animate={{ opacity: 1, y: 0 }}`
`31`	`31`	`transition={{ duration: 0.5, delay: 0.2, ease: "easeIn" }}`
`32`		- className={`w-full h-full flex items-start justify-start text-lg leading-6 overflow-y-auto scrollbar-hide flex-nowrap ${
	`32`	+ className={`w-full h-full flex items-start justify-start text-base leading-5 overflow-y-auto scrollbar-hide flex-nowrap ${
`33`	`33`	`isThemeLight ? "text-black" : "text-gray-300"`
`34`	`34`	}`}
`35`	`35`	`>`