Portfolio Site Documentation and Publication using a Hosting site

Basic Portfolio Site Documentation
This is a beginner-friendly walkthrough guide to building and hosting a portfolio website using a template from Template Wagon, editing it in VS Code, and hosting it on Vercel.
No prior programming experience required!

Step 1: Set Up Your Tools
Download and Install VS Code

• Go to VS Code and download the editor for your operating system.
• Follow the installation instructions and open the app after installation.
• Install WinRAR (or any zip extractor)
• Download WinRAR from the website.
• Install it to unzip the template later.

Step 2: Download a Template
Visit Template Wagon

• Go to https://themewagon.com/theme-tag/portfolio-template/. Or https://html5up.net/
• Browse and find a free portfolio template you like. Download the Template
• Click on the “Download” button for the template. It will save as a .zip file on your computer.

Unzip the Template

• Locate the .zip file in your “Downloads” folder.
• Right-click on it and select “Extract Here” using WinRAR.
• This will create a folder with all the template files.
• Save it either in your documents or your desktop.

Step 3: Edit the Template in VS Code
Open the Folder in VS Code

• Open VS Code.
• Click on File > Open Folder, navigate to the unzipped template folder, and select it.

Understand the Files
Most templates will have these key files:

• Index.html (the main page of the website).
• About.html(other pages you must edit).
• Img/ (contains images used on the website). Edit the index.html file first.

Edit the Content

• Open index.html in VS Code. Look for sections like,
• Change the text, add your name, bio, and any details about you.

Edit Styles (Optional)
Open style.css if you want to tweak colors or fonts.
For example, to change the background color, look for something like background-color and edit the value (e.g., background-color: #f5f5f5;).

Save Changes
Press Ctrl + S (Windows) or Cmd + S (Mac) to save your edits.

Step 4: Set Up GitHub
Create a GitHub Account
Go to GitHub and sign up for a free account.
Create a New Repository

• Once logged in, click on the + in the top right and select “New Repository”.
• Give your repository a name like “my-portfolio” and click Create Repository.

Step 5: Push Your Code to GitHub
Initialize Git in VS Code

• Open the terminal in VS Code (Ctrl + `) or go to View > Terminal.
• Run these commands to initialize git: Link to Your GitHub Repository
• Copy the repository URL from GitHub (it looks like https://github.com/your-username/my-portfolio.git).
• Run the following commands in the terminal:

Step 6: Host Your Website on Vercel

• Create a Vercel Account
• Go to Vercel and sign up with your GitHub account.
• Import Your Repository
• Click “New Project” on Vercel.
• Select your portfolio-site repository from GitHub

Deploy Your Site

• Follow the prompts and click Deploy.
• Once deployed, Vercel will give you a live link to your portfolio (e.g., https://your-portfolio.vercel.app).

ALL THE BEST!
Tag me in your Linkedin posts. I’d love see your site!