Skip to content

Commit

Permalink
Merge pull request #5 from prodkt/next
Browse files Browse the repository at this point in the history
version bump
  • Loading branch information
prodkt authored Nov 25, 2024
2 parents fb9f300 + b51f988 commit 30cb56e
Show file tree
Hide file tree
Showing 378 changed files with 32,991 additions and 181 deletions.
1 change: 1 addition & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"next",
"next/core-web-vitals",
"prettier",
"plugin:tailwindcss/recommended",
"plugin:tailwindcss/recommended"
],
"plugins": ["tailwindcss"],
Expand Down
41 changes: 41 additions & 0 deletions apps/prepare/src/components/about-bryan/about-bryan.stories.tsx
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 apps/prepare/src/components/about-bryan/bryan-funk-section.tsx
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>
)
}
68 changes: 68 additions & 0 deletions apps/prepare/src/components/about-bryan/dot-pattern.tsx
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
1 change: 1 addition & 0 deletions apps/prepare/src/components/about-bryan/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './bryan-funk-section'
65 changes: 65 additions & 0 deletions apps/prepare/src/components/about-bryan/marquee.tsx
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 apps/prepare/src/components/about-bryan/resume-section.jsx
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>
)
}
Loading

0 comments on commit 30cb56e

Please sign in to comment.