From e945704c4691da4a7e764b531095512702e7d8db Mon Sep 17 00:00:00 2001
From: Saahil <neon@saahild.com>
Date: Fri, 28 Jun 2024 23:44:15 -0400
Subject: [PATCH] Fix Mobile UI for AboutPage

---
 src/components/AboutPage/SkillSet.tsx | 108 +++++++++++++-------------
 src/components/AboutPage/index.tsx    |  12 +--
 src/components/AboutPage/skillset.css |   4 +-
 3 files changed, 63 insertions(+), 61 deletions(-)

diff --git a/src/components/AboutPage/SkillSet.tsx b/src/components/AboutPage/SkillSet.tsx
index c448411f..bacc42ff 100644
--- a/src/components/AboutPage/SkillSet.tsx
+++ b/src/components/AboutPage/SkillSet.tsx
@@ -6,40 +6,40 @@ import './skillset.css'
 import { SiKalilinux, SiPostman } from 'react-icons/si'
 import { mdiArch, mdiConsole, mdiLinux, mdiUbuntu } from '@mdi/js'
 export function SkillSet () {
-  return<div className='text-center place-items-center items-center'>
+  return<div className='items-center text-center place-items-center'>
   <h1 className='project-heading'>
   Professional <strong className='texthighlight'>Skillset </strong>
   </h1>
- <div className='flex grid inline-flex' >
- <div style={{  }} className='flex-1 content-center ms-auto me-auto'> 
+ <div className='flex inline-flex grid ' >
+ <div style={{  }} className='flex-1 max-w-5xl text-center min-w-sm ms-auto me-auto'> 
   <div className='inline-flex'>
- <div className={"tech-icons inline-flex"}><Icon icon='css' className='w-20 p-2' width={2000} height={2000}/></div>
-  <div className={"tech-icons inline-flex"}><Icon icon='javascript' className='w-20 p-2' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon='typescript' className='w-20 p-2' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={next} className='w-20 p-2' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={npm} className='w-20 p-2' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={prisma} className='w-20 p-2' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={puppeteer} className='w-20 p-2' /></div>
+ <div className={"tech-icons inline-flex"}><Icon icon='css' className='w-40' width={2000} height={2000}/></div>
+  <div className={"tech-icons inline-flex"}><Icon icon='javascript' className='w-40' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon='typescript' className='w-40' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon={next} className='w-40' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon={npm} className='w-40' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon={prisma} className='w-40' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon={puppeteer} className='w-40' /></div>
   </div>
   <div className='inline-flex'>
-  <div className={"tech-icons inline-flex"}><Icon icon={sass} className='w-20 p-2' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={tailwind} className='w-20 p-2' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={bash} className='w-20 p-2' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={bun} className='w-20 p-2' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={cpp} className='w-20 p-2' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={docker} className='w-20 p-2' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={graphql} className='w-20 p-2' /></div>  
+  <div className={"tech-icons inline-flex"}><Icon icon={sass} className='w-40' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon={tailwind} className='w-40' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon={bash} className='w-40' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon={bun} className='w-40' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon={cpp} className='w-40' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon={docker} className='w-40' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon={graphql} className='w-40' /></div>  
   </div>
   <div className='inline-flex'>
-  <div className={"tech-icons inline-flex"}><Icon icon={html} className='w-20 p-2' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={javascriptReact} className='w-20 p-2' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={python} className='w-20 p-2' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={csharp} className='w-20 p-2' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon={html} className='w-40' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon={javascriptReact} className='w-40' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon={python} className='w-40' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon={csharp} className='w-40' /></div>
   {/* for the sake of css coffeescript is out! */}
-  {/* <div className={"tech-icons inline-flex"}><Icon icon={coffeescript} className='w-20 p-2' /></div> */}
-  <div className={"tech-icons inline-flex"}><Icon icon={yarn} className='w-20 p-2' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={ejs} className='w-20 p-2' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={pnpm} className='w-20 p-2' /></div>
+  {/* <div className={"tech-icons inline-flex"}><Icon icon={coffeescript} className='w-40' /></div> */}
+  <div className={"tech-icons inline-flex"}><Icon icon={yarn} className='w-40' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon={ejs} className='w-40' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon={pnpm} className='w-40' /></div>
   </div>
   {/* 
   
@@ -48,51 +48,51 @@ export function SkillSet () {
   </div>
   {/* <br />
   <div style={{  justifyContent: 'center', textAlign: 'center', alignItems: "center", marginLeft: '50px', paddingBottom: '50px' }} className='inline-flex'> 
-  <div className={"tech-icons inline-flex"}><Icon icon={tailwind} className='w-20 p-2' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon={tailwind} className='w-40' /></div>
   </div> */}
 </div>
   </div>
   
 }
 export function TechStack () {
-  return<div className='text-center place-items-center items-center'>
+  return<div className='items-center text-center place-items-center'>
   <h1 className='project-heading'>
   <strong className='text-highlight'>Tools</strong> I use
   </h1>
- <div className='flex grid inline-flex' >
- <div style={{  }} className='flex-1 content-center ms-auto me-auto'> 
-  <div className='inline-flex'>
- <div className={"tech-icons inline-flex"}><Icon icon={vscode} className='w-20 p-2' width={2000} height={2000}/></div>
- <div className={"tech-icons inline-flex"}><Icon icon={git} className='w-20 p-2' width={2000} height={2000}/></div>
- <div className={"tech-icons inline-flex"}><Icon icon={docker} className='w-20 p-2' width={2000} height={2000}/></div>
- <div className={"tech-icons inline-flex"}><Icon icon={figma} className='w-20 p-2' width={2000} height={2000}/></div>
- <div className={"tech-icons inline-flex"}><Icon icon={robots} className='w-20 p-2' width={2000} height={2000}/></div>
- <div className={"tech-icons inline-flex"}><Icon icon={vercel} className='w-20 p-2' width={2000} height={2000}/></div>
- <div className={"tech-icons inline-flex"}><Icon icon={visualStudio} className='w-20 p-2' width={2000} height={2000}/></div>
-  {/* <div className={"tech-icons inline-flex"}><Icon icon=' className='w-20 p-2' /></div> */}
+ <div className='flex inline-flex grid' >
+ <div style={{  }} className='content-center flex-1 max-w-5xl ms-auto me-auto min-w-sm'> 
+  <div className='inline-flex max-w-5xl min-w-sm'>
+ <div className={"tech-icons inline-flex"}><Icon icon={vscode} className='w-40' width={2000} height={2000}/></div>
+ <div className={"tech-icons inline-flex"}><Icon icon={git} className='w-40' width={2000} height={2000}/></div>
+ <div className={"tech-icons inline-flex"}><Icon icon={docker} className='w-40' width={2000} height={2000}/></div>
+ <div className={"tech-icons inline-flex"}><Icon icon={figma} className='w-40' width={2000} height={2000}/></div>
+ <div className={"tech-icons inline-flex"}><Icon icon={robots} className='w-40' width={2000} height={2000}/></div>
+ <div className={"tech-icons inline-flex"}><Icon icon={vercel} className='w-40' width={2000} height={2000}/></div>
+ <div className={"tech-icons inline-flex"}><Icon icon={visualStudio} className='w-40' width={2000} height={2000}/></div>
+  {/* <div className={"tech-icons inline-flex"}><Icon icon=' className='w-40' /></div> */}
   </div>
   <br />
   <div className='inline-flex'>
- {/* <div className={"tech-icons inline-flex"}><Icon icon={figma} className='w-20 p-2' width={2000} height={2000}/></div> */}
- <div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiLinux} size={2} className='w-full m-5' /></div>
- <div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiConsole} size={2} className='w-full m-5' /></div>
- <div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiUbuntu} size={2} className='w-full m-5' /></div>
- <div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiArch} size={2} className='w-full m-5' /></div>
+ {/* <div className={"tech-icons inline-flex"}><Icon icon={figma} className='w-40' width={2000} height={2000}/></div> */}
+ <div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiLinux} size={2}  className='m-0 md:m-5 lg:w-full' /></div>
+ <div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiConsole} size={2} className='m-0 md:m-5 lg:w-full' /></div>
+ <div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiUbuntu} size={2} className='m-0 md:m-5 lg:w-full' /></div>
+ <div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiArch} size={2} className='m-0 md:m-5 lg:w-full' /></div>
  <div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><SiPostman /></div>
  <div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}> <SiKalilinux /></div>
  {/* <div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiKaliLinux} size={2} className='w-full m-5' /></div> */}
   
   </div>
   {/* <div className='inline-flex'>
-  <div className={"tech-icons inline-flex"}><Icon icon={html} className='w-20 p-2' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={javascriptReact} className='w-20 p-2' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={python} className='w-20 p-2' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={csharp} className='w-20 p-2' /></div> */}
+  <div className={"tech-icons inline-flex"}><Icon icon={html} className='w-40' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon={javascriptReact} className='w-40' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon={python} className='w-40' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon={csharp} className='w-40' /></div> */}
   {/* for the sake of css coffeescript is out! */}
-  {/* <div className={"tech-icons inline-flex"}><Icon icon={coffeescript} className='w-20 p-2' /></div> */}
-  {/* <div className={"tech-icons inline-flex"}><Icon icon={yarn} className='w-20 p-2' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={ejs} className='w-20 p-2' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={pnpm} className='w-20 p-2' /></div>
+  {/* <div className={"tech-icons inline-flex"}><Icon icon={coffeescript} className='w-40' /></div> */}
+  {/* <div className={"tech-icons inline-flex"}><Icon icon={yarn} className='w-40' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon={ejs} className='w-40' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon={pnpm} className='w-40' /></div>
   </div> */}
   {/* 
   
@@ -101,14 +101,14 @@ export function TechStack () {
   </div>
   {/* <br />
   <div style={{  justifyContent: 'center', textAlign: 'center', alignItems: "center", marginLeft: '50px', paddingBottom: '50px' }} className='inline-flex'> 
-  <div className={"tech-icons inline-flex"}><Icon icon={tailwind} className='w-20 p-2' /></div>
+  <div className={"tech-icons inline-flex"}><Icon icon={tailwind} className='w-40' /></div>
   </div> */}
 </div>
   </div>
   
 }
 export default function() {
-  return <>
+  return <div className='-mt-20'>
   <SkillSet />
-  <TechStack /></>
+  <TechStack /></div>
 }
\ No newline at end of file
diff --git a/src/components/AboutPage/index.tsx b/src/components/AboutPage/index.tsx
index 726acb88..c4b22438 100644
--- a/src/components/AboutPage/index.tsx
+++ b/src/components/AboutPage/index.tsx
@@ -2,16 +2,16 @@ import { mdiBullet } from '@mdi/js'
 import Icon from '@mdi/react'
 
 export default function AboutPage () {
-  return <div className={'hero min-h-screen'}>
+  return <div className={'hero min-h-screen md:ml-0 ml-2'}>
     <div className='container'>
-      <h1 className='font-bold text-3xl'>
+      <h1 className='text-3xl font-bold'>
 Some info about <span className='text-highlight'>me</span>
       </h1>
       <div>
-        <blockquote className='blockquote mb-0'>
+        <blockquote className='mb-0 blockquote'>
           <p style={{ textAlign: 'justify' }}>
             Hi Everyone, I am{' '}
-            <span className='text-highlight  '>Saahil dutta, </span>
+            <span className='text-highlight '>Saahil dutta, </span>
             from <span className='text-highlight '> USA </span>
             <br />I am a 9th grader in KCD.
             <br />
@@ -34,10 +34,10 @@ Some info about <span className='text-highlight'>me</span>
           </ul>
 
           <blockquote className='ml-10 text-xl italic font-semibold text-gray-900 dark:text-white' style={{ color: 'var(--text)'}}>
-            <svg className='w-8 h-8 text-gray-400 dark:text-gray-600 mb-4' xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 18 14'>
+            <svg className='w-8 h-8 mb-4 text-gray-400 dark:text-gray-600' xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 18 14'>
               <path d='M6 0H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3H2a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Zm10 0h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3h-1a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Z' />
             </svg>
-            <p className='ml-5 hover:text-fuchsia-600 ease-linear duration-700 text-fuchsia-500 first-letter:font-2xl'>
+            <p className='ml-5 duration-700 ease-linear hover:text-fuchsia-600 text-fuchsia-500 first-letter:font-2xl'>
             "It has become appallingly obvious that our technology has exceeded
             our humanity."{' '}
             </p>
diff --git a/src/components/AboutPage/skillset.css b/src/components/AboutPage/skillset.css
index 723bcbc6..8a657f89 100644
--- a/src/components/AboutPage/skillset.css
+++ b/src/components/AboutPage/skillset.css
@@ -17,7 +17,9 @@
   
   @media (max-width: 767px) {
     .tech-icons {
-      margin: 10px !important;
+      margin: 5px !important;
+      padding: 5px !important;
+      font-size: 2.5em !important;
     }
   }