Introduction
Most developer portfolios look very similar — a homepage, some projects, and a contact section.
I wanted to try something different.
Instead of showing everything at once, I built my portfolio as a chat-based interface, where users can interact with my website like they are chatting with me.
👉 Live here: https://portfolio.nasimkuniyil.in
Why I Chose a Chat-Based Design
While exploring different portfolio designs, I noticed a common problem:
Users have to scroll and search to find what they need.
So I thought:
“What if users can directly ask for what they want?”
That idea led me to build a chatbot-style portfolio.
Users can:
- Type a message (like “projects” or “skills”)
- Or click quick action buttons
This makes the experience:
- More interactive
- More engaging
- More personalized
Tech Stack I Used
Next.js
I used Next.js because:
- It provides built-in routing (no need for extra setup)
- It improves performance
- It supports SEO (important for visibility in search results)
TypeScript
- Helps catch errors early
- Makes code more maintainable
- Improves development confidence
Tailwind CSS
- Fast and flexible styling
- Keeps design consistent
- No need to switch between multiple files
How the Chat System Works
The logic is simple but effective.
- User enters a query or clicks a button
- The system matches it with predefined commands
- It returns the corresponding response
Example:
- Input: “projects”
- Output: List of my projects
This is not AI-based — it’s a structured system designed for specific interactions.
Improving User Experience
I focused a lot on making the experience smooth and easy.
Predefined Action Buttons
Not every user wants to type.
So I added buttons like:
- About
- Projects
- Skills
- Contact
This helps users navigate quickly.
Handling Repeated Queries
One interesting problem I faced:
What if the user asks the same question again?
I didn’t want duplicate responses in the chat.
So I built a feature where:
- The system detects repeated queries
- It scrolls to the previous answer
- Highlights it for a short time
This small highlight acts as a visual cue:
“Your answer is already here”
This improved:
- Navigation
- Clarity
- Overall user experience
Responsive Design Challenges
Making this design responsive was tricky.
Main challenges:
- Keeping layout clean on smaller screens
- Highlighting important content properly
- Maintaining chat-like feel across devices
Trade-offs I Faced
Even though the chat-based design is unique, it has some limitations:
- Some users prefer quick overview instead of interaction
- It may take extra steps to access information
- Not all recruiters want to “chat”
To solve this, I’m planning to add a quick summary section in future.
What I Learned
This project taught me more than just coding:
- UX matters as much as functionality
- Small details (like highlights) improve experience a lot
- Thinking from user perspective is very important
- Building something unique requires experimentation
Future Improvements
I’m planning to improve this further by adding:
- Better input handling (typos, suggestions)
- Smarter responses
- Quick overview for recruiters
- More interactive features
Final Thoughts
This portfolio is more than just a project.
It represents:
- My creativity
- My problem-solving approach
- My willingness to try new ideas
I believe standing out is not about doing more —
it’s about doing things differently.
Thanks for Reading
If you have feedback or suggestions, feel free to connect with me!
And if you’re a beginner like me,
don’t be afraid to try something unique
Top comments (0)