converted images to web size, optimized for mobile

nmacdon3 · Jan 21, 2023 · 1ffe009 · 1ffe009
1 parent 5afdd04
commit 1ffe009
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 8 deletions.
diff --git a/src/assets/brighter.png b/src/assets/brighter.png
diff --git a/src/assets/brighter.webp b/src/assets/brighter.webp
diff --git a/src/assets/cover.png b/src/assets/cover.png
diff --git a/src/assets/cover.webp b/src/assets/cover.webp
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,21 +1,21 @@
 import { HiPlus } from 'react-icons/hi';
 
-import PROFILE_PIC from '~/assets/brighter.png';
-import COVER_PIC from '~/assets/cover.png';
+import PROFILE_PIC from '~/assets/brighter.webp';
+import COVER_PIC from '~/assets/cover.webp';
 
 const Header = () => {
   return (
     <header className="flex items-start  shrink-0 pt-6">
-      <img src={COVER_PIC} className=" object-cover absolute top-0 left-0 h-28 w-full " />
+      <img src={COVER_PIC} className=" object-cover absolute top-0 left-0 sm:h-28 w-full " />
       <img
-        className="rounded-full ring-4 ring-white h-16 w-16 sm:h-16 sm:w-16 z-20 relative object-cover mr-8"
+        className="rounded-full ring-2 ring-white h-14 w-14 sm:h-16 sm:w-16 z-20 relative object-cover mr-8"
         src={PROFILE_PIC}
       />
       <div>
         <h1 className="text-2xl sm:text-4xl font-thin relative tracking-wide  font-serif text-white ">
           <span className="font-sans">Nathan</span> MacDonald
         </h1>
-        <div className="flex items-center font-thin flex-wrap text-md sm:text-lg relative text-white/70">
+        <div className="flex items-center sm:font-thin flex-wrap text-sm sm:text-lg relative text-white/70">
           Lead Frontend Developer
           <HiPlus className="mx-2 h-3 w-3" /> Lead UX Designer
         </div>

diff --git a/src/components/Resume.tsx b/src/components/Resume.tsx
@@ -9,12 +9,12 @@ const Resume = () => {
   return (
     <div className="h-auto sm:h-[56rem] w-[43rem] bg-white relative px-10 shadow-2xl sm:overflow-hidden overflow-scroll flex flex-col sm:rounded-lg">
       <Header />
-      <div className="flex sm:space-x-16 mt-20 sm:mt-10  flex-grow flex-wrap  ">
+      <div className="flex sm:space-x-16 mt-12 sm:mt-10  flex-grow flex-wrap  ">
         <section className="w-full sm:w-[24rem] ">
           <About />
           <Experience />
         </section>
-        <aside className=" sm:mt-8  space-x-6 sm:space-x-0 sm:w-40 flex sm:flex-col px-2 sm:px-0">
+        <aside className=" sm:mt-8  space-x-12 sm:space-x-0 sm:w-40 flex sm:flex-col px-2 sm:px-0">
           <Skills />
           <Education />
         </aside>

diff --git a/src/components/Section.tsx b/src/components/Section.tsx
@@ -1,4 +1,6 @@
-const Section = ({ title, children }: { title: string; children: React.ReactNode }) => {
+import { ReactNode } from 'react';
+
+const Section = ({ title, children }: { title: string; children: ReactNode }) => {
   return (
     <div className="mb-6">
       <h3 className="tracking-widest text-md font-medium mb-2 uppercase">{title}</h3>