On Thursday, June 30, one of my contacts from Busan asked me if I wanted to take over a website project that he didn’t have time to complete. I readily agreed. Here are the details:
- Original project deadline: Tuesday, July 5 (five days later)
- Project template: Solidaire from Theme Forest (single page HTML template)
- Estimated time for completion: 4 more hours
Turns out the time estimation was a little short. Although it did only require 4 hours of work to add all the content and create all the pages, there was still significant work to do to make the site look and function properly. All told, I spent about 24 hours on the project (though the last 6 hours was spent primarily trying to fix ONE pesky, final problem).
Breakdown of the work
Note: A full summary of the <code> modification can be seen on my GitHub repository.
- Day 1
- Receive the project handoff, clone the original git repository to my machine
- Face-to-face Skype discussion with the client + go over her 8-page content plan
- Break the single HTML template into multiple (more manageable) PHP files + add all the content
- Determine the font used in her logo (I determined it looks like Adobe Garamond) and choose a similar Google Font to use in her titles (we chose EB Garamond)
- Day 2
- Make some minor content edits
- Set up the homepage as a Gallery page (based on the template) to allow the animated appearance and disappearance of quotes
- Make the Fancybox video thumbnails (on the Portfolio page) linkable
- Make
<table>s responsive (so rows stack on top of each other on mobile screens)
Less style
Styled for better readability
Responsive style
- Day 3
- Do some more clean up on the responsive code (make things look and behave better on mobile screens)
- Divide the Resume page into multiple files for easier management
- Day 4
- Make the YouTube and Vimeo videos actually play WITHIN the Portfolio page (no more external links) AND behave well (resize nicely) on mobile screens
- Spend most of the day on ONE problem: make the link button on the homepage clickable and display in the right spot (on all screen sizes and page loads)
- Change the favicon (image in the URL address bar)
Read the entire Case Study for this project on my web development blog. (Coming soon)
Pages
The following images show each page of the site and how they display on both computer and mobile screens.
Home
About
Resume
Portfolio
Portfolio Videos
Contact
Reflection
All in all, this was a great project. De Anne was really an ideal client in three ways:
- The amount of thought and preparation she’d already given to the initial Project Brief
- The amount and specificity of feedback she gave during the process
- Her availability and responsiveness throughout the process also made it very easy to touch base with her to confirm or reject project changes quickly
Additionally, the content was rich and well thought out and the imagery was beautifully shot (props to the photographer).
HTML Template
I had my own issues with the HTML template itself, but that’s not because it was poorly coded, rather, that it was coded differently than I’d have personally coded it. But for its own purposes, it was very tightly woven together and ran very well doing what it was intended to do (it was only when I started trying to make it do different things that I ran into problems).
It’s definitely no easy task to sift through, read, try to understand, and then modify nearly 4,000 lines of someone else’s code in 4 days (1,772 lines in index.html and 1,938 lines in the main JavaScript functions file main-fm.js – and that’s only TWO files!), so it really gave me a much greater appreciation for:
- Extensive documentation (exhaustive Readme files with multiple use cases)
- Well commented code (explaining the purpose and usage of various functions)
- Intuitively organized and structured code (that’s easy(er) to follow)
This was a good reminder to me to put in just as much effort on the commenting and documentation of my projects as I do on the actual coding of them. 😉