Modern, interactive portfolio showcasing projects, skills, and professional journey. Built with React 19, Vite, and packed with interactive development tools.
Live Demo: danielchahine0.github.io
- Responsive design with smooth Framer Motion transitions
- Dark/Light theme toggle with localStorage persistence
- Interactive star field and cloud backgrounds
- Project showcase with tech stack details and live demos
- Experience timeline and skills visualization
- Markdown-based blog system
- Downloadable resume and contact integration
- BMR & TDEE calculator with activity level customization
- Goal-based calorie recommendations (loss, maintenance, gain)
- Macronutrient breakdown with customizable ratios
- Daily meal logging with visual progress tracking
- Persistent storage for user data
- World clock with multiple time zones
- Pomodoro timer with session tracking
- Alarm system with custom labels
- Countdown timer with audio/visual alerts
- Interactive HSL/RGB/HEX color picker
- Harmony generator (complementary, analogous, triadic)
- Popular palettes library with save/export
- Accessibility contrast checker (WCAG)
- Color blindness simulator
- Brightness, contrast, saturation, hue adjustments
- Preset filters (grayscale, sepia, blur, sharpen)
- Rotation, flip, crop, and resize tools
- Undo/redo with full history stack
- Export in PNG/JPEG with quality control
- Multi-language support (HTML, CSS, JavaScript)
- Live preview with syntax highlighting
- Project management with localStorage
- Error console and code templates
- Export projects as ZIP files
- 4,680-week grid representing 90 years
- Age calculation with milestone markers
- Color-coded life phases
- Statistical context and societal comparisons
- Export and share as PNG
- Live preview with GitHub Flavored Markdown
- Syntax highlighting for code blocks
- Table support and task lists
- Template library for common formats
- Export as Markdown or HTML
- Word, character, sentence, paragraph counts
- Reading time estimates
- Readability scores (Flesch, SMOG)
- Keyword extraction and sentiment analysis
- Case conversion and text cleanup
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Deploy to GitHub Pages
npm run deploysrc/
├── components/ # UI components (NavBar, Footer, HeroSection, etc.)
│ └── ui/ # Primitives (toast, toaster)
├── hooks/ # Custom hooks (use-glow-effect, use-toast)
├── lib/ # Utilities (utils.js)
├── pages/ # Route pages and interactive tools
├── App.jsx # Main app with AnimatedRoutes
├── index.css # Global styles
└── main.jsx # Entry point
Full documentation: src/README.md
Short-term
- Image Editor Enhancements: Layer system, text overlays, drawing tools
- Code Playground V2: Multi-file projects, npm package imports, React preview
- Resume Builder: Interactive resume creator with PDF export
- Animation Library: Reusable micro-interactions and transitions showcase
- Blog Comments: Integration with GitHub Discussions or similar
- Search Functionality: Global search for projects, skills, and blog posts
Long-term
- Portfolio Analytics: Visitor statistics and interaction heatmaps
- Content Management: Admin panel for blog posts and project updates
- API Integration: GitHub stats, WakaTime coding activity
- 3D Elements: Three.js background scenes and interactive models
- Collaboration Tools: Real-time code playground sharing
- Progressive Web App: Offline support and installable app
- Multi-language Support: i18n for portfolio content
- Guest Book: Visitor messages with moderation
- Project Deep Dives: Interactive case studies with embedded demos
- Developer Blog Platform: RSS feed, categories, tags, and series
Experimental
- AI Code Assistant: In-browser code suggestions and documentation lookup
- Voice Commands: Navigate portfolio using speech recognition
- AR Business Card: WebXR experience for mobile devices
- Live Coding Streams: Embedded Twitch/YouTube integration
- Gamification: Achievement system for exploring portfolio features
Email: Chahinedaniel0@gmail.com LinkedIn: Daniel Chahine GitHub: DanielChahine0 Instagram: @dxni.ch
Personal and educational use. Feel free to explore and get inspired!