-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2 from goodeats/dev
Dev
- Loading branch information
Showing
15 changed files
with
253 additions
and
109 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import { Icon } from '#app/components/ui/icon' | ||
|
|
||
| export const ContentLogo = () => { | ||
| return ( | ||
| <a | ||
| href="https://github.com/goodeats/epic-pppaaattt.xyz" | ||
| className="animate-slide-top [animation-fill-mode:backwards] xl:animate-slide-left xl:[animation-delay:0.5s] xl:[animation-fill-mode:backwards]" | ||
| > | ||
| <svg | ||
| className="size-20 text-foreground xl:-mt-4" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 65 65" | ||
| > | ||
| <polygon fill="currentColor" points="32.5,22.33 20.5,2.66 44.5,2.66" /> | ||
| <polygon fill="currentColor" points="12.5,42.66 0.5,62.33 24.5,62.33" /> | ||
| <polygon | ||
| fill="currentColor" | ||
| points="52.5,64.33 40.5,44.66 64.5,44.66" | ||
| /> | ||
| </svg> | ||
| </a> | ||
| ) | ||
| } | ||
|
|
||
| export const ContentHeader = () => { | ||
| return ( | ||
| <h1 | ||
| data-heading | ||
| className="mt-8 animate-slide-top text-4xl font-medium text-foreground [animation-fill-mode:backwards] [animation-delay:0.3s] md:text-5xl xl:mt-4 xl:animate-slide-left xl:text-6xl xl:[animation-fill-mode:backwards] xl:[animation-delay:0.8s]" | ||
| > | ||
| <a href="https://github.com/goodeats/epic-pppaaattt.xyz">PPPAAATTT</a> | ||
| </h1> | ||
| ) | ||
| } | ||
|
|
||
| export const ContentBody = () => { | ||
| return ( | ||
| <p | ||
| data-paragraph | ||
| className="mt-6 animate-slide-top text-xl/7 text-muted-foreground [animation-fill-mode:backwards] [animation-delay:0.8s] xl:mt-8 xl:animate-slide-left xl:text-xl/6 xl:leading-10 xl:[animation-fill-mode:backwards] xl:[animation-delay:1s]" | ||
| > | ||
| I am a software engineer from Maine, now living in New York City. My art | ||
| consists of printing equilateral triangles in different ways on a canvas | ||
| using JavaScript. I have worked mostly used my coding skills in various | ||
| startups and now I am excited to pursue the lengths of my creativity. | ||
| </p> | ||
| ) | ||
| } | ||
|
|
||
| export const ContentContact = () => { | ||
| return ( | ||
| <ul className="mt-6 flex animate-slide-top space-x-4 [animation-fill-mode:backwards] [animation-delay:1.2s] xl:mt-8 xl:animate-slide-left xl:[animation-fill-mode:backwards] xl:[animation-delay:1.2s]"> | ||
| <li> | ||
| <a | ||
| href="https://www.instagram.com/pppaaattt.xyz" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <Icon name="instagram-logo" size="xl" /> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a | ||
| href="https://github.com/goodeats" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <Icon name="github-logo" size="xl" /> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import { cn } from '#app/utils/misc.tsx' | ||
| import { images } from '../images/images' | ||
|
|
||
| // Tailwind Grid cell classes lookup | ||
| const columnClasses: Record<(typeof images)[number]['column'], string> = { | ||
| 1: 'xl:col-start-1', | ||
| 2: 'xl:col-start-2', | ||
| 3: 'xl:col-start-3', | ||
| 4: 'xl:col-start-4', | ||
| 5: 'xl:col-start-5', | ||
| } | ||
| const rowClasses: Record<(typeof images)[number]['row'], string> = { | ||
| 1: 'xl:row-start-1', | ||
| 2: 'xl:row-start-2', | ||
| 3: 'xl:row-start-3', | ||
| 4: 'xl:row-start-4', | ||
| 5: 'xl:row-start-5', | ||
| 6: 'xl:row-start-6', | ||
| } | ||
|
|
||
| export const ImagesGrid = () => { | ||
| return ( | ||
| <div className="mt-16 flex max-w-3xl flex-wrap gap-8 xl:mt-0 xl:grid xl:grid-flow-col xl:grid-cols-2 xl:grid-rows-2"> | ||
| {images.map((image, index) => { | ||
| return ( | ||
| <div | ||
| key={index} | ||
| className={cn( | ||
| columnClasses[image.column], | ||
| rowClasses[image.row], | ||
| 'relative', | ||
| )} | ||
| > | ||
| <img | ||
| src={image.src} | ||
| alt={image.alt} | ||
| className="relative left-0 top-0 h-full w-full object-cover" | ||
| /> | ||
| </div> | ||
| ) | ||
| })} | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import { | ||
| Tooltip, | ||
| TooltipContent, | ||
| TooltipProvider, | ||
| TooltipTrigger, | ||
| } from '#app/components/ui/tooltip' | ||
| import { cn } from '#app/utils/misc' | ||
| import { logos } from '../logos/logos.ts' | ||
|
|
||
| // Tailwind Grid cell classes lookup | ||
| const columnClasses: Record<(typeof logos)[number]['column'], string> = { | ||
| 1: 'xl:col-start-1', | ||
| 2: 'xl:col-start-2', | ||
| 3: 'xl:col-start-3', | ||
| 4: 'xl:col-start-4', | ||
| 5: 'xl:col-start-5', | ||
| } | ||
| const rowClasses: Record<(typeof logos)[number]['row'], string> = { | ||
| 1: 'xl:row-start-1', | ||
| 2: 'xl:row-start-2', | ||
| 3: 'xl:row-start-3', | ||
| 4: 'xl:row-start-4', | ||
| 5: 'xl:row-start-5', | ||
| 6: 'xl:row-start-6', | ||
| } | ||
|
|
||
| export const Logos = () => { | ||
| return ( | ||
| <ul className="mt-16 flex max-w-3xl flex-wrap justify-center gap-2 sm:gap-4 xl:mt-0 xl:grid xl:grid-flow-col xl:grid-cols-5 xl:grid-rows-6"> | ||
| <TooltipProvider> | ||
| {logos.map((logo, i) => ( | ||
| <li | ||
| key={logo.href} | ||
| className={cn( | ||
| columnClasses[logo.column], | ||
| rowClasses[logo.row], | ||
| 'animate-roll-reveal [animation-fill-mode:backwards]', | ||
| )} | ||
| style={{ animationDelay: `${i * 0.07}s` }} | ||
| > | ||
| <Tooltip> | ||
| <TooltipTrigger asChild> | ||
| <a | ||
| href={logo.href} | ||
| className="grid size-20 place-items-center rounded-2xl bg-violet-600/10 p-4 transition hover:-rotate-6 hover:bg-violet-600/15 sm:size-24 dark:bg-violet-200 dark:hover:bg-violet-100" | ||
| > | ||
| <img src={logo.src} alt="" /> | ||
| </a> | ||
| </TooltipTrigger> | ||
| <TooltipContent>{logo.alt}</TooltipContent> | ||
| </Tooltip> | ||
| </li> | ||
| ))} | ||
| </TooltipProvider> | ||
| </ul> | ||
| ) | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import image0 from './0.png' | ||
| import image1 from './1.png' | ||
| import image2 from './2.png' | ||
| import image3 from './3.png' | ||
|
|
||
| export const images = [ | ||
| { | ||
| src: image0, | ||
| alt: 'image0', | ||
| column: 1, | ||
| row: 1, | ||
| }, | ||
| { | ||
| src: image1, | ||
| alt: 'image1', | ||
| column: 2, | ||
| row: 1, | ||
| }, | ||
| { | ||
| src: image2, | ||
| alt: 'image2', | ||
| column: 1, | ||
| row: 2, | ||
| }, | ||
| { | ||
| src: image3, | ||
| alt: 'image3', | ||
| column: 2, | ||
| row: 2, | ||
| }, | ||
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.