-
-
- Void Works
-
-
Products for the modern era
-
+
+ Void Works
+
+ From browser extensions to mobile apps and web applications, we create tools that solve real-world problems.
+
+
)
diff --git a/src/components/product-card.tsx b/src/components/product-card.tsx
deleted file mode 100644
index 9110715..0000000
--- a/src/components/product-card.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import { ArrowRight } from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-import Link from 'next/link'
-
-
-interface ProductCardProps {
- name: string
- icon: LucideIcon
- description: string
- color: string
- url: string
- linkText: string
- index: number
- isVisible: boolean
- reversed?: boolean
-}
-
-// Animation timing constants
-const STAGGER_DELAY = 100
-const ICON_DELAY_OFFSET = 200
-const TITLE_DELAY_OFFSET = 400
-const DESCRIPTION_DELAY_OFFSET = 600
-const BUTTON_DELAY_OFFSET = 800
-
-export function ProductCard({
- name,
- icon: Icon,
- description,
- color,
- url,
- linkText,
- index,
- isVisible,
- reversed = false,
-}: ProductCardProps): React.ReactNode {
- const baseDelay = index * STAGGER_DELAY
-
- return (
-
-
- {/* Icon Side */}
-
-
-
-
- {/* Content Side */}
-
-
-
- )
-}
diff --git a/src/components/product-grid.tsx b/src/components/product-grid.tsx
deleted file mode 100644
index 32043f8..0000000
--- a/src/components/product-grid.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client'
-
-import { ProductCard } from '@/components/product-card'
-import type { Product } from '@/config/products'
-import { useIntersectionObserver } from '@/hooks/use-intersection-observer'
-
-
-interface ProductGridProps {
- products: Product[]
-}
-
-export function ProductGrid({ products }: ProductGridProps): React.ReactNode {
- const { visibleIndices, setRef } = useIntersectionObserver(products.length, {
- threshold: 0.3,
- rootMargin: '-50px',
- })
-
- return (
-
- {products.map((product, index) => (
-
- ))}
-
- )
-}
diff --git a/src/components/project-card.tsx b/src/components/project-card.tsx
new file mode 100644
index 0000000..5532105
--- /dev/null
+++ b/src/components/project-card.tsx
@@ -0,0 +1,33 @@
+import type { Product } from '@/config/products'
+
+
+interface ProjectCardProps {
+ product: Product
+ index: number
+}
+
+export function ProjectCard({ product, index }: ProjectCardProps): React.ReactNode {
+ const number = String(index + 1).padStart(2, '0')
+
+ return (
+
+
+
+ {product.tag}
+
+ {number}
+
+ {product.name}
+ {product.description}
+
+ {product.linkText}
+ →
+
+
+ )
+}
diff --git a/src/components/projects-section.tsx b/src/components/projects-section.tsx
new file mode 100644
index 0000000..8aaa383
--- /dev/null
+++ b/src/components/projects-section.tsx
@@ -0,0 +1,23 @@
+import { ProjectCard } from '@/components/project-card'
+import { products } from '@/config/products'
+
+
+export function ProjectsSection(): React.ReactNode {
+ const count = String(products.length).padStart(2, '0')
+
+ return (
+
+
+
+ Projects
+
+ {count}
+
+
+ {products.map((product, index) => (
+
+ ))}
+
+ )
+}
diff --git a/src/components/scroll-indicator.tsx b/src/components/scroll-indicator.tsx
deleted file mode 100644
index 186701b..0000000
--- a/src/components/scroll-indicator.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client'
-
-import { ChevronDown } from 'lucide-react'
-
-
-export function ScrollIndicator(): React.ReactNode {
- const handleClick = (): void => {
- document.getElementById('products')?.scrollIntoView({ behavior: 'smooth' })
- }
-
- return (
-
-
- )
-}
diff --git a/src/config/links.ts b/src/config/links.ts
index 0129c78..319a5f3 100644
--- a/src/config/links.ts
+++ b/src/config/links.ts
@@ -1,6 +1,9 @@
-import { Activity, Mail } from 'lucide-react'
+import { Activity } from 'lucide-react'
+export const CONTACT_EMAIL = 'hello@voidworks.io'
+export const CONTACT_HREF = `mailto:${CONTACT_EMAIL}`
+
export interface FooterLink {
label: string
href: string
diff --git a/src/config/products.ts b/src/config/products.ts
index ef03302..8e39fe1 100644
--- a/src/config/products.ts
+++ b/src/config/products.ts
@@ -1,11 +1,7 @@
-import { ArrowBigUpDash, Check, Chrome, LucideIcon, Smartphone, Vote } from 'lucide-react'
-
-
export interface Product {
name: string
- icon: LucideIcon
+ tag: string
description: string
- color: string
url: string
linkText: string
}
@@ -13,43 +9,31 @@ export interface Product {
export const products: Product[] = [
{
name: 'Checkmark',
- icon: Check,
+ tag: 'Desktop & web',
description: 'A to-do app built with keyboard power users in mind.',
- color: 'from-green-600/20 via-green-500/20 to-green-600/20',
url: 'https://checkmark.day',
- linkText: 'Learn More',
+ linkText: 'Learn more',
},
{
name: 'Spades',
- icon: Vote,
+ tag: 'Web',
description:
'Improve your team\'s pointing poker sessions with our AI enhanced platform that integrates with Linear.',
- color: 'from-indigo-600/20 via-blue-500/20 to-purple-500/20',
url: 'https://spades.poker',
- linkText: 'Learn More',
+ linkText: 'Visit spades.poker',
},
{
name: 'GBx',
- icon: Smartphone,
+ tag: 'iOS',
description: 'A harm reduction mobile application designed to promote safety and informed decision-making.',
- color: 'from-purple-600/20 via-violet-500/20 to-pink-500/20',
url: 'https://apps.apple.com/us/app/gbx/id6749517571',
- linkText: 'Download on the App Store',
+ linkText: 'View on the App Store',
},
{
name: 'Trawl',
- icon: ArrowBigUpDash,
+ tag: 'Editor extension',
description: 'A VSCode/Cursor extension that auto-completes package names and versions, and highlights outdated dependencies.',
- color: 'from-green-600/20 via-lime-500/20 to-emerald-500/20',
url: 'https://marketplace.visualstudio.com/items?itemName=VoidWorks.trawl',
- linkText: 'Learn More',
+ linkText: 'Get it on the Marketplace',
},
- {
- name: 'Shortcut Assistant',
- icon: Chrome,
- description: 'Enhance your browsing experience with powerful keyboard shortcuts and productivity tools.',
- color: 'from-blue-600/20 via-blue-500/20 to-purple-600/20',
- url: 'https://chromewebstore.google.com/detail/shortcut-assistant/kmdlofehocppnlkpokdbiaalcelhedef',
- linkText: 'Install Extension',
- }
]
diff --git a/src/hooks/use-intersection-observer.ts b/src/hooks/use-intersection-observer.ts
deleted file mode 100644
index 683736e..0000000
--- a/src/hooks/use-intersection-observer.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-
-
-interface UseIntersectionObserverOptions {
- threshold?: number
- rootMargin?: string
-}
-
-interface UseIntersectionObserverReturn {
- visibleIndices: Set
- setRef: (index: number) => (element: HTMLDivElement | null) => void
-}
-
-export function useIntersectionObserver(
- itemCount: number,
- options: UseIntersectionObserverOptions = {}
-): UseIntersectionObserverReturn {
- // eslint-disable-next-line no-magic-numbers
- const { threshold = 0.3, rootMargin = '-50px' } = options
- const [visibleIndices, setVisibleIndices] = useState>(new Set())
- const refs = useRef<(HTMLDivElement | null)[]>([])
-
- useEffect(() => {
- const observer = new IntersectionObserver(
- (entries) => {
- entries.forEach((entry) => {
- if (entry.isIntersecting) {
- const index = refs.current.indexOf(entry.target as HTMLDivElement)
- if (index !== -1) {
- setVisibleIndices(prev => new Set(prev).add(index))
- }
- }
- })
- },
- {
- threshold,
- rootMargin,
- }
- )
-
- // Observe all non-null refs
- refs.current.forEach((ref) => {
- if (ref) {
- observer.observe(ref)
- }
- })
-
- return () => {
- observer.disconnect()
- }
- }, [threshold, rootMargin])
-
- const setRef = (index: number) => (element: HTMLDivElement | null) => {
- refs.current[index] = element
- }
-
- return { visibleIndices, setRef }
-}
diff --git a/src/types/css.d.ts b/src/types/css.d.ts
new file mode 100644
index 0000000..6e828e6
--- /dev/null
+++ b/src/types/css.d.ts
@@ -0,0 +1,4 @@
+// Next.js only declares `*.module.css`, so global stylesheet imports need their own
+// declaration once `noUncheckedSideEffectImports` is in effect. Global CSS has no
+// exports, so the module body stays empty.
+declare module '*.css' {}