Here’s an update about the design and colophon of this website, and what I want to do next.
Currently, this website is made using HTML5, along with WordPress for the blog. I coded the static pages from scratch, and designed a consistent theme for WordPress using _s (you can read more about the tools I used at the end of this post.) For the static pages, I used a starter template for accessible websites that I developed last year, and designed on it using Sass, complied via Codekit.
Now, I’m thinking about how I want my portfolio to look.
On Sketch, I mocked up what I want my portfolio to look like. On desktops, I want a layout that has each portfolio item in a section divided into two columns. Alternate sections will have the image and text on either side, which will contain a title, an introductory paragraph about the portfolio item, and a call-to-action link for users to view the entire project.
On mobile, this two-column layout would switch to a single-column layout. Since Bootstrap is mobile-first, it makes responsive design very easy. This is what I want each portfolio item to look like:
For this project, I’ve used these great set of tools:
- Sketch is a tool that lets you design user interfaces. It’s better than Photoshop for UI/UX design because it supports multiple artboards and pages, so you can easily take your design and make an interactive prototype. It also has a much smaller file size, and uses vector shapes, so it can export assets easily to SVGs or nx PNGs.
- WordPress is a free and open-source CMS. This website is running WP v4.8.1 with the Gallery Lightbox Lite plugin.
- VS Code is a source code editor by Microsoft that has an integrated terminal, built-in Git support, and intelligent code completion and snippets so it makes designing themes for WordPress very easily.
- _s is a WordPress starter theme that makes theme development super easy. It writes all the complicated PHP for you and lets you build on top of weeks of development, instead of starting from scratch.
- Bootstrap is a HTML5 framework known for its grid system and CSS components.
- Sass is a scripting language that compiles to CSS. It lets you write more powerful CSS using variables, advanced selectors, and feature rich. It’s CSS with superpowers.