the dev of Soniipy

The problem

Soniipy is built from scratch with Statamic CMS. I used to rely on Framer for every version of my portfolio, but the multi-page plan for a full-scale portfolio is getting a little too pricey for me. So why not "code it" by myself? It might sound like a simple reason, but this decision was the foundation for a massive learning journey, and I’ve got no regrets.

Inspiration & branding

An 8-year-old web designer sparked the core concept for this portfolio that I discovered on Instagram. His work taught me a valuable lesson: a portfolio is more than just a collection of projects—it's a distinct brand. Having experience building landing pages for clients, I applied this same brand-centric strategy to my own site, ensuring every element, from the user experience to the visual design, reflects my unique identity as a designer.

Challenges & Technical Learnings

This project presented several new and complex challenges that pushed my technical skills and design thinking.

1. Advanced Web Animations: This was my first time extensively implementing web animations. I moved beyond using static Lottie files and GIFs, leveraging GSAP ScrollTrigger to create dynamic, scroll-based animations that bring the content to life.

2. Accessibility & Scroll-Smoother: A significant technical hurdle was the accessibility issue introduced by GSAP Scroll-Smoother. The plugin hijacks the browser's native scroll behaviour to create a fluid, continuous scrolling effect. This breaks the default functionality of anchor links (e.g., #section-id in the URL), which rely on the native browser scroll to navigate to a specific element. To fix this, I had to implement a custom JavaScript solution to listen for hash changes and trigger a scroll to the correct section, ensuring the site remained accessible.

3. Semantic HTML: Throughout the build, I encountered issues with improper HTML tags that hindered accessibility. This experience was a crucial lesson in the importance of using semantic HTML to provide meaningful structure to the web content, ensuring assistive technologies can correctly interpret and navigate the page. I am still working on fixing it.....

4. Balancing Vision and Reality: The biggest design challenge was the constant need for compromise. I had many ambitious design ideas that were difficult or impossible to achieve while maintaining a balance between aesthetic and performance. This process forced me to make difficult decisions and find a middle ground between my creative vision and what was technically feasible and best for the user.

View more similar projects