Skip to content

YigeZhu/PersonalWebApp

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Personal Web App

Check it out at: https://pacific-plateau-64936.herokuapp.com/

Make sure you've followed all instructions for BaseWebApp

  1. Add new app pages: Add pages called about.ejs, projects.ejs, contact.ejs to html/pages. These files can be empty for now, or you could add something like <h1> Hello! </h1> so you know it's rendering.

  2. Add routing - modify your server-side code in project/start.js to support routing. See code here

*Since this updates the code that runs on the server, you need to restart your server to view the changes locally. You can do this by pressing control + c, and then then running heroku local web again.

    app.get('/', function(request, response) {
      response.render('pages/index');
    });

    app.get('/about', function(request, response) {
      response.render('pages/about');
    });

    app.get('/projects', function(request, response) {
      response.render('pages/projects');
    });

    app.get('/contact', function(request, response) {
      response.render('pages/contact');
    });

  1. Add a file to your helpers called navbar.ejs: https://github.com/zsobin/PersonalWebApp/blob/master/project/html/helpers/navbar.ejs

  2. Add that navbar to all of your app pages (index.ejs, about.ejs, projects.ejs), and contact.ejs so that people can navigate around your app:

  <header>
    <% include ../helpers/navbar %>
  </header>
  1. Copy all the CSS over to your project/css/main.css file so your pages look a little prettier! https://github.com/zsobin/PersonalWebApp/blob/master/project/css/main.css.

  2. Make it your own!

    • Change images to your own
    • Add your own project descriptions and bio
    • Add more pages + routing
    • Style it to look prettier! Check out the components available through bootstrap here.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 76.6%
  • CSS 12.2%
  • JavaScript 11.2%