DEV Community: Anshul Negi

I Built an AI-First Portfolio Powered by Gemini

Anshul Negi — Fri, 30 Jan 2026 20:05:13 +0000

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

About Me

I like building things that are simple, useful, and easy to understand.
This portfolio replaces traditional navigation with conversation, letting you explore my work and approach through an AI-powered interface.

Portfolio

Try it here → Live Demo

How I Built It

Tech stack

Angular
TailWind CSS
Gemini Flash Lite 2.5

Design Decisions

Chose a conversational portfolio instead of a multi-page layout to highlight AI-driven interaction.
Kept the UI simple and readable so users can focus on content without distractions.
Added predefined prompts to help users get started easily.

Development Process

Gathered all portfolio information and structured it as a single data source to enable context-based responses.
Initially passed the entire portfolio data with each request, which led to unnecessary API usage and performance issues.
Introduced AI-based intent detection to understand what the user is asking before selecting relevant data. This helped reduce context size but still required further optimization.
Split the portfolio data into multiple focused sections (skills, projects, experience, philosophy) to improve clarity and reduce payload size.
Switched to Gemini Flash Lite 2.5 for faster, more efficient intent detection and lightweight response generation.
Defined fixed intents for predefined prompt pills to avoid unnecessary intent detection calls.
Cached responses for prompts to minimize repeated API calls and improve responsiveness.
Added a contextual follow-up question after responses to encourage deeper exploration without overwhelming the user.

Google AI tools

Google AI Studio
Gemini

What I'm Most Proud Of

Used AI to rapidly build, iterate, and deploy the application, enabling fast experimentation and continuous refinement.
Applied intent-based AI usage with focused context and model selection to improve response quality while reducing unnecessary API calls.
Balanced user experience and technical implementation, ensuring the interface remains simple while the system stays efficient.

Free Image Hosting

Anshul Negi — Sun, 13 Oct 2024 16:07:22 +0000

This is a submission for the The Pinata Challenge

What I Built

Free Image Hosting is a web application that allows users to temporarily store and share image files. It utilizes Pinata for storage and retrieval, enabling optimized image retrieval. MongoDB is used to store image properties and URLs.

Demo

Website : Live

Website Overview

Configure Image

Get Temporary Url

Getting Image by temporary Url

Url Expired/Image Not Found/Url Not Found

My Code

anshulnegitc / fimh

Free Image Hosting

Store and share file with temporary url.

A Next.js-based application that uses Pinata to store image files and MongoDB to store data. Images can be configured with different properties for optimization. Documents are deleted using a TTL index in MongoDB, and triggers-functions in MongoDB remove the corresponding files from Pinata

🚀 Features

Seamless Image Upload: File API to upload image.
Signed Url: Signed Url to access image for limited amount of time.
Optimized Performance: Leverages Pinata's Image Opimization for fast content delivery and enhanced user experience.

📂 Tech Stack

Frontend: React, Next.js
Backend: Next.js, Pinata API, MongoDb
Styling: Bootstrap
Hosting: Vercel

⚙️ Setup & Installation

Clone the Repository

git clone https://github.com/anshulnegitc/fimh.git
cd fimh

Install Dependencies::
```
npm install
```
Environment Variables: Set up environment variables for Pinata API keys in a .env.local file(Place .env.local inside fimh folder):
```
NEXT_PUBLIC_PINATA_JWT=your_api_key
NEXT_PUBLIC_GATEWAY_URL=your_secret_key
NEXT_PUBLIC_DATABASE_URL=your_mongo_connection_url
```
…

View on GitHub

More Details

Pinata Files API is used to upload the image.
Pinata Signed URL is used to access the image for a limited amount of time.
Pinata Image Optimizations can be set to improve the load time and experience when viewing image content.

For project setup and other configuration Github

Url Shortener

Anshul Negi — Mon, 29 Aug 2022 17:42:00 +0000

Overview of My Submission

It's an imitation of Url Shortener Service.

Only functional requirements are considered while developing this project i.e to generate short url and redirect short url to original url.

In case url got expired/moved to other domain/not responsding, a 404 error page is shown.

Redis is used as primary as well as caching database here.

Some analytics and expression values(like,star,thumbs up etc...) are permanently stored in database while urls are short lived.

Submission Category:

MEAN/MERN Mavericks

Language Used:

NodeJs & React

Link to Code

Frontend:

anshulnegitc / url-shortener-app-frontend

Url Shortener Application

It's an imitation of Url Shortener Service.

Only functional requirements are considered while developing this project i.e to generate short url and redirect short url to original url.

In case url got expired/moved to other domain/not responsding, a 404 error page is shown.

Redis is used as primary as well as caching database here.

Some analytics and expression values(like,star,thumbs up etc...) are permanently stored in database while urls are short lived.

Application Architecture.

Desktop View.

404 Page.

Analytics.

Mobile View.

Overview video

Here's a short video that explains the project and how it uses Redis:

How it works

How the data is stored:

Urls.
- It maps the long_url with short_url.
- short_url is base62 value of counter and is indexed.
- Expiration of 30 mins is set.
- Data is stored as

class Url extends Entity { }
const urlSchema = new Schema(Url, {
    long_url: { type: 'string' }
    short_url:

…

View on GitHub

Backend:

anshulnegitc / url-shortener-app-backend

Url Shortener Application

It's an imitation of Url Shortener Service.

Only functional requirements are considered while developing this project i.e to generate short url and redirect short url to original url.

In case url got expired/moved to other domain/not responsding, a 404 error page is shown.

Redis is used as primary as well as caching database here.

Some analytics and expression values(like,star,thumbs up etc...) are permanently stored in database while urls are short lived.

Application Architecture.

Desktop View.

404 Page.

Analytics.

Mobile View.

Overview video

Here's a short video that explains the project and how it uses Redis:

How it works

How the data is stored:

Urls.
- It maps the long_url with short_url.
- short_url is base62 value of counter and is indexed.
- Expiration of 30 mins is set.
- Data is stored as

class Url extends Entity { }
const urlSchema = new Schema(Url, {
    long_url: { type: 'string' }
    short_url:

…

View on GitHub

Check out Redis OM, client libraries for working with Redis as a multi-model database.
Use RedisInsight to visualize your data in Redis.
Sign up for a free Redis database.

designing database

Anshul Negi — Mon, 16 Mar 2020 07:15:54 +0000

I am new to database architecture though familiar with queries and aggregation in MongoDB.
At present working on a project where I have to store different user depending upon the type/role. There are few fields similar in the user model, would it be correct to create a separate collection for each role or just create separate schema then reference it i.e only a single collection.
In the future, more roles can be added with more information.
Any other approach is welcome.

Below is the mock models
Eg:
*customer =
{firstname,lastname,email,address,mobileno,password,role}
*sales = {firstname,lastname,email,address,mobileno,password,role,attachments,experience,
education}
*marketting =
{teamName,email,address,mobileno,password,role,members,attachments}