Portfolio Website
Full-stack portfolio — Spring Boot backend + React/Vite frontend, CI/CD.
Overview
Full-stack portfolio website showcasing projects and skills, built with Spring Boot and React/Vite. The frontend is deployed to GitHub Pages at kyledarden.com via GitHub Actions; the Spring Boot API is hosted separately on Render.
Tech Stack
View more →Challenges & Solutions
Fixing incompatible Gradle versions
The Spring Boot backend wouldn't build consistently due to mismatched Gradle wrapper and plugin versions.
Solution: Aligned Gradle wrapper version with Spring Boot plugin requirements and updated build configuration.
Impact: Restored reliable local and CI builds; ensured reproducibility across environments.
Coordinating separate frontend and backend deployments
Frontend hosted on GitHub Pages and backend on Render required consistent routing, API URLs, and secure CORS configuration for production environments.
Solution: Configured environment variables and API base URLs per environment, implemented CORS rules in Spring Boot, and validated integration through Postman and live staging builds. Automated the frontend deploy via GitHub Actions; the backend deploys separately on Render.
Impact: Seamless communication between GitHub-hosted frontend and Render backend with stable API connectivity and secure CORS handling.
Integrating React frontend with Spring Boot backend
Needed to connect a Vite/React TypeScript frontend with a Spring Boot API while maintaining consistent API endpoints across environments.
Solution: Standardized API route structures, configured environment variables for dev/prod, and validated endpoints using Postman collections. Added frontend proxy rules to simplify local development.
Impact: Consistent API integration across environments and faster debugging during development.
Optimizing performance and responsiveness across devices
Interactive visuals and complex layouts initially caused layout shifts and lag on mobile screens.
Solution: Implemented device-aware toggles to disable animations on mobile, lazy-loaded heavy components, and refined Tailwind utility usage for flexible responsive design.
Impact: Improved mobile responsiveness and load times while maintaining a polished desktop experience.
Managing environment configuration and CI consistency
Needed to maintain distinct configurations for development and production while ensuring consistent builds and deploys.
Solution: Standardized `.env` variables, parameterized Spring profiles, and implemented GitHub Actions workflows for linting, build, and deploy steps. Documented the CI process for transparency and repeatability.
Impact: Consistent, automated deployments with minimal manual setup and clear separation between environments.