Skip to content

Commit 30cb56e

Browse files
prodktprodkt
authored
Merge pull request #5 from prodkt/next
version bump
2 parents fb9f300 + b51f988 commit 30cb56e

378 files changed

Lines changed: 32991 additions & 181 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.eslintrc.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"next",
66
"next/core-web-vitals",
77
"prettier",
8+
"plugin:tailwindcss/recommended",
89
"plugin:tailwindcss/recommended"
910
],
1011
"plugins": ["tailwindcss"],

‎apps/prepare/src/components/about-bryan/about-bryan.stories.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import type { Meta, StoryObj } from '@storybook/react'
2+
3+
import { BryanFunkSection } from '.'
4+
import ResumeSection from './resume-section'
5+
6+
const meta: Meta<typeof BryanFunkSection> = {
7+
component: BryanFunkSection,
8+
args: {},
9+
// argTypes: {
10+
// variant: {
11+
// options: [
12+
// "default",
13+
// ],
14+
// control: { type: "select" },
15+
// },
16+
// size: {
17+
// options: [
18+
// "default",
19+
// ],
20+
// control: { type: "select" },
21+
// },
22+
// swatch: {
23+
// options: [
24+
// "default",
25+
// ],
26+
// control: { type: "select" },
27+
// },
28+
// }
29+
}
30+
31+
export default meta
32+
type Story = StoryObj<typeof BryanFunkSection>
33+
34+
export const Default: Story = {
35+
render: () => (
36+
<div className='size-full max-w-full overflow-x-hidden'>
37+
<BryanFunkSection />
38+
<ResumeSection />
39+
</div>
40+
),
41+
}

‎apps/prepare/src/components/about-bryan/bryan-funk-section.tsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
/* eslint-disable @eslint-community/eslint-comments/disable-enable-pair */
2+
/* eslint-disable jsdoc/require-returns */
3+
4+
import { Aperture, Scroll, ShipWheel } from 'lucide-react'
5+
6+
import BryanPhoto from '@prodkt/assets/avatars/bryan-funk-portrait-xl.avif'
7+
8+
import { SkillMarquee } from './skill-marquee'
9+
10+
/**
11+
*
12+
*/
13+
export function BryanFunkSection() {
14+
return (
15+
<div className='relative flex items-center justify-center xl:pt-12'>
16+
<div className='relative flex size-full flex-col items-center justify-center px-2 md:px-4 lg:px-12 xl:px-20'>
17+
<div className='flex w-full flex-col items-start justify-center gap-4 lg:gap-8 xl:max-w-[65dvw]'>
18+
<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' />
19+
<div className='z-[1] flex w-full flex-row flex-wrap justify-center gap-2 md:gap-4 lg:h-full xl:flex-nowrap'>
20+
<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'>
21+
<div className='prodkt-card-avatar relative z-[1] flex size-16 items-end justify-center'>
22+
<img
23+
src={BryanPhoto}
24+
alt=''
25+
className=' z-[1] h-auto w-full select-none rounded-xl border border-[var(--gray-a2)] bg-[var(--gray2)] pt-2'
26+
/>
27+
</div>
28+
<h2 className='z-[1] text-2xl font-normal tracking-tighter text-[var(--gray9)] antialiased'>
29+
Bryan Funk
30+
</h2>
31+
<h4 className=' text-xs text-[var(--gray-a11)]'>
32+
Former Director of Design at Tovuti LMS
33+
</h4>
34+
35+
<div className='gradientMask-4 absolute -mt-12 flex w-full flex-row items-center justify-center gap-4'>
36+
<SkillMarquee />
37+
</div>
38+
</div>
39+
<a
40+
href='#work'
41+
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'
42+
>
43+
<div className='prodkt-card-avatar relative z-[1] flex size-16 items-center justify-center rounded-full'>
44+
<ShipWheel
45+
size={40}
46+
strokeWidth={1}
47+
className='animate-waving-hand text-[var(--amber2)] mix-blend-overlay dark:text-[var(--amber-a9)]'
48+
/>
49+
<div className='absolute size-8 bg-[var(--amber-a8)] blur-lg' />
50+
</div>
51+
<h2 className='z-[1] text-2xl font-normal tracking-tighter text-[var(--gray9)] antialiased'>
52+
Work History
53+
</h2>
54+
{/* <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" /> */}
55+
</a>
56+
<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'>
57+
<div className='prodkt-card-avatar relative z-[1] flex size-16 items-center justify-center rounded-full'>
58+
<Aperture
59+
size={40}
60+
strokeWidth={1}
61+
className='text-[var(--mint2)] mix-blend-overlay dark:text-[var(--mint-a9)]'
62+
/>
63+
<div className='absolute size-8 bg-[var(--mint-a8)] blur-lg'></div>
64+
</div>
65+
<h2 className='z-[1] text-2xl font-normal tracking-tighter text-[var(--gray9)] antialiased'>
66+
Visuals
67+
</h2>
68+
{/* <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" /> */}
69+
</div>
70+
<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'>
71+
<div className='prodkt-card-avatar relative z-[1] flex size-16 items-center justify-center rounded-full'>
72+
<Scroll
73+
size={40}
74+
strokeWidth={1}
75+
className='text-[var(--violet2)] mix-blend-overlay dark:text-[var(--violet-a9)]'
76+
/>
77+
<div className='absolute size-8 bg-[var(--violet-a5)] blur-lg'></div>
78+
</div>
79+
<h2 className='z-[1] text-2xl font-normal tracking-tighter text-[var(--gray9)] antialiased'>
80+
Resume
81+
</h2>
82+
{/* <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" /> */}
83+
</div>
84+
</div>
85+
<div className='relative flex size-full flex-col items-start justify-center gap-2 overflow-hidden'>
86+
<div className='items-between flex w-full flex-col justify-start'>
87+
<div className='relative flex w-full flex-row items-start justify-start gap-2 px-4'>
88+
<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'>
89+
Frontend.
90+
</h6>
91+
<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'>
92+
Design.
93+
</h6>
94+
<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'>
95+
Development.
96+
</h6>
97+
<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'>
98+
Culture.
99+
</h6>
100+
<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'>
101+
People.
102+
</h6>
103+
<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'>
104+
Experience.
105+
</h6>
106+
</div>
107+
</div>
108+
</div>
109+
</div>
110+
</div>
111+
</div>
112+
)
113+
}

‎apps/prepare/src/components/about-bryan/dot-pattern.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { useId } from 'react'
2+
3+
import { cn } from '@/utils/cn'
4+
5+
interface DotPatternProps {
6+
width?: any
7+
height?: any
8+
x?: any
9+
y?: any
10+
cx?: any
11+
cy?: any
12+
cr?: any
13+
className?: string
14+
[key: string]: any
15+
}
16+
/**
17+
*
18+
* @param root0
19+
* @param root0.width
20+
* @param root0.height
21+
* @param root0.x
22+
* @param root0.y
23+
* @param root0.cx
24+
* @param root0.cy
25+
* @param root0.cr
26+
* @param root0.className
27+
*/
28+
export function DotPattern({
29+
width = 16,
30+
height = 16,
31+
x = 0,
32+
y = 0,
33+
cx = 1,
34+
cy = 1,
35+
cr = 1,
36+
className,
37+
...props
38+
}: Readonly<DotPatternProps>) {
39+
const id = useId()
40+
41+
return (
42+
<svg
43+
aria-hidden='true'
44+
className={cn(
45+
'pointer-events-none absolute inset-0 z-0 size-full fill-[var(--grayA3)]',
46+
className,
47+
)}
48+
{...props}
49+
>
50+
<defs>
51+
<pattern
52+
id={id}
53+
width={width}
54+
height={height}
55+
patternUnits='userSpaceOnUse'
56+
patternContentUnits='userSpaceOnUse'
57+
x={x}
58+
y={y}
59+
>
60+
<circle id='pattern-circle' cx={cx} cy={cy} r={cr} />
61+
</pattern>
62+
</defs>
63+
<rect width='100%' height='100%' strokeWidth={0} fill={`url(#${id})`} />
64+
</svg>
65+
)
66+
}
67+
68+
export default DotPattern

‎apps/prepare/src/components/about-bryan/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './bryan-funk-section'

‎apps/prepare/src/components/about-bryan/marquee.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/* eslint-disable @eslint-community/eslint-comments/disable-enable-pair */
2+
/* eslint-disable jsdoc/require-returns */
3+
/* eslint-disable jsdoc/require-param-description */
4+
5+
import { cn } from '@/utils/cn'
6+
7+
interface MarqueeProps {
8+
className?: string
9+
reverse?: boolean
10+
pauseOnHover?: boolean
11+
children?: React.ReactNode
12+
vertical?: boolean
13+
repeat?: number
14+
[key: string]: unknown
15+
}
16+
17+
/**
18+
*
19+
* @param root0
20+
* @param root0.className
21+
* @param root0.reverse
22+
* @param root0.pauseOnHover
23+
* @param root0.children
24+
* @param root0.vertical
25+
* @param root0.repeat
26+
*/
27+
export default function Marquee({
28+
className,
29+
reverse,
30+
pauseOnHover = false,
31+
children,
32+
vertical = false,
33+
repeat = 4,
34+
...props
35+
}: Readonly<MarqueeProps>) {
36+
return (
37+
<div
38+
{...props}
39+
className={cn(
40+
'group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]',
41+
{
42+
'flex-row': !vertical,
43+
'flex-col': vertical,
44+
},
45+
className,
46+
)}
47+
>
48+
{Array(repeat)
49+
.fill(0)
50+
.map((_, i) => (
51+
<div
52+
key={i}
53+
className={cn('flex shrink-0 justify-center [gap:var(--gap)]', {
54+
'animate-marquee flex-row': !vertical,
55+
'animate-marquee-vertical flex-col': vertical,
56+
'group-hover:[animation-play-state:paused]': pauseOnHover,
57+
'[animation-direction:reverse]': reverse,
58+
})}
59+
>
60+
{children}
61+
</div>
62+
))}
63+
</div>
64+
)
65+
}

‎apps/prepare/src/components/about-bryan/resume-section.jsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/* eslint-disable @eslint-community/eslint-comments/disable-enable-pair */
2+
/* eslint-disable jsdoc/require-returns */
3+
4+
// import type React from 'react'
5+
6+
import { CloudDownload } from 'lucide-react'
7+
8+
import BryanResume from '@prodkt/assets/resume/bryan-funk-resume-promo.webp'
9+
10+
/**
11+
*
12+
*/
13+
export default function ResumeSection() {
14+
return (
15+
<div className='h-auto w-full px-1 py-4 md:py-16 lg:py-28'>
16+
<div className='relative mx-auto flex w-full max-w-6xl flex-col items-center justify-center gap-4 lg:flex-row'>
17+
<div className='relative flex basis-1/3 flex-col items-center justify-center gap-5 lg:justify-start xl:items-start'>
18+
<h5 className='text-center text-6xl font-medium leading-none tracking-tight text-[var(--gray-11)] lg:text-left'>
19+
A leave behind.
20+
</h5>
21+
<p className='leading-none tracking-normal text-[var(--gray-9)] text-balance'>
22+
Print out for reference or for someone else in the office.
23+
</p>
24+
<a
25+
className='flex flex-row items-start justify-center gap-2'
26+
href='/resume/BryanFunk_CV-Resume_v2_001_reduced.pdf'
27+
>
28+
<CloudDownload
29+
strokeWidth={2.5}
30+
className='inset-0 z-[1] m-auto size-6 fill-[var(--gray-a1)] stroke-[var(--red-10)]'
31+
/>
32+
<p className='text-nowrap text-right font-medium leading-7 tracking-tighter underline decoration-[var(--red-10)] underline-offset-8'>
33+
Download Resume
34+
</p>
35+
</a>
36+
</div>
37+
<div className='relative flex basis-2/3 flex-col items-center justify-start'>
38+
<a
39+
href='/assets/downloads/BryanFunk_CV-Resume_v2_001_reduced.pdf'
40+
className='absolute z-[2] flex size-full flex-col items-center justify-center'
41+
>
42+
<div className='flex flex-row items-center justify-center gap-4'>
43+
<p className='text-right text-3xl font-medium leading-7 tracking-tighter text-[var(--gray-1)] dark:text-[var(--gray-12)]'>
44+
Download
45+
<br />
46+
Resume
47+
</p>
48+
<CloudDownload
49+
strokeWidth={2.5}
50+
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'
51+
/>
52+
</div>
53+
</a>
54+
<img
55+
src={BryanResume}
56+
alt='Bryan Funk Resume'
57+
className='h-auto w-full select-none rounded-3xl border ring saturate-0'
58+
/>
59+
</div>
60+
</div>
61+
</div>
62+
)
63+
}

0 commit comments

Comments
 (0)