Following my experiments with GatsbyJS and static site generators, I'm ready to tackle something more ambitious. This iteration is about learning modern JavaScript frameworks through practical application, using my portfolio as both the learning ground and the end product.
Learning through iteration
My previous Angular and Jekyll setup taught me a lot about architectural complexity. The hybrid approach created maintenance headaches, and GitHub Pages wasn't flexible enough for the portfolio-blog separation I wanted. More importantly, I lost the development environment entirely, making updates nearly impossible.
This time, I'm approaching the rebuild strategically: use it as a learning vehicle for technologies I want to master professionally.
Technical architecture planning
Content will remain in Markdown, that's proven reliable. The key decision is between client-side rendering with a JavaScript parser versus build-time compilation into static assets served via APIs.
If I go with the latter approach, I'm looking at a proper backend using Express.js, with hosting options like Heroku or Firebase for deployment. This naturally leads toward exploring the MERN stack (MongoDB, Express, React, Node.js).
Design direction: data-driven portfolio
The design concept revolves around data visualization and personal analytics. I want to integrate RescueTime data to display productivity analytics, creating a dynamic portfolio that reflects actual work patterns across devices.
This approach was inspired by Gyroscope, an application that consolidates user data from multiple devices into beautiful, unified interfaces. While I won't copy their approach directly, their design philosophy of making personal data compelling resonates with what I want to achieve.
Framework learning strategy
After working extensively with Angular 1.x and some Angular 2 professionally, I'm curious about the broader JavaScript ecosystem. React has been generating significant industry buzz, and 2016 feels like the right time to understand why.
Why React for this project?
React's adoption was accelerating rapidly, and the component architecture aligned with the modern development patterns I'd been learning. The npm ecosystem had plenty of packages for data visualization, API integration, and UI components. And honestly, I wanted the chance to compare React patterns against my Angular experience.
The plan is to build the entire solution within a single framework ecosystem, avoiding the architectural complexity that plagued previous versions.
Technical implementation goals
Data integration
- RescueTime API for productivity analytics
- GitHub API for development activity
- Custom content management for portfolio pieces
- Real-time data visualization components
Architecture requirements
- Clean separation between portfolio and blog content
- Independent deployment of different sections
- Scalable data management (considering MongoDB)
- Performance optimization for data-heavy visualizations
Learning context: React in 2016
React was still relatively young in late 2016, version 15.x was current, with the ecosystem rapidly evolving. Create React App had just launched, making setup significantly easier. The component-based architecture felt like a natural evolution from the Angular component patterns I'd been working with professionally.
The technologies I wanted to explore were React + Redux for state management, Express.js for the backend API, MongoDB for flexible content storage, and D3.js for custom data visualizations.
Project timeline and constraints
With ongoing professional projects consuming most of my time, this becomes an evening and weekend learning project. The trick is maintaining momentum with healthy dose of exploration and doing, something my previous iterations taught me to watch carefully.
This portfolio has become both the learning vehicle and the end product, a practical way to understand modern JavaScript development while creating something actually useful for my online presence.
Next step: Setting up the development environment and diving into React fundamentals.