feat: a lot of stuff
This commit is contained in:
parent
768a16c170
commit
c6174fab8d
34
.breakpoints
34
.breakpoints
|
@ -3,15 +3,37 @@
|
||||||
"components/Navbar.tsx": [
|
"components/Navbar.tsx": [
|
||||||
{
|
{
|
||||||
"id": "5aa0d634-c476-4ab2-9957-d364b66311b2",
|
"id": "5aa0d634-c476-4ab2-9957-d364b66311b2",
|
||||||
"line": 2,
|
"line": 4,
|
||||||
"version": 15,
|
"version": 883,
|
||||||
"index": 39
|
"index": 217
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "01e112b0-3705-4b70-bf88-5b2716dd492d",
|
"id": "01e112b0-3705-4b70-bf88-5b2716dd492d",
|
||||||
"line": 64,
|
"line": 77,
|
||||||
"version": 35,
|
"version": 883,
|
||||||
"index": 2597
|
"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
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,13 +7,13 @@ import Logo from '../components/Images/Logo';
|
||||||
|
|
||||||
const navigation = [
|
const navigation = [
|
||||||
{ name: 'Home', href: '#', current: true },
|
{ name: 'Home', href: '#', current: true },
|
||||||
{ name: 'About', href: '#', current: false },
|
{ name: 'About', href: '#about', current: false },
|
||||||
{ name: 'Projects', href: '#', current: false },
|
{ name: 'Projects', href: '#projects', current: false },
|
||||||
{ name: 'Graphics', href: '#', current: false },
|
{ name: 'Graphics', href: '#graphics', current: false },
|
||||||
{ name: 'Contact', href: '#', current: false },
|
{ name: 'Contact', href: '#contact', current: false },
|
||||||
];
|
];
|
||||||
|
|
||||||
function classNames(...classes) {
|
function classNames(...classes: any[]) {
|
||||||
return classes.filter(Boolean).join(' ')
|
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)
|
const currentlyViewing = views.find((view) => view.viewing === true)
|
||||||
navigation.forEach((nav) => nav.current = false)
|
navigation.forEach((nav) => nav.current = false)
|
||||||
|
if (currentlyViewing) {
|
||||||
navigation.find((nav) => nav.name === currentlyViewing.view).current = true
|
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'}`}>
|
<Disclosure as="nav" className={`fixed w-full z-50 bg-gray-800 ${atTop ? '' : 'shadow-lg'}`}>
|
||||||
{({ open }) => (
|
{({ open }) => (
|
||||||
<>
|
<>
|
||||||
<p>{views}</p>
|
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<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 justify-between h-16">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
|
@ -56,6 +57,10 @@ const Navbar = ({ views }: { views: { view: string, viewing: boolean }[] }) => {
|
||||||
<a
|
<a
|
||||||
key={item.name}
|
key={item.name}
|
||||||
href={item.href}
|
href={item.href}
|
||||||
|
id={item.name + item.href}
|
||||||
|
onClick={(e) => {
|
||||||
|
document.getElementById(item.name + item.href).dispatchEvent(new CustomEvent('scroll'));
|
||||||
|
}}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
item.current
|
item.current
|
||||||
? 'bg-gray-900 text-white'
|
? 'bg-gray-900 text-white'
|
||||||
|
|
73
components/Projects.tsx
Normal file
73
components/Projects.tsx
Normal file
|
@ -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's what I'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>
|
||||||
|
)
|
||||||
|
}
|
78
components/Skills.tsx
Normal file
78
components/Skills.tsx
Normal file
|
@ -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'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.
|
||||||
|
</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"> →</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
|
@ -32,6 +32,11 @@ function MyApp({ Component, pageProps }: AppProps) {
|
||||||
<Component {...pageProps} />
|
<Component {...pageProps} />
|
||||||
<Footer />
|
<Footer />
|
||||||
</main>
|
</main>
|
||||||
|
<style jsx>{`
|
||||||
|
html, body {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
|
116
pages/index.tsx
116
pages/index.tsx
|
@ -9,6 +9,8 @@ import TwitterIcon from '../components/Images/TwitterIcon';
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
|
|
||||||
import Navbar from '../components/Navbar';
|
import Navbar from '../components/Navbar';
|
||||||
|
import Skills from '../components/Skills';
|
||||||
|
import Projects from '../components/Projects';
|
||||||
import useOnScreen from '../util/hooks/useOnScreen';
|
import useOnScreen from '../util/hooks/useOnScreen';
|
||||||
|
|
||||||
const IndexPage = () => {
|
const IndexPage = () => {
|
||||||
|
@ -48,8 +50,6 @@ const IndexPage = () => {
|
||||||
return Math.abs(ageDate.getUTCFullYear() - 1970);
|
return Math.abs(ageDate.getUTCFullYear() - 1970);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Head>
|
<Head>
|
||||||
|
@ -83,116 +83,14 @@ const IndexPage = () => {
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div className='bg-gradient-to-b from-purple-600 to-purple-700 h-full lg:max-h-96' ref={aboutRef}>
|
<div ref={aboutRef} id="about">
|
||||||
<div className='flex flex-wrap py-16 px-4 p lg:p-16 space-y-6'>
|
<Skills />
|
||||||
<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'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.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</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'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'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'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 id='projects' ref={projectsRef} id="projects">
|
||||||
|
<Projects />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex my-1 w-full overflow-hidden rounded-xl relative h-36">
|
<div id='graphics' className='flex flex-wrap justify-center px-12 lg:px-64 pt-24 space-y-3' ref={graphicsRef}>
|
||||||
<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>
|
|
||||||
|
|
||||||
<div id='designs' 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>
|
<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've made!</p>
|
<p className='w-full font-semibold text-white text-center text-xl'>Here are a few designs I've made!</p>
|
||||||
<div className="flex flex-wrap w-full -mx-1 overflow-hidden justify-center">
|
<div className="flex flex-wrap w-full -mx-1 overflow-hidden justify-center">
|
||||||
|
|
Loading…
Reference in New Issue
Block a user