History
My Acting Resume...
A few years ago, I put my acting resume together for the web and I found that I was very frustrated with the presentation. It didn’t look the way an acting resume is supposed to look. So, I spent hours poking around the web looking for something that would present the unique format of an actor’s resume in a clean and simple way.
I found something but wanted nothing to do with it. Heck, I knew about it before I performed my first search. The <table> tag. There was no way I was going near that deprecated option.
If you’re a web person you’re hand is extended and I’m giving you the hi-5 you’re asking for. >SMACK!<
Tables do the job but they’re awful to screen readers and formatting the text, the columns, rows, etc. can be incredibly annoying. I needed something better, more versatile, more dynamic. I needed Cascading Style Sheets aka CSS.
What is CSS?
CSS is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language (ex: HTML). (Thank you Wikipedia.) In laymen terms, it’s the web tech (one file on your web server) that controls the color, size, font, background, etc. of your website from head to toe. Make a change in that one file and it cascades through your entire site. Hence the name. 
“And then?”
Knowing I needed the code so I could apply it to my website was the easy part. There was one issue…
There was no code to be found. Why re-create the wheel if it already exists?
This meant I needed to create it. Now, I normally don’t create CSS from scratch so this took some doing and some digging. Thanks to the Google and the Intertubes I was able to make magic happen!
Here, let me show you…
Without CSS
What does text look like when there is no formatting applied to it on the web?
It looks like… Agh! My eyes! They’re bleeding! I can’t read that.
Click on the image to see how awful it looks.
Without any CSS everything is squished together. Smoosh!
With CSS
What does text look like when CSS formatting is applied to it on the web?
It looks like… Pretty! The spacing… =o Wait, this is the same text as above but with CSS? Yep.
Click on the image to see it in its full glory.
Ohh, la la. Now that is resume pr0n. Don't drool. =p
Let’s do this!
You’ve seen the before and after results so I hope you’re excited and ready to lose some weight. Some HTML weight. =D
Imagine it this way… Some time next year I’m going to redesign my website again. If I want my resume to look the way it does above all I’ll need to do is paste the CSS I made into the CSS file and voila. Once the file is saved on the server with the update the text will jump into place. It’s that fracking fast and easy!
Let’s step back to the HTML code where all my content is stored.
Sample HTML
Here is a snippet of the code from my acting resume. You can see it in the images above but it’s easier to look at only a couple line because there is a whole bunch that goes into just three lines of resume CSS bliss.
I added a space between each so you can see each of the 3 lines easier. =)
I wanted to paste the code for you so you could take it and use it by filling in your own information but my CSS kept formatting it despite my best efforts with the <code> tag and playing around with the HTML. Hey! Stop frowning! I’ll post a comment with the code so you can copy it there. Mwahahahaahaaaaa! (That didn’t work either. If you’d like the sample code leave a comment below and I’ll send it to you.)
You got it, yea?
The title of the piece, the role I played, the production company, the director and the status of the project surrounded by a bunch of HTML. Easy stuff. Right?
Actual result
This is what the code above creates when it uses the CSS I wrote:
The code above might not be pretty but the end result, mmm mmm mmm, sure is good.
“All this talk about this magical CSS you wrote? Where is it?”
Fabulous question oh Interweb traveler. Voila…
CSS
Below is the additional CSS you’ll want to include in your CSS file for your acting resume on your website.
/* Acting Resume — START */
/* Theatre */
.t1 {
display:block; width:220px; float:left; }
.t2 {
width:235px; float:left; }
.t3 {
width:220px; float:left; }
.t4 {
width:155px; float:left; }
.t5 {
clear:both;}
/* Readings, Poetry */
.r1 {
display:block; width:250px; float:left; }
.r2 {
width:150px; float:left; }
.r3 {
width:190px; float:left; }
.r4 {
width:155px; float:left;}
.r5 { }
/* Film */
.f1 {
display:block; width:220px; float:left; }
.f2 {
width:235px; float:left; }
.f3 {
width:220px; float:left; }
.f4 {
width:155px; float:left;}
.f5 { }
/* Voice-over */
.v1 {
display:block; width:375px; float:left; }
.v2 {
width:220px; float:left; }
.v3 {
width:140px; float:left; }
.v4 { }
.v5 { }
/* Credit: Created by Gary Ploski of http://garyploski.com & http://casthim.com */
/* Acting Resume — END */
Enjoy.
Wrapping things up
There you have it. There isn’t much more I can say but you might have questions.
Please take this CSS/blog and share it with your friends. All I ask is that you include the ‘Credit’ line in any instance it is used.
Techys, have at it!
“Donations are most welcome.” – me
Please use the PayPal button below.
Disclaimer(s)
There is no support included with this CSS. I wrote it for my personal site and it seemed like a good idea to share it with the acting world because we’re all strapped for cash.
At no time should anyone be charged to use this code. I am providing it for free. If you copy this code and charge for it… Shame on you. If you learn that you’ve been charged for the code demand a refund.
I’m not a web developer by day and know, with absolute certainty, that this code can be cleaner but I know it does the job.
If you write CSS regularly and would like to suggest better I am listening. Leave a comment below. =D
Are you a WordPress plugin developer and have an interest in writing a plugin that would make this easier… Oh yea! You would make the acting community über happy.
If you do not understand anything I wrote above but you want your resume to look the way it does on my site on your site, send this page to your web site developer. They’ll know what to do with it.
I hope this is helpful in some way to someone.
Until next time.
Intertube Site(s) using my code:
Gary Ploski is a theatre/film actor, blogger, instructional technologist, web series creator, athlete living and working in the CT and NY area.
Have questions/thoughts? Post a comment...
Click on a button below to share:]]>
In October of 2010 I shot my first feature film in the lead role of a film titled “Rising Star” in Connecticut for 18 day. On Friday the 6th of April 2012 the Official Teaser Trailer was released!
Between Friday and Sunday I watched just under 100 films. You might expect that the caliber of this many films would offer a significant bell curve but that wouldn’t be accurate. Each of the Filmapalooza films had won their respective city during the 48 Hour Film Project meaning they’d all been through a gauntlet already. This meant that instead of finding the good films the challenge was to find which films one would personally relate to during the four screenings.
Like I said, I saw just under 100 films which meant I missed some of the films. >ARGH!< Thankfully the Intertubes has been invented and we have YouTube, Vimeo, and Google Docs. I threw together an open spreadsheet so all the teams that have posted their video to the web could share a link to their film with their fellow creatives.
I’ve been on the go-go-go lately.
Speaking of the National Do Not Call Registry, add your phone number here: 
Since it was the 70′s I needed some inspiration for my facial hair. I could go with a clean shave but I wanted to give it an extra something.
