The Future of Web Dev
The Future of Web Dev
Next.js Portfolio Template for AI/ML Engineer & Data Scientist
A modern Next.js portfolio template for developers working on AI/ML and quantitative finance.
VimalDev Portfolio is an open-source Next.js portfolio template that helps you create a modern, performant personal website.
It’s built for those in technical fields like AI/ML and quantitative finance who need to showcase complex projects with a clean, professional aesthetic.
Features
Modern UI/UX: Glassmorphic components, a dark theme, and fluid animations with Framer Motion.
Performance-Focused: Built with Next.js 15 for server-side rendering, leading to fast page loads and a Lighthouse score of 95+.
Component-Driven: Uses Radix UI primitives with shadcn/ui for accessible and reusable components.
Integrated Tooling: Comes with TypeScript, TailwindCSS, React Hook Form with Zod for validation, and Nodemailer for the contact form.
SEO Ready: The architecture is optimized for search engines from the start.
One-Click Deploy: Includes a Vercel deployment button for quick and easy setup.
Use Cases
- Fast Portfolio Setup: You need a professional, high-performance portfolio online this week, not next month. This template provides all the essential sections: hero, projects, skills, experience, and contact—so you can just plug in your data.
- Learning Modern Stacks: You want a real-world project to understand how Next.js 15, shadcn/ui, and Framer Motion work together.
- Specialized Technical Showcase: You’re an AI/ML engineer or data scientist and need a portfolio that looks as technical and polished as your work.
- Building a Personal Brand: You want a customizable, SEO-friendly platform to serve as a central hub for your professional presence, from project links to your resume.
How to Use It
1. Clone the repository from GitHub:
git clone https://github.com/vimal0156/portfolio.git
cd portfolio2. Install dependencies. The project uses dependencies that might have peer dependency conflicts, so the --legacy-peer-deps flag is recommended.
npm install --legacy-peer-deps3. Set up an .env.local file in the root of the project for the contact form to work. This requires a Gmail account with an app-specific password.
[email protected]
EMAIL_PASS=your-16-digit-app-password4. Run the Development Server and your portfolio site will be available at http://localhost:3000.
npm run dev5. Customize the template to make your portfolio website your own.
- Personal Information: The main content, like your name, project details, and experience, is located in
app/page.tsx. - Assets: Replace the project images in the
public/folder and add your resume aspublic/VIMALRESUME.pdf. - Styling: Global styles and colors can be modified in
app/globals.cssandtailwind.config.ts, respectively. - Metadata: Update the site’s meta tags for SEO in
app/layout.tsx.
FAQS
Q: Can I host this on a platform other than Vercel?
A: Yes. It’s a standard Next.js application, so you can deploy it on any platform that supports Node.js, such as Netlify, AWS Amplify, or your own server. However, deployment on Vercel is the most straightforward due to its native integration with Next.js.
Q: Do I need to use Gmail for the contact form?
A: The default setup uses Nodemailer configured for Gmail. You can adapt the configuration in app/api/contact/route.ts to use another email service provider like SendGrid or Resend, but you’ll need to modify the transport object accordingly.
