This Portfolio Site

A Demonstration of Web Developement

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.

Web Development Skills from Scratch

There are always going to be times that a developer needs to know the basics of how to implement HTML from scratch. These can range from needing to tweak or customize a web application to a programmer who writes software that creates HTML on the fly. For this reason, I wanted to give a demonstration of a web site that I wrote from scratch with nothing but a text editor (and no templates). Below is a link to an older version of this web site that I wrote years ago using only a text editor. Please keep in mind that this was before the days of reactive design and I would not have written this site the same way today.

Old Portfolio Site