Today marks another significant evolution of jpfchang.org with a comprehensive UI polish focused on extreme minimalism, improved user experience, and transparency about what I’m working on. This update strips away visual noise, clarifies the donation process, and announces my current technical focus areas.
Design Philosophy: Radical Minimalism
The latest redesign takes inspiration from TornadoVPS, embracing their philosophy of high-contrast, brutally simple design. Every decorative element has been scrutinized and removed if it doesn’t serve a functional purpose.
The Problem with Icons
The previous design relied heavily on third-party icon services (Icons8) for visual flair:
- Programming language icons (Dart, R, etc.) with inconsistent rendering
- Social share buttons with colorful brand icons
- Decorative UI elements throughout
Why this was problematic:
- External dependencies: Loading icons from icons8.com added HTTP requests and potential points of failure
- Visual inconsistency: Some icons loaded properly, others displayed as broken images
- Performance: External icon CDNs added latency
- Philosophy mismatch: Icons are visual decoration that distracts from content
The Solution: Text-Only Design
Every single decorative icon has been removed and replaced with clean text:
<!-- Before: Icon-heavy -->
<img src="https://img.icons8.com/color/32/dart.png" alt="Dart" />
<span>Dart</span>
<!-- After: Pure text badge -->
<span class="badge">Dart</span>What we kept:
- Official logos (FSF, EFF, etc.) - these are organizational identities
- Favicons - standard web practice for site identification
- Author Gravatar - personal identity representation
What we removed:
- All programming language icons → Text badges
- All social share icons → Text buttons
- All decorative UI icons → Minimalist SVG or text
Typography: Intel One Mono Everywhere
The site now uses Intel One Mono exclusively for both sans-serif and monospace needs:
font-family: {
sans: ['Intel One Mono', 'monospace'],
mono: ['Intel One Mono', 'monospace'],
}Why Intel One Mono?
- Clarity: Designed by Intel for readability at all sizes
- Monospace perfection: Perfect for code, terminal output, and technical content
- Professional minimalism: Geometric, utilitarian aesthetic
- Free & open: No licensing concerns
Color Palette: Pure Black & White
Following TornadoVPS’s lead, the color scheme has been simplified to pure grayscale:
colors: {
bg: '#ffffff', // Pure white
'bg-dark': '#000000', // Pure black
text: '#000000',
'text-dark': '#ffffff',
// Grays for hierarchy
'text-secondary': '#666666',
'text-muted': '#999999',
}No more colorful gradients or vibrant accents - just high-contrast black on white (or white on black in dark mode).
Improved Donation UX: No Signup Required!
One of the most confusing aspects of the previous design was the donation page. Users thought they needed to create an account to donate, which created unnecessary friction.
What Changed
Header clarification:
No signup required - Donate anonymously with cryptoForm field update:
- Old label: “Your Account Number (Optional)”
- New label: “Account Number (Optional - Leave blank for anonymous donation)”
- Old placeholder: “ACC-2024-XXXXXXXX (optional)”
- New placeholder: “Leave blank to donate anonymously”
Help text rewrite:
Only enter an account number if you want to track your donation.
Most people donate anonymously.Why This Matters
Privacy by default: Cryptocurrencies enable pseudonymous transactions. Requiring account creation defeats this purpose.
Lower friction: Anonymous donations require only two inputs:
- Amount ($1-$1000)
- Optional message
Transparency: Makes it crystal clear that donations don’t require any personal information.
Announcing My Current Focus Areas
I’m now explicitly sharing what I’m working on. Transparency builds trust and helps potential collaborators find me.
1. GNU Hurd
The GNU Hurd is the GNU project’s kernel, designed to overcome limitations of Unix-like kernels. I’m contributing to:
- Microkernel architecture research
- Porting modern software to Hurd
- Documentation improvements
Why Hurd? Freedom. The Hurd represents the GNU project’s vision of a completely free operating system. While Linux dominates, the Hurd’s microkernel design offers unique advantages for security and modularity.
2. Apple Devices
Developing for macOS and iOS platforms:
- SwiftUI applications
- Native performance optimization
- Cross-platform Swift packages
Why Apple? Despite being closed-source, Apple’s platforms offer excellent developer tools and a large user base willing to pay for quality software.
3. Web3 & Cryptocurrencies
Exploring decentralized technologies:
- DeFi protocols and smart contracts
- Cryptocurrency payment integration (this site uses NOWPayments)
- Blockchain-based identity systems
Why Web3? Decentralization reduces single points of failure and censorship. Cryptocurrencies enable global, permissionless payments - as demonstrated by this site’s donation system.
Share Button Improvements
Social sharing has been redesigned with text-based buttons instead of brand icons:
<!-- Before: Icon images from icons8.com -->
<img src="https://img.icons8.com/color/32/mastodon.png" />
<!-- After: Clean text buttons -->
<button class="share-btn">Mastodon</button>Enhanced Mastodon UX
The Mastodon share button now includes:
- Instance memory: Saves your Mastodon instance to localStorage
- Common instances list: Shows mastodon.social, mstdn.social, fosstodon.org, mas.to in the prompt
- Smart defaults: Pre-fills your saved instance
const savedInstance = localStorage.getItem('mastodon-instance');
const instance = prompt(
`Enter your Mastodon instance:\n\nCommon instances:\n- mastodon.social\n- mstdn.social\n- fosstodon.org\n- mas.to`,
savedInstance || 'mastodon.social'
);Why this matters: Mastodon’s federated nature means every user has a different instance URL. Remembering it significantly improves UX.
Technical Implementation Details
Icon Removal Strategy
Step 1: Audit
# Find all icon usage
grep -r "icons8.com" src/
grep -r "<Icon" src/Step 2: Replace systematically
- LanguageIcon.astro: Removed Dart, kept only working icons
- About page: Replaced all skill icons with text badges
- BlogLayout.astro: Replaced share icons with text buttons
- Removed Icon component imports across 15+ files
Step 3: Test
- Visual regression testing in light/dark modes
- Mobile responsive testing
- Performance measurement (removed 6 external HTTP requests)
Font Integration
Implementation:
<!-- Intel One Mono via jsDelivr CDN -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/[email protected]/300.css" />
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/[email protected]/400.css" />
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/[email protected]/500.css" />
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/[email protected]/700.css" />Performance impact:
- Font weights: 4 files (~50KB total compressed)
- Loaded via CDN with preconnect optimization
- Self-hosted alternative available via @fontsource npm package
Color System Refactor
Before: Complex color palette
colors: {
forest: { 50-900 }, // 10 shades
sky: { 50-900 }, // 10 shades
sunset: { 50-900 }, // 10 shades
// ...hundreds of color definitions
}After: Minimal grayscale
colors: {
bg: '#ffffff',
'bg-dark': '#000000',
'bg-secondary': '#f8f8f8',
'bg-secondary-dark': '#1b1b1b',
text: '#000000',
'text-dark': '#ffffff',
'text-secondary': '#666666',
}Benefits:
- Smaller CSS bundle
- Easier to maintain
- Faster design decisions
- Better accessibility (always high contrast)
Performance Metrics
Before this update:
- 18 external icon requests to icons8.com
- Complex color calculations in CSS
- Multiple font families loaded
After this update:
- 0 external icon requests
- Simple grayscale calculations
- Single font family (Intel One Mono)
Measured improvements:
- First Contentful Paint: -120ms
- Largest Contentful Paint: -200ms
- HTTP requests: -18 requests
- CSS bundle size: -8KB
Lessons Learned
1. Minimalism is Harder Than It Looks
Removing features is psychologically difficult. Every icon felt like it added “polish.” But simplicity requires discipline - if an element doesn’t serve the content, it’s visual noise.
2. External Dependencies are Liabilities
Icons8’s CDN worked fine 99% of the time. But that 1% created visual bugs that confused users (Dart icon, R icon, Mastodon icon all had rendering issues). Self-contained is better than convenient.
3. User Feedback is Gold
The “signup required for donation” confusion came from real user feedback. Assumptions kill UX - test with actual users who don’t know your system.
4. Context Switching Costs
Having both a colorful design and a minimalist design in mind created decision paralysis. Picking one aesthetic and committing made subsequent decisions trivial.
What’s Next
Short Term
- Add article search with full-text indexing
- Improve mobile navigation UX
- Add RSS feed for blog updates
- Performance: investigate Astro partial hydration
Medium Term
- GNU Hurd development blog series
- Web3 integration tutorials
- Apple platform development guides
- Cryptocurrency payment acceptance guide
Long Term
- Interactive code examples with live execution
- Peer-to-peer content distribution via IPFS
- Decentralized identity integration
- Self-hosted Fediverse instance
Conclusion
This update represents a philosophical shift toward minimalism, transparency, and focus. By removing visual distractions, clarifying the donation process, and publicly committing to specific technical directions, jpfchang.org becomes a more honest reflection of my work.
The core principle: Content over chrome. Every pixel should serve the reader, not the designer’s ego.
If you notice any issues or have suggestions, please get in touch. And if this content is valuable, consider supporting my work - no signup required!
Technical Stack: Astro 5.x, Tailwind CSS, Cloudflare Workers, Intel One Mono, NOWPayments crypto integration