DEV Community

Bellana Jagadeesh
Bellana Jagadeesh

Posted on

Jagadeesh Bellana

#ai #webdev #programming #javascript

🚀 My Portfolio -> https://www.jaggu.me/
A stunning, modern personal portfolio website built with Next.js 16, Tailwind CSS 4, Prisma, and Framer Motion. This project features a clean, responsive design with smooth animations and a robust admin dashboard for managing projects and messages.

Portfolio Banner

✨ Key Features
🌊 Fluid Animations: Leverages Framer Motion for premium, high-performance micro-animations and page transitions.
🛠️ Admin Dashboard: Secure area to manage projects, view incoming messages, and monitor site analytics.
👁️ Visit Tracking: Built-in visit tracking system to monitor traffic and user engagement.
📧 Dynamic Contact Form: Fully functional contact form integrated with EmailJS for direct email notifications.
📱 Ultra-Responsive: Optimized for all devices, from mobile phones to high-resolution desktops.
🔐 Secure Auth: Custom authentication using bcryptjs and jose for administrative access.
🗃️ Persistent Storage: Scalable database management with Prisma ORM.
🛠️ Tech Stack
Frontend: Next.js (App Router), React 19, Tailwind CSS 4
Animations: Framer Motion
Icons: Lucide React
Backend / DB: Next.js API Routes, Prisma ORM, PostgreSQL (configurable via .env)
Authentication: bcryptjs & jose (JWT)
External Integration: EmailJS
🚀 Getting Started

  1. Clone the repository git clone https://github.com/yourusername/my-portfolio.git cd my-portfolio
  2. Install dependencies npm install
  3. Setup Environment Variables Create a .env file in the root directory and add the following:

Database

DATABASE_URL="postgresql://user:password@localhost:5432/mydb"

Auth

JWT_SECRET="your-super-secret-key"
ADMIN_PASSWORD_HASH="hashed-admin-password" # Use bcrypt to hash your password

EmailJS (Contact Form)

NEXT_PUBLIC_EMAILJS_SERVICE_ID="your_service_id"
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID="your_template_id"
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY="your_public_key"

  1. Database Setup (Prisma) npx prisma generate npx prisma db push
  2. Run the development server npm run dev Visit http://localhost:3000 to see your portfolio in action!

📁 Project Structure
my-portfolio/
├── prisma/ # Database schema and migrations
├── public/ # Static assets (images, icons, etc.)
├── src/
│ ├── app/ # Next.js App Router (pages and layouts)
│ │ ├── admin/ # Admin Dashboard restricted area
│ │ ├── api/ # Serverless route handlers
│ │ └── ... # Other pages (about, projects, contact)
│ ├── components/ # Reusable React components
│ ├── lib/ # Utility functions and shared logic (Prisma client, Auth)
│ └── middleware.ts # Auth guards and request filtering
├── package.json # Dependency management
└── tsconfig.json # TypeScript configuration
📊 Database Models
Project: Stores project details, tech stack, and live demo links.
Message: Captures messages submitted via the contact form.
Visit: Logs page views for basic analytics.
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request or open an issue.

📄 License
This project is licensed under the MIT License.

About
jagadeesh-bellana.vercel.app
Resources
Readme
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Releases
No releases published
Create a new release
Deployments
46
Production – jagadeesh-bellana yesterday
Production – my-portfolio yesterday
Production 13 minutes ago

  • 43 deployments Packages No packages published Publish your first package Contributors No contributors Languages TypeScript 90.0%

CSS
9.6%

JavaScript
0.4%
Suggested workflows
Based on your tech stack
Webpack logo
Webpack
Build a NodeJS project with npm and webpack.
Deno logo
Deno
Test your Deno project
Datadog Synthetics logo
Datadog Synthetics
Run Datadog Synthetic tests within your GitHub Actions workflow
More workflows
Footer
© 2026 GitHub, Inc.
Footer navigation
Terms
Privacy
Security
S

Top comments (0)