A modern, responsive personal academic website built with Next.js, TypeScript, and Tailwind CSS. Inspired by academic portfolio designs, optimized for showcasing research, publications, and professional information.
- 🎨 Clean, professional design
- 📱 Fully responsive (mobile, tablet, desktop)
- ⚡ Fast performance with Next.js static export
- 🎯 Easy content management through data files
- 🚀 Ready for Vercel deployment
- ♿ Accessible navigation and content structure
- 📝 Separate pages for: About, Lab, Hiring, Teaching, Talks, Publications
npm installEdit the data files in the data/ directory:
data/personal.ts- Your name, title, bio, contact informationdata/news.ts- News items and announcementsdata/publications.ts- Your publications organized by year
Place images in the public/ folder:
public/headshot.jpg- Your professional photopublic/papers/- Paper thumbnails and visualizations (paper1.png, paper2.png, etc.)
npm run devOpen http://localhost:3000 to see your site.
Edit the following pages as needed:
app/lab/page.tsx- Lab information and membersapp/hiring/page.tsx- Hiring informationapp/teaching/page.tsx- Courses and teaching philosophyapp/talks/page.tsx- Talks, podcasts, and tutorialsapp/publications/page.tsx- Full publications list
- Push your code to a GitHub repository
- Go to vercel.com
- Click "New Project"
- Import your repository
- Vercel will automatically detect Next.js and deploy
# Install Vercel CLI
npm install -g vercel
# Deploy
vercelFollow the prompts, and your site will be live!
├── app/ # Next.js app directory
│ ├── layout.tsx # Main layout
│ ├── page.tsx # Homepage
│ ├── globals.css # Global styles
│ ├── lab/ # Lab page
│ ├── hiring/ # Hiring page
│ ├── teaching/ # Teaching page
│ ├── talks/ # Talks page
│ └── publications/ # Publications page
├── components/ # React components
│ ├── Navigation.tsx # Navigation bar
│ ├── Footer.tsx # Footer
│ ├── Hero.tsx # Hero section with bio
│ ├── News.tsx # News section
│ └── Publications.tsx # Publications section
├── data/ # Content data files
│ ├── personal.ts # Personal information
│ ├── news.ts # News items
│ └── publications.ts # Publications
├── public/ # Static assets
│ ├── headshot.jpg # Your photo
│ └── papers/ # Paper images
├── package.json # Dependencies
├── tsconfig.json # TypeScript config
├── tailwind.config.ts # Tailwind config
└── next.config.js # Next.js config
Edit tailwind.config.ts to change the color scheme:
theme: {
extend: {
colors: {
primary: "#2563eb", // Change primary color
secondary: "#64748b", // Change secondary color
},
},
}- Create a new folder in
app/(e.g.,app/blog/) - Add a
page.tsxfile in that folder - Add the route to
components/Navigation.tsx
Edit components/Footer.tsx to customize copyright and footer content.
To add Google Analytics:
- Install package:
npm install @next/third-parties - Add to
app/layout.tsx:
import { GoogleAnalytics } from '@next/third-parties/google'
// Add inside the <body> tag:
<GoogleAnalytics gaId="G-XXXXXXXXXX" />- Add paper thumbnails (PNG/JPG) to
public/papers/ - Include links to PDF, code repositories, and project websites
- Organize by year for easy browsing
- Use HTML in news content for formatting and links
- Most recent items appear first
- Use emojis sparingly for visual interest
- Keep paragraphs concise
- Link to important papers and resources
- Highlight key achievements and affiliations
# Create production build
npm run build
# Test production build locally
npm run startThe static site will be exported to the out/ directory.
- Ensure images are in the
public/folder - Check that file names match exactly (case-sensitive)
- Use relative paths:
/headshot.jpgnot./headshot.jpg
- Make sure
output: 'export'is innext.config.js - Check that all dependencies are in
package.json - Verify no dynamic routes are used without proper configuration
- Clear browser cache
- Run
npm run devto restart development server - Check Tailwind classes are valid
Feel free to use this template for your personal academic website.
For Next.js documentation: nextjs.org/docs For Vercel deployment: vercel.com/docs
Built with ❤️ using Next.js, TypeScript, and Tailwind CSS