feat: a lot of stuff

.breakpoints

@@ -3,15 +3,37 @@
     "components/Navbar.tsx": [
       {
         "id": "5aa0d634-c476-4ab2-9957-d364b66311b2",
-        "line": 2,
-        "version": 15,
-        "index": 39
+        "line": 4,
+        "version": 883,
+        "index": 217
       },
       {
         "id": "01e112b0-3705-4b70-bf88-5b2716dd492d",
-        "line": 64,
-        "version": 35,
-        "index": 2597
+        "line": 77,
+        "version": 883,
+        "index": 2943
+      }
+    ],
+    "components/Projects.tsx": [
+      {
+        "id": "f1084f0b-cb32-4b05-b4a3-02d058b717b2",
+        "line": 9,
+        "version": 205,
+        "index": 299
+      }
+    ],
+    "pages/index.tsx": [
+      {
+        "id": "91f8cc38-eb3c-426c-ba37-749bb88281ac",
+        "line": 89,
+        "version": 1001,
+        "index": 3811
+      },
+      {
+        "id": "d3363946-0aa7-43f5-b2ee-bc23387ea7a5",
+        "line": 13,
+        "version": 930,
+        "index": 519
       }
     ]
   }

components/Navbar.tsx

@@ -7,13 +7,13 @@ import Logo from '../components/Images/Logo';
 
 const navigation = [
   { name: 'Home', href: '#', current: true },
-  { name: 'About', href: '#', current: false },
-  { name: 'Projects', href: '#', current: false },
-  { name: 'Graphics', href: '#', current: false },
-  { name: 'Contact', href: '#', current: false },
+  { name: 'About', href: '#about', current: false },
+  { name: 'Projects', href: '#projects', current: false },
+  { name: 'Graphics', href: '#graphics', current: false },
+  { name: 'Contact', href: '#contact', current: false },
 ];
 
-function classNames(...classes) {
+function classNames(...classes: any[]) {
   return classes.filter(Boolean).join(' ')
 }
 
@@ -35,7 +35,9 @@ const Navbar = ({ views }: { views: { view: string, viewing: boolean }[] }) => {
 
             const currentlyViewing = views.find((view) => view.viewing === true)
             navigation.forEach((nav) => nav.current = false)
-            navigation.find((nav) => nav.name === currentlyViewing.view).current = true
+            if (currentlyViewing) {
+              navigation.find((nav) => nav.name === currentlyViewing.view).current = true
+            }
         })
     })
 
@@ -43,7 +45,6 @@ const Navbar = ({ views }: { views: { view: string, viewing: boolean }[] }) => {
     <Disclosure as="nav" className={`fixed w-full z-50 bg-gray-800 ${atTop ? '' : 'shadow-lg'}`}>
       {({ open }) => (
         <>
-        <p>{views}</p>
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div className="flex items-center justify-between h-16">
               <div className="flex items-center">
@@ -56,6 +57,10 @@ const Navbar = ({ views }: { views: { view: string, viewing: boolean }[] }) => {
                       <a
                         key={item.name}
                         href={item.href}
+                        id={item.name + item.href}
+                        onClick={(e) => {
+                          document.getElementById(item.name + item.href).dispatchEvent(new CustomEvent('scroll'));
+                        }}
                         className={classNames(
                           item.current
                             ? 'bg-gray-900 text-white'

components/Projects.tsx

@@ -0,0 +1,73 @@
+const projects = [
+  {
+    title: 'Lunar Design',
+    href: 'https://github.com/DesignByLunar',
+    category: { name: 'Organization', color: 'bg-indigo-100 text-indigo-800' },
+    description:
+      'American counterpart of the French-American duo making software that\'s out of this world.',
+  },
+  {
+    title: 'BlueJay',
+    href: 'https://bluejay.one',
+    category: { name: 'SaaS', color: 'bg-blue-100 text-blue-800' },
+    description:
+      'Amazing Ro-Tech solutions for everyone, completely free.',
+  },
+  {
+    title: 'Snacc.chat',
+    href: 'https://snacc.chat',
+    category: { name: 'CodeDay', color: 'bg-red-100 text-red-800' },
+    description:
+      'Amazing Ro-Tech solutions for everyone, completely free.',
+  },
+]
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export default function Projects() {
+  return (
+    <div className="text-white pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
+      <div className="relative max-w-lg mx-auto divide-y-2 divide-gray-200 lg:max-w-7xl">
+        <div className="space-y-4">
+          <h2 className="text-3xl tracking-tight font-extrabold text-gray-50 sm:text-4xl">Recent projects</h2>
+          <p className="mt-3 text-xl text-gray-200 sm:mt-4">
+            Here&apos;s what I&apos;ve been working on!
+          </p>
+          <h2 className="text-2xl tracking-tight font-bold text-gray-50 sm:text-3xl">Current Job</h2>
+          <p className="mt-3 text-lg text-gray-200 sm:mt-4">
+            UX Engineer / Web Developer for
+            {' '}
+            <a href="merch.co" className="text-blue-400 font-bold" target="_blank">
+              Merch
+            </a>
+            .
+          </p>
+        </div>
+        <div className="mt-12 grid gap-16 pt-12 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
+          {projects.map((project) => (
+            <div key={project.title}>
+              <div>
+                <div className="inline-block">
+                  <span
+                    className={classNames(
+                      project.category.color,
+                      'inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium'
+                    )}
+                  >
+                    {project.category.name}
+                  </span>
+                </div>
+              </div>
+              <a href={project.href} target="_blank" className="block mt-4">
+                <p className="text-xl font-semibold text-gray-50">{project.title}</p>
+                <p className="mt-3 text-base text-gray-200">{project.description}</p>
+              </a>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

components/Skills.tsx

@@ -0,0 +1,78 @@
+import { PencilIcon, CodeIcon, ServerIcon } from '@heroicons/react/outline'
+
+const links = [
+  {
+    name: 'Web Development',
+    href: '#projects',
+    description:
+      'I\'ve used Next.js, Express.js, and Flask for backends, and TailwindCSS, Bootstrap, and Material Design for frontends.',
+    icon: CodeIcon,
+  },
+  {
+    name: 'Server Management',
+    href: '#projects',
+    description:
+      'I have lots of experience with managing servers, whether they are on-premises or cloud servers. I have experience using and managing Docker instances as well as databases.',
+    icon: ServerIcon,
+  },
+  {
+    name: 'Graphic Design',
+    href: '#graphics',
+    description:
+      'My front-end experience stemmed from my graphic design skills. I have used Adobe Illustrator, Affinity Designer, Inkscape, and other graphic programs.',
+    icon: PencilIcon,
+  },
+]
+
+export default function Skills() {
+  function calculateAge() {
+    var ageDifMs = Date.now() - new Date('July 13, 2004').getTime();
+    var ageDate = new Date(ageDifMs);
+    return Math.abs(ageDate.getUTCFullYear() - 1970);
+  }
+
+  return (
+    <div className="bg-gray-900" id="about" >
+      {/* Header */}
+      <div className="relative pb-32">
+        <div className="absolute inset-0">
+          <div className="absolute inset-0 mix-blend-multiply" aria-hidden="true" />
+        </div>
+        <div className="relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
+          <h1 className="text-4xl font-extrabold tracking-tight text-white md:text-5xl lg:text-6xl">Hey there!</h1>
+          <p className="mt-6 max-w-3xl text-xl text-gray-300">
+            I&apos;m Jack, a {calculateAge()} year old web developer from Chicago. I&apos;ve been programming since 2014 creating great things with Javascript, Python, HTML and CSS, and more.
+          </p>
+        </div>
+      </div>
+
+      {/* Overlapping cards */}
+      <section
+        className="-mt-32 max-w-7xl mx-auto relative z-10 pb-32 px-4 sm:px-6 lg:px-8"
+        aria-labelledby="contact-heading"
+      >
+        <h2 className="sr-only" id="contact-heading">
+          My Skills
+        </h2>
+        <div className="grid grid-cols-1 gap-y-20 lg:grid-cols-3 lg:gap-y-0 lg:gap-x-8">
+          {links.map((link) => (
+            <div key={link.name} className="flex flex-col bg-white rounded-2xl shadow-xl">
+              <div className="flex-1 relative pt-16 px-6 pb-8 md:px-8">
+                <div className="absolute top-0 p-5 inline-block bg-indigo-600 rounded-xl shadow-lg transform -translate-y-1/2">
+                  <link.icon className="h-6 w-6 text-white" aria-hidden="true" />
+                </div>
+                <h3 className="text-xl font-medium text-gray-900">{link.name}</h3>
+                <p className="mt-4 text-base text-gray-500">{link.description}</p>
+              </div>
+              <div className="p-6 bg-gray-50 rounded-bl-2xl rounded-br-2xl md:px-8">
+                <a href={link.href} className="text-base font-medium text-indigo-700 hover:text-indigo-600">
+                  See more<span aria-hidden="true"> &rarr;</span>
+                </a>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  )
+}

pages/_app.tsx

@@ -32,6 +32,11 @@ function MyApp({ Component, pageProps }: AppProps) {
         <Component {...pageProps} />
         <Footer />
       </main>
+      <style jsx>{`
+        html, body {
+          scroll-behavior: smooth;
+        }
+      `}</style>
     </div>
   </>
 }

pages/_document.tsx

@@ -1,23 +0,0 @@
-import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/document'
-
-class MyDocument extends Document {
-  static async getInitialProps(ctx: DocumentContext) {
-    const initialProps = await Document.getInitialProps(ctx)
-
-    return initialProps
-  }
-
-  render() {
-    return (
-      <Html lang='en'>
-        <Head />
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    )
-  }
-}
-
-export default MyDocument

pages/index.tsx

@@ -9,6 +9,8 @@ import TwitterIcon from '../components/Images/TwitterIcon';
 import Head from 'next/head';
 
 import Navbar from '../components/Navbar';
+import Skills from '../components/Skills';
+import Projects from '../components/Projects';
 import useOnScreen from '../util/hooks/useOnScreen';
 
 const IndexPage = () => {
@@ -48,8 +50,6 @@ const IndexPage = () => {
     return Math.abs(ageDate.getUTCFullYear() - 1970);
   }
 
-
-
   return (
     <>
       <Head>
@@ -83,116 +83,14 @@ const IndexPage = () => {
           </Link>
         </div>
       </header>
-      <div className='bg-gradient-to-b from-purple-600 to-purple-700 h-full lg:max-h-96' ref={aboutRef}>
-        <div className='flex flex-wrap py-16 px-4 p lg:p-16 space-y-6'>
-          <div className='w-full overflow-hidden'>
-            <h1 className='text-white text-4xl font-bold text-center'>Nice to meet you!</h1>
-          </div>
-          <div className='w-full px-12 lg:px-48'>
-            <p className='text-white text-2xl text-center'>
-              I&apos;m Jack, a {calculateAge()} year old Graphic/UI Designer and Fullstack Developer from Chicago. Since I started
-              programming in 2014, I&apos;ve used Python, NodeJS, HTML and CSS. Nowadays, I prefer to
-              use NextJS, TailwindCSS, and NodeJS. Being a fullstack developer, I&apos;ve
-              had to create numerous logos and brands for various projects of mine.
-            </p>
-          </div>
-        </div>
+      <div ref={aboutRef} id="about">
+        <Skills />
       </div>
-      <div className='-mt-10'>
-        <div className='flex flex-wrap lg:px-64 lg:space-y-0 px-12 space-y-6'>
-          <div className='flex flex-wrap justify-center text-center py-12 lg:w-1/2 w-full min-h-96 max-h-full space-y-2 bg-white rounded-xl lg:rounded-l-xl lg:rounded-r-none border shadow-lg'>
-            <div className='w-full flex flex-wrap justify-center'>
-              <CodeIcon className='h-36 text-green-500 rounded-full bg-gray-100 p-5' />
-            </div>
-            <div className='w-full space-y-3 px-6'>
-              <h1 className='text-gray-800 font-bold text-2xl'>Fullstack Developer</h1>
-              <p className='text-gray-800 text-xl font-light'>I strive to make great things.</p>
-              <h2 className='text-purple-500 font-bold text-xl'>What I&apos;ve made:</h2>
-              <p className='text-gray-800 text-lg font-light'>SaaS applications, Image websites, Social Networks</p>
-              <h2 className='text-purple-500 font-bold text-xl'>Tools I use:</h2>
-              <ol>
-                <li className='text-gray-800 text-lg font-light'>Next.js</li>
-                <li className='text-gray-800 text-lg font-light'>Node.js / Express</li>
-                <li className='text-gray-800 text-lg font-light'>MongoDB</li>
-                <li className='text-gray-800 text-lg font-light'>PostgreSQL</li>
-                <li className='text-gray-800 text-lg font-light'>Docker</li>
-              </ol>
-            </div>
-          </div>
-          <div className='flex flex-wrap justify-center text-center my-px py-12 lg:w-1/2 w-full min-h-96 max-h-full space-y-2 bg-white rounded-xl lg:rounded-r-xl lg:rounded-l-none border shadow-lg'>
-            <div className='w-full flex flex-wrap justify-center'>
-              <DesignIcon className='h-36 text-green-500 rounded-full bg-gray-100 p-5' />
-            </div>
-            <div className='w-full space-y-3 px-6'>
-              <h1 className='text-gray-800 font-bold text-2xl'>Graphic and UI Design</h1>
-              <p className='text-gray-800 text-xl font-light'>I like to create designs and brands.</p>
-              <h2 className='text-purple-500 font-bold text-xl'>What I enjoy designing:</h2>
-              <p className='text-gray-800 text-lg font-light'>Brands, Logos, Banners, Headers</p>
-              <h2 className='text-purple-500 font-bold text-xl'>Tools I use:</h2>
-              <ol>
-                <li className='text-gray-800 text-lg font-light'>Affinity Designer</li>
-                <li className='text-gray-800 text-lg font-light'>Figma</li>
-                <li className='text-gray-800 text-lg font-light'>TailwindCSS</li>
-                <li className='text-gray-800 text-lg font-light'>Bootstrap</li>
-                <li className='text-gray-800 text-lg font-light'>React.js</li>
-              </ol>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div id='projects' className='flex flex-wrap justify-center px-12 lg:px-64 pt-24 space-y-3' ref={projectsRef}>
-        <h1 className='w-full font-bold text-white text-center text-3xl'>My recent work</h1>
-        <p className='w-full font-semibold text-white text-center text-xl'>Here are a few projects I&apos;ve been working on!</p>
-        <div className="flex flex-wrap w-full -mx-1 overflow-hidden justify-center">
-
-          <div className="flex my-1 w-full overflow-hidden rounded-xl relative h-36">
-            {/* <Image alt='Stryx Photo' layout='fill' src='/img/Stryx.png' objectFit='cover' objectPosition='top' className='absolute rounded-xl filter blur-xl' /> */}
-            <div className='flex flex-wrap items-center content-center justify-end w-full h-full text-right transition transform duration-200 p-12 space-y-2'>
-              <h1 className='w-full text-white font-bold text-3xl'>Lunar Design</h1>
-              <p className='w-full text-white font-light text-xs'>American counterpart of the French-American duo making software that&apos;s out of this world.</p>
-              <a className='flex bg-green-500 items-center justify-center px-2 py-1 rounded-xl text-white w-2/3 sm:w-1/3' href='https://github.com/designbylunar/' target='_blank' rel='noreferrer'>Visit</a>
-            </div>
-          </div>
-
-          <div className="flex my-1 w-full overflow-hidden rounded-xl relative h-36">
-            <Image alt='Stryx Photo' layout='fill' src='/img/Stryx.png' objectFit='cover' objectPosition='top' className='absolute rounded-xl filter blur-xl' />
-            <div className='flex flex-wrap items-center content-center justify-end w-full h-full text-right transition transform duration-200 p-12 space-y-2'>
-              <h1 className='w-full text-white font-bold text-3xl'>Stryx</h1>
-              <p className='w-full text-white font-light text-xs'>Roblox Group Management made easy (defunct, no long associated)</p>
-              <a className='flex bg-green-500 items-center justify-center px-2 py-1 rounded-xl text-white w-2/3 sm:w-1/3' href='https://stryx.cloud' target='_blank' rel='noreferrer'>Visit</a>
-            </div>
-          </div>
-          
-          <div className="flex my-1 w-full overflow-hidden rounded-xl relative h-36">
-            <Image alt='Snacc.chat Photo' layout='fill' src='/img/Snacc.chat.png' objectFit='cover' objectPosition='top' className='absolute rounded-xl filter blur-xl' />
-            <div className='flex flex-wrap items-center content-center justify-end w-full h-full text-right transition transform duration-200 p-12 space-y-2'>
-              <h1 className='w-full text-white font-bold text-3xl'>Snacc.chat</h1>
-              <p className='w-full text-white font-light text-xs'>Made in 24 hours at <a className='font-bold' href='https://codeday.org' target='_blank' rel='noreferrer'>CodeDay</a>, Snacc.chat is a simple social network for programmers alike.</p>
-              <a className='flex bg-green-500 items-center justify-center px-2 py-1 rounded-xl text-white w-2/3 sm:w-1/3' href='https://snacc.chat' target='_blank' rel='noreferrer'>Visit</a>
-            </div>
-          </div>
-
-          <div className="flex my-1 w-full overflow-hidden rounded-xl relative h-36">
-            <Image alt='FRCMS Docs Photo' layout='fill' src='/img/FRCMS.png' objectFit='cover' objectPosition='top' className='absolute rounded-xl filter blur-xl' />
-            <div className='flex flex-wrap items-center content-center justify-end w-full h-full text-right transition transform duration-200 p-12 space-y-2'>
-              <h1 className='w-full text-white font-bold text-3xl'>FRCMS</h1>
-              <p className='w-full text-white font-light text-xs'>FIRST Robotics CMS (WIP)</p>
-              <a className='flex bg-green-500 items-center justify-center px-2 py-1 rounded-xl text-white w-2/3 sm:w-1/3' href='https://dev.frcms.app' target='_blank' rel='noreferrer'>Visit</a>
-            </div>
-          </div>
-
-          <div className="flex my-1 w-full overflow-hidden rounded-xl relative h-36">
-            <Image alt='Ricky.cat Photo' layout='fill' src='/img/Ricky.cat.png' objectFit='cover' objectPosition='top' className='absolute rounded-xl filter blur-xl' />
-            <div className='flex flex-wrap items-center content-center justify-end w-full h-full text-right transition transform duration-200 p-12 space-y-2'>
-              <h1 className='w-full text-white font-bold text-3xl'>Ricky.cat</h1>
-              <p className='w-full text-white font-light text-xs'>My first Next.js project! A place to share my cat. Discontinued (for now).</p>
-              <a className='flex bg-green-500 items-center justify-center px-2 py-1 rounded-xl text-white w-2/3 sm:w-1/3' href='https://ricky.cat' target='_blank' rel='noreferrer'>Visit</a>
-            </div>
-          </div>
-        </div>
+      <div id='projects' ref={projectsRef} id="projects">
+        <Projects />
       </div>
       
-      <div id='designs' 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 lg:px-64 pt-24 space-y-3' ref={graphicsRef}>
         <h1 className='w-full font-bold text-white text-center text-3xl'>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>
         <div className="flex flex-wrap w-full -mx-1 overflow-hidden justify-center">