Little by little, I’m revamping my website. But going at a snail’s pace is really difficult when you know what you want to do but … not how to do it. I knew I wanted my portfolio page to be separated into sections (latest work, work done for hire, etc.), but I couldn’t decide how best to present that information. I had originally listed oodles of thumbnails which, when clicked, gave you larger images. But who wants to do all that clicking? I liked the idea of having big images visible without an extra click, but I wasn’t sure how to show all of them at once. Splitting each section into scrollable parts was irritating and aggravated my tendonitis with all the places to click and drag.
Finally I discovered all these gorgeous, endlessly side-scrolling websites like JessicaFortner.com and Klas Fahlen (both recommended by HOW) that I desperately wanted to emulate. But, the sneaky thing they both had that I couldn’t for the life of me figure out was the fixed menu. The images could scroll beautifully by, but a fixed header? Surely you jest.
Since my approach to web design leans toward the haphazard and CSS still makes me a bit squeamish (we’re getting to know one another, but we haven’t exactly gotten to any bases yet), I wasn’t sure I’d be able to work this one out.
BUT! I am thrilled to announce that after hours of frustrating trial and error, ending with just a wee bit of CSS wrangling (mainly adding <div> tags around the parts of the page I wanted fixed, and adding a position:fixed style to them, then putting the scrolling items in a table surrounded by <div> tags – you can check my code for the messy deets), voila!
A shiny new portfolio page!
So far only the “recent work” and “for hire” areas are ready to be seen on the side menu, but there’ll be plenty more adding and adjusting to come. I was just too giddy giddy gumdrops not to share this!
Oh: and also, as stated, I was so excited to get this up that I’m sure there will be browser conflicts – if you encounter any, please let me know! And if you’ve the wherewithal, feel free to throw any suggestions my way in how to make it work!