Build your own portfolio with your resume for free using Github pages and ReactJS

Looking for jobs is a big pain, however, to get into your first step interview, there are some prerequisites, that almost all recruiters looking for.

1st prerequisite is to have a doc-type resume, and the reason for it is simple to filter keywords by old fashion Microsoft Word style,
also, some of the reporters are importing resumes into a DB using doc readers, similar to workday. 

2nd they ask for your portfolio or your own website that should have more details about you and your work, here's the trick, 
after 20+ years dealing with recruiters, I noticed that not all of them care about what or which website you include as portfolio, 
they just open it to confirm it's valid or not. That's why it's confusing sometimes to know which website or portfolio site you 
would like to mention especially if you have multiple or hundreds of projects with different domains. 

That's why I thought about this solution, one website/portfolio to show all your work in one domain/link. 

my own portfolio is hosted on GitHub for free, public, built using pages on GitHub, and some simple pipelines to publish 
my reactJS as a page on GitHub. Seems fun right? wait till you see how easy to do so.

Live Demo 

https://sam.reallexi.com


How to do the same, with a simple git clone, ending up with a live website on Github even without a domain.

Let's start
1- git clone or fork the repo with the full project

 git clone https://github.com/melayyoub/sam-ayoub-portfolio.git FOLDER

2- update the public/assets/resume.json and public/assets/resume.docx files

 Simply add whatever you would like the recruiters to see from projects/education/skills and more

Json file is simple and direct to read, example 

{

"main": {

"name": "Sam Ayoub",

"description": "Founder / Director / Senior Principal Software Architect / Senior Principal Software Engineer",

"image": "https://media.licdn.com/dms/image/C5603AQHQUBmlUQ5ilw/profile-displayphoto-shrink_100_100/0/1631487594657?e=1687392000&v=beta&t=Wdzxv9SiewOONMnCYaRWsrErnw_Ruutt7UdIJOoy1sY",

"bio": "Experienced in managing, designing, reviewing designs, maintaining applications, making recommendations, training less experienced engineers, solving technical issues, minimizing risks, and ensuring tasks are completed on time. Possesses excellent programming skills, leadership, project management, attention to detail, strong communication and interpersonal abilities, and problem-solving orientation.",

 

 

 

"contactmessage": "Do not hesitate to contact me anytime",

"email": "[email protected]",

"phone": "",

"github": "https://github.com/melayyoub",

"project": "https://github.com/ddkits",

"address": {

"street": "",

"city": "San Diego",

"state": "CA",

"zip": "92081"

},

"website": "http://www.ddkits.com",

"resumedownload": "/assets/resume.docx",

"social": [

{

"name": "linkedin",

"url": "https://www.linkedin.com/in/samelayyoub",

"className": "fa fa-linkedin"

},

{

"name": "github",

"url": "https://github.com/melayyoub",

"className": "fa fa-github"

}

]

},

"resume": {

"certs": [

{

"title": "Meta Front-End Developer",

"source": "Meta",

"image": "https://media.licdn.com/dms/image/C4E0BAQFdNatYGiBelg/company-logo_100_100/0/1636138753911?e=1689811200&v=beta&t=dc0NPE1XYKyKTXHqcVlNqGfad9bA3eNFdYDgmlld9hg",

"url": "https://coursera.org/share/340ce23f650d2fe7556affd264be8d49"

},

{

"title": "Veracode Security Labs Champion Level 2",

"source": "Amazon Web Services (AWS)",

"image": "https://media.licdn.com/dms/image/C560BAQER_QnUTXrPJw/company-logo_100_100/0/1670264050886?e=1689811200&v=beta&t=RA70a-lnRnyHRLIHn6RHlqzyyYamTzJm1SMisBwhs-8",

"url": "https://www.coursera.org/account/accomplishments/specialization/certificate/7RP2LNUGK9L6"

},

{

"title": "API Design and Fundamentals of Google Cloud's Apigee API Platform (with Honors)",

"source": "Google Cloud Education",

"image": "https://media.licdn.com/dms/image/C560BAQGU2cSsOBD-zw/company-logo_100_100/0/1633236804131?e=1689811200&v=beta&t=lWDH4OFYYWG6bY8yRe8NaD255VQUckX7hDz7_WSadsk",

"url": "https://www.coursera.org/account/accomplishments/verify/NJWHRERCFTPS"

}

],

"skillmessage": "Leadership/Management/Technical Skills",

"education": [

{

"school": "DeVry University",

"degree": "Master's Degree in General Business Administration and Management",

"graduated": "2013 - 2014",

"description": ""

},

{

"school": "New York Institute of Technology",

"degree": "Bachelor's Degree in Computer Science",

"graduated": "2008 - 2012",

"description": ""

}

],

"work": [

{

"company": "Silicon Valley Bank, USA",

"title": "Sr. Principal Software Engineer - API Tech Lead / UI/X Architect",

"years": "Sep 2022 - Present",

"description": ""

},

{

"company": "Silicon Valley Bank, USA",

"title": "Principal Software Engineer - API Tech Experience Lead",

"years": "Jul 2020 - Sep 2022",

"description": ""

},

{

"company": "Achieve Internet, USA",

"title": "Software Architect",

"years": "Mar 2019 - Mar 2020",

"description": ""

}

],

"skills": [

{

"value": "Technical",

"count": "30",

"description": "20+ years, Specialized knowledge and having the expertise required to perform specific tasks and use specific tools and programs"

},

{

"value": "Computer Science",

"count": "30",

"description": "Bachelor Degree"

},

{

"value": "Innovation",

"count": "30",

"description": "20+ years, Ideation and collaboration while also providing an organized selection process"

}

],

"objectives": [

{

"name": "Managing engineering departments",

"level": "90%"

},

{

"name": "Implementing process improvements",

"level": "90%"

},

{

"name": "Planning overall engineering strategies",

"level": "90%"

}

]

},

"portfolio": {

"projects": [

{

"title": "Real Estates Virtual World Game",

"category": "Gaming",

"image": "/assets/images/webicon.png",

"url": "https://www.revwgame.com"

},

{

"title": "API Doc Pro",

"category": "Portal, Async and Open API editor with UI render",

"image": "/assets/images/webicon.png",

"url": "https://www.apidocpro.com"

},

{

"title": "GetFreeAPI Management Platform",

"category": "APIM platform",

"image": "/assets/images/webicon.png",

"url": "https://www.getfreeapi.com"

},

{

"title": "Flying Astronaut",

"category": "IOS / Android game",

"image": "/assets/images/android.png",

"url": "https://www.ddkits.com"

}

]

}

}

 

3- Update package.json with your repo information

 ...
"name": "portfolio",
  "version": "1.0.01",
  "author": "Sam Ayoub",
  "url": "https://sam.reallexi.com",
  "funding": {
    "type": "opencollective",
    "url": "https://opencollective.com/reallexi"
  },
  "bugs": {
    "url": "https://github.com/melayyoub/sam-ayoub-portfolio/issues"
  },
  "homepage": "https://sam.reallexi.com",
  "keywords": [
    "ddkits",
    "reallexi",
    "docker",
    "react",
    "sh",
    "bash",
    "vitrual",
    "machine",
    "cms",
    "mvc",
    "local",
    "db",
    "solr",
    "redis",
    "jinkins"
  ],
...

4- run deploy

 npm run deploy

5- commit and push your changes to your repo

 

 git add . 
git commit -a
git push origin main

6- make sure to update your repo settings to build a page by the action
7- (optional) Create a subdomain instead of a GitHub pages link
Done!!!

 

 

 

By: Mutasem Elayyoub