Personal Website
Create your own personal website from scratch.
About the project
Welcome to creating your very own personal website. This is not a step by step tutorial to creating a personal website as that would defeat the purpose.
Your personal website needs to be unique and showcase you: what you have done and what you are going to do. This tutorial will help you though the entire process of creating your own personal website.
Here are some examples of personal websites: sohumkapoor.com, arnavdev-two.vercel.app, aidankeighron.dev
Designing the website
The first step in designing the website is figuring out the tech stack, or what languages and frameworks you should use.
The most popular language for web development is JavaScript or TypeScript so lets start there.
There are many different frameworks you can use to make a website in JavaScript:
We recommend Next.JS or React as they are both simple and easy to use while allowing for a lot of creativity and customization.
If you want to use another language there are a few other options but most of these just serve HTML and CSS.
If you are using React or Next.JS you will need to decide on if you should use Tailwind or not. I would recommend Tailwind if you have worked with CSS before. It is a great option and makes styling much easier. If you are not comfortable with CSS or you haven’t used it much I would stick with CSS.
Now that we have the technologies figured out we can talk about the UI design of the website. If you want to you can jump straight into development and figure out the UI as you go but if you want to plan it out you can use figma.
Figma will let you design the entire website UI and then you can use it for reference when turning that UI into code.
Here is an example of a figma design of a website and here is the resulting website.
You don’t need to design the entire website in figma, you just want a starting point.
Adding something special
You want your personal website to stand out and be unique. You don’t want your website to look like every other website out there.
The way to do this is to find a unique visual style or a unique feature/functionality.
If you have an artistic flair a unique visual style can work best: adding animations, custom font, and specific colors and formatting can all come together to create a distinct website.
The other option is to create a unique feature/functionality. This could be anything you can think of: maybe you embed an entire project you worked on into the website; Or make your entire personal website a driving simulator; Or create a match-3 game where you match programming languages and when you match 3 it show a project you made in that language.
The driving simulator was build with threejs, if you are using React you can use react-three-fiber.
Hosting and Domain name
Hosting
Once you are done with your personal website how do you host it and show it to the world?
There are a few options for hosting:
We would recommend Vercel as it has a very generous free tier (I have 4+ website hosted and I am only using 10% of my limit) and it does not require and payment or credit card info to setup. It also works very well with NextJS.
All you need to do is go to Vercel, create an account, connect it to GitHub and walk through their tutorial step by step and at the end you will have a live website you can send to all of your friends.
Domain Name
But the default website will have a domain name that looks something like <Project Name>.vercel.app.
If you already have a custom domain name you can add it to your Vercel website easily.
If you don’t have a domain there are many options for purchasing one:
Costs are usually $10-$15 a YEAR, yes a year they are not very expensive.
You are also not limited to a .com domain, you can get a:
- .com
- .dev
- .tech
- .expert
- .boats
- .today
- .移动
- And many many more
Now you have everything you need to go ahead and create your own personal website!