Next.Js Full-Stack Portfolio

Designed and developed a visually immersive full-stack platform showcasing advanced frontend interactions and robust data architecture. Hand-crafted all illustrative assets in Figma, meticulously managing SVG grouping and layer hierarchies to enable granular animation control. Utilized GSAP to programmatically animate the SVG layers across complex user-triggered timelines. Integrated Next.js with Sanity CMS to deliver dynamic content management, fast server-side rendering, and seamless motion performance

In this project, first I want to create something from zero, no one else’s portfolio as inspiration, just myself and what I like. Then I decided to show the universe since I’m a big fan of science, together with Concho, who is my companion and also the pet of the latest album “DTMF” of my favorite singer, Bad Bunny.
I’m a huge fan of his music because he always express what he feel and he is always himself, he is proud of being a latino so he inspired me to be proud of my roots and always be myself.

well that’s the motivation or inspiration for this website. With that said, let’s see the process for this.
As a summary, it was something like:

• Notebook Sketch
• Decided Colors and Typography
• Figma design
• Draw the illustrations as SVG
• Decided the Tech stack
• Develop the website, connect the CMS
• Deploy

One piece of advice for the animations is to manually create every layer of the SVG. In this way, we can control/animate every part of the illustrations.
for example:
If we want to animate the eyes blinking, we create the eyes open in a layer, then in another layer we create the eyes closed. Is very important to use the ID correctly here so we can easily know what part it is referring to.

As you can see, we have multiple layers. There is another way of animating these illustrations, it’s moving the elements a bit and taking screenshots, so we render it quickly in a loop, and it creates the animation (like the old Disney movies)

I did this process for every illustration on my website

I had experience working with the old Next.Js versions, where we manually created the GetStaticProps and GetStaticPath. In the beginning, I was a bit uncomfortable with this app routing and the new way to fetch data (server components), but I can say it’s more comfortable, and I like how the code structure looks cleaner (in my opinion).

Besides this, there is not much to mention, just the classic setup and development process of Tailwind, Shadcn, Sanity CMS, Responsive design, GSAP,

Since this is just a Portfolio to showcase static content, there are not many architectural challenges or tricky decisions. I would say the harder part was designing, drawing the SVG, and animating every element, but besides that, it was just the usual workflow.