Behind the Scenes Improvements

Like the last update, most of these changes are behind the scenes. In recent years, modern browsers have stayed in sync with each other. As such, there's no need to keep polyfills or other older design patterns meant to maintain browser compatibility. Besides, we don't need to worry about Internet Explorer anymore!

These updates also reflect some of the patterns I noticed from working on large-scale projects. This will ensure the project is easier to maintain when I inevitably forget how some of the code works. 😅

What's Changed

• Defaulted light/dark mode to use the system theme
• Avoided calling the GitHub API multiple times while browsing projects
• Removed mp4 files for project demos
• Fixed the role of the navbar
• Utilized SCSS modules for unique class names
• Allowed Bootstrap to be dynamically updated
• Removed smooth scrolling polyfill for Safari and Internet Explorer
• Enhanced the PWA by adding a description & desktop/mobile screenshots
• Organized files by screen instead of by language
• Fixed imports in tests
• Collected & improved test coverage
• Removed Node 16 for testing
• Grouped dependency updates together
• Updated ESLint rules
• Migrated to the flat ESLint config
• Added linting to the CI pipeline
• Updated screenshots, the bio, projects, and the resume
• Updated dependencies, as usual

Hello Vite!

Not much has changed visually about the portfolio website, but behind the scenes, several improvements were made. The main improvement was switching from Create React App (CRA) to Vite, a faster and more modern development server for React apps (with support for other frameworks like Vue and Next.js). I go into more detail about the improvements in #299, but a 50x speedup is not too shabby! And although it took some effort to migrate everything, Vite will give me more freedom to choose the compiler, bundler, linter, and other integrations I want to add to my website. Web technologies evolve very quickly and there's more competition than ever.

What's Changed

• Migrated from CRA to Vite
• Smoothly transition between light and dark mode
• Added EZ Recipes to the projects list
• Updated the bio
• Updated the copyright to include the current year
• Dynamically import Octokit to optimize the build size
• Showed web vitals in the console logs
• Updated URLs & deprecations
• Replaced Node 14 with 20 for testing
• Updated the PR template based on best practices
• Updated dependencies, as usual

The Year of Agile

Since I created a release at the tail end of last year, I figured now is a good time to reflect on the progress made this year. While there were a few enhancements made to the website, GitHub Actions & Dependabot took care of most of the legwork. These weekly updates ensure the website is up-to-date and are small enough that we can catch bugs faster. Here is the changelog:

• Utilized the GitHub API to display the number of watchers, forks, and stars for each project
• Updated the headshot and bio in the About section
• Updated the links for the web projects that migrated away from Heroku
• Used useRef instead of document.querySelector to reference DOM elements
• Fixed the type definitions from tuples to arrays
• Replaced Node 12 with 18 for the Node.js workflow
• Bash syntax highlighting in the README
• Fixed the port number for local, production builds
• Added a security policy
• Many, many updates to NPM and workflow dependencies

Build 🔧, Test 🧪, Deploy 🚀

After publishing the last release, I discovered the power of GitHub Actions. Since then, there have been over 100 commits of small, continuous improvements to this website. And now we have a way to automatically test each change before deploying it to GitHub Pages. Plus, we get to include a checkmark after each commit and some nice status badges to our README. CI/CD is a great tool to promote agile development, and I can't wait to see what the future holds! This isn't a major release since most changes involved our development tools, rather than the site itself, but here's the full changelog:

• Added a Node.js workflow that runs all the unit tests after every PR or commit to main
  • Upon merging a PR or committing to main, the Node.js workflow will automatically deploy changes to prod
• Added a CodeQL workflow that checks the security of the JS/TS files
• Added dependabot.yml to check for updates from npm and GitHub Actions weekly
• After putting off this feature for over 3 years, we're finally reintroducing the service worker, now updated using the template included in modern React apps. This means our website now meets all the requirements to be a PWA and Lighthouse will be happy! Some tweaks have been made to make sure pages from other repos don't route back to this site.
• Updated the Font Awesome icons to v6
• Dynamically imported the FA icons instead of loading all the icons at once
• Added CSS transitions when hovering over some of the buttons
• Renamed the frogger and headshot images to lowercase
• Fixed some of the og tags in index.html
• Fixed various security vulnerabilities by updating npm dependencies
• Slight adjustments to CONTRIBUTING.md
• Removed the master branch for good, now it's just main for prod changes and gh-pages to deploy the site

Projects Remastered

It's been three years since I started making this website and I'm proud that it's continued to grow. I want to thank everyone who has helped out directly or indirectly in improving the website. I also want to thank anyone who's checked out the site or has even read these release notes! We've got another major release due to all the changes made recently. I've also started to apply good practices from working full-time to all my projects, including this one. Anyway, here's the changelog:

• The Projects tab has been revamped to better promote more of my projects
  • Instead of six projects, it now shows several projects split into iOS, Android, Web, and Other categories
  • The cards are organized as horizontal lists designed to be scrollable on desktop or mobile
  • Clicking each card will show detailed information about each project
  • All the images now use the WebP format for smaller payloads and faster load times
  • Most projects now show a video preview on the details page and are rendered in the WebM format (or MP4 as a fallback)
  • Replaced the GitHub link at the bottom with a link to this repo
• A fade transition is now used for the home page and between the projects and project details page
• For all you fans of dark mode, there's now a toggle to switch between light and dark mode
• Improved contrast of DOM elements in light and dark mode
• Migrated to the bootstrap and font awesome react libraries for smoother integration and more readable components
• Slight adjustments to the bio
• Improved the styling of the contact buttons
• Wrapped the app in a HashRouter instead of BrowserRouter to fix the misleading 404 errors from GitHub pages
• More tests for everything above
• Improved usage of TypeScript, SCSS, and React Testing Library
• Improvements to SEO
• Adjustments to the README
• Changed the branch structure of this project
  • dev is renamed to main
  • All development changes are made to separate branches specified in CONTRIBUTING.md. As such, there's no need for a backup branch since main holds the current production code.
  • gh-pages now acts as the deployment branch, with master as its backup

Continuous Improvement

It always amazes me how after I draft a release, there continue to be more ways to improve this site until I have enough updates for a whole other release! Anyway, here's the changelog:

• Started using VSCode to catch TypeScript and ESLint warnings
• Updates to the resume and projects list
• Incorporated features seen on more recent React apps, including:
  • App icons for various platforms
  • A robots.txt file
  • Testing using the React Testing Library, instead of just react-dom
• "og:*" tags so a thumbnail appears when sharing my website
• Refactored tests to separate files
• Updated dependencies, deleted unnecessary dependencies, and moved some dependencies to devDependencies
• Replaced some outdated React syntax
• Various accessibility improvements (not all components needed tab indices 😅)
• Redesigned the project cards so they take up more space and the project links look neater (this also gave more room for the About and Contact sections)
• Expanded the bio a bit

Now Featuring TypeScript & SCSS

JavaScript and CSS are great languages, but TypeScript and SCSS are even better. Now everything's typed and CSS rules can be nested to improve the formatting and stability of the code. On top of that, I've finally made use of that App.test file to test all the bells and whistles of my website. If that wasn't enough, I also took advantage of Lighthouse in the Chrome dev tools to improve the site's performance, accessibility, and user experience. I'm amazed at how far I've come! Here is the changelog:

• Converted all the JS files to TSX
• Converted all the CSS files to SCSS
• Adjusted the directories accordingly
• Improved the formatting of all the source code
• Wrote unit tests for all the components
• Updated the headline and bio (graduated! 🎓)
• Updated the projects and resume (as usual)
• Added a description to the metadata
• Compressed the images to an optimal scale

Better Than Ever

It's been a while since the last release. Most of my time has been spent making small improvements to the website over the years. But as of late, these changes became significant enough that I decided to bundle all these updates together into one release. Here's the changelog:

• Integrated Bootstrap components into the website
  • Containers for the header, navbar, main, and footer
  • Grouped the navbar buttons and gave them a fresh coat of paint
  • Improved card layout for all the projects
  • Badges for each of the tools used for each project
• Replaced React's class syntax with React Hooks
• Regular updates to the resume (now a PDF instead of a Dropbox link)
• Regular updates to the six listed projects
• Normalized line endings
• Rearranged the README a bit
• Better organized the project into multiple folders
• Updated dependencies

Bold and Beautiful

The website has been updated with new features:

• New background and changes to font, font size, and padding
• Navbar is sticky with a clear hover and active state
• Sliding animation added when switching between sections
• Arrows added for increased navigation
• Various other styles were polished

The Much Needed Update

The following changes were made:

• The README file has been edited to better explain this repo
• The website is now accessible. Tab indexes were added to better navigate the site for the impaired.
• A routing bug has been fixed so that project sites now redirect to the correct site.

*Note: Offline functionality has been put on indefinite hold due to issues arising from routing to other project sites.