Skills fullscreen, update CV

Author: adamplesnik

src/content/AboutMe.tsx

@@ -4,21 +4,22 @@ import TimelineItem from '@/components/TimelineItem'
 
 const AboutMe = () => {
   return (
-    <div
-      className="flex min-h-svh flex-col gap-1 p-6 px-6 pb-12 pt-20 sm:p-8 sm:px-8 sm:pt-20 md:p-12 md:px-12 md:pt-20 lg:flex-row"
-      id="cv"
-    >
-      <div className="bg-[#FEC84B] p-4 sm:p-8 md:flex-1 dark:bg-[#5a574e]">
-        <Heading size={2} className="lg:pt-3">
-          CV
-        </Heading>
+    <div className="flex min-h-svh flex-col gap-1 lg:flex-row">
+      <div className="bg-[#FEC84B] p-6 sm:p-8 md:flex-1 md:p-12 dark:bg-[#5a574e]">
+        <Heading size={2}>CV</Heading>
         <Paragraph className="mb-6 mt-8">
-          Lot of quality time with my family—or alone if needed; preferably in nature, mountain
-          biking, traveling, or just around town.
+          I spend quality time with my family—or alone when needed—preferably in nature, mountain
+          biking, traveling, or exploring around town.
+        </Paragraph>
+        <Paragraph className="mb-6">
+          I enjoy photography, playing piano as a hobby, and reading.
+        </Paragraph>
+        <Paragraph>
+          On the tech side, I'm proficient in Figma and code with React, using Tailwind CSS,
+          TSX/HTML, or pure CSS.
         </Paragraph>
-        <Paragraph>I shoot photos, play (hobby) piano, and I love to read.</Paragraph>
       </div>
-      <div className="bg-[#FEC84B] p-4 sm:p-8 md:flex-[2] dark:bg-[#5a574e]">
+      <div className="bg-[#FEC84B] p-6 sm:p-8 md:flex-[2] dark:bg-[#5a574e]">
         <div className="flex flex-col gap-2">
           <TimelineItem year={'A long time ago'} desc="Han shot first!" className="mb-72" right />
           <TimelineItem year={1985} desc="Born" className="mb-12" />

src/content/Skills.tsx

@@ -4,25 +4,25 @@ import Paragraph from '@/components/Paragraph'
 const Skills = () => {
   return (
     <div
-      className="flex min-h-svh w-full flex-col items-stretch gap-1 p-6 pt-20 sm:p-8 sm:pt-20 md:p-12 md:pt-20 lg:flex-row"
+      className="flex min-h-svh w-full flex-col items-stretch gap-1 pt-20 lg:flex-row"
       id="skills"
     >
-      <div className="flex flex-1 items-end bg-[#E3BFD6] p-8 dark:bg-[#513446]">
+      <div className="flex flex-1 items-end bg-[#e9cde8] p-6 sm:p-8 md:p-12 dark:bg-[#513446]">
         <Heading size={2}>Skills</Heading>
       </div>
-      <div className="flex-1 bg-[#E3BFD6] p-8 dark:bg-[#513446]">
+      <div className="flex-1 bg-[#e9cde8] p-6 sm:p-8 md:p-12 dark:bg-[#513446]">
         <Paragraph>
           I like to paint the large picture first—mapping user journeys and prototyping
           wireframes—before diving into the designs.
         </Paragraph>
       </div>
-      <div className="flex flex-1 items-end bg-[#E3BFD6] p-8 dark:bg-[#513446]">
+      <div className="flex flex-1 items-end bg-[#e9cde8] p-6 sm:p-8 md:p-12 dark:bg-[#513446]">
         <Paragraph>
           Once the user experience and flow are sorted, I do my best to create clean layouts with
           strong typography, thoughtful colors, and visual clarity.
         </Paragraph>
       </div>
-      <div className="group flex flex-1 items-center bg-[#E3BFD6] p-8 transition-all duration-1000 ease-in-out lg:hover:flex-[2] dark:bg-[#513446]">
+      <div className="group flex flex-1 items-center bg-[#e9cde8] p-6 transition-all duration-1000 ease-in-out sm:p-8 md:p-12 lg:hover:flex-[2] dark:bg-[#513446]">
         <Paragraph>And a touch of playfulness.</Paragraph>
       </div>
     </div>

src/pages/Home.tsx

@@ -36,6 +36,7 @@ const Home = () => {
       <WorkComparator />
       <WorkAndy />
       <WorkPhoto />
+      <div id="cv" className="relative top-[7rem]" />
       <AboutMe />
       <Footer />
     </div>