NextJS Academic Theme

Demo🔗

A simple academic personal website, built with Tailwind CSS and Next.js, focused on performance, a11y and privacy 🚀

Highlights

• Built with:
  • Next.js (Thereby, hosting on Vercel is recommended. FREE)
    • Written in TypeScript
  • Tailwind CSS
• Easy customization - edit the data in components/data/*.json without altering the code.
• Accessible - follows WAI-ARIA.
• Responsive - uses latest CSS features and looks great on all devices.
• Optimized SEO
• Traffic tracking by Google Analytics

Development

Install Node and NPM by NVM

• For MacOS, brew install NVM or install by script (any OS)
• Then nvm install 20 installs Node.js v20; it comes with npm.

Run locally

cd NextJSAcademicTheme/
# Install dependencies
npm install
# Run in development mode
npm run dev
# Build for production
npm run build

Customize your info

• in components/data/personalInfo.json
• in components/data/publications.json
• in components/data/projects.json
• in components/data/teaching.json
• in .env
• in public/cv.pdf

Deploy on Vercel

• Option 1: deploy on Vercel via Vercel cli

npm i -g vercel
# preview
vercel
# production
vercel --prod

• Option 2: push to your own Github repo then connect it to Vercel (CI/CD, i.e. every new commit to Github will reflect on Vercel automatically.)

• After successful deployment on Vercel, it should be alive on yourwebname.vercel.app online. To use your own domain name, config the settings on Vercel here.

[Optional] Track your web traffic by connecting to Google Analytics

• Simply add your project tracking code, e.g. G-38LNZ3XXXX, in .env.

Acknowledgments

• Inspired by https://kepinski.ch/

License

Code released under WTFPL