I created this for my own personal portfolio website. If you like what you see, you’re welcome to fork this repo to use as a template for your own website. Some of the features that are included in this website:
- Light/Dark theme toggle
- Lazy loading of images
- Mobile responsive
Check it out! 👉 Demo 🥳
This project was bootstrapped with create-next-app. It comes with some great scripts out of the box that makes getting started easy. Follow the steps below to run it locally.
-
Fork this repo and clone it to your local machine
-
Install dependencies
npm install- Start local server
npm run devFor production builds follow the steps below.
- Create build
npm run build- Serve build
npm run start- Next.js
- TypeScript
- Sass CSS
- FontAwesome Icons
I love websites with bold designs, flashy transitions and long gorgoeus scrolling animations (I'm looking at you Apple). However, what I've come to learn is that most people cannot stand that stuff. People have short attention spans and you risk users skipping your content if your website is confusing and annoying. Some things that typically result in a bad user experience (aside from long load times, poor color schemes, and unintuitive navigation/layout) are:
- Scroll hijacking (for more info, click here)
- Slow animation/transitions (anything over 1000ms)
- Distracting animated backgrounds
I tried my best to adhere to these principles when building this site. It's a no-nonsense site, while still remaining modern in its look and performance.
I chose Next.js because it provides some great features out of the box that makes for the best user and developer experience. Here are some of the features that I love:
- SEO-friendly: Rich HTML with SSR
- Performance Optimization: Images are lazy loaded, cached, and many other optimizing features!
- Easy Deploy: If you choose to host with Vercel, there is no easier and faster way to get your site live
Last but not least, I coded this project with accessibility in mind, but I'm by no means an expert. If you use this template for your own project, I encourage you to continue to improve the accessibility where it is applicable.
MIT License
Copyright (c) 2022 Steve Vang
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.