Personal Portfolio Template

NextJSFramer Motion

Saturday, June 22, 2024

I, along with many others, would argue that it is very important to own your own domain to take control of your own personal brand. Whether you are job hunting or want the world to know more about you, having your own website is a powerful tool (Forbes, 2021). If you'd like to have a website up and customized for you in under an hour, follow this guide. Disclaimer: Registering your own domain will cost money. Hosting your site can be free within usage limits. Be careful with what information you put online. It is your responsibility to ensure you maintain appropriate privacy. This project is based on the work of ByteGrad.

Frequently Asked Questions

Prerequisites

What do you need to have or know to complete these tasks? You will need a laptop or desktop computer to complete these tasks. You can even use a tablet device. It is not recommended that you use a mobile phone. You will need an email account to create the other necessary accounts. At a minimum, you will be creating the following accounts:

GitHub is a requirement for this project

GitHub
Hosting (Netlify or Vercel for free-tier hosting)

Vercel is one option for hosting your site on a free tier.

If you want to have your own personal domain (highly recommended), you will need to create an account with a domain name registrar. Don't worry if these requirements are a little scary. I will cover all of this step-by-step.

There are a few optional things you will likely want to have prepared as well. Find these items listed below:

Resume (remove sensitive information like phone number, email address, address, etc.)
Professional (or as close to professional as you have) profile picture
Social media links (LinkedIn etc.)

Step 1 - Create a GitHub Account

If you already have a GitHub account, please skip to step 2. I'll admit it. GitHub is a place for "computer geeks." Don't let this intimidate you if you don't identify as a computer geek. You won't need too much geek power to make it through this guide. Just a sprinkle should do just fine.

Head on over to github.com and create an account. GitHub changes their sign up process from time to time, so it's not worth it to put in writing the exact steps. Look for the (hopefully obvious) sign up option, and follow their prompts. You will need to have access to your personal email account to verify you own the email account you provided.

Step 2 - Fork the Template Repository

It's ok if repository is not a word you use everyday. Before using GitHub, it wasn't one I used either. Forking is just computer geek speak for making a linked copy. That's all. You're making a copy of the code that makes your site come to life.

How Do I Make a Fork (Copy) of a GitHub Repository?

It's simple. Head over to this projects repository on GitHub. Ensure you are still signed in to your GitHub account. You'll see buttons in the top right. One of those buttons will say "Fork."

Click that button. It will use the default name but you can customize the name of your copy. If you're happy with everything else, click the "Create Fork" button.

Step 3 - Launch Editor and Update Files

Before we publish your site on the Internet for the world to see and search engines to index, we need to remove the default "dummy" content and replace it with real information about you. To do this, we will need to launch the online code editor while on your new forked repository. By default, your repository (fork) would be at the following URL:

https://github.com/YOURUSERNAME/occportfoliotemplate

If you customized the fork's name, you'll need to use that instead of occportfoliotemplate. Now that you're on your repository's page, all you have to do is press the period key (.) on your keyboard. This will launch the web-based code editor. If this doesn't work replace the .com in github.com with .dev.

On the left side of your screen you should see the files and folders that make up your new project (see below):

GitHub Editor file tree with arrow pointing to public folder

Notice the yellow arrow pointing to the opened public folder. Inside this folder are two images (portrait.jpg and metaimage.png) and two more folders:

artifacts
images

The first customization we will make is to replace the portrait file with your own image. To make life easier, make a copy of your profile image and name it portrait.jpg (assuming it is a jpg file). To replace the default portrait with your own, simply drag your image on top of the existing one and let go. See below:

Drag and drop your new portrait onto the old one

This is a critical step. Many of the customizations you will do with your site involve adding or replacing files in the correct places within this public folder. So you can imagine that if you wanted a custom metaimage, you'll want to create one, name it metaimage.png, and then drag and drop it onto the old one to overwrite it.

How do I add my custom artifacts?

Before I answer that question, let's both come to an agreement about what is meant by artifact. Do you have to call them artifacts? No! Is that what I call them? Yes. What are they? They are visual pieces of evidence to show what you've done.

Ok, so now we'll talk about how to add your images. Take a screenshot of your awesome paper, article, poster, app, etc. Name the file like you see here artifact#.png (or .jpg). Add as many as you want or need but with different numbers.

Open up your public folder, and then open up your artifacts folder. Drag all of your custom images into this folder. Now they're ready for you to use. I will show you how to use them in another section.

How do I add custom gallery images?

I have a feeling that, at this point, you can probably guess how you'll replace (and possibly add to) the gallery images. You guessed it! Open up the public folder, open up the images folder, open up the gallery folder. In there, you will see the photos you need to replace. Place your images into there. I recommend following the same pattern of gallery#.jpg.

occportfoliotemplate/public/images/gallery
gallery1.jpg  gallery2.jpg  gallery3.jpg

Step 4 - Customize Your Data

At this point, I am assuming you have updated your files and you are comfortable with dropping files into the proper location in your public folder. I have good news. You're very close to being done and there are no more files to drag and drop.

How do I customize my data?

If you have your public folder open still, go ahead and close it. While that's not 100% necessary, it helps avoid mistakes. Now, open the src (pronounced source) and then the lib (which is short for library) folder. Your screen should look like the image below:

Edit the data.ts file to customize your data

Once you click on the data.ts file, you'll see what many call "code." Don't let it overwhelm you. I will continue to help you step-by-step as we replace the dummy content with all your outstanding details.

The first thing I want to draw your attention to is the comments that I've left in the document to help guide you. You'll see them throughout the document, and they will look like this:

1/**
2 * ADD IMAGES 🖼️ BELOW AS NEEDED
3 */

Comments are written above the code segments that they relate to. Let's use the full example below to illustrate what I mean:

/**
 * ADD IMAGES 🖼️ BELOW AS NEEDED
 */
import metaimage from '../../public/images/metaimage.png'
import portrait from '../../public/images/portrait.jpg'
import artifact1 from '../../public/artifacts/artifact1.png'

How do I import files?

Can you see what's happening here? If not, let me explain. We're telling your new website that we will need to use certain images. We're giving them names (metaimage, portrait, artifiact1, etc) and we're telling your site exactly where those files can be found.

If you added more artifact images (very likely), you will need to import them. Let's use this as an opportunity to show you how you can add artifacts and use different names:

/**
 * ADD IMAGES 🖼️ BELOW AS NEEDED
 */
import metaimage from '../../public/images/metaimage.png'
import portrait from '../../public/images/portrait.jpg'
import artifact1 from '../../public/artifacts/artifact1.png'
import artifact2 from '../../public/artifacts/artifact2.png'
import artifactPoster from '../../public/artifacts/artifact-poster.png'

Notice how there are two new artifacts and that the names (and file names) are different? If your files are named differently or have different extensions (jpg, png, etc), you need to make sure they are properly imported here. Let's now take a look at the last place where you'll customize your imported images:

/**
 *  📸 ADD GALLERY IMAGES BELOW IF USING A GALLERY 👇
 */
import gallery1 from '../../public/images/gallery/gallery1.jpg'
import gallery2 from '../../public/images/gallery/gallery2.jpg'
import gallery3 from '../../public/images/gallery/gallery3.jpg'
/**
 * END IMPORTING IMAGES
 */

Take note of the closing comment letting you know that all of the image imports have happened (above). If you are not going to use the gallery in your site, simply delete all of the lines that import the images. In the example above, that would be lines 4-6 that you would delete.

How do I make sure search engines "like" my site?

In the next section of code, we will set what are known as metadata. This is the type of information that sits out of sight on all the websites you visit but tells search engines like Google and Bing all about your site. From this point on in the data.ts file, we will be editing what are called constants. In code, this is shortened to const. Let's take a look now at your sitemetadata const.

1/**
2 * BEGIN SEO DATA
3 * Set your site title and tell search engines about yourself
4 * 👣Also, control what your footer says (replace Your Name with your name, of course)
5 * ⚠️ Be sure to update your lastUpdated when you edit
6 */
7export const sitemetadata: Sitemetadata = {
8  domain: 'occeofportfolio.netlify.app',
9  title: 'Your Name',
10  firstName: 'George',
11  lastName: 'Washington',
12  description: "Replace with a description of you that's 145-160 characters.",
13  footer: 'Your Name | All rights reserved',
14  metaimage: metaimage,
15  lastUpdated: '7/2/2024',
16}

For the purposes of this demonstration, let's assume your name is Jane Doe. Let's take a look at how this might be customized:

1/**
2 * BEGIN SEO DATA
3 * Set your site title and tell search engines about yourself
4 * 👣Also, control what your footer says (replace Your Name with your name, of course)
5 * ⚠️ Be sure to update your lastUpdated when you edit
6 */
7export const sitemetadata: Sitemetadata = {
8  domain: 'janedoe.com',
9  title: 'Jane Doe',
10  firstName: 'Jane',
11  lastName: 'Doe',
12  description: "Explore Jane Doe's personal portfolio, showcasing her journey as a college graduate, including projects, achievements, and her passion for innovation and creativity.",
13  footer: 'Jane Doe | All rights reserved',
14  metaimage: metaimage,
15  lastUpdated: '7/2/2024',
16}

Every time you edit this file, you should update the lastUpdated (line 15 in the example above) property with today's date. This will let search engines know that your site content has changed.

How do I customize my introduction?

Now that Google and Bing can get all the information they want let's make sure your visitors get the information they want about you. The first section of your new portfolio website is called the introduction. It is your 2-second elevator pitch to help you quickly explain your brand. Below is the block of code that controls your introduction:

1/**
2 * INTRO 👇 - Your 2 SECOND ELEVATOR PITCH
3 * PUT YOUR RESUME (resume.pdf) into the public folder
4 * ⚠️Make sure it doesn't have your address, phone number, or email address
5 */
6export const intro: Intro = {
7  portrait: portrait,
8  portraitAlt: 'Describe your profile picture',
9  emoji: '👋',
10  description: `Hello <strong>I'm Ryan</strong>. I'm a graduate of Ocean County College. I enjoy <em>solving problems</em> and helping others with their goals.`,
11  buttons: [
12    {
13      label: 'Download Resume',
14      link: '/resume.pdf',
15      style: 'default',
16      icon: React.createElement(FaDownload),
17    },
18    {
19      link: 'https://linkedin.com/',
20      style: 'outline',
21      icon: React.createElement(FaLinkedin),
22      alt: 'Visit my LinkedIn profile',
23    },
24  ],
25}

There's a lot going on here, so let's break it down line by line. In line 7 above, we set the portrait property as the portrait you imported in your image imports. In line 8, we provide alternative text (called alt text, for short) so that visitors who have visual impairments can hear a description of your portrait. Line 9 allows you to specify an emoji to accompany your portrait. Choose wisely. 😉

How do I use HTML to enhance my descriptions?

Line 10 is slightly trickier and involves you learning just a small portion of HTML. It's not hard. HTML has one essential rule: If you open a tag, you must close the tag. Tags are essentially labels that tell browsers (like Chrome and Firefox) what the content of your site is. For instance, a p tag is for a paragraph and looks like you see below:

1<p>
2  This is a paragraph. 
3  Notice that the p tag opens as a p surrounded by a less than and greater than symbol?
4  Also the closing p tag is identical except that it has a forward slash in front of the p.
5</p>

If you hold your mouse over the word description in your GitHub code editor, it will show you how you can specify the bold and italic text in your description (see below).

How to add strong and em tags in your introduction's description.

Let's turn our attention to the buttons property. You will see something new here. The buttons property encloses button objects. Each button object has the following properties:

label
link
style
icon

Each of these properties has helpful text associated with it. Hold your mouse over these words to see what they control on your buttons (see below):

The last property of the button object I want to discuss is the icon. The dummy buttons use the FaDownload for the PDF and the FaLinkedin for the LinkedIn button. You have to use icons that are imported at the top of the data.ts file. Don't see an icon you want to use, you can import them at the top. Use this site to find the icons you need. You can have more than two buttons, but I recommend not going more than three.

How do I customize my About section?

The About section is very similar to the description found in the Intro section above. You can use <strong> and <em> tags to help enhance your text. Let's look at the const that controls your about text:

1/**
2 * ABOUT SECTION - In one or two paragraphs,
3 * tell your visitors more about you and your passions. 👇
4 */
5export const about: About = {
6  text: `After graduating with a degree in <strong>Accounting</strong>, 
7I decided to pursue my passion for programming. I enrolled in a coding 
8bootcamp and learned <strong>full-stack web development</strong>. 
9<em>My favorite part of programming</em> is the problem-solving aspect. 
10I love the feeling of finally figuring out a solution to a problem. 
11My core stack is React, Next.js, Node.js, and MongoDB. I am also 
12familiar with TypeScript and Prisma. I am always looking to learn new 
13technologies. I am currently looking for a full-time position as a 
14software developer.<br /> <em>When I'm not coding</em>, 
15I enjoy playing video games, watching movies, and playing with my dog. 
16I also enjoy <strong>learning new things</strong>. I am currently 
17learning about <strong>history and philosophy</strong>. 
18I'm also learning how to play the guitar.`,
19}

The only tag here that is "new" is the <br /> tag (line 14 above). This creates a linebreak. It's similar to making a new paragraph.

How do I control my gallery?

The first question you need to ask and answer is, "Do I even want to have a gallery?" If the answer is "no," then all you have to do is empty out the gallery array. Let's first take a look at the gallery array as you received it:

1/**
2 * GALLERY 👇- Show off visual work with this component
3 * DROP IMAGES INTO PUBLIC/IMAGES/GALLERY AND IMPORT THEM
4 * AS SEEN AT THE TOP. Leave the array empty if you don't want a gallery.
5 * gallery = [{image: gallery1, alt: 'Alt text for image'}]
6 */
7export const gallery = [
8  {
9    image: gallery1,
10    alt: 'Describe the image',
11  },
12  {
13    image: gallery2,
14    alt: 'Describe the image',
15  },
16  {
17    image: gallery3,
18    alt: 'Describe the image',
19  },
20]

To remove the gallery from your page because you don't want it at all, simply make your array look like the one below:

1export const gallery = []

If you DO want to use the gallery, just adjust the number of objects being sure to:

import the images you want to use
set the image property to the imported image
add alt text to describe the image for accessibility

A gallery object looks like you see below:

{
    image: gallery3, // the imported image
    alt: 'Describe the image', // the text for visually impaired visitors
}

How do I update my artifacts?

Replace the dummy artifacts with ones that are relevant to your work. Let's see the artifact code block below:

1/**
2 * ARTIFACTS SECTION - HIGHLIGHT YOUR AMAZING WORK 👇
3 * artifacts = [{title: '', description: '', image: artifact1, tags: ['skill1', 'skill2'], url: 'optionally enter a url for user to visit'}]
4 */
5export const artifacts: Array<Artifact> = [
6  {
7    title: 'Title of Artifact/Project',
8    description:
9      'Description of artifact or project. I worked as a full-stack developer on this startup project for 2 years. Users can give public feedback to companies.',
10    image: artifact1,
11    tags: ['APA Formatting', 'Persuasive Writing'],
12    url: 'https://www.linkedin.com/pulse/understanding-your-digital-footprint-how-can-help-job-sam/',
13  },
14  {
15    title: 'Second Artifact Title',
16    description:
17      'Describe to your prospective employers and colleagues why this artifact is special. What learning happened while you worked on this? What impact might it have had on others?',
18    image: artifact1,
19    tags: ['Microsoft Office', 'Adobe CC'],
20    url: 'https://www.linkedin.com/pulse/understanding-your-digital-footprint-how-can-help-job-sam/',
21  },
22] as const

Each artifact will have the following properties you want to set:

title
description
image
tags
url

Let's explain these properties. The title is fairly intuitive. What do you want to call the artifact? The description is also pretty straightforward. Describe the artifact in a short sentence or two. The image is an image you imported in this section. The tags are skills you've listed in this section. They have to be skills you've added. If you use a tag that is not on your skills list, your site will break. The url is to link to your artifact. This might be a file stored in your cloud storage like Google Drive, Microsoft OneDrive, Dropbox, etc.

How do I add or remove skills?

This section will be easy for you, I promise. Below is the code block for your skills. It's an array (geek speak for comma-separated list). List your skills between the square brackets and separate them by commas. The skills need to be enclosed in quotes:

1/**
2 * SKILLS SECTION - SHORT (one or two words each) 👇
3 * skills = ['Skill1', 'Skill2']
4 */
5export const skills = [
6  'Adobe CC',
7  'Public Speaking',
8  'Microsoft Office',
9  'APA Formatting',
10  'Persuasive Writing',
11] as const

How do I edit my educational and work experience?

The code block below controls what appears on your educational and work experience timeline:

1/**
2 * EDUCATIONAL AND WORK EXPERIENCES 👇
3 * BE SURE TO USE THE APPROPRIATE ICON
4 * LuGraduationCap for School
5 * HiOutlineBriefcase for Work
6 * experience = [{title: '', location: '', description: '', icon: React.createElement(LuGraduationCap), start: '', end: ''}]
7 */
8export const experience: Array<Experience> = [
9  {
10    title: 'Ocean County College',
11    location: 'Toms River, NJ',
12    description: 'Associate in Science, CSIT',
13    icon: React.createElement(LuGraduationCap),
14    start: '2018',
15    end: '2020',
16  },
17  {
18    title: 'Apple, Inc',
19    location: 'Cupertino, CA',
20    description: "Design and develop the world's most innovative products.",
21    icon: React.createElement(HiOutlineBriefcase),
22    start: '2020',
23    end: 'Present',
24  },
25] as const

Much like the other arrays we've edited, this one has a list of experience objects inside of it. Each experience object has the following properties:

title
location
description
icon
start
end

Let's cover the last three items as they are "different." The icon property should be either LuGraduationCap if it's an educational experience or HiOutlineBriefcase if it's a work-related experience. The start and end properties should align with when you started and ended your educational program or work experience. Add as many of these experiences as you need.

The code block below controls your site's navigation.

1export const links = [
2  {
3    name: 'Home',
4    hash: '#home',
5  },
6  {
7    name: 'About',
8    hash: '#about',
9  },
10  {
11    name: 'Gallery',
12    hash: '#gallery',
13  },
14  {
15    name: 'Artifacts',
16    hash: '#artifacts',
17  },
18  {
19    name: 'Skills',
20    hash: '#skills',
21  },
22  {
23    name: 'Experience',
24    hash: '#experience',
25  },
26] as const

If you're not using the gallery, remove that object (see below).

1export const links = [
2  {
3    name: 'Home',
4    hash: '#home',
5  },
6  {
7    name: 'About',
8    hash: '#about',
9  },
10  {
11    name: 'Artifacts',
12    hash: '#artifacts',
13  },
14  {
15    name: 'Skills',
16    hash: '#skills',
17  },
18  {
19    name: 'Experience',
20    hash: '#experience',
21  },
22] as const

The last piece of data for you to edit are the social icons that appear at the bottom of the page. They are controlled by this code:

1/**
2 * SOCIALS 👇 WILL APPEAR IN THE FOOTER OF YOUR PAGE
3 * socials = [{icon: React.createElement(FaLinkedIn), url: 'https://google.com', alt: 'Describe what will happen if they click this link'}]
4 */
5export const socials = [
6  {
7    icon: React.createElement(FaLinkedin),
8    url: 'https://linkedin.com',
9    alt: 'Find me on LinkedIn',
10  },
11  {
12    icon: React.createElement(FaTiktok),
13    url: 'https://tiktok.com',
14    alt: 'Find me on TikTok',
15  },
16]

Select the appropriate icon from the list of icons imported at the top of the data.ts file. Update the url property to link to your social media pages. Also, provide alternative text.

You're now ready to move onto the final step where we publish your site and point your domain name (if you registered one) to your host.

Step 5 - Deploy Your Site

To deploy your site in the internet, you must select a platform. Netlify and Vercel are two popular platforms on which you can publish your site for free and enjoy their generous free tier. Below, you will find instructions for Netlify:

Navigate to https://netlify.com.
Click Sign Up.
Select Sign up with GitHub
Enter your GitHub username and password
Click Authorize Netlify
Click Personal (or whichever selection you feel is appropriate)
Click Personal Site (or whichever selection you feel is appropriate)
Click Other
Enter a team name (usually your name)
Click Continue to deploy

Now that you have your Netlify account hooked up to Git, let’s get your site built and deployed on the web. Follow these steps:

Click the Deploy with GitHub button
A pop-up will appear (ensure it’s not blocked).
Scroll down to the bottom of the pop-up and click Authorize Netlify.
Scroll to the bottom of the next screen and click Install
Netlify will now list all your repositories in the window (it will likely be only one).
Find the correct repository and click it.
Click the Deploy [project name] to Netlify button.
Your deployment will begin.
Once completed successfully, a pop-up will appear. Click Get Started.

How do I point my domain name to my site?

You’ve gotten your site built and deployed on the web. That’s great progress! Now we need to get your domain pointed to Netlify so that they can go to <<yourdomain.xyz>> rather than http://yourprojectname.netlify.app. As we can’t support all domain registrars, we will tell you the general steps to take:

In Netlify, on your team overview, click Sites.
This will list all your sites (likely to only be one).
Click the site you wish to point your domain name to.
Click Domain management (left-side navigation).
Click Add domain.
Enter your domain name and click Verify.
It will tell you it’s already registered. Click Add domain.
Decide if you want users to go to domainname.com or www.domainname.com.
Use the options menu to set your preferred primary domain name.
For the www.domainname.com row, click “Awaiting External DNS” and copy the text after CNAME (usually something like happy-marbles-123abc.netlify.app.).
Navigate to your domain registrar and set two DNS records (below)
Allow for DNS records to propagate around the globe. The Awaiting External DNS warnings will go away.
Navigate to your domain and see your live site!

1
2Type   Host  Value                                  TTL  
3
4Alias  @     apex-loadbalancer.netlify.com.         Automatic 
5
6CNAME  www   The text you copied from step 10 above Automatic

Here's some help on how to set DNS records:

How Alias and CNAME records are set in Namecheap