I am excited to share my portfolio with you as it represents a particularly noteworthy and engaging project that I believe is worth highlighting. In this presentation, I will provide an in-depth look at all of the details and features of the portfolio, as well as an explanation of how it all works and some examples of the code behind it.

I began working on the portfolio in early January 2023 and was able to complete a majority of it, approximately 90%, within just four days. While the actual coding and development process was relatively swift, I spent a considerable amount of time researching and brainstorming ideas, as well as sourcing images and other resources.

This is the third portfolio that I have attempted to create, but the previous two were left incomplete due to various challenges and issues that arose. The first portfolio suffered from a design that I ultimately was not satisfied with, while the second struggled with optimization and layout constraints that limited my ability to fully express my ideas and vision.

As someone who is always seeking ways to share my passions and interests with others, I knew that my portfolio needed to be a platform that allowed me to do so in a way that felt authentic and natural to me. That's why I decided to model it after Twitter, a medium that I personally enjoy and find engaging.

Not only does this allow me to showcase my projects and share my thoughts and insights with others, but it also gives me a great deal of flexibility and versatility in terms of how much information I can share and present. Whether I have a lot to say about a particular project or just want to highlight a few key points, the Twitter-like layout of my portfolio allows me to do so in a way that is comprehensive and engaging.

For example, if I have a lot to say about a particular project or idea, I can easily create a thread and share all of my thoughts and insights in a cohesive and organized manner.
On the other hand, if I want to showcase a large number of images or other visual elements, I can create a gallery to display them all in a clean and visually appealing way.

As an introvert, I may not always be the most vocal or outgoing person, but when I am passionate about a topic, I am more than capable of engaging in in-depth and enthusiastic conversations about it, this is why having a portfolio that focus on text is a great way to show my personality and interests.

For the 2D animations in my portfolio, I am using Framer-Motion, which can be seen in action in various places throughout the site. Some examples include the animation of my name on the hero, any animated text, and the fancy border effect on hover for my projects, which is actually just made up of four divs!

Another example of Framer-Motion in use is in the tabs underline, which smoothly transitions as you switch between pages.

For the 3D animations in my portfolio, such as the banner and the word cloud, I decided to utilize React Three Fiber, a tool that was new to me at the time. Despite this being my first time using React Three Fiber, I am extremely pleased with the results and plan on using it more in the future.

While I didn't attempt to push the limits or do anything too sophisticated given my limited experience with the tool, I am confident that I will be able to create even more impressive 3D animations as I continue to learn and experiment with React Three Fiber.

The design of my portfolio is largely created using Tailwind, with the occasional use of Framer Motion for animating styles such as color, or inline styles in certain cases. While some may not be fans of inline styles, I find them to be useful when used sparingly and with caution.

An example of this can be seen in the skills progress bar, where I use Framer Motion to animate the width and color of the bar. The bar transitions through three different colors - red for progress at 0%, blue at 50%, and green at 100% - to give a visual representation of progress and proficiency.

Using Framer Motion's interpolation feature, values in the progress bar are smoothly transitioned between the colors. For example, a value of 25% is recognized as being between 0% and 50%, resulting in a blend of red and blue. A value of 75% is recognized as being between 50% and 100%, resulting in a blend of blue and green. This allows for a seamless and intuitive visual representation of progress.

You can see a similar effect in the posts themselves as well. If you navigate to the skills gallery, you'll notice that when you change the skill, the height animate smoothly. Previously, every time the text changed, there was a jarring "layout shift" that was unsightly. Now, it's smooth and visually pleasing.

To facilitate internationalization and maintain consistency throughout the portfolio, I have a large file that stores every single word of text used on the site. This file helps me to easily create threads or projects by simply adding new lines, and it also allows me to make global text changes to the entire portfolio by modifying just a single file.

However, I also wanted the ability to highlight certain words within the text, so I spent over four hours developing a function that creates "decorators" that can be applied by simply adding a flag to the desired text. This allows me to easily add emphasis and visual interest to my writing.

I also have a sophisticated function that allows me to dynamically update text at runtime. If I include a word in curly brackets, I can use my replace function to substitute it with a value. While this may not seem impressive on its own, the real magic is that it is fully typed.

This means that if I use a text that has a "variable" called "techStack" in curly brackets and use the replace function, I must provide a value for the variable. If something in the text changes and a variable is missing, TypeScript will alert me and I can easily fix the issue.

Advanced TypeScript is truly incredible, which is why it is my favorite language.

Regarding the gallery, I created a custom carousel from scratch rather than using a library. This carousel displays one image at a time, has controlled arrows, smooth transitions, and indicates the current image. While it is not infinite and can technically display any number of images per page, I found that I only wanted to show one image at a time.

As a result, the function for displaying more images is not fully refined and may have bugs if more than three images are shown. I may fix this in the future.

I selected the same tech-stack that I used to build Piggy for my portfolio because it is my go-to stack and one that I am particularly familiar and comfortable with. For those who may not recall, the stack includes TypeScript, ReactJS, NextJS, TailwindCSS, tRPC and Prisma.

At the moment, I am not utilizing tRPC or Prisma in my portfolio, but I do plan on incorporating them in the future, which is why they are already listed in the stack. Overall, I believe that this technology stack is well-suited to my needs and allows me to create a robust and functional portfolio that meets my goals and expectations.