This week I’ve been working on another personal project. One of my friends is currently training to be an animator, and was the second person to reply when I asked if any of my friends would be a pretend web development client for me. She knows she’ll be needing a portfolio site in the future, so it’s been really good for both of us to work on this.

I’ve been given access to a folder of illustrations, and some of her animation files [I haven’t tackled the animations yet, but I’ve left a space for them] and got to work throwing up a bare bones site so that she would have a starting point in deciding what she’d like.

You can check out the files on github here, or click here to see a preview.

Version 1.0:

I pulled the green colour from one of her images and a font from google fonts. This wasn’t really the style she was going for, but I wanted a starting point, because I know sometimes just asking “What would you like me to build?” can be a bit overwhelming.

I sent her a link to a preview of the site [I have the files up on github] and got some really helpful feedback from her about what she’d like to see. She also sent me a banner she’d come up with using some of her artwork- perfect timing as I had that on my list of things to work on/ask about!

Version 2.0:

After receiving feedback I changed some of the colours, added the banner, and fine-tuned some of the margins and padding.

I wanted the site to be responsive, and was using a lot of percentages for sizing from the start. Ideally, I probably should have done mobile-first development, but I used the logic that most people would likely be looking at the site on a fairly large screen, so I focused on that first. I did add media queries, with breakpoints at 500px wide, and 1000px wide, following the advice to set breakpoints for the design, and not for specific devices. I still have a bit of work to do to make sure it displays perfectly on mobile though- right now some of the elements are not centered properly.

There are a lot of things missing from the site- the image gallery thumbnails don’t link to anything, and the links don’t link to anything either- including the sprites. I’ve also left the videos off the portfolio page for now – I haven’t looked into the most effective way to show them off yet, but that’s probably something I’ll tackle once my friend is happy with the rest of the site.

I feel like I got this site up a lot faster than I’ve been able to in the past, and I’m really excited to keep working on it and keep improving it. If you have time, please take a look at it and let me know what I can do to make it either more responsive, or look/work better in your browser.