TonyMac129

Added a section of “testimonials” or just random quotes my friends said about me with their profile picture, username, and the quote. These aren’t real professional testimonials but just something fun and interesting for you to read about if you wanted to. Also added a comment section with a form/box where you can submit a comment (no login or anything required) with a custom username, optionally an email address for me to contact you, and a textarea where you can leave your message! This will probably make the website a lot more engaging and interactive since you can actually chat with me here or see what other people have said. Since backend still hasn’t been set up yet, only the frontend template is done and posting/submitting a comment doesn’t do anything. Also fixed some issues with the search bar menu not going away, added a smooth color transition for switching between dark/light modes, and updated some styling and animation effects to make sure everything is as smooth and functional as possible.

Added blog post search on the blog tab to help you find blog posts more easily. It searched both the title and the actual content of the posts to ensure the results are relevant and useful. Also added dynamically generated SEO metadata for blog posts so my site and blog posts specifically can actually get discovered by search engines and read by people. Also added a sun/moon icon on the top right of the nav bar that toggles between dark and light modes to ensure accessibility and customization to everyone. Spent a ton of time tweaking tailwind colors and other stuff to ensure the styling works great and consistently across all pages in both modes. The icon also toggles between sun and moon (with a smooth transition animation) depending on what mode you’re currently on. Also fixed some visual issues and updated styling as well.

Added an interactive widget that displays different stuff about me (movies, books, food, tools, and other things) according to the 2 dropdowns that the user can select so I’m basically doxxing myself pretty hard. The first dropdown lets you choose the broad category while the second filters what I do with the category, and the results show up (animated as well of course). If there is a link to a tracking service that I use, it will also be displayed on the interactive widget. Also added a pretty powerful search bar to the nav bar that lets you search across all my projects and miscellaneous stuff by their names and descriptions! The matching results are links to the projects themselves, making navigation and accessibility significantly better. Added some responsive styling on the sorting/filtering components and other newly added stuff to make everything work well on all screen sizes! Also fixed some styling/visual bugs, as well as improving some animation effects to ensure everything is smooth.

Added sorting and filtering to the misc projects page, the skills page, and the blog posts page so you can browse and search through my projects, skills, and blog posts easily! You can sort by date, name, category, progress, and many other options and the elements will get sorted correctly (with smooth animation and nice UX of course). The same thing goes for filtering, and you can also filter by dates so the list of filters don’t get too long (unlike the old version of my portfolio). The sorting dropdown is on the left, the filters in the center, and a new smaller search bar is on the right that lets you search through the currently sorted and filtered projects/skills/posts. Also, the chips for the roles/skills interactive component on the homepage hero now automatically rotate (with a cool animated progress indicator) so you can see all my roles and skills without needing to click on the chips! If you just hover over the container, the rotating (and the indicator) pauses until your cursor leaves, ensuring good UX and proper timing. Also added new animations and interactive effects throughout the entire site to make everything smoother and more aesthetically pleasing.

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 :)