Just change src/portfolio.js
to get your personal portfolio. Customize portfolio theme by using your own color scheme globally in the src/styles/index.scss
file (change root
for light theme and data-theme="dark"
for dark theme). Feel free to use it as-is or personalize it as much as you want.
If you'd like to contribute and make this much better for other users, have a look at Issues.
Created something awesome for your fork of the portfolio and want to share it? Feel free to open a pull request.
complete:
✔️ Summary and About me
✔️ Projects
✔️ Contact
✔️ Theme toggle
✔️ Background Particles
in work:
❌ Education
To view a live example, click here.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
You'll need Git and Node.js (which comes with npm) installed on your computer.
From your command line, clone and run developerFolio:
# Clone this repository
git clone https://github.com/NishantJS/portfolio2.git
# Go into the repository
cd portfolio2
# Install dependencies
npm install
# Start a local dev server
npm start
- portfolio2
- node_modules
- public
- CNAME <-- edit if you are using your own domain or remove it.
also remove all the files here except index html. go to any favicon generator online and paste your own icons here
- src
- assets <-- change png images to your project screenshots
- styles
- index.scss <-- change theme colors
-comonents
- About.tsx <-- change about information and cv link
- ContactData.tsx <-- change your social links
- ProjectData.tsx <-- change project data
- .gitignore
- package-lock.json
- package.json
- README.md
- tsconfig.json
> ProjectData.tsx
export const ProjectData = [
{
title: "Buddy FrontEnd", //<-- project title
imgd: BuddyDark, //<-- image for dark mode
imgl: Buddy, //<-- image for light mode
repo: "https://github.com/NishantJS/Buddy-Frontend", //<-- github repository url
desc: "Buddy is an E-Commerce site for pet care products.", //<-- project description
live: "https://www.buddyshop.in" //<-- project live version url if hosted anywhere
}
];
> ContactData.tsx
export const ContactData = [
{
title: "E-mail", //<-- social media name
icon: <Email />, //<-- image icon for the same
handle: "[email protected]", //<-- handle for the same
link: "mailto:[email protected]" //<-- html link prefix if not url i.e. mailto: if email, tel: if number
}
];
> main.scss
&::after {
content: "N"; <-- change the big N displayed on body to your initial
left: 0;
top: 0;
position: absolute;
font-size: 20vw;
opacity: 0.02;
z-index: 0;
}
I have used HashRouter
but u can use BrowserRrouter
with basename property if u prefer or feels the generated url is not user friendly. i.e sitename.domain/#/route
instead sitename.domain/route
When you are done with the setup, you should host your website online. I highly recommend to read through the Deployment docs for React.
This section guides you to deploy your portfolio on GitHub pages.
-
Navigate to
package.json
and enter your domain name instead ofhttps://nishant.social
inhomepage
variable. For example, if you want your site to behttps://<your-username>.github.io/portfolio2
, add the same to the homepage section ofpackage.json
. -
In short you can also add
/portfolio2
topackage.json
as both are exactly same. Upon doing so, you tellcreate-react-app
to add the path assets accordingly. -
If you do add
/portfolio2/
and using BrowserRouter instead HashRouter set the basename as/portfolio2
. for HashRouter u don't have to do anything. -
Optionally, configure the domain. You can configure a custom domain with GitHub Pages by adding a
CNAME
file to thepublic/
folder. -
Follow through the guide to setup GitHub pages from the official CRA docs here.
For more information, read hosting react app.
- If all steps are complete u can run
npm run deploy
command to create a product code and push it to github pages for deployment.
If you can help me with these. Please don't hesitate to open a pull request.