├── .gitignore ├── README.md ├── package.json ├── public ├── favicon.ico ├── index.html └── manifest.json ├── src ├── App.css ├── App.js ├── App.test.js ├── components │ ├── About.js │ ├── Contact.js │ ├── Header.js │ ├── Navbar.js │ ├── project.js │ └── work.js ├── index.css ├── index.js ├── logo.svg ├── serviceWorker.js └── yourdata.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Portfolio Template 2 | 3 | ## Minimal Portfolio template for Developers/Designers built with React. Use it to showcase your work, testimonials and other information to clients. 4 | 5 | Demo - https://react-portfolio-template.netlify.com/ 6 | 7 | # Preview - 8 | ![ezgif com-video-to-gif (1)](https://user-images.githubusercontent.com/16558205/59826999-314ace00-9355-11e9-9581-92c6fd160667.gif) 9 | 10 | 11 | 12 | # The Data can be customised in the src/yourdata.js 13 | 14 | 15 | 16 | This repo contains an easy-to-customize personal portfolio template that was created with React. It is lightweight and fully responsive, as well as comes with the Awesome Animations. 17 | 18 | ## Features 19 | * Production Ready 20 | * Fully Responsive 21 | * Easy To Customize and Personalise 22 | * Amazing Animations 23 | * Minimal & Modern Design 24 | 25 | ## How to use 26 | 1.Clone/Download the repo. 27 | 2.Run npm install or yarn install. 28 | 3.Change the values in src/yourdata.js to suit your use-case. 29 | 4.Run npm start or yarn start to start the local dev server port 3000.(http://localhost:3000). 30 | 31 | # Full Preview - 32 | ![portfolio](https://user-images.githubusercontent.com/16558205/59826731-7d494300-9354-11e9-92dd-46f7057b6ead.png) 33 | 34 | 35 | License 36 | Completely free (MIT)! 37 | 38 | Follow Me - 39 | [Portfolio](http://chetanverma.com/) 40 | [Behance](https://www.behance.net/chetanverma) 41 | [Dribbble](https://dribbble.com/chetanverma) 42 | [Instagram](https://www.instagram.com/cv.uidesign/) 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-portfolio-template", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.8.6", 7 | "react-dom": "^16.8.6", 8 | "react-reveal": "^1.2.2", 9 | "react-scripts": "3.0.1", 10 | "react-scroll": "^1.7.12" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": { 22 | "production": [ 23 | ">0.2%", 24 | "not dead", 25 | "not op_mini all" 26 | ], 27 | "development": [ 28 | "last 1 chrome version", 29 | "last 1 firefox version", 30 | "last 1 safari version" 31 | ] 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/react-portfolio-template/b560a22806b3577f28130fc3302685b61f1f884b/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | portfolio 23 | 24 | 25 | 26 |
27 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans&display=swap'); 2 | 3 | 4 | body{ 5 | font-size: 16px; 6 | background: white; 7 | font-family: 'Open Sans', sans-serif; 8 | overflow-x: hidden; 9 | z-index: 1; 10 | } 11 | 12 | 13 | .App { 14 | text-align: center; 15 | } 16 | 17 | 18 | 19 | .App-header { 20 | position: relative; 21 | min-height: 100vh; 22 | display: flex; 23 | flex-direction: column; 24 | align-items: center; 25 | color: black; 26 | top:4em; 27 | } 28 | .heading-background{ 29 | position: fixed; 30 | opacity: 0.05; 31 | font-size: 25em; 32 | left:-0.2em; 33 | top:-0.5em; 34 | z-index: -100; 35 | color:#9352ae; 36 | } 37 | header{ 38 | display: flex; 39 | flex-direction: row; 40 | justify-content: center; 41 | align-items: center; 42 | } 43 | header h1{ 44 | font-size: 1em; 45 | font-weight: 400; 46 | padding: 2em; 47 | margin-right: 50em; 48 | } 49 | nav{ 50 | position:fixed; 51 | left:60em; 52 | top:6em; 53 | z-index: 100; 54 | } 55 | nav li{ 56 | display: inline-block; 57 | cursor: pointer; 58 | 59 | } 60 | nav li .link{ 61 | text-decoration: none; 62 | color: black; 63 | padding:1em; 64 | opacity: 0.5; 65 | transition: all 0.3s ease-in-out; 66 | -webkit-transition: all 0.3s ease-in-out; 67 | -moz-transition: all 0.3s ease-in-out; 68 | -ms-transition: all 0.3s ease-in-out; 69 | -o-transition: all 0.3s ease-in-out; 70 | } 71 | li .link:hover{ 72 | opacity: 1; 73 | } 74 | .active{ 75 | color:black; 76 | opacity: 1; 77 | } 78 | 79 | .header-title button{ 80 | background: black; 81 | border: 0px; 82 | padding: 1em 3em; 83 | transition: all 0.2s ease-out; 84 | -webkit-transition: all 0.2s ease-out; 85 | -moz-transition: all 0.2s ease-out; 86 | -ms-transition: all 0.2s ease-out; 87 | -o-transition: all 0.2s ease-out; 88 | } 89 | .header-title button:hover{ 90 | opacity: 0.8; 91 | } 92 | .header-title button a{ 93 | font-family: 'Open Sans', sans-serif; 94 | color:white; 95 | text-decoration: none; 96 | } 97 | .header-title{ 98 | position: relative; 99 | font-family: 'Montserrat', sans-serif; 100 | font-size: 3em; 101 | text-align: left; 102 | top:2em; 103 | } 104 | .about{ 105 | display: flex; 106 | flex-direction: row; 107 | } 108 | .about-content{ 109 | position: relative; 110 | left:15em; 111 | } 112 | .about-content h1{ 113 | font-family: 'Montserrat', sans-serif; 114 | font-size: 5em; 115 | text-align: left; 116 | } 117 | .about-content p{ 118 | font-size: 1.3em; 119 | text-align: left; 120 | width: 37em; 121 | } 122 | .about img{ 123 | margin-left: 5em; 124 | } 125 | .work{ 126 | position: relative; 127 | display: flex; 128 | flex-direction: column; 129 | left:15em; 130 | top:8em; 131 | align-items: flex-start; 132 | } 133 | .work .heading{ 134 | font-family: 'Montserrat', sans-serif; 135 | font-size: 5em; 136 | text-align: left; 137 | } 138 | .work .work-content{ 139 | display: grid; 140 | grid-template-columns: repeat(2,1fr); 141 | grid-gap: 2em; 142 | } 143 | 144 | .project img{ 145 | width: 30em; 146 | height: 30em; 147 | } 148 | .contact{ 149 | position: relative; 150 | top:20em; 151 | left:15em; 152 | text-align: left; 153 | } 154 | .contact h1{ 155 | font-family: 'Montserrat', sans-serif; 156 | font-size: 5em; 157 | text-align: left; 158 | } 159 | .amazing-color{ 160 | color:#9352ae; 161 | opacity: 1; 162 | } 163 | 164 | .contact .email{ 165 | color:black; 166 | font-size: 2em; 167 | } 168 | .contact li{ 169 | display: inline-block; 170 | margin-top:0; 171 | margin-bottom: 0; 172 | margin-right: 1em; 173 | margin-left: 0; 174 | } 175 | .contact li a{ 176 | text-decoration: none; 177 | color:black; 178 | } 179 | .footer{ 180 | position: relative; 181 | top:2em; 182 | padding: 1em; 183 | } 184 | .footer a{ 185 | text-decoration: none; 186 | color:#2c59fb; 187 | } 188 | 189 | 190 | /* SMARTPHONES PORTRAIT */ 191 | @media only screen and (min-device-width: 320px) and (max-device-width : 480px){ 192 | 193 | body{ 194 | font-size: 6px; 195 | } 196 | header h1{ 197 | font-size: 5em; 198 | padding: 1em; 199 | margin-right: 0em; 200 | } 201 | 202 | .heading-background{ 203 | display: none; 204 | } 205 | nav{ 206 | display: none; 207 | } 208 | .header-title{ 209 | font-size: 3em; 210 | text-align: left; 211 | top:1em; 212 | left:1em; 213 | } 214 | .about{position: relative; 215 | display: flex; 216 | top:-30em; 217 | } 218 | .about img{ 219 | display: none 220 | } 221 | .about-content{ 222 | left:2em; 223 | } 224 | .about-content p{ 225 | font-size: 3.5em; 226 | text-align: left; 227 | width: 300px; 228 | } 229 | 230 | .work{ 231 | left:2em; 232 | top:2em; 233 | align-items: flex-start; 234 | } 235 | .work .work-content{ 236 | display: grid; 237 | grid-template-columns: 1fr; 238 | grid-gap: 5em; 239 | } 240 | .project img{ 241 | width: 45em; 242 | height: 45em; 243 | } 244 | 245 | .contact{ 246 | top:15em; 247 | left:2em; 248 | } 249 | .contact h1{ 250 | font-size: 4em; 251 | } 252 | .contact .email{ 253 | font-size: 3.5em; 254 | } 255 | 256 | .contact li{ 257 | display: block; 258 | padding: 2em; 259 | } 260 | .contact li a{ 261 | font-size: 2.5em; 262 | } 263 | .footer{ 264 | top:4em; 265 | padding: 1em; 266 | font-size: 2em; 267 | } 268 | 269 | 270 | } 271 | 272 | /* iPads (portrait and landscape) ----------- */ 273 | @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 274 | 275 | 276 | body{ 277 | font-size: 10px; 278 | } 279 | header h1{ 280 | font-size: 5em; 281 | padding: 1em; 282 | margin-right: 0em; 283 | } 284 | 285 | nav{ 286 | display: none; 287 | } 288 | .header-title{ 289 | font-size: 3.6em; 290 | text-align: left; 291 | top:1em; 292 | left:1em; 293 | } 294 | .about{position: relative; 295 | display: flex; 296 | top:-10em; 297 | } 298 | .about img{ 299 | display: none 300 | } 301 | .about-content{ 302 | left:6em; 303 | } 304 | .about-content p{ 305 | font-size: 3.5em; 306 | text-align: left; 307 | width: 700px; 308 | } 309 | 310 | .work{ 311 | left:6em; 312 | top:4em; 313 | align-items: flex-start; 314 | } 315 | .work .work-content{ 316 | display: grid; 317 | grid-template-columns: 1fr 1fr; 318 | grid-gap: 5em; 319 | } 320 | .project img{ 321 | width: 30em; 322 | height: 30em; 323 | } 324 | 325 | .contact{ 326 | top:15em; 327 | left:6em; 328 | } 329 | .contact h1{ 330 | font-size: 4em; 331 | } 332 | .contact .email{ 333 | font-size: 3.5em; 334 | } 335 | 336 | .contact li{ 337 | display: block; 338 | padding: 2em; 339 | } 340 | .contact li a{ 341 | font-size: 2.5em; 342 | } 343 | .footer{ 344 | top:4em; 345 | padding: 1em; 346 | font-size: 2em; 347 | } 348 | 349 | } 350 | 351 | /* Large screens ----------- */ 352 | @media only screen and (min-width : 1824px) { 353 | /* Styles */ 354 | 355 | 356 | 357 | body{ 358 | font-size: 20px; 359 | } 360 | header h1{ 361 | font-size: 3em; 362 | margin-right: 25em; 363 | } 364 | 365 | 366 | nav{ 367 | left:60em; 368 | top:12em; 369 | z-index: 100; 370 | } 371 | nav li{ 372 | font-size: 3em; 373 | 374 | } 375 | .header-title{ 376 | font-size: 5em; 377 | top:1em; 378 | left:1em; 379 | } 380 | .about{position: relative; 381 | display: flex; 382 | top:-20em; 383 | } 384 | .about-content{ 385 | left:10em; 386 | } 387 | .about-content p{ 388 | font-size: 3.5em; 389 | text-align: left; 390 | width: 25em; 391 | } 392 | .about img{ 393 | margin-left: 1em; 394 | } 395 | 396 | .work{ 397 | left:10em; 398 | top:4em; 399 | align-items: flex-start; 400 | } 401 | .work .work-content{ 402 | display: grid; 403 | grid-template-columns: 1fr 1fr 1fr; 404 | } 405 | .project img{ 406 | width: 32em; 407 | height: 32em; 408 | } 409 | 410 | .contact{ 411 | top:10em; 412 | left:8em; 413 | } 414 | .contact h1{ 415 | font-size: 8em; 416 | } 417 | .contact .email{ 418 | font-size: 5em; 419 | } 420 | 421 | .contact li a{ 422 | font-size: 4em; 423 | padding: 1em; 424 | } 425 | .footer{ 426 | top:4em; 427 | padding: 1em; 428 | font-size: 4em; 429 | } 430 | 431 | 432 | } 433 | 434 | 435 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | 4 | import Header from './components/Header'; 5 | import About from './components/About'; 6 | import Work from './components/work'; 7 | import Contact from './components/Contact'; 8 | import Navbar from './components/Navbar' 9 | 10 | function App() { 11 | return ( 12 |
13 | 14 |
15 |
16 |
17 | 18 |
19 | 20 |
21 |
22 | 23 |
24 |
25 | 26 |
27 |
28 | ); 29 | } 30 | 31 | export default App; 32 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /src/components/About.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Fade from 'react-reveal/Fade'; 3 | import data from '../yourdata'; 4 | 5 | class About extends Component { 6 | state = { } 7 | render() { 8 | return (
9 |
10 |

About.

11 | 12 |

{data.abouttext}

13 | 14 |
15 | {data.ShowAboutImage ? about iamge : null} 16 | 17 | 18 |
); 19 | } 20 | } 21 | 22 | export default About; -------------------------------------------------------------------------------- /src/components/Contact.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Fade from 'react-reveal/Fade'; 3 | import data from '../yourdata'; 4 | 5 | class Contact extends Component { 6 | state = { } 7 | render() { 8 | return (
9 |

10 | Contact. 11 |

12 | 13 |
14 |

15 | Let’s create your next

16 | experience together

17 | {data.contactEmail} 18 |
    19 | {data.social.map((link,index)=>( 20 |
  • {link.name}
    • 21 | ))} 22 |
23 |
24 | 25 | 26 | Made With ❤ by Chetan Verma 27 |
); 28 | } 29 | } 30 | 31 | export default Contact; -------------------------------------------------------------------------------- /src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Fade from 'react-reveal/Fade'; 3 | import data from '../yourdata' 4 | 5 | 6 | class Header extends Component { 7 | state = {} 8 | 9 | render() { 10 | return (
11 |

CREATIVE

12 |
13 |

14 | {data.name}

15 |
16 | 17 |

18 | {data.headerTagline[0]}

{data.headerTagline[1]}

19 | {data.headerTagline[2]} 20 |

21 | 22 |

23 | 24 | 25 | 26 | 27 |
); 28 | } 29 | } 30 | 31 | export default Header; -------------------------------------------------------------------------------- /src/components/Navbar.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Link, animateScroll as scroll } from "react-scroll"; 3 | class Navbar extends Component { 4 | state = { } 5 | scrollToTop = () => { 6 | scroll.scrollToTop(); 7 | }; 8 | render() { 9 | return ( ); 50 | } 51 | } 52 | 53 | export default Navbar; -------------------------------------------------------------------------------- /src/components/project.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Fade from 'react-reveal/Fade'; 3 | 4 | class Project extends Component { 5 | state = { } 6 | render() { 7 | return ( 8 | 9 |
10 | 11 | {this.props.title} 12 | 13 |

{this.props.title}

14 | {this.props.service} 15 |
16 | ); 17 | } 18 | } 19 | 20 | export default Project; -------------------------------------------------------------------------------- /src/components/work.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Project from './project'; 3 | import Fade from 'react-reveal/Fade'; 4 | import data from '../yourdata'; 5 | 6 | class Work extends Component { 7 | state = { } 8 | render() { 9 | return (
10 |

11 | Work.

12 |
13 | {data.projects.map((project)=>( 14 | 20 | ))} 21 |
22 |
); 23 | } 24 | } 25 | 26 | export default Work; -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: https://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl) 104 | .then(response => { 105 | // Ensure service worker exists, and that we really are getting a JS file. 106 | const contentType = response.headers.get('content-type'); 107 | if ( 108 | response.status === 404 || 109 | (contentType != null && contentType.indexOf('javascript') === -1) 110 | ) { 111 | // No service worker found. Probably a different app. Reload the page. 112 | navigator.serviceWorker.ready.then(registration => { 113 | registration.unregister().then(() => { 114 | window.location.reload(); 115 | }); 116 | }); 117 | } else { 118 | // Service worker found. Proceed as normal. 119 | registerValidSW(swUrl, config); 120 | } 121 | }) 122 | .catch(() => { 123 | console.log( 124 | 'No internet connection found. App is running in offline mode.' 125 | ); 126 | }); 127 | } 128 | 129 | export function unregister() { 130 | if ('serviceWorker' in navigator) { 131 | navigator.serviceWorker.ready.then(registration => { 132 | registration.unregister(); 133 | }); 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /src/yourdata.js: -------------------------------------------------------------------------------- 1 | export default 2 | { 3 | //(Please Do Not Remove The comma(,) after every variable) 4 | //Change The Website Template 5 | name :'chetanverma.', 6 | headerTagline: [//Line 1 For Header 7 | 'Hi 👋 You found me! I am Your Name.', 8 | //Line 2 For Header 9 | 'Digital designer ', 10 | //Line 3 For Header 11 | 'from India' 12 | ], 13 | //Contact Email 14 | contactEmail:'hello@chetanverma.com', 15 | // Add Your About Text Here 16 | abouttext: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", 17 | aboutImage:'https://images.unsplash.com/photo-1521587765099-8835e7201186?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60', 18 | //Change This To Hide The Image of About Section (True Or False) 19 | ShowAboutImage:true,//true or false (Change Here) 20 | // Change Projects Here 21 | projects:[ 22 | { 23 | id: 1,//DO NOT CHANGE THIS (Please)😅 24 | title:'Project One', //Project Title - Add Your Project Title Here 25 | service:'UI/UX Design', // Add Your Service Type Here 26 | //Project Image - Add Your Project Image Here 27 | imageSrc:"https://images.unsplash.com/photo-1558104631-0fa41a8f6c20?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60", 28 | //Project URL - Add Your Project Url Here 29 | url:'http://chetanverma.com/' 30 | }, 31 | { 32 | id: 2,//DO NOT CHANGE THIS (Please)😅 33 | title: 'Project Two', 34 | service: 'Website Development', 35 | imageSrc: "https://images.unsplash.com/photo-1554866585-cd94860890b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60", 36 | url: 'http://chetanverma.com/' 37 | }, 38 | { 39 | id: 3,//DO NOT CHANGE THIS (Please)😅 40 | title: 'Project Three', 41 | service: 'Web App', 42 | imageSrc: "https://images.unsplash.com/photo-1511500118080-275313ec90a1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60", 43 | url: 'http://chetanverma.com/' 44 | }, 45 | { 46 | id: 4,//DO NOT CHANGE THIS (Please)😅 47 | title: 'Project Four', 48 | service: 'Branding', 49 | imageSrc: "https://images.unsplash.com/photo-1558452919-08ae4aea8e29?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60", 50 | url: 'http://chetanverma.com/' 51 | } 52 | 53 | /* 54 | 55 | If You Want To Add More Project just Copy and Paste This At The End (Update the id Respectively) 56 | ,{ 57 | id: 5, 58 | title: 'Project Five', 59 | service: 'Something Amazing', 60 | imageSrc: "", 61 | url: '' 62 | } 63 | */ 64 | ], 65 | social: [ 66 | // Add Or Remove The Link Accordingly 67 | { name:'Github', 68 | url:'https://github.com/chetanverma16'}, 69 | { 70 | name: 'Behance', 71 | url: 'https://www.behance.net/chetanverma' 72 | }, 73 | { 74 | name: 'Dribbble', 75 | url: 'https://dribbble.com/chetanverma' 76 | }, 77 | { 78 | name: 'Instagram', 79 | url: 'https://www.instagram.com/cv.uidesign/' 80 | } 81 | 82 | ] 83 | } --------------------------------------------------------------------------------