This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI
About Me
Hi everyone! 👋
I’m Wei Lu, a Mobile Developer based in Manchester, UK.
For years, my portfolio was just a static HTML page that listed my skills—functional, but not very exciting. I always wanted to make it more engaging, but with my limited JavaScript background, I never had a clear plan to actually make it happen.
That changed with the arrival of tools like Gemini and ChatGPT. They lowered the barrier to experimentation and gave me the confidence to finally turn ideas into action and make my portfolio something more interesting and interactive.
Portfolio
How I Built It
I chose to start the project in Google AI Studio, as it offered the fastest and most direct way to prototype and validate my idea. It’s the same environment where I spin up and test many tasks in my other projects before committing to a full implementation, allowing me to iterate quickly and evaluate results early.
Although I had limited experience building web-based games, I began with a concrete technical concept. I decided to use Geometry Dash as the core gameplay reference, transforming each in-game blocker into an interactive surface that presents a part of my resume. This approach allowed me to combine familiar mechanics with personal content, turning a traditional portfolio into something playable and experiential.
here is my first/main prompt:
Develop an interactive portfolio website that creatively integrates a Geometry Dash-style game as the navigation mechanism. The website must:
1. Game Mechanics Implementation:
- Create a side-scrolling game where the player character automatically moves forward
- Design geometric obstacles/blocks representing different portfolio sections (About, Projects, Skills, etc.)
- Implement collision detection:
* When player hits a block: Display a modal/popup with detailed section content
* When the player jumps over a block: Continue scrolling without interruption
- Ensure seamless looping through all portfolio sections
2. Content Sections (based on resume):
- "About Me" block: Showcase professional identity with:
* Brief bio
* Professional photo
* Career objectives
- "Projects" block: Highlight 3-5 best works with:
* Project titles
* Screenshots/demos
* Technologies used
* Key achievements
- "Skills" block: Visualize technical competencies with:
* Programming languages
* Frameworks
* Tools
* Proficiency indicators
3. Design Requirements:
- Modern, game-inspired UI with:
* Vibrant colors
* Pixel-perfect geometric elements
* Smooth animations
- Responsive layout working on all device sizes
- Custom game assets matching professional branding
4. Technical Implementation:
- Use HTML5 Canvas or WebGL for game rendering
- Implement with JavaScript/TypeScript game engine (Phaser, Three.js, or custom)
- Ensure 60fps performance with optimized graphics
- Include sound effects for game interactions
5. Additional Features:
- Score counter tracking viewed sections
- Option to switch between game and traditional view
- Social media/contact links in footer
- Downloadable resume button
The portfolio must balance professional content presentation with engaging gameplay, maintaining accessibility and usability throughout.
I used a Prompt Formatter tool to structure my original prompt and attached my CV as a source of context.
The prompt clearly outlined all my requirements—after that, it was simply a matter of waiting about a minute. Job done.
What I'm Most Proud Of
- From idea to demo in just a few minutes. The preview UI immediately shows the result in a clear and straightforward way.
- Prompt quality really matters. When a prompt is clear and well-structured, Gemini AI can deliver exactly the outcome you want.
Top comments (0)