Personal Nexus

A modern personal website that connects all your decentralized content in one place.
Not to be confused with the Torment Nexus.

Personal Nexus is a React SSR website that serves as a central hub for your distributed digital identity, aggregating content from multiple AT Protocol sources and platforms into a beautiful, accessible personal website.

• Blog Posts: Latest articles from Leaflet publication via JSON feed
• Check-ins: Location updates from DropAnchor via AT Protocol
• Book Updates: Reading activity from Bookhive via AT Protocol
• Projects: Showcase of apps and open source contributions

• Responsive Grid Layouts: 3 columns on desktop, 1 on mobile
• Custom Typography: Caprasimo, Lato, and Outfit font stack
• Accessible Color Palette: WCAG 2.2 AA compliant purple/pink theme
• Card-based UI: Consistent hover and interaction states
• Thumbnails: App icons and book cover images

• WCAG 2.2 AA Compliance: 4.5:1 contrast ratios throughout
• Semantic HTML: Proper landmarks and ARIA labels
• Screen Reader Support: Optimized for assistive technologies
• Keyboard Navigation: Full keyboard accessibility

• React 18 SSR: Server-side rendering optimized for val.town
• AT Protocol Integration: Native support for decentralized protocols
• Deno Runtime: Modern ESM imports, no Node.js dependencies
• TypeScript: Full type safety with comprehensive interfaces
• Server-side Caching: 1-hour cache for all external API calls

The easiest way to get started is to remix this project on Val.town - you can fork it directly and start customizing immediately.

# Format code
deno fmt

# Lint code  
deno lint

# Deploy to val.town
deno task deploy

The website automatically aggregates content from:

• Leaflet Publication - Blog posts and articles
• DropAnchor - Location check-ins via AT Protocol
• Bookhive - Book reading updates via AT Protocol
• GitHub - Open source projects and contributions

• ATPROTO_HANDLE: Your AT Protocol handle (defaults to "tijs.org")
• LEAFLET_PUB_JSON: URL to your Leaflet publication JSON feed

The website is designed to be easily customizable:

• Update personal information in components/ProfileHeader.tsx
• Modify app showcase in components/AppsSection.tsx
• Adjust color themes in component stylesheets
• Configure external links in components/ExternalLinks.tsx

Personal Nexus uses server-side rendering to generate HTML with dynamic content from multiple decentralized sources:

1. AT Protocol Integration: Connects directly to your PDS (Personal Data Server)
2. Data Aggregation: Fetches and combines content from various platforms
3. Server-side Caching: Implements intelligent caching to reduce API calls
4. Graceful Fallbacks: Handles network issues and missing data elegantly

• Frontend: React 18 with server-side rendering
• Runtime: Deno with modern ESM imports
• Hosting: Val.town platform
• Protocols: AT Protocol (@atproto/api)
• Languages: TypeScript for type safety
• Styling: CSS-in-JS with responsive design

• Deno runtime
• Val.town account for hosting
• AT Protocol handle for decentralized content
• Optional: Custom domain setup

This project demonstrates modern web development practices with decentralized protocols. Feel free to fork and adapt for your own personal website!

Open source - feel free to use as inspiration for your own personal nexus.