-
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 #5 from prodkt/next
version bump
- Loading branch information
Showing
378 changed files
with
32,991 additions
and
181 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
41 changes: 41 additions & 0 deletions
41
apps/prepare/src/components/about-bryan/about-bryan.stories.tsx
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,41 @@ | ||
import type { Meta, StoryObj } from '@storybook/react' | ||
|
||
import { BryanFunkSection } from '.' | ||
import ResumeSection from './resume-section' | ||
|
||
const meta: Meta<typeof BryanFunkSection> = { | ||
component: BryanFunkSection, | ||
args: {}, | ||
// argTypes: { | ||
// variant: { | ||
// options: [ | ||
// "default", | ||
// ], | ||
// control: { type: "select" }, | ||
// }, | ||
// size: { | ||
// options: [ | ||
// "default", | ||
// ], | ||
// control: { type: "select" }, | ||
// }, | ||
// swatch: { | ||
// options: [ | ||
// "default", | ||
// ], | ||
// control: { type: "select" }, | ||
// }, | ||
// } | ||
} | ||
|
||
export default meta | ||
type Story = StoryObj<typeof BryanFunkSection> | ||
|
||
export const Default: Story = { | ||
render: () => ( | ||
<div className='size-full max-w-full overflow-x-hidden'> | ||
<BryanFunkSection /> | ||
<ResumeSection /> | ||
</div> | ||
), | ||
} |
113 changes: 113 additions & 0 deletions
113
apps/prepare/src/components/about-bryan/bryan-funk-section.tsx
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,113 @@ | ||
/* eslint-disable @eslint-community/eslint-comments/disable-enable-pair */ | ||
/* eslint-disable jsdoc/require-returns */ | ||
|
||
import { Aperture, Scroll, ShipWheel } from 'lucide-react' | ||
|
||
import BryanPhoto from '@prodkt/assets/avatars/bryan-funk-portrait-xl.avif' | ||
|
||
import { SkillMarquee } from './skill-marquee' | ||
|
||
/** | ||
* | ||
*/ | ||
export function BryanFunkSection() { | ||
return ( | ||
<div className='relative flex items-center justify-center xl:pt-12'> | ||
<div className='relative flex size-full flex-col items-center justify-center px-2 md:px-4 lg:px-12 xl:px-20'> | ||
<div className='flex w-full flex-col items-start justify-center gap-4 lg:gap-8 xl:max-w-[65dvw]'> | ||
<div className='flex w-full items-start justify-start px-4 pt-10 text-left text-2xl leading-none tracking-tight md:text-3xl lg:text-nowrap lg:text-5xl' /> | ||
<div className='z-[1] flex w-full flex-row flex-wrap justify-center gap-2 md:gap-4 lg:h-full xl:flex-nowrap'> | ||
<div className='relative flex w-1/2 grow flex-col justify-between gap-4 overflow-hidden rounded-2xl border border-[var(--gray-a4)] bg-gradient-to-br from-[var(--gray1)] to-[var(--gray-a1)] p-4 backdrop-blur sm:basis-1/4 sm:p-6 xl:p-10'> | ||
<div className='prodkt-card-avatar relative z-[1] flex size-16 items-end justify-center'> | ||
<img | ||
src={BryanPhoto} | ||
alt='' | ||
className=' z-[1] h-auto w-full select-none rounded-xl border border-[var(--gray-a2)] bg-[var(--gray2)] pt-2' | ||
/> | ||
</div> | ||
<h2 className='z-[1] text-2xl font-normal tracking-tighter text-[var(--gray9)] antialiased'> | ||
Bryan Funk | ||
</h2> | ||
<h4 className=' text-xs text-[var(--gray-a11)]'> | ||
Former Director of Design at Tovuti LMS | ||
</h4> | ||
|
||
<div className='gradientMask-4 absolute -mt-12 flex w-full flex-row items-center justify-center gap-4'> | ||
<SkillMarquee /> | ||
</div> | ||
</div> | ||
<a | ||
href='#work' | ||
className='xs:basis-1/4 relative flex grow flex-col justify-between gap-4 overflow-hidden rounded-2xl border border-[var(--gray-a4)] bg-gradient-to-br from-[var(--gray1)] to-[var(--gray-a1)] p-4 shadow-inner backdrop-blur sm:p-6 xl:p-10' | ||
> | ||
<div className='prodkt-card-avatar relative z-[1] flex size-16 items-center justify-center rounded-full'> | ||
<ShipWheel | ||
size={40} | ||
strokeWidth={1} | ||
className='animate-waving-hand text-[var(--amber2)] mix-blend-overlay dark:text-[var(--amber-a9)]' | ||
/> | ||
<div className='absolute size-8 bg-[var(--amber-a8)] blur-lg' /> | ||
</div> | ||
<h2 className='z-[1] text-2xl font-normal tracking-tighter text-[var(--gray9)] antialiased'> | ||
Work History | ||
</h2> | ||
{/* <WorkHistoryIcon className="absolute left-auto right-auto h-auto m-auto scale-150 translate-x-20 translate-y-20 stroke-0 mix-blend-hard-light fill-none blur-[2px] w-450px" /> */} | ||
</a> | ||
<div className='xs:basis-1/4 relative flex grow flex-col justify-between gap-4 overflow-hidden rounded-2xl border border-[var(--gray-a4)] bg-gradient-to-br from-[var(--gray1)] to-[var(--gray-a1)] p-4 shadow-inner backdrop-blur sm:p-6 xl:p-10'> | ||
<div className='prodkt-card-avatar relative z-[1] flex size-16 items-center justify-center rounded-full'> | ||
<Aperture | ||
size={40} | ||
strokeWidth={1} | ||
className='text-[var(--mint2)] mix-blend-overlay dark:text-[var(--mint-a9)]' | ||
/> | ||
<div className='absolute size-8 bg-[var(--mint-a8)] blur-lg'></div> | ||
</div> | ||
<h2 className='z-[1] text-2xl font-normal tracking-tighter text-[var(--gray9)] antialiased'> | ||
Visuals | ||
</h2> | ||
{/* <VisualTwo className="absolute left-auto right-auto h-auto m-auto scale-150 translate-x-20 translate-y-20 stroke-0 mix-blend-hard-light fill-none blur-[2px] w-450px" /> */} | ||
</div> | ||
<div className='xs:basis-1/4 relative flex grow flex-col justify-between gap-4 overflow-hidden rounded-2xl border border-[var(--gray-a4)] bg-gradient-to-br from-[var(--gray1)] to-[var(--gray-a1)] p-4 shadow-inner backdrop-blur sm:p-6 xl:p-10'> | ||
<div className='prodkt-card-avatar relative z-[1] flex size-16 items-center justify-center rounded-full'> | ||
<Scroll | ||
size={40} | ||
strokeWidth={1} | ||
className='text-[var(--violet2)] mix-blend-overlay dark:text-[var(--violet-a9)]' | ||
/> | ||
<div className='absolute size-8 bg-[var(--violet-a5)] blur-lg'></div> | ||
</div> | ||
<h2 className='z-[1] text-2xl font-normal tracking-tighter text-[var(--gray9)] antialiased'> | ||
Resume | ||
</h2> | ||
{/* <VisualTwo className="absolute left-auto right-auto h-auto m-auto scale-150 translate-x-20 translate-y-20 stroke-0 mix-blend-hard-light fill-none blur-[2px] w-450px" /> */} | ||
</div> | ||
</div> | ||
<div className='relative flex size-full flex-col items-start justify-center gap-2 overflow-hidden'> | ||
<div className='items-between flex w-full flex-col justify-start'> | ||
<div className='relative flex w-full flex-row items-start justify-start gap-2 px-4'> | ||
<h6 className=' prodkt-h1-correction bottom-1 z-[1] flex w-auto bg-gradient-to-r from-[var(--gray-a9)] via-[var(--gray-a6)] to-[var(--gray-a5)] bg-clip-text pb-4 pr-2 text-xs font-bold uppercase tracking-[0.325rem] text-transparent bg-blend-difference'> | ||
Frontend. | ||
</h6> | ||
<h6 className=' prodkt-h1-correction bottom-1 z-[1] flex w-auto bg-gradient-to-r from-[var(--gray-a9)] via-[var(--gray-a6)] to-[var(--gray-a5)] bg-clip-text pb-4 pr-2 text-xs font-bold uppercase tracking-[0.325rem] text-transparent bg-blend-difference'> | ||
Design. | ||
</h6> | ||
<h6 className=' prodkt-h1-correction bottom-1 z-[1] flex w-auto bg-gradient-to-r from-[var(--gray-a9)] via-[var(--gray-a6)] to-[var(--gray-a5)] bg-clip-text pb-4 pr-2 text-xs font-bold uppercase tracking-[0.325rem] text-transparent bg-blend-difference'> | ||
Development. | ||
</h6> | ||
<h6 className=' prodkt-h1-correction bottom-1 z-[1] flex w-auto bg-gradient-to-r from-[var(--gray-a9)] via-[var(--gray-a6)] to-[var(--gray-a5)] bg-clip-text pb-4 pr-2 text-xs font-bold uppercase tracking-[0.325rem] text-transparent bg-blend-difference'> | ||
Culture. | ||
</h6> | ||
<h6 className=' prodkt-h1-correction bottom-1 z-[1] flex w-auto bg-gradient-to-r from-[var(--gray-a9)] via-[var(--gray-a6)] to-[var(--gray-a5)] bg-clip-text pb-4 pr-2 text-xs font-bold uppercase tracking-[0.325rem] text-transparent bg-blend-difference'> | ||
People. | ||
</h6> | ||
<h6 className=' prodkt-h1-correction bottom-1 z-[1] flex w-auto bg-gradient-to-r from-[var(--gray-a9)] via-[var(--gray-a6)] to-[var(--gray-a5)] bg-clip-text pb-4 pr-2 text-xs font-bold uppercase tracking-[0.325rem] text-transparent bg-blend-difference'> | ||
Experience. | ||
</h6> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</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,68 @@ | ||
import { useId } from 'react' | ||
|
||
import { cn } from '@/utils/cn' | ||
|
||
interface DotPatternProps { | ||
width?: any | ||
height?: any | ||
x?: any | ||
y?: any | ||
cx?: any | ||
cy?: any | ||
cr?: any | ||
className?: string | ||
[key: string]: any | ||
} | ||
/** | ||
* | ||
* @param root0 | ||
* @param root0.width | ||
* @param root0.height | ||
* @param root0.x | ||
* @param root0.y | ||
* @param root0.cx | ||
* @param root0.cy | ||
* @param root0.cr | ||
* @param root0.className | ||
*/ | ||
export function DotPattern({ | ||
width = 16, | ||
height = 16, | ||
x = 0, | ||
y = 0, | ||
cx = 1, | ||
cy = 1, | ||
cr = 1, | ||
className, | ||
...props | ||
}: Readonly<DotPatternProps>) { | ||
const id = useId() | ||
|
||
return ( | ||
<svg | ||
aria-hidden='true' | ||
className={cn( | ||
'pointer-events-none absolute inset-0 z-0 size-full fill-[var(--grayA3)]', | ||
className, | ||
)} | ||
{...props} | ||
> | ||
<defs> | ||
<pattern | ||
id={id} | ||
width={width} | ||
height={height} | ||
patternUnits='userSpaceOnUse' | ||
patternContentUnits='userSpaceOnUse' | ||
x={x} | ||
y={y} | ||
> | ||
<circle id='pattern-circle' cx={cx} cy={cy} r={cr} /> | ||
</pattern> | ||
</defs> | ||
<rect width='100%' height='100%' strokeWidth={0} fill={`url(#${id})`} /> | ||
</svg> | ||
) | ||
} | ||
|
||
export default DotPattern |
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 @@ | ||
export * from './bryan-funk-section' |
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,65 @@ | ||
/* eslint-disable @eslint-community/eslint-comments/disable-enable-pair */ | ||
/* eslint-disable jsdoc/require-returns */ | ||
/* eslint-disable jsdoc/require-param-description */ | ||
|
||
import { cn } from '@/utils/cn' | ||
|
||
interface MarqueeProps { | ||
className?: string | ||
reverse?: boolean | ||
pauseOnHover?: boolean | ||
children?: React.ReactNode | ||
vertical?: boolean | ||
repeat?: number | ||
[key: string]: unknown | ||
} | ||
|
||
/** | ||
* | ||
* @param root0 | ||
* @param root0.className | ||
* @param root0.reverse | ||
* @param root0.pauseOnHover | ||
* @param root0.children | ||
* @param root0.vertical | ||
* @param root0.repeat | ||
*/ | ||
export default function Marquee({ | ||
className, | ||
reverse, | ||
pauseOnHover = false, | ||
children, | ||
vertical = false, | ||
repeat = 4, | ||
...props | ||
}: Readonly<MarqueeProps>) { | ||
return ( | ||
<div | ||
{...props} | ||
className={cn( | ||
'group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]', | ||
{ | ||
'flex-row': !vertical, | ||
'flex-col': vertical, | ||
}, | ||
className, | ||
)} | ||
> | ||
{Array(repeat) | ||
.fill(0) | ||
.map((_, i) => ( | ||
<div | ||
key={i} | ||
className={cn('flex shrink-0 justify-center [gap:var(--gap)]', { | ||
'animate-marquee flex-row': !vertical, | ||
'animate-marquee-vertical flex-col': vertical, | ||
'group-hover:[animation-play-state:paused]': pauseOnHover, | ||
'[animation-direction:reverse]': reverse, | ||
})} | ||
> | ||
{children} | ||
</div> | ||
))} | ||
</div> | ||
) | ||
} |
63 changes: 63 additions & 0 deletions
63
apps/prepare/src/components/about-bryan/resume-section.jsx
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,63 @@ | ||
/* eslint-disable @eslint-community/eslint-comments/disable-enable-pair */ | ||
/* eslint-disable jsdoc/require-returns */ | ||
|
||
// import type React from 'react' | ||
|
||
import { CloudDownload } from 'lucide-react' | ||
|
||
import BryanResume from '@prodkt/assets/resume/bryan-funk-resume-promo.webp' | ||
|
||
/** | ||
* | ||
*/ | ||
export default function ResumeSection() { | ||
return ( | ||
<div className='h-auto w-full px-1 py-4 md:py-16 lg:py-28'> | ||
<div className='relative mx-auto flex w-full max-w-6xl flex-col items-center justify-center gap-4 lg:flex-row'> | ||
<div className='relative flex basis-1/3 flex-col items-center justify-center gap-5 lg:justify-start xl:items-start'> | ||
<h5 className='text-center text-6xl font-medium leading-none tracking-tight text-[var(--gray-11)] lg:text-left'> | ||
A leave behind. | ||
</h5> | ||
<p className='leading-none tracking-normal text-[var(--gray-9)] text-balance'> | ||
Print out for reference or for someone else in the office. | ||
</p> | ||
<a | ||
className='flex flex-row items-start justify-center gap-2' | ||
href='/resume/BryanFunk_CV-Resume_v2_001_reduced.pdf' | ||
> | ||
<CloudDownload | ||
strokeWidth={2.5} | ||
className='inset-0 z-[1] m-auto size-6 fill-[var(--gray-a1)] stroke-[var(--red-10)]' | ||
/> | ||
<p className='text-nowrap text-right font-medium leading-7 tracking-tighter underline decoration-[var(--red-10)] underline-offset-8'> | ||
Download Resume | ||
</p> | ||
</a> | ||
</div> | ||
<div className='relative flex basis-2/3 flex-col items-center justify-start'> | ||
<a | ||
href='/assets/downloads/BryanFunk_CV-Resume_v2_001_reduced.pdf' | ||
className='absolute z-[2] flex size-full flex-col items-center justify-center' | ||
> | ||
<div className='flex flex-row items-center justify-center gap-4'> | ||
<p className='text-right text-3xl font-medium leading-7 tracking-tighter text-[var(--gray-1)] dark:text-[var(--gray-12)]'> | ||
Download | ||
<br /> | ||
Resume | ||
</p> | ||
<CloudDownload | ||
strokeWidth={2.5} | ||
className='inset-0 z-[1] m-auto -ml-20 size-48 fill-[var(--gray-a1)] stroke-[var(--red-a6)] opacity-100 mix-blend-overlay brightness-200 dark:brightness-50' | ||
/> | ||
</div> | ||
</a> | ||
<img | ||
src={BryanResume} | ||
alt='Bryan Funk Resume' | ||
className='h-auto w-full select-none rounded-3xl border ring saturate-0' | ||
/> | ||
</div> | ||
</div> | ||
</div> | ||
) | ||
} |
Oops, something went wrong.