added new logo

components/Images/Logo.tsx

@@ -1,29 +1,20 @@
 const Logo = (props) => (
-    <svg
+    <svg width="100%" height="100%" viewBox="0 0 1080 1080" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" xmlSpace="preserve" fillRule="evenodd" clipRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" {...props}>
-        width="100%"
+        <g>
-        height="100%"
+            <g transform="matrix(2.37095,0,0,2.37095,-437.8,-886.233)">
-        viewBox="0 0 1080 1080"
+                <g transform="matrix(-1,-1.22465e-16,1.22465e-16,-1,563.619,1290.65)">
-        version="1.1"
+                    <path d="M333.908,553.8L378.967,643.918L288.85,643.918L333.908,553.8Z" fill="rgb(235,235,235)"/>
-        xmlns="http://www.w3.org/2000/svg"
+                </g>
-        xmlnsXlink="http://www.w3.org/1999/xlink"
+                <path d="M410.08,466.234L475.099,466.234L339.788,736.855L274.769,736.855L410.08,466.234Z" fill="rgb(235,235,235)"/>
-        xmlSpace="preserve"
+            </g>
-        fillRule='evenodd'
+            <g transform="matrix(-2.37095,0,0,2.37095,1624.63,-886.233)">
-        clipRule='evenodd'
+                <g transform="matrix(1,0,0,1,-59.1395,92.9335)">
-        strokeLinejoin='round'
+                    <path d="M333.908,553.8L378.967,643.918L288.85,643.918L333.908,553.8Z" fill="rgb(235,235,235)"/>
-        strokeMiterlimit='2'
+                </g>
-        {...props}
+                <g transform="matrix(-1,0,0,1,749.868,0)">
-    >
+                    <path d="M410.08,466.234L475.099,466.234L339.788,736.855L274.769,736.855L410.08,466.234Z" fill="rgb(235,235,235)"/>
-        <g transform="matrix(1.87667,0,0,1.87667,-211.69,-370.379)">
+                </g>
-            <path d="M330.006,585.343L506.715,408.388C513.207,401.887 513.2,391.339 506.699,384.847C500.198,378.355 489.65,378.363 483.158,384.863L306.448,561.819C299.956,568.32 299.964,578.868 306.465,585.36C312.965,591.852 323.514,591.844 330.006,585.343Z" fill="white" />
+            </g>
-        </g>
-        <g transform="matrix(1.87667,0,0,1.87667,-45.877,-370.379)">
-            <path d="M330.006,585.343L506.715,408.388C513.207,401.887 513.2,391.339 506.699,384.847C500.198,378.355 489.65,378.363 483.158,384.863L306.448,561.819C299.956,568.32 299.964,578.868 306.465,585.36C312.965,591.852 323.514,591.844 330.006,585.343Z" fill="white" />
-        </g>
-        <g transform="matrix(1.87667,0,0,1.87667,119.936,-370.379)">
-            <path d="M330.006,585.343L506.715,408.388C513.207,401.887 513.2,391.339 506.699,384.847C500.198,378.355 489.65,378.363 483.158,384.863L306.448,561.819C299.956,568.32 299.964,578.868 306.465,585.36C312.965,591.852 323.514,591.844 330.006,585.343Z" fill="white" />
-        </g>
-        <g transform="matrix(1.87667,0,0,1.87667,-473.399,-473.402)">
-            <path d="M362.424,611.832L534.257,439.76C540.749,433.259 551.297,433.252 557.798,439.744C564.299,446.235 564.306,456.784 557.815,463.285L381.105,640.24C379.514,641.833 377.679,643.037 375.72,643.85L375.686,643.864C373.726,644.676 371.578,645.124 369.326,645.124L268.899,645.124C259.712,645.124 252.253,637.665 252.253,628.478C252.253,619.29 259.712,611.832 268.899,611.832L362.424,611.832Z" fill="white" />
         </g>
     </svg>
 )

pages/_app.tsx

@@ -26,13 +26,13 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   return <>
     <div id='app'>
-      <main className="bg-black w-full h-full min-h-screen">
+      <main className="w-full h-full min-h-screen bg-black">
         <DefaultSeo {...SEO}/>
         <Component {...pageProps} />
         <Footer />
       </main>
       <style jsx global>{`
-        html, body {
+        html {
           scroll-behavior: smooth;
         }
       `}</style>

pages/index.tsx

@@ -13,6 +13,45 @@ import Skills from '../components/Skills';
 import Projects from '../components/Projects';
 import useOnScreen from '../util/hooks/useOnScreen';
 
+const Graphics = [
+  {
+    name: 'Personal Logo',
+    src: '/img/designs/NewPersonalLogo.png',
+  },
+  {
+    name: 'Old Personal Logo',
+    src: '/img/designs/PersonalLogo.png',
+  },
+  {
+    name: 'Demo App Icon',
+    src: '/img/designs/AppIcon.png',
+  },
+  {
+    name: 'Stryx Logo',
+    src: '/img/designs/Stryx.png',
+  },
+  {
+    name: 'Isometric Building',
+    src: '/img/designs/IsometricBuilding.png',
+  },
+  {
+    name: 'AmusedGrape Icon',
+    src: '/img/designs/Grape.png',
+  },
+  {
+    name: 'New Stryx Icon',
+    src: '/img/designs/StryxNew.png',
+  },
+  {
+    name: 'Nyxx Logo',
+    src: '/img/designs/Nyxx.png',
+  },
+  {
+    name: 'Lunar Design Logo',
+    src: '/img/designs/LunarDesign.png',
+  },
+];
+
 const IndexPage = () => {
   const [timeString, setTimeString] = useState(
     (new Date().getHours() < 12 ? 'Morning' : (new Date().getHours() >= 12 && new Date().getHours() <= 17 ? 'Afternoon' : (new Date().getHours() >= 17 && new Date().getHours() <= 24 ? 'Evening' : 'Morning')))
@@ -62,22 +101,22 @@ const IndexPage = () => {
         { view: 'Graphics', viewing: viewingGraphics },
         { view: 'Contact', viewing: viewingContact },
       ]} />
-      <header className="flex flex-wrap flex-col overflow-hidden space-y-2 lg:px-36 items-center justify-center h-screen w-full" ref={homeRef}>
+      <header className="flex flex-col flex-wrap items-center justify-center w-full h-screen space-y-2 overflow-hidden lg:px-36" ref={homeRef}>
-        <div className="my-3 px-3 w-full text-center">
+        <div className="w-full px-3 my-3 text-center">
-          <h1 className="text-white font-extrabold md:text-6xl text-3xl">Good <span>{timeString}</span>! I&apos;m <span>Jack Merrill</span>.</h1>
+          <h1 className="text-3xl font-extrabold text-white md:text-6xl">Good <span>{timeString}</span>! I&apos;m <span>Jack Merrill</span>.</h1>
         </div>
-        <div className="my-3 px-3 w-full text-center">
+        <div className="w-full px-3 my-3 text-center">
-          <h2 className="text-white font-bold md:text-4xl text-2xl">A {calculateAge()} year old Graphic and UI Designer and Fullstack Developer from the Windy City.</h2>
+          <h2 className="text-2xl font-bold text-white md:text-4xl">A {calculateAge()} year old Graphic and UI Designer and Fullstack Developer from the Windy City.</h2>
         </div>
-        <div className="inline-flex flex-wrap md:space-y-0 space-y-4 pt-4 items-center justify-center content-center md:space-x-4 my-3 px-3 w-full text-center">
+        <div className="inline-flex flex-wrap items-center content-center justify-center w-full px-3 pt-4 my-3 space-y-4 text-center md:space-y-0 md:space-x-4">
           <Link href="#projects">
-            <a className="border-white border hover:bg-white hover:text-black transition duration-150 px-4 py-2 rounded-xl font-bold text-white md:w-1/6 w-full truncate">
+            <a className="w-full px-4 py-2 font-bold text-white truncate transition duration-150 border border-white hover:bg-white hover:text-black rounded-xl md:w-1/6">
               See my Work
             </a>
           </Link>
-          <span className="text-sm font-light text-white md:block hidden">or</span>
+          <span className="hidden text-sm font-light text-white md:block">or</span>
           <Link href="mailto:me@jackmerrill.com">
-            <a className="border-white border hover:bg-white hover:text-black transition duration-150 px-4 py-2 rounded-xl font-bold text-white md:w-1/6 w-full">
+            <a className="w-full px-4 py-2 font-bold text-white transition duration-150 border border-white hover:bg-white hover:text-black rounded-xl md:w-1/6">
               Contact Me
             </a>
           </Link>
@@ -90,82 +129,52 @@ const IndexPage = () => {
         <Projects />
       </div>
       
-      <div id='graphics' className='flex flex-wrap justify-center px-12 lg:px-64 pt-24 space-y-3' ref={graphicsRef}>
+      <div id='graphics' className='flex flex-wrap justify-center px-12 pt-24 space-y-3 lg:px-64' ref={graphicsRef}>
-        <h1 className='w-full font-bold text-white text-center text-3xl'>My Designs</h1>
+        <h1 className='w-full text-3xl font-bold text-center text-white'>My Designs</h1>
-        <p className='w-full font-semibold text-white text-center text-xl'>Here are a few designs I&apos;ve made!</p>
+        <p className='w-full text-xl font-semibold text-center text-white'>Here are a few designs I&apos;ve made!</p>
-        <div className="flex flex-wrap w-full -mx-1 overflow-hidden justify-center">
+        <div className="flex flex-wrap justify-center w-full -mx-1 overflow-hidden">
           <div className="flex flex-wrap -mx-3 overflow-hidden">
-            <div className="my-3 px-3 w-1/2 md:w-1/3 overflow-hidden">
+            {Graphics.map((gfx) => (
-              <Image alt='Personal Logo' width='1080px' height='1080px' src='/img/designs/PersonalLogo.png' className='rounded-xl' />
+              <div className="w-1/2 px-3 my-3 overflow-hidden md:w-1/3">
-            </div>
+                <Image alt={gfx.name} width='1080px' height='1080px' src={gfx.src} className='rounded-xl' />
-
+              </div>
-            <div className="my-3 px-3 w-1/2 md:w-1/3 overflow-hidden">
+            ))}
-              <Image alt='Demo App Icon' width='1080px' height='1080px' src='/img/designs/AppIcon.png' className='rounded-xl' />
-            </div>
-
-            <div className="my-3 px-3 w-1/2 md:w-1/3 overflow-hidden">
-              <Image alt='Stryx Logo' width='1080px' height='1080px' src='/img/designs/Stryx.png' className='rounded-xl' />
-            </div>
-
-            <div className="my-3 px-3 w-1/2 md:w-1/3 overflow-hidden">
-              <Image alt='Comet Design' width='1080px' height='1080px' src='/img/designs/Comet.png' className='rounded-xl bg-gray-600' />
-            </div>
-
-            <div className="my-3 px-3 w-1/2 md:w-1/3 overflow-hidden">
-              <Image alt='Isometric Building Design' width='1080px' height='1080px' src='/img/designs/IsometricBuilding.png' className='rounded-xl' />
-            </div>
-
-            <div className="my-3 px-3 w-1/2 md:w-1/3 overflow-hidden">
-              <Image alt='Grape Logo' width='1080px' height='1080px' src='/img/designs/Grape.png' className='rounded-xl' />
-            </div>
-
-            <div className="my-3 px-3 w-1/2 md:w-1/3 overflow-hidden">
-              <Image alt='New Stryx Logo' width='1080px' height='1080px' src='/img/designs/StryxNew.png' className='rounded-xl' />
-            </div>
-            
-            <div className="my-3 px-3 w-1/2 md:w-1/3 overflow-hidden">
-              <Image alt='Nyxx Logo' width='1080px' height='1080px' src='/img/designs/Nyxx.png' className='rounded-xl' />
-            </div>
-            
-            <div className="my-3 px-3 w-1/2 md:w-1/3 overflow-hidden">
-              <Image alt='Lunar Design Logo' width='1080px' height='1080px' src='/img/designs/LunarDesign.png' className='rounded-xl' />
-            </div>
           </div>
         </div>
       </div>
 
       <div id='contact' className='flex flex-wrap justify-center p-12 space-y-4' ref={contactRef}>
-        <h1 className='text-white font-bold text-3xl'>Want to contact me?</h1>
+        <h1 className='text-3xl font-bold text-white'>Want to contact me?</h1>
-        <div className='flex align-middle justify-center w-full'>
+        <div className='flex justify-center w-full align-middle'>
           <a
             href='https://github.com/jackmerrill'
             target='_blank'
-            className='flex justify-center items-center px-10 py-4 w-11/12 lg:w-1/4 bg-github rounded-xl text-white font-bold text-xl'
+            className='flex items-center justify-center w-11/12 px-10 py-4 text-xl font-bold text-white lg:w-1/4 bg-github rounded-xl'
             rel='noreferrer'
           >
-            <GitHubIcon className='text-white h-6 w-6 mr-3'/>
+            <GitHubIcon className='w-6 h-6 mr-3 text-white'/>
             GitHub Profile
           </a>
         </div>
-        <div className='flex align-middle justify-center w-full'>
+        <div className='flex justify-center w-full align-middle'>
           <a
             href='mailto:me@jackmerrill.com'
             target='_blank'
-            className='flex justify-center items-center px-10 py-4 w-11/12 lg:w-1/4 bg-gray-900 rounded-xl text-white font-bold text-xl'
+            className='flex items-center justify-center w-11/12 px-10 py-4 text-xl font-bold text-white bg-gray-900 lg:w-1/4 rounded-xl'
             rel='noreferrer'
           >
-            <MailIcon className='text-white h-6 w-6 mr-3'/>
+            <MailIcon className='w-6 h-6 mr-3 text-white'/>
             Email
           </a>
         </div>
-        <div className='flex align-middle justify-center w-full'>
+        <div className='flex justify-center w-full align-middle'>
           <a
             href='https://twitter.com/jack__merrill'
             target='_blank'
-            className='flex justify-center items-center px-10 py-4 w-11/12 lg:w-1/4 bg-twitter rounded-xl text-white font-bold text-xl'
+            className='flex items-center justify-center w-11/12 px-10 py-4 text-xl font-bold text-white lg:w-1/4 bg-twitter rounded-xl'
             rel='noreferrer'
           >
-            <TwitterIcon className='text-white h-6 w-6 mr-3'/>
+            <TwitterIcon className='w-6 h-6 mr-3 text-white'/>
             Twitter
           </a>
         </div>