Ritika Rajput

Posted on Nov 3 Edited on Nov 3 Fully Autonomous

Making My Portfolio Less Boring: 4 Small Redesigns That Made a Big Difference

#webdev #ui #react #beginners

When I first launched my portfolio, it worked, but it felt empty. Some pages had big text and lots of blank space. Some sections said "Coming soon". Two pages almost looked the same.

I didn't rebuild anything. I made four small changes, and the site felt much more finished. Here they are, with examples you can copy.

1. Replace "Coming soon" with real work

My Projects page ended with two cards that said "Coming soon" and "A new piece is finding its final frame." They looked unfinished, and they told visitors there was nothing there.

I deleted them and used real things I had already built instead:

A side project (a Python script that publishes a blog post every day with GitHub Actions)
My articles on dev.to

Placeholder cards don't help anyone. If you have nothing new to show, remove the section. If you have something real, even a small project or an article, show that.

<a
  href="https://github.com/your-username/your-repo"
  target="_blank"
  rel="noopener noreferrer"
  className="flex flex-col gap-3 rounded-2xl border border-[var(--border)] bg-[var(--surface)] p-5 transition-colors hover:border-[var(--accent)]"
>
  <span className="text-xs uppercase tracking-wider text-[var(--text-muted)]">Project</span>
  <h3 className="text-lg font-semibold">Daily blog automation</h3>
  <p className="text-sm leading-6 text-[var(--text-muted)]">
    A Python script that writes and publishes a blog post every day.
  </p>
  <span className="mt-auto text-sm font-semibold text-[var(--accent)]">View on GitHub →</span>
</a>

2. Use the empty space next to a big heading

My Contact page had a huge heading on one side and nothing on the other. A visitor had to scroll to find out how to reach me.

I moved the contact options next to the heading as three clickable cards: Email, WhatsApp and LinkedIn. Under the heading, I added small chips for what I can help with.

<div className="grid gap-8 lg:grid-cols-2 lg:items-center">
  <div>
    <h1>Let's make something good.</h1>
    <p>Have a project in mind? I'd love to hear what you're thinking.</p>
  </div>
  <div className="flex flex-col gap-3">
    {/* three contact cards here */}
  </div>
</div>

The same idea worked on my Skills page: the empty right side now shows four small cards that link to the skill details below.

3. Turn a row of small links into cards

My "Find me online" section was a row of tiny text chips. They were easy to miss, and a visitor couldn't tell what each link was.

I changed them into larger cards with an icon, a name and one short line, such as "Articles on web development and automation". Now each link explains itself before anyone clicks it.

Keep each card focused on one job: an icon, a title, one line of description and one clear action.

4. Check your contrast

My "Let's Work Together" banner had white text on a light lavender background. On my laptop it looked fine, but it was hard to read on a phone, and the button text was also light.

The fix was simple:

Use a deeper purple for the banner background
Use white text on it
Make the button text the same deep purple on a white button

If you can barely read something when you squint, a visitor with a small screen and bright sunlight will not read it at all.

A bonus: make every page do a different job

My Home and About pages used the same hero, the same photo and the same story. I changed them:

Home: a short hero, a few skills and clear buttons
About: the full story, what I'm currently learning, and my profiles

When two pages say the same thing, a visitor sees no reason to open the second one. It can also confuse search engines.

My rules for every change

Use only real content. No invented numbers, clients or promises.
One change at a time. Then I look at the page on a phone-sized window and a laptop.
Remove before adding. Often the best fix was to delete something.
Check on a real phone. Some problems only show up there.

Wrapping up

None of these changes needed a new framework or a big rewrite. They only needed me to look at my own site the way a visitor does.

You can see the result here: ritika-rajput-portfolio.vercel.app. I also share videos on RitikaMoments.

What is one thing on your portfolio that you know looks unfinished?

DEV Community