PORTFOLIO DOCUMENTATION

WHY I'M BUILDING MY PORTFOLIO NOW (And Why You Should Too!)

In tech, skills matter more than just certificates. A portfolio proves what you can do! It showcases real projects, tracks progress, and helps with job applications, internships, and networking. Documenting my journey on Dev.to, GitHub, and LinkedIn also helps others learn.

A strong portfolio prepares me for certifications, interviews, and unexpected opportunities. Technology evolves fast, so staying ahead is key! By starting early, I create a personal brand, stand out in the industry, and attract career opportunities.

🚀 Start now, share your work, and grow!

THINGS NEEDED BEFORE STARTING TO BULID YOUR PORTFOLIO

A Downloaded And Installed :
1.Node.JS
2.Vs.Code

Must have accounts in:

1. Github
2. Vercel

SOME VIDEOS FOR GUIDANCE

1. How to download vscode :https://www.youtube.com/watch?v=naL0cZNQh1g
2. How to download GIThub :https://www.youtube.com/watch?v=3JdDAJ2YPeU
3. step by step guide to link github to vscode: https://www.youtube.com/watch?v=mR9jhYD3bnI
4. step by step guide to deploy your work :https://www.youtube.com/watch?v=aBRss9JAC30

STEP BY STEP PROCESSES ON HOW TO CREATE YOUR NEXT.JS PORTFOLIO.

• Right click on the home page and click on open in terminal (Operate preferably using Command prompt).
• Open your brower and search for Next.Js
• Click on the first prompt, click on the meanu bar and click on installation.
• Copy the installation address there(npx create-next-app@latest)
• Paste the address you copied in the terminal you opened and click enter.
• You are to imput your project name next and click on enter

-Next up you are to answer some questions to help buld you website( What is your project named? ... jj(What you would like to name your project)
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like your code inside a src/ directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
? Would you like to use Turbopack for next dev? » No / Yes
√ Would you like to customize the import alias (@/* by default)? ... No / Yes

• After these you wait for it to load and when its done loading you would see success and the location of yoyr folder will be written below for you to .
• Next up you locate the destination of your folder and open it with VS. code.
• You then open your terminal (Command Prompt) and type in NPM Run Dev, it will run and a local host URL will show (http:/localhost 3000) you copy it to your browser
• And your browser will display a next. js website.

If you have come this far then congratulations you have Reached your first mile stone.

Moving on

• You go back to your Vs.code and now we will create a folder and name that folder COMPONENTS
• Then in our folder components we will create files and the files will be Header.js, Hero.Js, Experience.js, Projects.js, About.js, Contact.js and footer . js (You can also add any file you may want to add ).
• In each of the file opened we will type in RAFCE and click enter to all the files opened in components .
• then you move to your page.js this is where we call on all our file so they will reflect/ show on our website page
• Now in the page.js you will input in the below

"use client";
import React from "react";
import Header from "./components/Header";
import Hero from "./components/Hero";
import Experience from "./components/Experience";
import projects from "./components/Projects";
import About from "./components/About";
import Contact from "./components/Contact";
import Footer from "./components/Footer";
export default function Home() {
  return (_

<div className=" flex flex-col min-h-screen ">
  <Header/>
  <Hero/>
  <Experience/>
  <projects/>
  <About/>
  <Contact/>
  <Footer/>
</div>

);
}

• once you are done do not forget to regularly save your work and check for errors by running the program frequently.
• from here on this is where you free style using your knowledge of Html, CSS, and Java you will design your files to give you what you want your wesite to look like .

• It is advisable for your website to have your photo on the front cover.

• once you are done with designing your wesite to your taste then congratulations you have crossed you 2nd mile stone

• Then you will deploy our work

• Now we will need to link our Github account to vs.code you will need to download some extentions on vs.code to enable you link the accouts together Github pull requests and issues, Gitlens- Gitsupercharged, Github Copilot, Git Graph.

• In your browser open your git hub and go to the end and you will find some codes
  git init
  git add
  git commit -m "initial commit"

• click the above code into your vscode terminal

• and in your vs code below the master there will change to main

• Now create a vercel account

• After signing in click on new project

• click on import on the github repository you want to deploy

• select the correct framework

• click on deploy and wait for the orocess to complete.
  Congratulations if you have made it this far it means you have completed the process and you now have your functioning and deployed portfolio.

Conclusion:
This documentation provides a step by step procedures to build and cutomize your portfolio in the shortest time possible.

Author : Irene Leritmwa Bulus