A modern, responsive personal portfolio and component laboratory built with React 19. This project showcases my journey from academia to software development, featuring a collection of full-scale applications and a "Component Lab" for modular UI experiments.
- Dynamic Theme Engine: Supports Light, Dark, Emerald, and Midnight presets, plus a procedural custom theme generator that creates unique color palettes on the fly.
- Component Lab: A dedicated workbench for testing modular UI widgets (Accordian, Hangman, Star Ratings, TreeView, etc.).
- Responsive Design: Fully optimized for mobile, tablet, and desktop viewing.
- Interactive Data Visualization: Integration with
Chart.jsto visualize development activity. - Animated UI: Smooth transitions and interactions powered by
Framer Motion.
- Framework: React 19 (Hooks, Context API, Router v7)
- Styling: Vanilla CSS (Modern CSS Variables for Theming)
- Animation: Framer Motion
- Icons: React Icons (Lucide, Simple Icons, Font Awesome)
- Languages: Java, Python, JavaScript (Node.js)
- Databases: MySQL, MongoDB
- Tools: Docker, Git, Vite, IntelliJ IDEA, VS Code
- APIs: EmailJS, TMDB API, Google Translate API
| Project | Tech Stack | Description |
|---|---|---|
| Java Movie DB | Java, JavaFX, MySQL, Docker | Desktop app for searching and managing a local movie database via TMDB API. |
| Online CV Architect | React, Vite, Mammoth | Real-time PDF resume builder with a custom heuristic parsing engine for .docx files. |
| Pathfinder Visualizer | React, Framer Motion | An interactive visualization of pathfinding algorithms. |
| Modern Text Editor | React, Tiptap | A rich-text editor with a highly configurable typewriting interface. |
| Java HTTP Webserver | Java, Sockets | A custom multi-threaded server implementation exploring HTTP fundamentals. |
| Dota 2 Translator | Python, OCR, Google API | Real-time in-game chat translation using Optical Character Recognition. |
The Component Lab serves as a sandbox for UI/UX experimentation. Each widget is built from scratch to explore specific React patterns:
- Hangman: Word guessing game with state management.
- TreeView: Recursive rendering for file explorer UIs.
- Tenzies: Fast-paced dice matching game.
- Image Slider: Custom-built carousel logic.
- Random Color: Procedural HEX/RGB generator.
- Node.js (v18 or higher recommended)
- npm or yarn
- Clone the repository:
git clone https://github.com/bamsemats/online_portfolio.git
- Navigate to the project directory:
cd online_portfolio - Install dependencies:
npm install
npm start: Runs the app in development mode at http://localhost:3000.npm run build: Builds the production-ready app to thebuildfolder.npm run deploy: Deploys the application to GitHub Pages.
- LinkedIn: Mats Rönnqvist
- GitHub: @bamsemats
- Portfolio: https://bamsemats.github.io/online_portfolio
Built with ❤️ by Mats Rönnqvist