Next.js Website Template

A modern website template based on the Next.js React framework built in TypeScript using Chakra UI and hosted on Netlify.

Be sure to explore the demo to my personal website.

Use this template as a starter for your next website. Just download, make your edits, and host it on any free server.

Features

• Responsive design: Built for device responsiveness across laptops, tablets, and phones
• Ready-to-use: Just replace your data in one central file
• Flexible: Made using Chakra components. Easy to customize to your specific needs
• Dark Mode: Support for dark mode available

Simple Steps to Host

1. Clone the repo to your local machine
2. Navigate to the /data dir. Make your edits to the file names data.ts
3. Install npm on your machine if you havent already done so. (Tutorial here)
4. To see the website in action on your local machine, run the following command npm run dev
5. The site should be visible on localhost:3000 in your browser
6. Make sure to push your changes to a GitHub repo
7. Once ready to host, you can head on to a tool like Netlify to make it live. Just sign up, create a new site, link your GitHub repo and enjoy!

Credits

Made possible thanks to the following free asset resources

• Devicon
• AvatarMaker
• SetAsWall
• GitHub
• Fonts

---

Tasks

TO DO List

• Change toolbox logic from stack to flex
• Try out Vercel for analytics
• Snap when scrolling? - buggy
• Dark and light mode screenshots
• Submit to nextjs as a template
• Find better nav bar transitions - optional
• Dark mode btn transition - optional

Completed

• Export all data to a central file
• Set maxWidth for when the screen is wide
• Add labels under toolbox tools
• Dynamic subtitles on landing page
• Responsive design
• Upgrade fonts to Mosk
• Add dark mode support
• Animate scroll on toolbar click
• Add resume link
• Copy to clipboard for email