GithubHelp home page GithubHelp logo

mehmetyagci / react-resume-template Goto Github PK

View Code? Open in Web Editor NEW

This project forked from tbakerx/react-resume-template

1.0 1.0 0.0 12.66 MB

A personal resume website template built with ReactJs

License: MIT License

CSS 46.97% HTML 0.88% JavaScript 52.15%

react-resume-template's Introduction

React JS Resume Web App Template

ReactJS Resume Website Template

Description

This is a ReactJS based personal resume website template. I have built this by following a Udemy course (credits below) and by beginning with the Ceevee template by Styleshout (credits also below), and breaking up their template into isolated React components. Data is fed directly from a JSON File. This means that in its final form, it can be customized and used by anybody simply by filling in their own personal info into the JSON file and the changes will be dynamically fed into the site. If you would like to use this template for your own personal resume website, read on to learn how to build your own copy.

Make it Your Own!

1. Make sure you have what you need

To build this website, you will need to have Node >=6 downloaded and installed on your machine. If you don't already have it, you can get it HERE

2. Build a Create-React-App

Next, you will build the initial application using a handy tool called Create-React-App. This allows you to get up and running with a React app without the headache of setting up build-tool configurations. Go HERE to get started. When the app building is finished run cd yourappname and run npm start to test it out. Hit ctrl+c in the terminal when you want to stop the server that the above command starts. For this project we will also need to install JQuery and ReactGA, do this by running npm install jquery --save and npm install react-ga --save in your terminal while inside your project folder. YOU MUST RUN THESE COMMANDS.

3. Download the template

Once you have a React app up and running by following the steps in the above link, download my code by hitting the green "clone or download" button above and hit download zip. All you will have to do now is replace the "public" and "src" folders of your newly built app with mine that you just downloaded. If you run npm start now, you should see that your app renders the same as the one at the live demo link above.

4. Replace images and fonts

Next, you will want to replace the images, and fonts if you like, with your own. All you have to do is replace the images at public/images/header-background.jpg, public/images/testimonials-bg.jpg and public/favicon.ico with your own. YOU MUST KEEP THE SAME NAMES ON THE IMAGES.

5. Fill in your personal info

To populate the website with all of your own data, open the public/resumeData.json file and simply replace the data in there with your own. Images for the porfolio section are to be put in the public/images/portfolio folder.

6. Make any styling changes you would like

Of course, all of the code is there and nothing is hidden from you so if you would like to make any other styling changes, feel free!

7. Enjoy your new Resume Website

When you're all done, run npm start again and you'll see your new personal resume website! Congratulations!

Credits

Udemy Course

Projects in ReactJS: The Complete React Learning Course by Eduonix

HTML Design Template

Ceevee Template by Styleshout

Header photo credit

Casey Horner

Testimonial photo credit

Samuel Zeller

react-resume-template's People

Contributors

alminisl avatar dh4u avatar myersjac avatar tbakerx avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.