When I first decided to build a portfolio website, I had nothing but two freshly purchased domain names and a wild curiosity about coding. I called the project Pradhidhi, a name that feels personal and meaningful to me, and I launched a companion blog called Nityaved—a word that, to me, captures the spirit of continuous learning (“nitya” = everlasting, “ved” = knowledge). This is the story of how I turned those vague ideas into a real, public-facing site, the mistakes I made along the way, and the lessons I learned. I hope this narrative can help anyone who is just starting out, whether you’re a budding developer, a designer, or simply someone who wants to share their work with the world.

1. The Spark: Two Domains, Zero Experience

It all began on a rainy Saturday. I was scrolling through design portfolios on Dribbble and thinking, “I want a place where I can showcase my projects, write about my process, and maybe even attract collaborators.” The next day I bought two domain names:

  • pradhidhi.cloud – the main portfolio site where I would host my projects, résumé, and contact information.

  • nityaved.com – a blog where I could chronicle my learning journey, share tutorials, and reflect on my mistakes.

I had never written a line of code beyond a simple “Hello World” in a tutorial. The only thing I knew was that I wanted a modern, fast, and visually appealing site. I decided to use Vite (a lightweight dev server and bundler) together with React for the front‑end, and I’d rely on Antigravity—the AI‑powered coding assistant that’s been helping me throughout this process.

2. Why Vite for a First‑Time Portfolio?

Because the project is a single‑page portfolio, Vite gives you a clean slate with everything you need, while staying lightweight enough that a newcomer can understand each piece.

3. How Vite Created the File Structure

Running the command:

produced the following tree (folders/files are abbreviated for clarity):

What Each Core File Does

4. Key Dependencies Added After Scaffold

All of these are installed with a single npm i command, and Vite automatically picks them up during development.

5. Switching to Antigravity – The AI Prompt Journey

  1. Initial Prompt – I asked Antigravity: “Create a Vite React project for a beginner portfolio.”

  2. Scaffold Generation – Antigravity executed the npx create-vite command, then opened the generated files for me to inspect.

  3. Design System – I requested a modern theme. Antigravity produced src/theme.js with a dark‑mode palette, typography (Google Font Inter), and a spacing helper.

  4. Component Boilerplate – For each UI piece (Hero, Navbar, ProjectCard) I gave a short description, and Antigravity returned ready‑to‑use React components with styled‑components styling.

  5. Asset Creation – Using Antigravity’s generate_image tool, I created a header illustration and placeholder screenshots for projects, saving them directly into src/assets/.

  6. Iterative Fixes – When a component threw an error (e.g., undefined props), I asked Antigravity to add optional chaining and defensive checks. It edited the code in place.

The workflow is essentially a conversation: I describe the desired outcome, Antigravity proposes code, I review, and we iterate until the result matches the vision.

6. Design Inspiration from Dribbble → Customization

  • Inspiration: I bookmarked a few Dribbble portfolio templates that used glass‑morphism cards, bold gradients, and minimal navigation.

  • Customization Steps:

    • Copy the visual language – I asked Antigravity to generate a “glass‑morphism card” component.

    • Adjust colors – The original Dribbble palettes were bright teal; I tweaked them in theme.js to a more muted hsl(210, 70%, 55%) primary and dark background.

    • Typography – Swapped the default system font for Inter, which matches the modern aesthetic.

    • Spacing – Added a spacing helper (theme.spacing(2)) to keep margins consistent across components.

Result: a design that feels inspired by Dribbble but uniquely my own, with a cohesive theme throughout.

7. Mobile Layout Issues & Fixes

Problem

The initial layout looked great on desktop, but on phones:

  • The hero text overflowed.

  • The project grid collapsed into a single column with huge gaps.

  • The header image stretched and lost aspect ratio.

Fixes Implemented

These adjustments made the site fluid across breakpoints (mobile, tablet, desktop) without needing a separate CSS framework.

8. Header Image & Color Scheme Customization

  1. Header Image – Generated via Antigravity (generate_image) with the prompt “abstract gradient wave for a tech portfolio header”. Saved as src/assets/header.jpg.

  2. Implementation – Added a Header component that renders the image as a background with a dark overlay:

  1. Color Scheme – The theme uses a dark‑mode base (background: hsl(210,20%,10%)) with a primary accent (hsl(210,70%,55%)). Buttons, links, and hover states all derive from theme.colors.primary, ensuring a consistent look.

  2. Mobile‑friendly header – The height is set with clamp(180px, 30vh, 260px) so it shrinks on small screens while preserving the visual impact.

9. Recap of the Whole Journey

  1. Choose Vite – Simple, fast, modern; perfect for a beginner’s portfolio.

  2. Scaffold – One command creates the entire folder tree and starter files.

  3. Add Dependencies – React Router, styled‑components, SEO tools, markdown renderer.

  4. Invite Antigravity – AI assists in generating theme, components, assets, and fixes.

  5. Design Inspiration – Borrow visual cues from Dribbble, then customize colors, fonts, and spacing.

  6. Mobile Polish – Use CSS clamp, auto‑fit grids, responsive images, and proper viewport meta.

  7. Header & Colors – Generate a custom header image, overlay it, and apply a cohesive dark‑mode palette.

The result is a clean, responsive portfolio that showcases projects, hosts a blog, and serves as a living record of continuous learning—exactly what the name Nityaved stands for.

Building Pradhidhi from scratch was a roller‑coaster of excitement, frustration, and triumph. I started with two domain names and no coding background, and now I have a functional, performant portfolio site that showcases my work and a blog that chronicles my journey. The key takeaways for anyone embarking on a similar adventure are:

  • Start small – Scaffold a minimal project first; you can always add complexity later.

  • Leverage tools – Modern dev tools (Vite, Antigravity, styled‑components) dramatically reduce friction.

  • Iterate fast – Deploy early, get feedback, and fix issues iteratively.

  • Document everything – Write down mistakes; they become the most valuable learning resources.

  • Stay curious – Every bug is a chance to learn something new.

If you’re reading this and thinking, “I have zero experience—can I do this?” the answer is a resounding yes. Grab a domain, fire up Vite, and let the learning journey begin. Your first portfolio website may be imperfect, but it will be yours, and that’s the most important part.

Happy coding!

The post A Journey from Zero Experience to a Living Blog appeared first on NITYAVED.

Read more at NITYAVED

Keep Reading

© 2026 NityaVed Learn.
beehiivPowered by beehiiv