Build a CV landing page template with React and Google Material Design

Trung Nguyen - 3 years ago
Build a CV landing page template with React and Google Material Design

This is a FREE CV template build with React and Google Material Design which is a one-page template with a navigation bar and 4 sections About, Skills, Education, Experience.

This template is suitable for portfolio websites, profile websites. You can also customize it to use for other purposes.

There is an attached Zip file which you can download and use it for Personal and Business purpose.

If you like this template, please follow my profile and download more FREE template from me.

 

To learn how to build this template by watching video, this is the tutorial link

https://www.youtube.com/watch?v=la11Z4FvPk0

 

You can also follow this instruction step by step to build the CV landing page using React and Google Material Design

 

Step 1: Setting up

 

1. Go to https://nodejs.org/en/ to download and install into your machine

2. Open Terminal (on Mac) or Command Prompt (on Window)

3. Using the command to go to Desktop folder

4. In Desktop, please type this command "npm i create-react-app"

5. Type "create-react-app mycv" to create React project name "mycv"

6. Go to mycv folder by using this command "cd mycv"

7. Using VS code or any editor tool to open mycv folder, here I am using VS code so I type this command to open it "code ."

8. Press Ctrl ` on your keyboard to open Command Prompt or Terminal which is integrated into VS code.

 

Step 2: Install Google Material Design Library

 

Visit https://materializecss.com/ and select Get Started, copy this code "npm install materialize-css@next" and paste it into your Terminal  or command prompt (make sure you are inside "mycv" folder)

 

Step 3: Install React-Router-Dom

 

Typing this command "npm install react-router-dom" and hit Enter.

 

Step 4: Install Font Awesome and jQuery

 

1. Visit this URL to download font-awesome https://fontawesome.com/

2. You need to create an account if you don't have it.

3. After creating an account, log in and create a font kit, copy that font kit

4. Go to your react app, click on the index.html file and paste this font kit in the head section

5. Go to jquery.com, click Download jQuery, scroll down and select Google CDN, copy the latest jQuery version, it should be like this

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

 

6.  Go to index.html and paste this jQuery code above the closing body tag.

 

Step 5: Link Google Material Design Library

 

1. Now, we need to import Materialize CSS into our React Project.

3. Open App.js and type import lines, your App.js should look like this 

import React from 'react';
import './App.css';
import 'materialize-css/dis/css/materialize.min.css';
import 'materialize-css/dis/js/materialize.min.js';

function App() {
   return (

      

   );
}

export default App;

 

You can see that we clean all default React code in the App.js file and leave it like that for now.

 

Step 6: Create React files and import React-Router-Dom

1. Right-click the src folder and create folder name "components"

2. Now, right-click on the "components" folder and create the file Home.js, and do the same to create Navbar.js, About.js, Profile.js, Skills.js, Experiences.js, Educations.js, Portfolios.js

3. Open App.js and type as the following code

 

import React from 'react';
import './App.css';
import 'materialize-css/dis/css/materialize.min.css';
import 'materialize-css/dis/js/materialize.min.js';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home.js;
import Skills from './components/Skills.js;
import Educations from './components/Educations.js;
import Experiences from './components/Experiences.js;
import Portfolios from './components/Portfolios.js;

function App() {
   return (

     <Router>

         <>

           <Route exact path="/" component={Home} />

           <Switch>

               <Route path="/skills" component={Skills} />

               <Route path="/educations" component={Educations} />

               <Route path="/experiences" component={Experiences} />

               <Route path="/portfolios" component={Portfolios} />

           </Switch>

         </>

     </Router>

      

   );
}

export default App;

 

If we type "npm start" in terminal or Command Prompt and run it, we will get errors because all the files that we created above Home.js, Navbar.js, About.js,... are still empty.

We need to import React into those.

 

comment 1
favorite 13
visibility 6117
get_app 284

People responses (1)

For posting a new comment. You need to login in first. Login

Leon

Leon 1 year ago

bị lỗi khi chay bước này "npm i create-react-app" : npm ERR! code E404 npm ERR! 404 Not Found - GET https://github.com/facebook/create-react-app/create-react-app - Not Found npm ERR! 404 npm ERR! 404 'create-react-app@*' is not in this registry. npm ERR! 404 npm ERR! 404 Note that you can also install from a npm ERR! 404 tarball, folder, http url, or git url. npm ERR! A complete log of this run can be found in: