Want to create a professional portfolio but cannot figure out how to? Use Developer Portfolio and create your own personalised portfolio today! With multiple themes to choose from, our easily customisable, user friendly website is designed to cater to developers and freelancers alike.
Make sure you have the latest version of both Git and Node on your computer.
node --version
git --version
Getting Started π―
Fork and Clone the repo
To Fork the repo click on the fork button at the top right of the page. Once the repo is forked open your terminal and perform the following commands
git clone hhttps://github.com/<YOUR GITHUB USERNAME>/developer-portfolio.git
cd developer-portfolio
Install packages from the root directory
npm install
or
yarn install
Start the development server
npm start
or
yarn start
Usage πΉοΈ
Customize your details for each component in src/datafolder.
Eg:
exportconstheaderData={name: '-- YOUR NAME --',title: '-- YOUR TITLE --',desciption:'-- DESCRIPTION --',image: '-- IMAGE --',resumePdf: ''}// You can also import image and PDF from assets as shown belowimportresumefrom'../assets/pdf/resume.pdf'importprofileImgfrom'../assets/png/profileImg'exportconstheaderData={name: '-- YOUR NAME --',title: '-- YOUR TITLE --',desciption:'-- DESCRIPTION --',image: profileImg,resumePdf: resume}
Data for each component is divided into respective files.
Search engine optimization (SEO) is the process of improving the quality and quantity of website traffic to a website or a web page from search engines.
Add the below code snippet to public/index.html with your site info. This step is not mandatory
<metaname="description" content="--- SITE DESCRIPTION ---" />
<metaproperty="og:image" content="--- YOUR IMAGE ---"><metaproperty="og:site_name" content="--- YOUR NAME ---"/>
<metaproperty="og:title" content="--- YOUR NAME ---"/>
<metaproperty="og:url" content="--- YOUR SITE URL ---"/>
<metaproperty="og:type" content="website"/>
<metaproperty="og:description" content="--- SITE DESCRIPTION ---"/>
<metaproperty="og:locale" content="--- ---"><metaproperty="og:image" content="--- YOUR IMAGE ---"/>
<metaproperty="og:image:width" content="1200"><metaproperty="og:image:height" content="630"><metaitemprop="name" content="--- YOUR NAME ---"/>
<metaitemprop="url" content="--- YOUR SITE URL ---"/>
<metaitemprop="description" content="--- SITE DESCRIPTION ---"/>
<metaitemprop="thumbnailUrl" content=""/>
<linkrel="image_src" href="--- YOUR IMAGE ---"/>
<metaitemprop="image" content="--- YOUR IMAGE ---"/>
<metaname="twitter:site" content="@--- YOUR TWITTER USERNAME ---"><metaname="twitter:creator" content="@--- YOUR TWITTER USERNAME ---"><metaname="twitter:url" content="--- YOUR SITE URL ---"/>
<metaname="twitter:title" content="--- YOUR NAME ---"><metaname="twitter:description" content="--- SITE DESCRIPTION ---"><metaname="twitter:image" content="--- YOUR IMAGE ---"><metaname="twitter:card" content="summary"/>