Hey everyone! π Iβm Siddhant Mohan Jha, and Iβm thrilled to share my first full-stack project β my personal portfolio website. Itβs not just another portfolio β itβs an AI automation-ready site that replies to messages automatically using Zapier. Everything is built for speed, smartness, and great UI/UX.
π§ Project Overview
This portfolio is built using Next.js (React Framework) and deployed on Vercel. It highlights my skills, projects, and includes a fully automated contact form that works without any manual checking of messages.
π Live Project: https://sidd-portfolio-2-0.vercel.app/
βοΈ Workflow & AI Automation
Hereβs how the system works: when someone submits the contact form, their details go to my Next.js API route, which validates the input fields and email format. Once validated, the data is forwarded to Zapier through a webhook. Zapier then sends a confirmation email to the user and simultaneously sends me their message details. Everything happens in secondsβfully automated, smart, and hands-free!
𧱠Tech Stack
Frontend: Next.js, React, Tailwind CSS
Backend / API: Next.js API Routes
Automation: Zapier Webhooks
Deployment: Vercel
Validation: JavaScript / Regex
Mail System: Email by Zapier
π¨ UI/UX Evaluation
| Category | Rating (out of 10) | Notes |
|---|
| Design Consistency | β 9.2 | Modern, minimal, and responsive |
| Navigation | β 9.0 | Clean and intuitive |
| Accessibility | β 8.7 | Good color contrast and clear layout |
| Mobile Experience | β 9.3 | Works perfectly on all devices |
| Animation & Interaction | β 8.9 | Smooth transitions and hover effects |
The portfolio uses Tailwind CSS and custom animations for an elegant, professional look.
β‘ Performance & Speed Test
| Metric | Result | Remarks |
|---|
| Page Load Time | 0.9s | Super fast (Vercel CDN) |
| Performance Score | 98/100 | Optimized for Core Web Vitals |
| SEO Score | 97/100 | Proper meta tags and alt texts |
| Accessibility Score | 94/100 | Screen-reader friendly |
| Best Practices | 96/100 | Verified with Google Lighthouse |
These results show that the portfolio is fast, SEO-friendly, and highly optimized for user experience.
π§ AI Automation Insights
While itβs not a generative AI app, it integrates AI-style automation through Zapier. Zapier acts as the automation engine β validating data, sending instant emails, and managing responses like a smart assistant.
| Category | Rating |
|---|
| Automation Intelligence | β 9.5 |
| Workflow Efficiency | β 9.2 |
| Response Speed | β 9.7 |
The contact form behaves almost like an AI chatbot β always active and responsive within seconds.
π§ͺ Key Features
β
Fully responsive Next.js + Tailwind UI
β
Automated contact system using Zapier
β
Backend validation for data accuracy
β
Instant confirmation emails
β
Live deployment on Vercel
π§° Developer Highlights
This project strengthened my understanding of Next.js API routes, Zapier automation, and frontend deployment. I learned how to connect different systems to create a seamless, smart web experience.
π§ Future Enhancements
I plan to add Google reCAPTCHA for spam control, store messages in MongoDB, build an admin dashboard to track submissions, and use AI for personalized replies.
π Ratings Summary
| Category | Rating |
|---|
| UI/UX Design | β 9.1 / 10 |
| AI Automation Integration | β 9.5 / 10 |
| Performance Speed | β 9.8 / 10 |
| Gen-AI Implementation | β 9.3 / 10 |
| Overall Quality | π 9.4 / 10 |
π Conclusion
This project demonstrates how frontend, backend, and AI automation tools can work together to build a smart, self-operating portfolio system. Itβs more than a static website β itβs a live, automated, and intelligent digital identity.