WIP

panda.config.ts

@@ -53,52 +53,52 @@ const semanticTokens = defineSemanticTokens({
  bg: {
  primary: {
  value: {
- _osLight: hsl(97),
- _osDark: hsl(7)
+ _light: hsl(97),
+ _dark: hsl(7)
  }
  },
  secondary: {
  value: {
- _osLight: hsl(95),
- _osDark: hsl(10)
+ _light: hsl(95),
+ _dark: hsl(10)
  }
  },
  code: {
  value: {
- _osLight: hsl(92),
- _osDark: hsl(12)
+ _light: hsl(92),
+ _dark: hsl(12)
  }
  },
  button: {
  value: {
- _osLight: hsl(92),
- _osDark: hsl(12)
+ _light: hsl(92),
+ _dark: hsl(12)
  }
  }
  },
  border: {
  primary: {
  value: {
- _osLight: hsl(90),
- _osDark: hsl(15)
+ _light: hsl(90),
+ _dark: hsl(15)
  }
  },
  secondary: {
  value: {
- _osLight: hsl(90),
- _osDark: hsl(12)
+ _light: hsl(90),
+ _dark: hsl(12)
  }
  }
  },
  text: {
  primary: {
- value: { _osLight: hsl(0), _osDark: hsl(100) }
+ value: { _light: hsl(0), _dark: hsl(100) }
  },
  secondary: {
- value: { _osLight: hsl(0), _osDark: hsl(60) }
+ value: { _light: hsl(30), _dark: hsl(85) }
  },
  dimmed: {
- value: { _osLight: hsl(60), _osDark: hsl(40) }
+ value: { _light: hsl(60), _dark: hsl(40) }
  }
  }
  }
@@ -108,7 +108,7 @@ const globalCss = defineGlobalStyles({
  html: {
  backgroundColor: 'bg.primary',
  textRendering: 'optimizeLegibility',
- color: 'text.primary',
+ color: 'text.secondary',
  fontSize: 'md',
  fontWeight: 'medium',
  lineHeight: 'md',
@@ -139,6 +139,7 @@ const globalCss = defineGlobalStyles({
  textDecorationThickness: 1,
  textUnderlineOffset: 4,
  transition: 'color 0.2s ease-in-out',
+ color: 'text.primary',
  '&:hover': {
  color: 'text.dimmed'
  }
@@ -152,6 +153,7 @@ const globalCss = defineGlobalStyles({
  borderStyle: 'solid'
  },
  'b, strong': {
+ color: 'text.primary',
  fontWeight: 'bold'
  },
  'h1, h2, h3, h4, h5, h6': {
@@ -165,13 +167,20 @@ const globalCss = defineGlobalStyles({
  fontFamily: 'Menlo, monospace',
  fontSize: '0.85rem'
  },
- li: {
- marginBottom: 'sm'
- },
- 'p, .notion-text, .notion-toggle, .notion-code, .notion-quote, .notion-callout, .notion-asset-wrapper':
+ 'p, li, .notion-text, .notion-toggle, .notion-code, .notion-quote, .notion-callout, .notion-asset-wrapper':
  {
- marginBottom: 'md'
+ marginTop: 'md'
  },
+ '.notion-callout': {
+ marginTop: 'lg',
+ marginBottom: 'lg'
+ },
+ '.notion-asset-wrapper-image > div': {
+ marginTop: 'lg',
+ marginBottom: 'lg',
+ maxWidth: '120%!',
+ width: '120%!'
+ },
  h1: {
  fontSize: '1.25rem',
  color: 'text.primary',
@@ -180,16 +189,13 @@ const globalCss = defineGlobalStyles({
  },
  h2: {
  marginTop: '4rem',
- marginBottom: '1rem',
  fontSize: '0.85rem'
  },
  h3: {
- marginTop: '3rem',
- marginBottom: '0.75rem'
+ marginTop: '3rem'
  },
  h4: {
- marginTop: '2.5rem',
- marginBottom: '0.75rem'
+ marginTop: '2.5rem'
  },
  '::selection': {
  color: 'bg.primary',

src/modules/about/about.page.tsx

@@ -72,9 +72,16 @@ export function About() {
  </p>
 
  <h2>{'Experience'}</h2>
+ <p>A summary of my work so far:</p>
  <div>
  <CompanyItem
- date={'July 2023 - Present'}
+ date={'Dec 2023 - Present'}
+ company={'Vitruve'}
+ title={'Tech Lead'}
+ stack={'Vite, React, Nest'}
+ />
+ <CompanyItem
+ date={'July 2023 - Dec 2023'}
  company={'InCloudForever'}
  title={'Fullstack Engineer'}
  stack={'Next, Nest'}
@@ -121,24 +128,20 @@ function CompanyItem({ company, title, date, stack }) {
  bg={'bg.secondary'}
  gap={'sm'}
  p={'md'}
- mb={'md'}
+ mt={'md'}
  columns={2}
  alignItems={'baseline'}
  >
  <Stack gap={0}>
  <Typography color={'text.primary'} fontWeight={'bold'}>
  {title}
  </Typography>
- <Typography color={'text.dimmed'} fontSize={'sm'}>
- {company}
- </Typography>
+ <Typography color={'text.dimmed'}>{company}</Typography>
  </Stack>
 
  <Stack gap={0} textAlign={'right'}>
  <Typography color={'text.secondary'}>{stack}</Typography>
- <Typography color={'text.dimmed'} fontSize={'sm'}>
- {date}
- </Typography>
+ <Typography color={'text.dimmed'}>{date}</Typography>
  </Stack>
  </Grid>
  )

src/modules/home/home.page.tsx

@@ -15,17 +15,17 @@ export const metadata: Metadata = {
 export function Home() {
  return (
  <Page title={HOME.title} showGoBack={false}>
- <p>
+ <span>
  Software craftsman. Passionate about software design and crafting
  digital products. Open source contributor.
- </p>
+ </span>
 
  <h2>{'Explore'}</h2>
- <Grid columns={5} gap={'lg'} alignItems={'baseline'}>
+ <Grid mt={'md'} columns={2} gap={'lg'} alignItems={'baseline'}>
  {PAGES.map(page => (
  <Stack key={page.href}>
  <Link href={page.href}>{page.title}</Link>
- <p>{page.description}</p>
+ <span>{page.description}</span>
  </Stack>
  ))}
  </Grid>

src/modules/projects/projects.page.tsx

@@ -8,14 +8,7 @@ import { Metadata } from 'next'
 import { PROJECTS } from '@/shared/constants'
 
 // Components
-import {
- NotionRenderer,
- Stack,
- Page,
- Grid,
- Typography,
- Link
-} from '@/shared/components'
+import { NotionRenderer, Stack, Page, Typography } from '@/shared/components'
 
 export const revalidate = 86400 * 7
 export const metadata: Metadata = {
@@ -40,7 +33,11 @@ export async function Projects() {
  {projects.map(({ id, name, content, description }) => {
  return (
  <Stack borderTop={'primary'} py={'md'} key={id}>
- <Typography textStyle={'lg'} fontWeight={'bolder'}>
+ <Typography
+ textStyle={'lg'}
+ fontWeight={'bolder'}
+ color={'text.primary'}
+ >
  {name}
  </Typography>
  <Stack gap={'lg'}>

src/modules/stack/stack.page.tsx

@@ -33,8 +33,8 @@ export async function StackPage() {
 
  render.push(
  <div key={tag}>
- <styled.h2 mt={0}>{tag}</styled.h2>
- <Stack gap={'md'}>
+ <h2>{tag}</h2>
+ <Stack pt={'md'} gap={'md'}>
  {sortedGroup.map(({ link, name, description }) => (
  <Grid gridTemplateColumns={'0.5fr 1fr'} key={link}>
  <Link href={link} target={'_blank'}>
@@ -55,7 +55,7 @@ export async function StackPage() {
 
  return (
  <Page {...STACK}>
- <Stack gap={60}>{render}</Stack>
+ <Stack>{render}</Stack>
  </Page>
  )
 }