“Portfolio with Gemini: Simple, Smooth, Subtle”

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

Hello! My name is Aldwin. I am from Jakarta, Indonesia. Currently i work in distribution and aim to transition into fullstack development (hopefully this year).

Portfolio

Here is my New Year New You Portfolio Site.

How I Built It

I built this using Vite + React + Tailwind and most importantly, Gemini 3.0 Flash for AI Chat feature.

The development process start by Scafolding React App using Vite. After that, i install shadcn and motion. I use shadcn mainly to use its @theme variable, like --color-primary, --color-secondary, etc. It helps me use color palette seamlessly. After that, i open windpalette.com to pick suitable color palette for this project (i chose Blue).

To improve user experience, i use motion library to add fade-in effect whenever element enter viewport. At first, i let AI feature in VSCode to generate transition using motion. But the transition timing seems off, so i erase all of it. To replace it, i create dedicated file called motion.ts to create preset of transition, so i could just add like {...fadeInUp} in Component Props to animate it. It works well!

For design theme, at first, i planned to add animated blue gradient background, like ocean to make it feels dynamic and clean. But it makes the site a bit laggy (in my potato smartphone) and i hate that. So i revert it back to being clean white with blue accent instead. Aesthetic is important, but not as important as FPS!

Finally, the most important things is AI Chat feature. I put it on bottom right as floating Chat bubble (i can't imagine better place for portfolio site like this). At first, its static. But being static, make it blend into the background, not the way i want. I want that component to scream "HEY! NOTICE ME!" without being to distracting. So i decided animate it up-n-down perpetually.

For Chat Window Component, to be honest, i don't know where to start. So i let VSCode AI to create it. The result is good enough, but not so polished. The transition whenever the chat window open & close is rather eerie. The Chat Window should shrink and fade-out to the bottom right where the Chat Button is. Awfully, it shrink-fade-out to the left. It makes my eye hurt seeing it. I ended up spending nearly half an hour tweaking the animation manually to find the right balance.

For the LLM, i want it to answer user question to simulate interviewer asking me question. So i search some FAQ in real job interview and provide some details to answer that question whenever asked. Ideally, i should use Retrieval Augmented Generation (RAG) using Vector Database. Blasphemously, i put it all in system prompt instead. I tried to make it short as possible to conserve token. I also made it like json format and declare 5 Commandments as Chatbot AI guidelines.

The commandments:

1. Be professional, friendly, and concise.
2. Answer directly and clearly.
3. Highlight relevant experience and achievements.
4. Use a confident and positive tone.
5. If information is unavailable, respond politely and honestly.

For the AI response, it seems like Gemini love to provide .md-styled response. I like it! To accomodate, i parse every response from Gemini to it is displayed as .md in the Chat Window. Now that i have capability to display .md, why not i take it further. I saved some snapshot of my design portfolios in project folder (after converting it into .webp to prevent delay). Now user can ask about my project (i'm pretty proud with this idea).

Thank you for listening my rant presentation about my project. To be honest, i am so excited with this project and i also enjoy writing this until i forget to sleep (currently 1:10 am in Indonesia and i have to work on the morning). Once again, thank you Google for sponsoring the challenges and fellow Developers.

Cheers.