Create a Portfolio Site

From Frontal Wiki

Jump to: navigation, search

We know what a pain it can be to develop a portfolio site. The following provides step-by-step instructions and code for creating your own unique, fully customized online portfolio. You'll be able to change and manage everything from colors, to layouts, to content. Even those of you with no web development experience will find this cookbook code easy to use. We hope you like it. If you have any questions, just go to the Forums and ask. Someone there will be happy to help.


We will be starting with this Portfolio site:

File:PortCookbook_ex06.jpg
View site
View code


Here are examples of two sites created using the Portfolio Cookbook:

File:PortCookbook_ex03.jpg File:PortCookbook_ex04.jpg
View site
View code
View site
View code


STEP 1: Create An Account
The first thing you’ll need to do is create an account on the Frontal website so that you can save your work.


STEP 2: Access The Frontal Workspace
Rather than start from scratch by creating new code for your portfolio site, we’re going to use existing code from the Frontal Showcase to get a jumpstart.


STEP 3: Choose Your Colors
Before we begin to customize your portfolio, you should select a set of colors that you’d like to use.


STEP 4: Select A Font
Now, which font(s) are you going to use for your site?


STEP 5: Main Menu
Let’s change the layout of the main menu.


STEP 6: Home Section
Now it’s time to start working on the individual sections of your site. Let's start with the Home Section.


STEP 7: Projects Section - Overview
The projects section can be broken down into two separate parts: an overview of all projects and a detail view of individual projects. For now, let’s focus on the Overview.


STEP 8: Projects Section - Details
Now let’s move on to the second part of the Projects section – the Project Details.


STEP 9: About Section
The section where you tell everyone a little about yourself.


STEP 10: Contact Section
Show everyone how to get in-touch with you.


STEP 11: Editing Transitions
Add additional visual excitement to your portfolio.


STEP 12: Deployment
You can host your portfolio site on Frontal (for free), or deploy it at another web address.

Personal tools
Get Adobe Flash player