A Collection of Development Projects That is a Development Project Itself
To build this website I focused on strong reactive design techniques. This website will resize and rearrange itself to display all content clearly on any screen size. You can see this yourself by opening this website on a mobile device, a tablet, and a desktop PC. On a desktop PC you can also see the changes in real-time by changing the horizontal size of your web browser's window.
In the dark ages of web development many developers had to create multiple versions of the same website. If you visited a website you would often see a link to a "mobile version" of the same site. Mobile devices were just coming onto the scene and they often did a very poor job of rendering websites in a readable/usable manner.
Enter reactive design. Reactive design techniques allow modern developers to create a single website that will modify its content sizes and it's layout based on the size and resolution of the user's viewing screen. This not only ensures that all content is clear and visible on mobile devices, but also conforms to the dimensions of the viewing window for the web browser on a user's desktop PC.
To build this web portfolio I used the following tools:
- Pinegrow Web Editor
- GIMP (GNU Image Manipulation Program)
- Notepad++
Although Pinegrow Web Editor is a great tool for setting up a framework for a website, it has a lot of limitations as far as customizing content. I had to edit the HTML and CSS directly to make the generated framework match up to my mental design image. I also had to add additional meta data for JavaScript and for linking to the site from other applications such as Facebook.
