Creating An Online Portfolio

Absolute Blank

By Stephanie Lenz (Baker)

Once you have some stories or poems to share, you might want to create a website to use as a portfolio where you can gather your work and review it, share it or simply keep track of it. You can think of it as anything from a professional file folder to a fun scrapbook.

If you’re applying for a job where your writing skill is a plus, saying, “You can view my work here” will be a boon. Your prospective employer might also be checking out your computer skills (HTML coding, graphic design, layouts, etc.) so you want the most appropriate website for your writing.

I’m not addressing certain types of writing, such as a weblog or fan fiction. Neither of these is generally the type of thing you want to share with employers, agents, friends or family as your writing sample. Would you take your diary to a job interview or sit down to share it with Grandma Agnes?

If you write fiction, poetry, creative non-fiction or straight-up non-fiction, having a website is a good way to showcase your hard work. There’s no need to hire a professional when you’ve already got the talent to create. Here are a few simple guidelines to follow when creating a website-as-portfolio.

Background Image: Gustavo Peres/Flickr (CC-by-nc)

Where to do it

Find a host. You can use free webspace at a site like Geocities, Bravenet or Tripod. The upside is the cost (i.e. nada) but the downside is that you must have their ads on your pages in return for the free hosting. At free host sites, your username will be part of your URL (e.g.

If you don’t want ads, webspace doesn’t cost a whole lot. Supernova, webhost for Toasted Cheese and for my personal website, has packages that begin at $9/month. Another plus to paying for webspace is that you get your own domain (e.g., Domains shouldn’t cost more than $25 or so. Your domain will be renewed every year for you by your webhost, probably at the same time as you are charged for the webspace. Buying your own domain and webspace has perks like personalized e-mail addresses (e.g.,

Some say that a simple domain name is best ( but I see nothing wrong with something unusual (and memorable) like or If you’d like to use this webspace for something more than your writing portfolio, you’ll probably want a more creative, less writing-specific name. Mine is “,” for example.

You could use your name, nickname, an aspect of your personality or anything you find interesting for your portfolio domain. Please leave “author” “writer” and similar out of your domain; you can have a page with that title if you like (e.g. and title the page “Saffron’s Writing”) or a subdomain (e.g. writing/ Don’t make your domain the title of your unpublished masterpiece (e.g. If you decide to abandon the story or retitle it, you’re still stuck with the domain, which is then meaningless (and a little silly). One place to find inspiration for your domain name is in favorite quotes. My domain is a combination of two nicknames; it has no real meaning to anyone outside my household but I liked the neutrality of it and it has a memorable appeal.

How to do it

  • Learn some HTML (hyper-text markup language). I taught myself via Geocities and by doing a “view/source” on pages I liked. Now I do all my own hand-coding in Notepad. You can use webpage design programs like NetObjects Fusion or create a page using something like Word (with which you’re probably already familiar), “save as HTML” and then upload it. This method is good for converting long documents (like stories) to HTML quickly because it saves you from manually adding paragraph breaks.For my time and trouble, I prefer doing it without a program. I can keep my layouts simple and uncluttered. Knowing simple HTML can allow you to create tables, frames and other nifty tricks that will allow for easy navigation. More on that later.
  • Pick a pleasing color scheme. Since your pages will be text-heavy, I recommend a light background with dark text (e.g. black on white—Toni Morrison’s Nobel Prize page). You’ll probably want to be a little more adventurous than black and white though. Pick colors you like and keep a similar color scheme throughout. A good place to try colors together is the VisiBone Color Lab. Get ideas for color combinations from other webpages (or from your wardrobe, wardrobe, even your kitchen pantry, if you’re adventurous). An example of a writer-centric page using a bit of color (pretty taupes and shades of sage with mostly black text) is Anne Frank The Writer via the American Holocaust Museum’s website.When you get feedback on your portfolio pages, ask about the color scheme in particular. You don’t want readers to have to highlight your pages in order to read them. Remember: red is very hard on the eyes when reading and yellow is the hardest color for the eye to see—probably two shades to avoid for pages dependent on readers.
  • Test your finished page in different browsers. Popular browsers include: Internet Explorer, Netscape, Opera and Mozilla. You might also want to check screen resolutions while you’re at it. Just look at the taskbar on the very bottom of your screen. See an icon shaped like a computer monitor? Right-click on it and choose a resolution (800×600, 1024×768, 1280×1024, etc.). You can always return to your favorite resolution.
  • Ask a friend what she thinks. Have someone surf to your website with fresh eyes and ask for brutal feedback. After all, this is representative of you and if it makes your visitors flee, that’s not a good sign. Ask her to click all the links, proofread all the stories and give you an overall assessment. You’re a writer—you know how to accept critique.

Designing your webpage portfolio

Make your index page as simple as possible. There’s no need to put everything in the world on your introductory page. No one should have to scroll more than three times down your front page. The length of your story pages depends on the stories and is hard to control but readers expect to scroll in order to read articles and stories. Try a small graphic, a basic site map or a “welcome” message with some links. I created an example of a bad intro page here but even Geocities’ Pagemaker program wouldn’t allow me to make the page more than three scrolls!

If you have several pages, create a “site map” or “navigation” page for visitors. Toasted Cheese’s site map is here. This will be especially handy if you use the site for more than your writing portfolio.

Frames can help with navigation. Most everyone should be frame-compatible by this point. I use a frame on my writing portfolio page. Some people don’t like frames because you cannot bookmark the framed page and inexperienced web designers have a tendency to cause links to pop up within the frame, creating a frame in a frame in a frame…

If you’re experienced or have someone to help you code and you’re using your portfolio only for stories, I see nothing wrong with using frames. Just watch your link coding and be sure to include a “back” or “home” link on the pages within the frames. If you’re unsure, stick to frame-free browsing.

Tables also keep a page looking neat and no one need know you’re using tables to do it. Toasted Cheese’s index page uses CSS, which looks like table columns. Either method keeps a page looking neat and adjusts for different screen resolutions. Tables are also nice if you’d like to use an unusual background color or a background graphic.

There are several sites where you can learn about creating tables or frames. I have listed some at the end of the article. Just use Google or another search engine to find more free coding tutorials. If you see a page that inspires you, click on “view” and then check out “page source” to see the coding for the color, font name or whatever it is that you’d like to replicate. You can read and copy the HTML coding and play with it on your own pages; just don’t outright steal the coding for yourself. Most of what I know about coding, especially how to do frames, I learned from reading page sources.

Keep your graphics to a minimum for your writing pages. A set of graphic buttons or a tasteful logo would be okay but sparkly dancing unicorns are right out. After all, this page is about your writing: stick to text.

Using the same graphics on each page would be okay, since the reader’s computer will cache (i.e. remember) them and it won’t take long for the pages to load. Using your bumblebee graphics theme on page 6 and your ladybug layout on page 7 will cause even broadband users to tap their fingers (and scratch their heads, once the page loads).

If you’d like to use tasteful, attractive graphics but don’t know how to make them, Full Moon Graphics is a good place to start. You can download free graphic sets, many of which work well for writers, themewise. While there, check out Kitty’s advice on creating webpages and her resources for webmasters. I learned a lot there myself when creating my earliest pages and I still check the site often for ideas and advice.

Create a writer biography. One of our Pen In Each Hand exercises accompanying this article is to use our template to create a writer bio or “artists statement.” It’s not about how many stories you’ve published or how many contests you’ve won. It’s about sharing your artistic vision with people who are interested in reading your work. Try it and see!

Include your contact info. You need an e-mail address just for business purposes (i.e. your submissions). Gmail, Yahoo and Hotmail provide free e-mail addresses and you can have as many as you like. If you set your page up at Geocities, you also get a Yahoo e-mail address (e.g. and Again, please avoid using “write” or “author” or similar in your e-mail address. As I wrote in a previous AB article, “Stick with something like your real name, like sarahjessicaparker or sjparker or sarahjess.” When we’re selecting our e-zine picks, we refer to the author’s last name in our editorial communications. Make it easy for editors to remember your name.

You also want the address you send from to be yours and yours alone. It can be confusing for editors looking for the “Sarah Parker” story when the sender line reads “Matthew Broderick.”

If you use an AOL address, I highly recommend that you do not use it for your submissions, queries or other writing business. AOL truncates (i.e. cuts off) paragraphs, often in mid-sentence, once they reach a certain character limit—very bad for writers submitting prose. AOL also lists the sender as something like “jrpvegan1974” instead of “Joaquin Phoenix.” Editors and agents like the convenience of knowing which e-mail is yours by a glance at “sender.” AOL also identifies some organizations as “spammers” when they are not; Toasted Cheese is one of the literary journals wrongly identified this way. If AOL bounces the acceptance e-mail for your story, it’s possible the editors could move your piece to the slush pile in favor of someone they can contact.

Your portfolio

Back in the old days (okay, the mid-90s), I would take my yellow writing portfolio from interview to interview so potential employers could glance over my articles, news photos, poems and short stories and get an idea of my skill level and experience. If I were interviewing today, my resume would include a URL that an employer could check out even before calling me for an interview. The convenience on all sides is much improved.

Up to this point in the article, we’ve talked about the look and layout of your portfolio—the “yellow folder” aspect. Here’s where we talk a little about what’s inside the yellow folder.

  • Published stories/poems. Anything you’ve published, online or in traditional print, should be on your website so long as you have the rights. Sometimes it’s hard to find a copy of an old print article or your college lit journal but it’s worth a try, especially if you’re a little low on more current credits. If you can’t find the story, you can just include a mention in your writer bio or on a list of “published work.” Additionally, this is a place for you to gather and show off your stuff—you’ll want as much as possible!
  • Excerpts from longer work. If you’ve finished or are working on a novel, why not include an excerpt from what you’ve finished? Don’t worry about whether it’s considered “published” at this point; a small excerpt or first chapter won’t matter. If you have a longer short story published, putting a teaser on your page might be more fun than including the whole story. Get your visitor interested in reading the other samples on your site. If you’re uncomfortable sharing an excerpt, write a synopsis of your novel. It’s good practice for your query letters.
  • Unpublished work? This is a tough question and I think it’s best left up to the author to decide if she wants unpublished work on her webpage. I have a few unpublished flash pieces in one of my writing portfolios (more on that later) because they’re quirky and were specifically written for a publication that no longer exists. Instead of shoving them in a drawer, I added them to my page. Remember: unpublished doesn’t equal unworthy. Academic writing (essays, papers, an unpublished thesis, etc.) can be helpful in demonstrating your areas of expertise or your skill at non-fiction writing.
  • Non-fiction—what do I include? Most articles should be included, especially any about writing. Don’t include letters to the editor unless you believe they are exceptional pieces of writing. Avoid articles about religion and politics on your portfolio pages; if you like, you can categorize them and visitors may have the option of reading them that way. If you plan to share this URL with employers, it’s a bad idea to put your personal convictions on display. The exception would be if you intend to get work in a religious or political field, where these would be appropriate. Use your best judgment.
  • To blog or not to blog? If you plan to use your portfolio professionally, I would keep the personal weblog out of it. If you have a “writing blog” where you blog about your submissions, rejections, acceptances, setbacks, triumphs and other aspects of your writing life, it could be fun to link to it from your portfolio. A rule of thumb is: link if it’s relevant and if you wouldn’t mind your employer finding out all about your personal life. Sure it’s writing but is it the kind of writing you would include with your resume? Remember: unless your blog is password-protected there’s always a potential that your employer might find it and you can be “dooced” (i.e. fired for your weblog).
  • Splitting genres If you write in several genres, you might want to split them into sections (mainstream fiction, sci-fi/fantasy fiction, poetry, articles, etc.).If you write erotica or fanfic, give these their own separate portfolios (or subdomains or domains)—make them “their own thing.” You can follow the same page template, for continuity, but not everyone wants to read these genres (if your prospective employer wants to read your erotica… what’s the starting salary and is there a dental plan?)I recommend a “click if you’re 18” front page for your erotica (or slash) portfolio. It’s not foolproof but it helps cover your butt. You can always include a link from your “vanilla” portfolio to your erotica or fanfic portfolios. Don’t forget a reciprocal link; your erotica and/or fanfic portfolios will get many more hits than your mainstream portfolio and you can draw visitors from them.
  • Non-writing creative work? Photos and other artistic expressions can enhance your writing pages, so long as the pages load quickly and the layout is good. If you are looking for a job as a reporter, for example, an editor might be interested to see your photography skills at work (and your eye for a layout). When I was a stringer for a weekly, I was sent on photo-only assignments as often as writing-with-photo plus writing-only. If your paintings, beadwork or sculpture are relevant to your professional writing life, include images with your stories. If they aren’t or if you feel you’re stretching their relevance to make them fit, give them a separate section. Your site map will point people toward what they want to surf. Besides, if people like your writing, they’re very likely to seek out what else you create.

Nifty add-ons

Sound files Writers and poets who read work aloud could always include a list of clickable .wav files of readings (live readings in front of an audience would be a great idea). It would probably enhance your webpage to allow visitors the experience of hearing you read your work. Allow these readings to be an option, not a requirement for your visitors. Use Google to find information on how to create and upload sound files.

Unless you are Anne Rice: no music. Unless a site is music-related, I don’t like to hear anything when I surf to it. Don’t make people click away or lunge for their volume control when a midi of “Everything I Do (I Do It For You)” comes wafting from your webpage.

Custom 404 pages We’re all familiar with a 404 page. Why not make yours a little bit fun and quirky? TC’s 404 page lets you know that the page was “eaten by a boojum.” My personal website’s 404 page is text from 2001: A Space Odyssey, complete with HAL9000’s “eye.” Include a link to your index page and/or site map and an e-mail address so that vistors (hopefully) report the broken link that gave them the 404 error. There’s a step-by-step tutorial at HTMLSource that you can use.

Remember: it doesn’t matter if your web portfolio is full of fancy flash designs or it’s just black text on a white page. The most important aspect of the portfolio is its content. Don’t let your portfolio get stale—keep writing!

Some good how-to sites:
HTML Clinic
HTML Goodies
Web Pages That Suck

Examples of online portfolios:
Michael Noble
Ben Jordi
Chad Fasca
Amy Parkison
Elizabeth Pena
Kelly Rothenberg
Timons Esaias
Leila Eadie
Tara Lynn Johnson

Final Poll Results