A Developer's Portfolio - Built with react

Description

Deployed portfolio that consists work samples, about me section, contact section that sends an email directly to the developer and so much more built with React

Support the project ⭐

If you're feeling great and want to show your support, please consider checking out my other projects, giving this repository a star, and sharing it with others. This helps me to gain visibility and grow our community. Thank you in advance for your support. 🙏

Table of Content

Installation
Usage
Customize Portfolio
How to Deploy to Github pages for free
Contributions
Licenses
Questions
website link // Checkout the deployed website

Installation

To set up and utilise this project. Take the following steps.

Step 1: Clone this repository
Step 2: Install dependencies by running the npm install command in the command line
Step 3: Open your code editor by running the command code .
step 4 : run npm start in the terminal.

Usage

A responsive, single page application for developers to showcase their skills

Customize Portfolio

Colors:

To customize the colors to the colors you want, CSS variables are used in the index.css file. There you can update the variables to set your custom colors
- Background Color:
  To set a new background color, update the --color-bg CSS variable and set your custom color in rbg, hex,hsl.
```
:root{
--color-bg: YOUR CUSTOM COLOR CODE; //This line
}
```
- Background Color Variant:
  To set a update background color variant , update the --color-bg-variant CSS variable and set your custom color in rbg, hex,hsl
```
:root{
--color-bg-variant: YOUR CUSTOM COLOR CODE; //This line
}
```
- Primary Color:
  To update the primary color, update the --color-primaryCSS variable and set your custom color in rbg, hex,hsl.
```
:root{
--color-primary: YOUR CUSTOM COLOR CODE; //This line
}
```
- Primary Color variant:
  To update the primary color, update the --color-primary CSS variable and set your custom color in rbg, hex,hsl.
```
:root{
--color-primary: YOUR CUSTOM COLOR CODE; //This line
}
```
Resume:

To add your custom images to the project, do the following
- Navigate to the assets folder.
- rename, save your resume as CV.pdf and move it into the assets folder.
Note: If your resume is not in pdf format and you don't want to update it to PDF format, navigate to the Call to action component and update the import statement to use your resume file
```
import CV from '../../assets/YOUR RESUME NAME' //update this line
```
and you should be good to go on your resume.
Social links:

In terms of Social media links, I used the Linkedin, Github and Codewars links in the Header section. If you want to use your own Linkedin, Github and Codewars links,
1. navigate to the Header socials component.
2. update the href attributes for the three links
```
 <a data-aos="fade-down" data-aos-duration="1500"  href="YOUR LINKEDIN URL" target="_blank" rel="noreferrer"><BsLinkedin/></a>
 <a data-aos="fade-down" data-aos-duration="1200" href="YOUR GITHUB URL" target="_blank" rel="noreferrer"><FaGithub/></a>
 <a data-aos-duration="900" data-aos="fade-down"  data-aos-anchor=".header__socials"  href="YOUR CODEWARS URL" target="_blank" rel="noreferrer"><SiCodewars/></a> 
```
If you want to add some more links or you want to make changes to the current links and Icons
1. Find the Icon you want to add from React Icons website
2. Import the Icon
3. add a new href or update and existing one, put the icon you imported in the anchor tag.
```
<a data-aos="fade-down" data-aos-duration="1200" href="YOUR URL" target="_blank" rel="noreferrer"><YourIcon/></a>
```
with that, you can add and remove social media links and icons.
- About me:
  To customize the about me section, Navigate to the about component and then customize the experience, collaborators and paragraph as you see fit.
Experience:

To Add your experience and tech stack to the experience section, Navigate to the Experience Component and update jsx how you see fit.
Services:

To update the services, navigate to the Services Component and update your services as you see fit.

Portfolio:

To update the portfolio section to accomodate your own projects. First, navigate to the Portoflio component and then follow these steps;

Import all Images of your projects to the assets Folder
update the projects array to look like the following;

 const projects = [ 
  { 
    name : {PROJECT NAME} , //Must match the name of the project on github
    deployedLink: "{LINK}", //Deployed link of your project
    image: require('../../assets/{THE IMAGE RELATED TO THIS PROJECT}'),
    fadeDuration:{ANIMATION SPEED}, // To set the animation speed
    description: //description of your project. Expects a string
    toolsUsed: [] // tools used expects an array of Strings to represent each tool
  }
]

After making these changes, your project should be rendered on the page just as usual.

Reviews

To update the reviews section, Navigate to the Reviews Component. In the reviews component, update the reviewsData array to fit your reviews. To customize the reviewsData array, follows these steps

upload the images for each reviewer and move them to your assets folder.
Once you've uploaded your images to the assets folder, import those images into the reviewData array;

const reviewData = [
{
  avatar: require('../../assets/REVIEWER'S IMAGE'), //Should be the image that was imported in the 1st step
  name: 'THE NAME OF THE REVIEWER',
  review: `YOUR REVIEW TEXT`
} 
]

Once you've updated the reviewData array, your reviews should be rendered on the page successfully.

Contact:
- Customize contact links:
  
  To customize the Linkedin, Instagram and Email links, Navigate to the href attributes of each element.
  1. email : Update the email link to mailto:YOUR-EMAIL-ADDRESS // updates the mailto field in the user's email
  2. linkedin: Update the linkedin link to YOUR LINKEDIN URL
  3. Instagram: Update the Instagram link to https://ig.me/m/YOUR-INSTAGRAM-USERNAME //sets you username open in the user's inbox
- Contact Form:
  
  To update the form so you recieve messages directly into your inbox, create an account on emailJs platform and take a quick look at the documentation. create a template and update the fields as instructed in the emailJs Documentation
  
  With this, you should be setup to recieve emails from the form.

How to Deploy to Github pages for free

After customizing the website, you can deploy it to github pages for free by following these steps;

Navigate to the package.json file
Update the homepage in the package.json file { "homepage": "https://YOUR-GITHUB-USERNAME.github.io/NAME-OF-REPOSITORY", }

Make sure both your github username and the name of the repository on GitHub are spelt correctly. Note: you don't need to update the scripts because the scripts have been updated for you.
open up your terminal and run the command npm run deploy. This will take some time so grab your popcorn and wait for it to finish.
finally, you new portfolio website should be deployed to GitHub. your website link should be
https://YOUR-GITHUB-USERNAME.github.io/NAME-OF-REPOSITORY-ON-GITHUB/