You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
To view a live example, **[click here](https://ashutosh1919.github.io/)**
46
46
47
-
# Clone And Use 📋
47
+
# Clone and Use 📋
48
48
49
-
- The website is completely built on `react-js` library of `javascript` and that's why we need `nodejs` and `npm` installed.
50
-
- While installing `nodejs` and `npm`, try to install versions which are equal or greater than the versions mentioned in badges above.
51
-
- In case you want to help developing it or simply saving it, you can fork the repository just by clicking the button on the top-right corner of this page.
49
+
- The website is completely built on `react-js` library of `javascript` and that's why we need `nodejs` and `npm` installed
50
+
- While installing `nodejs` and `npm`, try to install versions which are equal or greater than the versions mentioned in badges above
51
+
- In case you want to help developing it or simply saving it, you can fork the repository just by clicking the button on the top-right corner of this page
52
52
- After the successful installation of `nodejs` and `npm`, clone the repository into your local system using below command:
- This will clone the whole repository in your system.
56
+
This will clone the whole repository in your system.
57
57
- To download required dependencies to your system, navigate to the directory where the cloned repository resides and execute following command:
58
-
-```node
58
+
```node
59
59
npm install
60
60
```
61
-
- Now, the project is ready to use.
61
+
- Now the project is ready to use
62
62
- You can check it using `npm start`, it will open the website locally on your browser.
63
63
64
64
# Customize it to make your own portfolio ✏️
@@ -126,38 +126,35 @@ Whenever you want to update the github related information on the website you ne
126
126
Note here that if you click [my portfolio](https://ashutosh1919.github.io), you can see animating the logo at the beginning. I have designed that logo in [`Figma`](https://www.figma.com/) and then animated it using css.
127
127
Therefore, this part of portfolio is not customizable. But don't worry we have a solution to this problem. You have below two alternatives:
128
128
129
-
- If you want to design your own logo, then you can design it using `Figma` or `Adobe XD` or `Adobe Illustrator` or `Inkscape`. If you want to animate it, you can refer to `./src/components/Loader` directory which contains `js` and `css` files which animates the logo.
130
-
- If you don't want Splash screen or you don't know how to design logo, then this option is for you.
129
+
- If you want to design your own logo, then you can design it using `Figma` or `Adobe XD` or `Adobe Illustrator` or `Inkscape`. If you want to animate it, you can refer to `./src/components/Loader` directory which contains `js` and `css` files which animates the logo
130
+
- If you don't want Splash screen or you don't know how to design logo, then this option is for you
131
131
132
132
- You can open `src/portfolio.js` file and at the top of this file you will see `settings` component as below:
133
-
-```javascript
133
+
```javascript
134
134
// Website related settings
135
135
const settings = {
136
136
isSplash: true,
137
137
};
138
138
```
139
-
- Change `isSplash` from `true` to `false`.
140
-
- Now, if you see your website using `npm start`, it will directly open `home` rather than animating logo `splash` screen.
139
+
- Change `isSplash` from `true` to `false`
140
+
- Now, if you see your website using `npm start`, it will directly open `home` rather than animating logo `splash` screen
141
141
- If you design your logo in future, then edit the files in`./src/components/Loader` and then revert `isSplash` to `true`in`src/portfolio.js`.
142
142
143
143
## Other
144
144
145
145
- You need to change the website title and other descriptions in`public/index.html`
146
-
147
146
- You can define your own favicon in`public/icons` directory. If you don't have a favicon, you can generate favicons from [Favicon Generator](https://www.favicon-generator.org/) and [Favicon IO](https://favicon.io/)
148
-
149
-
- Also you can edit your website preview known as description image. Run your site locally, take a screenshot and replace with `public/icons/desc.png`. Note that your screenshot should be 1280x640 for better preview
147
+
- You can also edit your website preview (known as description image). Run your site locally, take a screenshot and replace with `public/icons/desc.png`. Note that your screenshot should be 1280x640 for better preview.
150
148
151
149
# Choose Theme 🌈
152
150
153
-
- You can take a look at `src/theme.js` file where all available themes are mentioned with their respective color codes.
151
+
- You can take a look at `src/theme.js` file where all available themes are mentioned with their respective color codes
154
152
- At the bottom of this file you will see the below code:
155
153
- `export const chosenTheme = blueTheme;`
156
-
- You need to change the name from `blueTheme` to whatever theme you want to set your website to.
157
-
- You can define new theme similarly as other themes and you can assign name of that new defined theme to `chosenTheme`.
158
-
- That's it. You just need to change the theme name and the code will take care of everything else.
159
-
160
-
Run `npm start` to check if everything is ok.
154
+
- You need to change the name from `blueTheme` to whatever theme you want to set your website to
155
+
- You can define new theme similarly as other themes and you can assign name of that new defined theme to `chosenTheme`
156
+
- That's it. You just need to change the theme name and the code will take care of everything else
157
+
- Run `npm start` to check if everything is ok.
161
158
162
159
# Deployment 📦
163
160
@@ -171,7 +168,8 @@ Therefore, this part of portfolio is not customizable. But don't worry we have a
171
168
- Run `npm run build` to generate the production build folder.
172
169
- Enter the build folder, `git init` and push the generated code to the `master` branch of your new repository on github. That's it. It's Done.
173
170
- You may need to `git init` and force push at every new build.
174
-
**Option 2 (will not work with [user pages](https://docs.github.com/en/github/working-with-github-pages/about-github-pages)):**
171
+
172
+
**Option 2 (will not work with [user pages](https://docs.github.com/en/github/working-with-github-pages/about-github-pages)):**
175
173
176
174
- Run `npm run deploy` to build and create a branch called `gh-pages`. It will push the `build` files to that branch.
177
175
- The last step in deploying is to enable `Github Pages` in settings of the repository and select `gh-pages` branch.
0 commit comments