Assignment: Personal Portfolio

Use your newfound abilities to fashion yourself a portfolio of your recent code accomplishments.

Scroll down...

Content

Resources

Comments

You've seen a lot of Express in this unit. Now, it is finally time to express yourself...

For this assignment, you must create a portfolio website, from which you can link to all of your past code conquests. Previously, you might have been able to achieve this with raw HTML and CSS, but now you must have your portfolio be generated by Express. That way, when you finish this very project, you'll be able to quickly add its JavaScript object representation to a file and get your site up to date immediately.

Getting Started

  1. Collect information regarding your past coding projects. Think about what kinds of information you would like to display for each. You should at least include:
  • The project's name
  • A list of the technologies used
  • A link to a GitHub repository
  • An image of the project running (either from the browser or command line)
  1. Fork and clone the project's Github Repo.

  2. Create a new Express application using express-generator.

  3. Use the data you collected to build an array of instances of a Project class. This should be contained within its own module, such that it can be required in your routes.

  4. There should be an index page with each project listed along with some of its information.

  5. If you click on a Project, it should take you to a page for just that project. This page should contain some additional information or description that was not available on the index page.

  6. (Optional) Style it to your hearts content using the helpful style.sass file the generator has bequeathed you. Google "express.static middleware" if you're curious as to how the CSS is being served.

Finishing Up

When you're finished with all tasks, push your changes up to your fork (aka $ git push origin master).

Solution 300 Pull request 300 Octocat 300


Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: Introduction to API Interaction