Creating Your Portfolio

The first site we are going to look at is a pretty famous developer portfolio, but it is something you should be able to do given your experience and a bit of work.  As you look it over, there are a few effects that make the page interesting, but most of them are the HTML canvas at the top of the page with those lines that are highlightable and little animations as you scroll down the page.


Take a look at this assignment you made at the end of week 2.  The general layout should look quite similar to what Matt created for his site.  You could replace the red background with an HTML canvas based effect found on this list.  Then you would have to add a few sections like the one he created for his skills and for a blog.  Also, do some basic styling and add in those animations using some of these techniques.


It is not hard to see how you could go about building an awesome portfolio like Matt’s.  There are a few issues with his site as he hasn’t maintained his links to his blog, for instance and he doesn’t talk as much about what he did for his projects.  This next portfolio has a very showy canvas based effect, but the rest of the site is much more straightforward.  One thing to note about this site is that the author did a great job of explaining the technologies and things he did with each project .  With this description, you get a much better idea what each project ment in terms of development.  We would recommend you also include a github link so people can look at your code as well.


There are plenty of designs you could get inspired from.  Here is a list of 40 free templates.  You could look through these and see if one sticks out to you.  You have access to the code so it should be easy to modify one of them to get the exact look and feel you want.  The skills to make a portfolio were learned back in week 2.  All you need is HTML and CSS.  You are welcome to add a few effects like animation, HTML canvas or the like to get the portfolio to pop a little, but you don’t necessarily need react or any advanced skills to make an excellent portfolio.

We didn’t talk too much about filling in the content of the website with meaningful work.  You should have two capstone projects, one e-commerce site and a web story book application.  That is a good start on full stack projects for your portfolio.  You should think about blogging a bit.  You could build your own blogging platform as a good portfolio project or use a free platform like WordPress or Blogger.  You can include smaller coding “challenges” that implement a small programming problem.  These would go in a different section from your full stack projects.  The key thing with these is that they must include a fun or catchy GUI that makes interacting with say a palindrome finder fun and easy.  If you include both blog posts about code and little coder challenges along with the major projects you completed as well as the intro and skills sections, you should have a pretty robust portfolio that shows off your skills and interest in coding well.