From c6174fab8db7e59fe27a95d956f51fab4943dc51 Mon Sep 17 00:00:00 2001 From: Jack Merrill <8814123+jackmerrill@users.noreply.github.com> Date: Tue, 7 Sep 2021 17:14:50 +0000 Subject: [PATCH] feat: a lot of stuff --- .breakpoints | 34 +++++++++--- components/Navbar.tsx | 19 ++++--- components/Projects.tsx | 73 +++++++++++++++++++++++++ components/Skills.tsx | 78 +++++++++++++++++++++++++++ pages/_app.tsx | 5 ++ pages/_document.tsx | 23 -------- pages/index.tsx | 116 +++------------------------------------- 7 files changed, 203 insertions(+), 145 deletions(-) create mode 100644 components/Projects.tsx create mode 100644 components/Skills.tsx delete mode 100644 pages/_document.tsx diff --git a/.breakpoints b/.breakpoints index 74e7c48..2e49167 100644 --- a/.breakpoints +++ b/.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 } ] } diff --git a/components/Navbar.tsx b/components/Navbar.tsx index a6d0c12..8e5635a 100644 --- a/components/Navbar.tsx +++ b/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 }[] }) => { {({ open }) => ( <> -

{views}

@@ -56,6 +57,10 @@ const Navbar = ({ views }: { views: { view: string, viewing: boolean }[] }) => { { + document.getElementById(item.name + item.href).dispatchEvent(new CustomEvent('scroll')); + }} className={classNames( item.current ? 'bg-gray-900 text-white' diff --git a/components/Projects.tsx b/components/Projects.tsx new file mode 100644 index 0000000..ec33b29 --- /dev/null +++ b/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 ( +
+ +
+ ) +} \ No newline at end of file diff --git a/components/Skills.tsx b/components/Skills.tsx new file mode 100644 index 0000000..1c6e843 --- /dev/null +++ b/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 ( +
+ {/* Header */} +
+
+ +
+

Hey there!

+

+ I'm Jack, a {calculateAge()} year old web developer from Chicago. I've been programming since 2014 creating great things with Javascript, Python, HTML and CSS, and more. +

+
+
+ + {/* Overlapping cards */} +
+

+ My Skills +

+
+ {links.map((link) => ( +
+
+
+
+

{link.name}

+

{link.description}

+
+ +
+ ))} +
+
+
+ ) +} \ No newline at end of file diff --git a/pages/_app.tsx b/pages/_app.tsx index add3f4c..f95475a 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -32,6 +32,11 @@ function MyApp({ Component, pageProps }: AppProps) {
+
} diff --git a/pages/_document.tsx b/pages/_document.tsx deleted file mode 100644 index 0703a8f..0000000 --- a/pages/_document.tsx +++ /dev/null @@ -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 ( - - - -
- - - - ) - } -} - -export default MyDocument diff --git a/pages/index.tsx b/pages/index.tsx index 5f1ec73..b276fdc 100644 --- a/pages/index.tsx +++ b/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 ( <> @@ -83,116 +83,14 @@ const IndexPage = () => {
-
-
-
-

Nice to meet you!

-
-
-

- I'm Jack, a {calculateAge()} year old Graphic/UI Designer and Fullstack Developer from Chicago. Since I started - programming in 2014, I've used Python, NodeJS, HTML and CSS. Nowadays, I prefer to - use NextJS, TailwindCSS, and NodeJS. Being a fullstack developer, I've - had to create numerous logos and brands for various projects of mine. -

-
-
+
+
-
-
-
-
- -
-
-

Fullstack Developer

-

I strive to make great things.

-

What I've made:

-

SaaS applications, Image websites, Social Networks

-

Tools I use:

-
    -
  1. Next.js
    2. -
  2. Node.js / Express
    3. -
  3. MongoDB
    4. -
  4. PostgreSQL
    5. -
  5. Docker
    6. -
-
-
-
-
- -
-
-

Graphic and UI Design

-

I like to create designs and brands.

-

What I enjoy designing:

-

Brands, Logos, Banners, Headers

-

Tools I use:

-
    -
  1. Affinity Designer
    2. -
  2. Figma
    3. -
  3. TailwindCSS
    4. -
  4. Bootstrap
    5. -
  5. React.js
    6. -
-
-
-
-
-
-

My recent work

-

Here are a few projects I've been working on!

-
- -
- {/* Stryx Photo */} -
-

Lunar Design

-

American counterpart of the French-American duo making software that's out of this world.

- Visit -
-
- -
- Stryx Photo -
-

Stryx

-

Roblox Group Management made easy (defunct, no long associated)

- Visit -
-
- -
- Snacc.chat Photo -
-

Snacc.chat

-

Made in 24 hours at CodeDay, Snacc.chat is a simple social network for programmers alike.

- Visit -
-
- -
- FRCMS Docs Photo -
-

FRCMS

-

FIRST Robotics CMS (WIP)

- Visit -
-
- -
- Ricky.cat Photo -
-

Ricky.cat

-

My first Next.js project! A place to share my cat. Discontinued (for now).

- Visit -
-
-
+
+
-
+

My Designs

Here are a few designs I've made!