TonyMac129

I got a pretty disappointingly low multiplier from my first ship, and a lot of people were saying the site wasn’t responsive at all. I was kinda rushing to ship for the first time since I’m submitting this project for the lockin sidequest, so I just rushed to at least make every page work and function properly without worrying about other stuff like responsive design and accessibility. Now that the week has reset and I got 7 days to work on my site properly, I decided to perfect the site’s responsiveness so it looks aesthetically pleasing and works well on any device/screen size to maximize accessibility, UX, and ease of use! Other than just adding a bunch of media queries to tailwind, playing around with flexbox, and hating css for an hour, I didn’t do anything else except for improving the readme a bit. Also fixed some visual glitches as well.

Finished making and implementing all the major tabs and pages for my personal website! Added individual blog post pages that has a sidebar listing all my blog posts where you can easily see and navigate to each of them. The page also has the blog post’s title, author, date, and the actual text content of the blog. There’s also two buttons on the bottom that lets you navigate back and forth between my blog posts to make navigation easier and more accessible. Also coded a table of contents component for the blog post page, but currently none of my posts have headings (will add soon), so the component isn’t displayed. Also directly added 5 actual blog posts instead of the previous placeholder posts from my old portfolio. Also updated some data types and logic to make sure blog posts have all the information they need and everything works well. Also fixed some deployment and visual bugs, as well as updated styling and content.

Big update!!! Added 3 different new tabs: skills, blog, and about! You can see all my skills (mainly technical and programming related) displayed in a nice grid each with its name, description, icon, and progress bar/percentage displayed so you can understand my skillset better. The blog tab displays all my blog posts (I hate writing and I barely write anything, plus right now there’s only one non-existing placeholder blog post) each with its name, date, and content preview displayed, and clicking on it will take you to the actual blog post page (doesn’t work yet). You can also search my blog posts by name, although I probably won’t have more than 5 in the future. On the about tab, you can see my current status (what I’m developing/watching/reading) with their related links, images, and other stuff displayed on the left, and a few paragraphs/sections of text about me and my contact information on the right. I mostly just copied a ton of stuff from the old version so I spent most of my time making the actual site, components, routing, and styling and not writing the text. Also added a fun 404 not found page where you can go back or go home, and it’s also mostly copied from my old site. Added SEO and metadata to each page and updated some styling and content of the site as well.

Added featured projects that are more large-scale and technical/complex to the projects tab, which displays detailed information about these projects including a demo screenshot/thumbnail so you can understand what the project does, dates, name, demo and repo links, tech stack icons, detailed description, and tags that organize the different projects. You can also search for these projects using the search bar. Also added a ton of projects to the misc page that were originally in the projects tab of the old version of my personal website. I had to rewrite a lot of data structures, fields, and manually change a ton of values (no AI) to make sure the types are compatible and modular, and the process was pretty time consuming and tedious, but the result was worth it. The misc projects are now also sorted by date nicely with their relevant information displayed as well. Also improved some content and styling to make the entire site look better.

Added a placeholder page for the project tab with a hero that has a title and description about the page, as well as a link that takes you to the misc page. I’m planning to put only a few of my large scale serious apps to be displayed on the projects tab, while dumping all my other smaller coding and non-coding school/personal projects in the misc tab to keep everything organized and accessible. Added a hero with description, search bar that searches misc projects, and cards that display a misc project’s name, skills, tags, and date for the misc page. The cards are supposed to be links but since I only migrated the project data and changed some stuff into React icons without migrating the actual projects, the misc project cards/links don’t work yet. Added some styling, custom data types, and additional content so the misc page is functional and looks nice and consistent with the rest of the site.

Added a pretty nice looking Lanyard Discord widget to the hero section so now you can spy and stalk my Discord status and profile! It shows my profile picture, display name, server tag (Frieren is so peak), username, pronouns, and my online status with a proper icon/indicator displayed. The widget also shows my current activities, and if I don’t have any, my custom status will be displayed. The current activities support different apps like VS Code, desktop games, and Crunchyroll with relevant details displayed so my entire life is exposed to the internet, how fun :) It can also display multiple activities at once. Spent some time configuring Lanyard and getting to know the Discord CDN API but the result was super worth it, it actually looks like a real Discord widget. Also updated some styling, icons, recategorized some roles, and added a footer with all my social accounts and links displayed.

This will probably be my last project on Flavortown, as it would probably take me a bit to completely rewrite my entire personal website/portfolio from scratch (again, for the fourth time)! I am overengineering this simple website yet again by turning it into a fullstack platform with an account system, functioning backend, and other stuff that a portfolio doesn’t need to have. Of course I’m also doing this in my favorite stack: Next.js, React, TypeScript, Tailwind, Prisma, and Postgres. I’m determined to make this the last rewrite, so I spent a ton of time coding and designing the smallest details to make sure everything will still look good in a few years. The main reason I wanted this rewrite was probably because Next.js is just so much better than React Router for multi-page websites and SEO, and I got tired of manually changing/updating the code to update my skills/projects/status, so I’ll be able to do these directly on the website by logging into it. For this update, I just set up the project, added the dependencies, added a simple nav bar with links and a search bar, and a hero section with a randomly generated fun greeting, title, description, logo, and an interactive section of my roles and skills with some super cool animation transitions so people can get to know me better. I’m really proud of this sleek modern design, I hope the finished site will look as good as it is so far, super excited to keep working on this :)