DEV Community

Cover image for I Built a Portfolio Like a System, Not a Résumé!
Lokesh
Lokesh

Posted on • Edited on

I Built a Portfolio Like a System, Not a Résumé!

New Year, New You Portfolio Challenge Submission

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

About Me

Hi, I’m Lokesh — a frontend-focused web developer with growing full-stack experience.

I don’t learn best by memorizing theory or following tutorials blindly. I learn by building, testing, breaking, and refining real systems.

Over time, I realized that a traditional portfolio page doesn’t truly represent how I think or how I grow as a developer. So instead of creating another résumé-style website, I treated this portfolio as a living system — one that reflects my workflow, my decisions, and my evolution.

This project isn’t about perfection. It’s about process, intention, and progress.

Portfolio

🔗 Live Portfolio (copy-friendly link):
https://lokesh-portfolio-593868443355.us-central1.run.app

👇 Embedded live using Google Cloud Run:


(Note: Deployed to Google Cloud Run with required label: --labels dev-tutorial=devnewyear2026)

📂 Source Code — GitHub Repository

Explore the full source code of this portfolio, including components, styles, and deployment configuration:

👉 https://github.com/itslokeshx/portfolio

How I Built It

This portfolio was planned first, designed with AI, and developed with AI as a collaborator — not as a shortcut.

🎨 Design (Google Stitch AI)

  • Used Google Stitch AI to explore layout direction, hierarchy, and interaction tone.
  • Focused on clarity over decoration.
  • The system-style interface mirrors how I naturally reason through problems.

🧩 Development (Google Antigravity)

  • Built using Google Antigravity as an AI-assisted development environment.
  • AI helped with architecture thinking, component structuring, and refactoring.
  • Every final decision — layout, logic, and behavior — was intentional and human-driven.

⚙️ Stack & Infrastructure

  • React / Next.js
  • Framer Motion for subtle interaction feedback
  • Docker for containerization
  • Google Cloud Run for deployment:
    • Containerized build
    • Scale-to-zero when idle
    • Free-tier safe configuration
    • Production-ready setup

Instead of using many tools, I focused on using fewer tools well.

What I'm Most Proud Of

  • Treating a portfolio as a system that explains how I think, not just what I’ve built.
  • Designing with restraint instead of visual overload.
  • Successfully containerizing and deploying on Google Cloud Run.
  • Keeping performance, simplicity, and cost under control.
  • Being honest about my current level while clearly showing growth.

This portfolio reflects how I want to build software going forward:

Thoughtfully. Iteratively. With intention.


🙏 Thanks to the DEV Community and Google AI team for creating a challenge that encourages experimentation, reflection, and responsible use of AI.

Top comments (24)

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

great work! I really love some of the sections (especially the terminal and loading). my portfolio feels too markety (need to update it asap)

you could also keep the projects state visible when hovering over the skills so clicking them takes you directly to the repo.

Collapse
 
itslokeshx profile image
Lokesh

Thanks for your words ✨

Collapse
 
si326 profile image
suvakovan S

Congratulations, bro.
It’s great to see your portfolio featured in the Dev Community. Your skills in development, design, and animation truly stand out, and this recognition reflects the effort and creativity you consistently put into your work. This is a well-deserved milestone and just the beginning of many more achievements ahead. Keep building, keep creating, and keep inspiring.

Collapse
 
itslokeshx profile image
Lokesh

thanks mate

Collapse
 
andycasen profile image
Andreas Casen

Design is amasing!
really love the creativity behind this!

One potential area for improvement:
In the skill section, when hovering a skill, the right container shows the skill level as well as a list of labels with what I presume are projects built using that technology.
As a user, my initial instinct was to click on these labels in order to be taken to the project, but as soon as I left the skill name on the left with the cursor, the contents of the right container vanished.
Maybe you could make it so that if a user clicks one of the skills, that one stays open in the right container even as the user moves away from the skill itself.

Just a suggestion. Other than that, again, it looks amazing, and I really like it!

Collapse
 
itslokeshx profile image
Lokesh

Thanks for your words and suggestion♥️

Collapse
 
hasnain012 profile image
Hasnain Nadeem

this is great portfolio with proper UI&UX design with responsiveness keep grow and make projects to build up your skill . And this is correct approach that we never make always successful in any code failure is the lesson of key In Coding!

Collapse
 
itslokeshx profile image
Lokesh

Thanks bruh ❤️

Collapse
 
syedmuhammadaliraza profile image
Syed Muhammad Ali Raza

skills section looks amazing

Collapse
 
itslokeshx profile image
Lokesh

🤝✨

Collapse
 
numbpill3d profile image
v. Splicer

Oh, wow- looks like we took a rather similar approach. I love your aesthetic, terminal commands always make a normal site far more fun. Well done!

Collapse
 
itslokeshx profile image
Lokesh

Thanks you✨

Collapse
 
uribejr profile image
Enrique Uribe

Clever on the terminal commands. That's fun to play with and looks really good!

Collapse
 
itslokeshx profile image
Lokesh • Edited

Thank you🌌

Collapse
 
chiragborse1 profile image
Chirag Borse

That's something crazy i have seen rn

Collapse
 
itslokeshx profile image
Lokesh

Thanks dude♥️

Collapse
 
mukul_verma_bca58a415e218 profile image
Mukul Verma

Awesome portfolio man cheers !!

Collapse
 
itslokeshx profile image
Lokesh

Thank you✨

Collapse
 
karth1k profile image
Karthik Krishna

crazy work bro

Collapse
 
itslokeshx profile image
Lokesh

Thanks bruhh🤝