This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI
About Me
Hi there! I'm Zacky, a Fullstack Developer enthusiastic about building applications that solve real-world "people problems".
I work across the stack to bring ideas to life, primarily utilizing JavaScript, Node.js, PHP, PostgreSQL, and MySQL. Recently, I've also been diving deep into the world of Rust.
My development philosophy centers on creating tools that help others. For example, I created and maintain RLI, an open-source React component library of elegant loading indicators that has a growing popularity on NPM.
I built this portfolio to showcase not just my projects, but my ability to blend technical "how-to" with creative, interactive design.
Portfolio
(Note: If the embed above doesn't work, you can view the live site here: zacky.dev)
How I Built It
For this portfolio, I wanted a tech stack that offered the speed of a Single Page Application (SPA) with the security and robustness of a backend.
The Stack & Tools
- Framework: Remix.js (Fullstack React framework)
- Noteworthy Libraries Three.js, Material UI
- Language: TypeScript
- Deployment: Google Cloud Run
- Code Editor: Antigravity
Design Decisions
- Hybrid Architecture: Using Remix allowed me to keep the user experience snappy (SPA feel) while securely handling sensitive credentials and logic on the server side.
- Performance: I implemented lazy loading for pages to ensure the initial load time is instant, fetching resources only when the user needs them.
- Accessibility & UX: The site features a meticulously designed Dark and Light mode, giving users control over their viewing preference. The UI was designed to be visually appealing and modern without sacrificing intuitiveness to finding information without clutter.
- SEO: Sever Side Rendering enable the website to load rendered pages to help boost SEO ranking.
The AI Assistant
I utilized Google Gemini 3.0 and Antigravity code Editor throughout the development process. Gemini was a personal tutor throughout the development process.
When I was stuck on complex logic, Gemini broke down the deep concepts, allowing me to understand the "why" before I patched up the "how."
What I'm Most Proud Of
1. Successful GCP Deployment
I am extremely proud of the successful deployment of this portfolio to Google Cloud Run. It was a significant achievement for me, as it demonstrated my ability to deploy a full-stack application to the cloud. The deployment process was smooth and seamless, and I was able to find information I needed from the Docs.
2. The 3D Interactive Experience
I am extremely excited about the 3D interactive page. I wanted to move beyond standard web layouts, so I decided to write custom shaders to render 3D animations directly in the browser. I used ThreeJS to achieve this.
This was a steep learning curve. Gemini 3.0 was instrumental here; it helped me bridge the gap between my JavaScript knowledge and the complex math required for shader languages. The result is a fluid, interactive visual that I think really shines spotlight on the portfolio.
3. Fully responsive design
Responsive design is important for any website, and I'm proud to have implemented it in this portfolio. I used a combination of CSS media queries and JavaScript to ensure that the website is accessible on all devices.
4. Solving Problems (The RLI Library)
I'm also proud to feature my open-source work directly on the site. Showcasing RLI (React Loading Indicators) demonstrates that I don't just build websites; I build solutions that other developers rely on. Seeing that project pull traction on NPM is a huge motivator for me to keep shipping open-source code.
Thank you very much for reading this far. Your thoughts and feedback are much appreciated.
Top comments (0)