Overview
This very portfolio website you're viewing! Built with Deno Fresh for blazing-fast performance and Tailwind CSS for styling. Features include a terminal-themed hero section with typing animations, Matrix-style code rain background, scroll-triggered animations, and a markdown-based content management system for easy updates.
Key Features
- Terminal-Style Hero - Authentic terminal experience with command prompt and typing effects
- Matrix Code Rain - Canvas-based animated background with falling code characters
- Scroll Animations - Beautiful fade-in and slide-up effects triggered on scroll
- Markdown CMS - File-based content management for projects and skills
- Dynamic Project Pages - Each project gets its own detailed page from markdown
- Responsive Design - Looks great on all devices
- Dark Mode Optimized - Terminal theme with excellent contrast
- Fast Performance - Server-side rendering with Deno Fresh
Technical Stack
Deno Fresh
Chose Deno Fresh for its modern approach to web development. The framework provides:
- Zero runtime overhead with islands architecture
- Built-in TypeScript support
- No build step in development
- Edge-ready deployment
Canvas Animation
The Matrix-style code rain is implemented using Canvas API:
- Falling characters with random speeds
- Mix of binary digits and Japanese katakana
- Optimized rendering loop for smooth 60fps
- Responsive to window resize
Content Management
Created a markdown-based CMS that:
- Uses frontmatter for metadata (YAML)
- Renders markdown to HTML with
marked - Supports code syntax highlighting
- Enables easy content updates without code changes
- Can be extended for blog posts
Animations
Multiple animation techniques used:
- CSS keyframe animations for entrance effects
- Intersection Observer API for scroll triggers
- Custom React hooks for typing effect
- Canvas API for code rain background
- Tailwind for smooth transitions
Challenges & Solutions
Challenge: Creating performant Canvas animations without impacting page performance.
Solution: Used requestAnimationFrame for smooth rendering and implemented efficient update logic. Only redraw when necessary and use alpha transparency for fade effects instead of clearing and redrawing the entire canvas.
Challenge: Implementing a smooth typing effect without blocking the UI.
Solution: Created a custom React hook that uses setTimeout to control typing speed. The hook handles cleanup properly to prevent memory leaks and supports different speeds and delays for each text element.
Design Philosophy
The design embraces a programmer aesthetic with:
- Monospace fonts (Fira Code) for code authenticity
- Terminal colors - Green prompts, blue operators, orange strings
- Dark theme - Easier on the eyes, better for showcasing code
- Glassmorphism - Backdrop blur for modern terminal look
- Subtle animations - Enhances without distracting
What I Learned
- Mastered Deno Fresh framework and islands architecture
- Canvas API for creating performant animations
- Creating programmer-themed UI designs
- Building accessible interactive components
- Implementing markdown-based content management
- Optimizing animations for 60fps performance
- Progressive enhancement principles
Recent Updates
- ✅ Blog Section - Fully implemented with markdown-based posts, categories, and tags
- ✅ Internationalization (i18n) - Added URL-based multi-language support for English and German
- ✅ Dynamic Project Pages - Each project has a dedicated detail page with terminal aesthetics
- ✅ Command Palette - Quick navigation across the site with keyboard shortcuts
Future Enhancements
- Implement search functionality for projects and blog posts
- Add more terminal commands and Easter eggs
- Create a contact form with validation
- Add syntax highlighting for code blocks in markdown
- Implement analytics to track popular projects
- Add RSS feed for blog updates