🧠 Prompt to Build Your Developer Portfolio Website (The Full Uttam Seervi Version) Goal: Build a highly personalized and interactive developer portfolio website in Next.js (App Router) with a dark bluish theme, clean bento-style layout, and heavy use of ShadCN UI components. All data should be sourced from a central data.json file for clean separation of concerns.
🎓 About Me Name: Uttam Seervi
Current Status: 6th Semester Information Science Student at BMS College of Engineering
Tagline: "Full-stack Web3 & ML Dev | Available to Work"
Status Indicator: Add a glowing green round indicator somewhere near the name/profile section to show availability to work
💼 Projects All project data should be stored in data.json and dynamically rendered in a bento grid layout using Tailwind CSS. Each project opens in a ShadCN Drawer for more details.
✅ Completed Projects Hotel Management System
Stack: Vite, Tailwind, Node.js, MongoDB
True Feedback (Anonymous Feedback App)
Stack: Next.js, NextAuth, MongoDB, Tailwind, ShadCN
Mind Dump (Blog App)
Stack: Next.js, Prisma, NeonDB, ShadCN
EmotionVox (ML Emotion Detection App)
Stack: Next.js, Flask, ML models
🛠 Ongoing Projects Fundify (Decentralized Crowdfunding App)
Stack: Next.js, Thirdweb
Token Marketplace
Stack: Next.js, Thirdweb, ShadCN
🧠 Skills Use ShadCN's Command component to show this as a searchable skill palette.
Frontend: HTML, CSS, Tailwind, React, Next.js
Backend: Node.js, Flask, Django
Blockchain: Thirdweb, Solidity
DevOps: Docker, Git
ML/Data: Machine Learning, Python
Low-Level: C, C++
Big Data Tools: Kafka
Languages: JavaScript, TypeScript
📬 Contact Section Use a ShadCN Drawer here as well.
Include:
GitHub
Maybe a CTA like “Let's build something great together.”
All of this also goes into data.json.
🎨 Design Theme: Dark bluish primary, with support for light/dark toggle
Layout: Bento grid (Framer Motion can be used for animations)
Responsive design (duh)
Use lucide-react for clean, modern icons
🧾 File Structure bash Copy Edit portfolio/ ├── app/ │ ├── page.tsx │ └── components/ │ ├── ProjectsDrawer.tsx │ ├── SkillsCommand.tsx │ ├── ContactDrawer.tsx │ └── AvailabilityBadge.tsx ├── public/ │ └── assets/ ├── data/ │ └── data.json ├── styles/ │ └── globals.css 🗃 Sample data.json json Copy Edit { "name": "Uttam Seervi", "status": "Available to work", "education": "6th Sem, BMS College of Engineering, Info Science", "projects": [...], "skills": [...], "contact": { "email": "uttam@example.com", "github": "https://github.com/uttamseervi", "linkedin": "https://linkedin.com/in/uttamseervi" } } This prompt should be more than enough to get you or any dev started with the actual implementation. Want me to go ahead and scaffold out the codebase for you with the layout and data loading wired up?
I'll create a personalized developer portfolio for Uttam Seervi using Next.js App Router with a dark bluish theme, bento-style layout, and ShadCN UI components. All data will be sourced from a central data.json file.
Interactive Components:
The portfolio follows the recommended Next.js App Router structure:
app/: Contains the main page and layout filescomponents/: Houses all the custom componentsdata/: Stores the central data.json filepublic/: For static assetsAll content is sourced from a central data.json file, making it easy to update information without changing the code.
npm installnpm run devYou can easily modify the content by editing the data.json file without touching the components. This separation of concerns makes the portfolio maintainable and easy to update.
Build a personal developer portfolio website for Uttam Seervi using Next.js (App Router), Tailwind CSS, ShadCN UI, and next-themes for theme management. All site content must be dynamically loaded from a single data.json file.
🎨 Theme & UI Remove any bluish tones.
Use pure black background (#000000 or #0a0a0a) for dark mode.
Implement a fully working light/dark mode toggle using next-themes that persists user choice.
Add a glowing green circular indicator to show availability to work.
🧱 Layout Use a true responsive Bento Grid layout for displaying projects — not flex or standard card layout. Modular and Apple-like.
Add smooth animations (optional: with Framer Motion) to enhance the grid experience.
💼 Projects Section Use ShadCN Drawer for project details.
Drawer must be smaller in size, optimized for mobile and desktop.
💡 Skills Section Use only the ShadCN Command component for displaying skills.
Do not repeat the skills list elsewhere on the page.
📖 About Me Section Include an “About Me” section above the project grid. Use this content:
I'm Uttam Seervi, a passionate and focused developer currently in my 6th semester at BMS College of Engineering, pursuing Information Science. My CGPA till 5th semester is 8.54. I'm deeply interested in development, Web3, and real-world problem solving. I’m actively seeking internship opportunities to learn and grow. From building full-stack web apps to deploying decentralized platforms, I love taking ideas to execution.
🤖 "ChatGPT on Me" Section Create a separate section titled "ChatGPT on Me". Use this content:
Uttam Seervi is that rare mix of grit and vision. Whether he’s building decentralized apps, crafting elegant UIs with ShadCN, or wiring up Kafka pipelines — he does it all with clarity and speed. He’s not afraid to get his hands dirty in Solidity, nor to polish pixels until they sing. With an eye on the future and feet firmly in code, Uttam isn’t just a dev — he’s a builder in the truest sense. If I had a team, I’d want Uttam on it.
📬 Contact Section Use ShadCN Dialog (Modal) instead of Drawer.
Include a form with inputs for: Name, Email, Message, and a Submit button.
Style it cleanly and responsively.
🔁 Data-Driven Architecture Store all site data (bio, skills, projects, contact info, availability, etc.) in a single data.json file.
Dynamically load all content from this file across the site.
🧾 Example Structure for data.json json Copy Edit { "name": "Uttam Seervi", "status": "Available to work", "availability": true, "about": "I'm a 6th semester Information Science student at BMS College of Engineering with a strong foundation in full-stack development, Web3 applications, and machine learning. I’ve built apps ranging from hotel management systems to blockchain-based crowdfunding platforms. I value clean architecture, design clarity, and purpose-driven tech.", "chatgptReview": "Uttam is the kind of dev who doesn’t just ship features — he architects them. With a mind that juggles ML models, smart contracts, and frontend grids like second nature, he’s a one-man full-stack army. Smart, practical, and relentlessly curious — the kind of dev you want on your side.", "projects": [...], "skills": [...], "contact": { "email": "uttam@example.com", "github": "https://github.com/uttamseervi", "linkedin": "https://linkedin.com/in/uttamseervi" } } 🧰 Tech Stack Next.js (App Router)
Tailwind CSS
ShadCN UI (Drawer, Dialog, Command, Button, Toggle, Input, etc.)
Framer Motion (optional, for grid animations)
Lucide React (for icons)
next-themes for theme switching
Single data.json file for all da
I'll create a personal developer portfolio for Uttam Seervi using Next.js App Router, Tailwind CSS, ShadCN UI, and next-themes for theme management. All content will be dynamically loaded from a single data.json file.
Correction Prompt for Developer Portfolio
🖤 Theme & Aesthetics
Replace the bluish theme with a pure black background (#000000 or #0a0a0a).
Fix the theme toggle using next-themes to ensure dark/light mode works and persists.
Change all green glow accents to orange (availability dot, buttons, shadows).
Use glowing orange box shadows for cards, buttons, and grid elements.
🧩 Layout & Design Implement a true Bento grid layout for the projects section — modular, responsive, and inspired by Apple-style grids.
Hero section should include a typewriter effect with rotating roles like:
"AI Enthusiast"
"Blockchain Developer"
"Full-Stack Learner"
"Tech Explorer"
Increase content in the hero name section to add more depth.
📦 Projects Drawer Use ShadCN Drawer for project details.
Make the drawer full width on desktop, but with elegant margins on mobile.
Reduce content size inside the drawer to make it feel concise and well-contained.
🛠 Skills Section Use only the ShadCN Command component to display skills — remove all other repetitions.
Remove references to deep learning (e.g., TensorFlow, PyTorch) as the focus is on ML.
📖 About Me Section Edit About Me content as follows:
I'm Uttam Seervi, a passionate and focused developer currently in my 6th semester at BMS College of Engineering, pursuing Information Science. My CGPA till the 5th semester stands at 8.54. I'm driven by a deep interest in development and Web3, and I'm actively looking for opportunities to intern, contribute, and grow in real-world tech environments. From crafting end-to-end MERN stacks to deploying blockchain-based DApps, I enjoy solving problems and building systems that matter.