├── .gitignore ├── LICENSE ├── README.md ├── package.json ├── public ├── css │ └── style.css └── index.html └── src ├── App.js ├── components ├── About.js ├── Certificate.js ├── Education.js ├── Experience.js ├── Skills.js └── Social.js ├── index.js ├── index.styl └── registerServiceWorker.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Oscar Barajas Tavares 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # gresume-react 2 | Professional Resume CV Template in ReactJS 3 | 4 | GResume is a HTML free template to create a minimalist professional resume. Made in html5 and css3 with a responsive design. 5 | 6 | ![gresume](https://raw.githubusercontent.com/gndx/GResume/master/screenshot.png) 7 | 8 | * Click here to use the [Live Demo](http://dev.gndx.co/gresume-react/) 9 | 10 | 11 | 12 | ### Install Dependencies 13 | ``` 14 | npm install 15 | ``` 16 | 17 | ### Compile Stylus (CSS) 18 | Command to compile stylus: 19 | ``` 20 | npm run stylus 21 | ``` 22 | 23 | ### Starting the Server 24 | Run the next command to launch the development server. 25 | ``` 26 | npm start 27 | ``` 28 | 29 | ### Building for Production 30 | To build an optimized bundle, run 31 | ``` 32 | npm run build 33 | ``` 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gresumereact", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "classnames": "^2.2.5", 7 | "prop-types": "^15.5.10", 8 | "react": "^15.5.4", 9 | "react-dom": "^15.5.4" 10 | }, 11 | "devDependencies": { 12 | "nib": "^1.1.2", 13 | "react-scripts": "1.0.7", 14 | "stylus": "^0.54.5" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test --env=jsdom", 20 | "eject": "react-scripts eject", 21 | "stylus": "stylus -u nib -c -w -o public/css/style.css src/index.styl" 22 | }, 23 | "description": "Professional Resume CV Template in ReactJS", 24 | "main": "index.js", 25 | "repository": { 26 | "type": "git", 27 | "url": "git+https://github.com/gndx/gresume-react.git" 28 | }, 29 | "keywords": [ 30 | "Gresume", 31 | "react", 32 | "jsx" 33 | ], 34 | "author": "Oscar Barajas ", 35 | "license": "MIT", 36 | "bugs": { 37 | "url": "https://github.com/gndx/gresume-react/issues" 38 | }, 39 | "homepage": "https://github.com/gndx/gresume-react#readme" 40 | } 41 | -------------------------------------------------------------------------------- /public/css/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Raleway:300,400,700"); 2 | body{margin:0;padding:0;font-family:'Raleway',sans-serif}header .wrapper{margin:0;padding:0;max-width:100%;position:relative;}header .wrapper .content-wrapper{float:right;width:100%}.sidebar{-webkit-box-shadow:4px 0 5px -2px rgba(94,94,94,0.81);box-shadow:4px 0 5px -2px rgba(94,94,94,0.81);text-align:center;position:fixed;width:420px;margin-right:-320px;float:left;color:#fff !important;height:100%;background-image:-webkit-linear-gradient(bottom, #1687ed 0%, #14375a 100%);background-image:-moz-linear-gradient(bottom, #1687ed 0%, #14375a 100%);background-image:-o-linear-gradient(bottom, #1687ed 0%, #14375a 100%);background-image:-ms-linear-gradient(bottom, #1687ed 0%, #14375a 100%);background-image:linear-gradient(to top, #1687ed 0%, #14375a 100%);}.sidebar .bio{position:absolute;top:25%;left:5%;width:90%;display:block;margin:0 auto;}.sidebar .bio .title h1{font-weight:700;margin-bottom:0;text-transform:uppercase;font-size:28px}.sidebar .bio .title h2{font-size:20px;margin:0 0 30px 0;font-weight:300;letter-spacing:1.6px}.sidebar .bio .avatar img{width:140px;border-radius:50%;border:1px solid rgba(255,255,255,0.2);-webkit-box-shadow:0 0 20px rgba(255,255,255,0.3);box-shadow:0 0 20px rgba(255,255,255,0.3)}.sidebar .bio .desc{width:85%;display:block;margin:0 auto;}.sidebar .bio .desc p{font-size:15px;font-weight:300;color:#f2f2f2}.sidebar .bio .social{margin-top:30px;}.sidebar .bio .social a{color:rgba(255,255,255,0.7);-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-o-transition:all 0.2s linear;-ms-transition:all 0.2s linear;transition:all 0.2s linear;}.sidebar .bio .social a:hover,.sidebar .bio .social a:focus{color:#fff}.sidebar .bio .social i{font-size:28px}.sidebar .bio .social ul{list-style:none;margin:0;padding:0;}.sidebar .bio .social ul li{display:inline-block;margin-right:5px}.content{padding:30px 0 0 60px;position:relative;margin-left:420px;clear:both;overflow:auto;color:#777;}.content .title{padding-bottom:20px;}.content .title i{float:left;color:#233f5d;font-size:26px;margin-right:15px}.content .title h2{color:#555}.content .title .item{margin-bottom:30px;}.content .title .item h3{color:#777;margin-bottom:5px}.content .title .item span{color:rgba(35,63,93,0.9);font-weight:300}.content .title .item p{margin-top:0;width:95%;letter-spacing:1.1px;line-height:25px}.content .title .w33{width:30%;display:inline-block}.skills{height:10px;position:relative;background:#233f5d;border-radius:50px;padding:6px;width:90%;margin-top:10px;}.skills span{display:block;height:100%;border-top-right-radius:8px;border-bottom-right-radius:8px;border-top-left-radius:20px;border-bottom-left-radius:20px;background-color:#1687ed;overflow:hidden;position:relative;-webkit-box-shadow:inset 0 2px 9px rgba(255,255,255,0.3),inset 0 -2px 6px rgba(0,0,0,0.4);box-shadow:inset 0 2px 9px rgba(255,255,255,0.3),inset 0 -2px 6px rgba(0,0,0,0.4);}.skills span:after{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background-image:-webkit-linear-gradient(135deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(135deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(135deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(135deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent);z-index:1;-webkit-background-size:50px 50px;-moz-background-size:50px 50px;background-size:50px 50px;-webkit-animation:move 4s linear infinite;-moz-animation:move 4s linear infinite;-o-animation:move 4s linear infinite;-ms-animation:move 4s linear infinite;animation:move 4s linear infinite;overflow:hidden}@-webkit-keyframes move{0%{background-position:0 0}100%{background-position:50px 50px}}@-moz-keyframes move{0%{background-position:0 0}100%{background-position:50px 50px}}@media only screen and (max-width:768px){.sidebar{-webkit-box-shadow:none;box-shadow:none;padding-top:60px;padding-bottom:60px;margin-right:0;width:100%;position:relative;}.sidebar .bio{position:relative;top:0%;left:0%}.content{margin-left:0;position:relative;padding:20px;}.content .title .item h3 span{display:block}.content .title .item p{width:100%;text-align:justify}.content .title .skills{width:100%;margin-top:0}.content .title .w33{width:95%;display:inline-block}} -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 19 | GResume React App 20 | 21 | 22 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import About from './components/About'; 3 | import Experience from './components/Experience'; 4 | import Education from './components/Education'; 5 | import Certificate from './components/Certificate'; 6 | import Skills from './components/Skills'; 7 | 8 | class App extends Component { 9 | render() { 10 | 11 | const person = { 12 | avatar: 'https://gndx.co/wp-content/uploads/2017/05/oscar_barajas.jpg', 13 | name: 'Oscar Barajas', 14 | profession: 'FrontEnd Developer', 15 | bio: '❤ Front end Developer - Growth Hacker at @CityDrive, CSS Lover, Geek & Blogger. Better known as The Grumpy Developer.', 16 | address: 'Guadalajara, Jalisco México.', 17 | social: [ 18 | {name: 'facebook', url: 'https://facebook.com/oscarbarajastavares'}, 19 | {name: 'twitter', url: 'https://twitter.com/gndx'}, 20 | {name: 'github', url: 'https://github.com/gndx'}, 21 | {name: 'linkedin', url: 'https://www.linkedin.com/in/oscarbarajas/'} 22 | ], 23 | experience: [ 24 | {jobTitle: 'FrontEnd', company: 'CityDrive', startDate: 'Jan 2016', endDate: 'Present', jobDescription: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.'}, 25 | {jobTitle: 'Backend', company: 'DragonsDev', startDate: 'September 2014', endDate: 'Jan 2016', jobDescription: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.'}, 26 | ], 27 | education: [ 28 | {degree: 'Maestria Atomica', institution: 'MIT', startDate: 'Jan 2016', endDate: 'Jan 2017', description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.'}, 29 | {degree: 'Ingenieria Atomica', institution: 'Harvard', startDate: 'Jan 2014', endDate: 'Decenber 2015', description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.'}, 30 | ], 31 | certificate: [ 32 | {name: 'FrontEnd Developer', institution: 'Platzi', date: 'Jan 2015', description: 'Aenean commodo ligula eget dolor. Aenean massa.' }, 33 | {name: 'Backend Developer', institution: 'Platzi', date: 'Jan 2016', description: 'Aenean commodo ligula eget dolor. Aenean massa.' } 34 | ], 35 | skills: [ 36 | {name: 'HTML5', percentage: '95%'}, 37 | {name: 'CSS', percentage: '90%'}, 38 | {name: 'JavaScript', percentage: '75%'}, 39 | {name: 'PHP', percentage: '50%'} 40 | ] 41 | }; 42 | 43 | return ( 44 |
45 |
46 |
47 | 54 |
55 | 56 |
57 |
58 | 59 | 60 | 61 | 62 |
63 |
64 | 65 |
66 |
67 | ); 68 | } 69 | } 70 | 71 | export default App; 72 | -------------------------------------------------------------------------------- /src/components/About.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import Social from './Social'; 4 | 5 | const About = ({avatar, name, profession, bio, address, social}) => { 6 | return( 7 |
8 |
9 | {name} 10 |
11 |
12 |

{name}

13 |

{profession}

14 |
15 |
16 |

{bio}

17 |
18 |
19 |

{address}

20 |
21 | 22 |
23 | ); 24 | }; 25 | 26 | About.PropTypes = { 27 | avatar: PropTypes.string, 28 | name: PropTypes.string, 29 | profession: PropTypes.string, 30 | bio: PropTypes.string, 31 | address: PropTypes.string, 32 | social: PropTypes.node 33 | }; 34 | 35 | export default About; 36 | -------------------------------------------------------------------------------- /src/components/Certificate.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Certificate = (props) => { 4 | const myCertificates = ( 5 |
6 | {props.certificate.map((cert) => 7 |
8 |

{cert.name} @ {cert.institution} {cert.date}

9 |

{cert.description}

10 |
11 | )} 12 |
13 | ); 14 | return ( 15 |
16 | 17 |

CERTIFICATES

18 | {myCertificates} 19 |
20 | ) 21 | }; 22 | 23 | export default Certificate; 24 | -------------------------------------------------------------------------------- /src/components/Education.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Education = (props) => { 4 | const myEducation = ( 5 |
6 | {props.education.map((edu) => 7 |
8 |

{edu.degree} @ {edu.institution} {edu.startDate} - {edu.endDate}

9 |

{edu.description}

10 |
11 | )} 12 |
13 | ); 14 | return ( 15 |
16 | 17 |

EDUCATION

18 | {myEducation} 19 |
20 | ) 21 | }; 22 | 23 | export default Education; 24 | -------------------------------------------------------------------------------- /src/components/Experience.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Experience = (props) => { 4 | const myExperience = ( 5 |
6 | {props.experience.map((exp) => 7 |
8 |

{exp.jobTitle} @ {exp.company} {exp.startDate} - {exp.endDate}

9 |

{exp.jobDescription}

10 |
11 | )} 12 |
13 | ); 14 | return ( 15 |
16 | 17 |

EXPERIENCE

18 | {myExperience} 19 |
20 | ) 21 | }; 22 | 23 | export default Experience; 24 | -------------------------------------------------------------------------------- /src/components/Skills.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Skills = (props) => { 4 | const mySkills = ( 5 |
6 | {props.skills.map((skll) => 7 |
8 |

{skll.name}

9 |
10 | 11 |
12 |
13 | )} 14 |
15 | ); 16 | return ( 17 |
18 | 19 |

SKILLS

20 | {mySkills} 21 |
22 | ) 23 | }; 24 | 25 | export default Skills; 26 | -------------------------------------------------------------------------------- /src/components/Social.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Social = (props) => { 4 | const socialNetworks = ( 5 | 14 | ); 15 | return ( 16 |
17 | {socialNetworks} 18 |
19 | ) 20 | }; 21 | 22 | export default Social; 23 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import registerServiceWorker from './registerServiceWorker'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | registerServiceWorker(); 8 | -------------------------------------------------------------------------------- /src/index.styl: -------------------------------------------------------------------------------- 1 | $aside = #233f5d 2 | 3 | @import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700'); 4 | @import 'nib' 5 | 6 | body 7 | margin 0 8 | padding 0 9 | font-family: 'Raleway', sans-serif; 10 | header 11 | .wrapper 12 | margin 0 13 | padding 0 14 | max-width 100% 15 | position relative 16 | .content-wrapper 17 | float right 18 | width 100% 19 | .sidebar 20 | box-shadow 4px 0px 5px -2px rgba(94,94,94,0.81) 21 | text-align center 22 | position fixed 23 | width 420px 24 | margin-right -320px 25 | float left 26 | color white !important 27 | height 100% 28 | background-image linear-gradient(to top,rgb(22, 135, 237) 0%,rgb(20, 55, 90) 100%) 29 | .bio 30 | position absolute 31 | top 25% 32 | left 5% 33 | width 90% 34 | display block 35 | margin 0 auto 36 | .title 37 | h1 38 | font-weight 700 39 | margin-bottom 0px 40 | text-transform uppercase; 41 | font-size 28px 42 | h2 43 | font-size 20px 44 | margin 0px 0px 30px 0px 45 | font-weight 300 46 | letter-spacing 1.6px 47 | .avatar 48 | img 49 | width 140px 50 | border-radius 50% 51 | border 1px solid rgba(255,255,255,0.2) 52 | box-shadow:0 0 20px rgba(255,255,255,0.3) 53 | .desc 54 | width 85% 55 | display block 56 | margin 0 auto 57 | p 58 | font-size 15px 59 | font-weight 300 60 | color #f2f2f2 61 | .social 62 | margin-top: 30px 63 | a 64 | color rgba(255,255,255,0.7) 65 | transition: all 0.2s linear 66 | &:hover, &:focus 67 | color rgba(255,255,255,1) 68 | 69 | i 70 | font-size 28px 71 | ul 72 | list-style none 73 | margin 0 74 | padding 0 75 | li 76 | display inline-block 77 | margin-right 5px 78 | 79 | .content 80 | padding 30px 0 0 60px 81 | position relative 82 | margin-left 420px 83 | clear both 84 | overflow auto 85 | color #777 86 | .title 87 | padding-bottom 20px 88 | i 89 | float left 90 | color $aside 91 | font-size 26px 92 | margin-right 15px 93 | h2 94 | color #555 95 | .item 96 | margin-bottom 30px 97 | h3 98 | color #777 99 | margin-bottom 5px 100 | span 101 | color rgba($aside,0.9) 102 | font-weight 300 103 | p 104 | margin-top 0px 105 | width 95% 106 | letter-spacing 1.1px 107 | line-height 25px 108 | .w33 109 | width 30% 110 | display inline-block; 111 | 112 | .skills 113 | height 10px 114 | position relative; 115 | background $aside 116 | border-radius 50px 117 | padding 6px 118 | width 90% 119 | margin-top 10px 120 | span 121 | display block 122 | height 100% 123 | border-top-right-radius 8px 124 | border-bottom-right-radius 8px 125 | border-top-left-radius 20px 126 | border-bottom-left-radius 20px 127 | background-color rgb(22, 135, 237) 128 | overflow: hidden 129 | position: relative 130 | box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4) 131 | &:after 132 | content "" 133 | position: absolute 134 | top 0 135 | left 0 136 | bottom 0 137 | right 0 138 | background-image linear-gradient(-45deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent ); 139 | z-index 1 140 | background-size 50px 50px 141 | animation move 4s linear infinite 142 | overflow hidden 143 | 144 | @-webkit-keyframes move 145 | 0% 146 | background-position 0 0 147 | 100% 148 | background-position 50px 50px 149 | 150 | @-moz-keyframes move 151 | 0% 152 | background-position 0 0 153 | 100% 154 | background-position 50px 50px 155 | 156 | @media only screen and (max-width: 768px) 157 | .sidebar 158 | box-shadow none 159 | padding-top 60px 160 | padding-bottom 60px 161 | margin-right 0 162 | width 100% 163 | position relative 164 | .bio 165 | position relative 166 | top 0% 167 | left 0% 168 | .content 169 | margin-left 0 170 | position relative 171 | padding 20px 172 | .title 173 | .item 174 | h3 175 | span 176 | display block 177 | p 178 | width: 100% 179 | text-align justify 180 | .skills 181 | width 100% 182 | margin-top 0px 183 | .w33 184 | width 95% 185 | display inline-block 186 | -------------------------------------------------------------------------------- /src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | export default function register() { 12 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 13 | window.addEventListener('load', () => { 14 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 15 | navigator.serviceWorker 16 | .register(swUrl) 17 | .then(registration => { 18 | registration.onupdatefound = () => { 19 | const installingWorker = registration.installing; 20 | installingWorker.onstatechange = () => { 21 | if (installingWorker.state === 'installed') { 22 | if (navigator.serviceWorker.controller) { 23 | // At this point, the old content will have been purged and 24 | // the fresh content will have been added to the cache. 25 | // It's the perfect time to display a "New content is 26 | // available; please refresh." message in your web app. 27 | console.log('New content is available; please refresh.'); 28 | } else { 29 | // At this point, everything has been precached. 30 | // It's the perfect time to display a 31 | // "Content is cached for offline use." message. 32 | console.log('Content is cached for offline use.'); 33 | } 34 | } 35 | }; 36 | }; 37 | }) 38 | .catch(error => { 39 | console.error('Error during service worker registration:', error); 40 | }); 41 | }); 42 | } 43 | } 44 | 45 | export function unregister() { 46 | if ('serviceWorker' in navigator) { 47 | navigator.serviceWorker.ready.then(registration => { 48 | registration.unregister(); 49 | }); 50 | } 51 | } 52 | --------------------------------------------------------------------------------