Website

August 2014   Love

This page documents the build process I've put into this website. I've always felt a need to document my work as I build projects, so I decided to make this site. It's been quite a learning process and has been an off-and-on side project of mine, mostly something I chip away at while not in school.

Web 0.0

I label this site "0.0" because it's not really worthy of its own version number.  I made this after taking the HTML and CSS courses on Codecademy.  Pure HTML and CSS.

Web 0.0

Web 1.0

Web 1.0 was my first website that I completed around January of 2015 and comprises of HTML, CSS, and javascript.  In this site, I came up with the initial design that is still semi-present today: sidebar on the left side of the page, a nav-bar that resides under the logo, and the main content section where I place content.  This site was also the beginning of the slider that is on the home page of all versions past this one.  This is a four frame slideshow that plays continuously and pauses when the mouse hovers over it.  Radio buttons are also available for navigation of the slider.  The slider on Web 1.0 has different styling than the one currently in use, however, the javascript backbone remains relatively unchanged. 

Web 1.0

Web 2.0

Web 2.0 never really took off, but served more as a concept for styling.  I drew inspiration from other sites on the internet and compiled things I liked into this version.  This site contains many broken links and was never made dynamic - something I fix in V3.0.  Like V1.0, this site required separate HTML content for each project post - something I didn't like.  Rather than trying to populate this site, after getting the styling down, I began work on V3.0. 

Web 3.0

Web 3.0, the current version of this site, runs on Ruby on Rails.  It's a dynamic site that allows content to be added without having to type directly into the code itself.  I use Amazon S3 as storage in the cloud for large files, such as images.  I am currently using Heroku as a platform to deploy this web app.  Admin(s) have access to an administration panel that allows for posts to be updated, saved, published, unpublished, or deleted entirely. The admin panel displays some simple analytics such as count of total posts, count of published posts, and count of unpublished posts.  Admin also see a table of all the published and unpublished posts.

Admin Panel

Since many of my projects are iterative, and normally do not finish overnight, I did not want to string a lot of little blog posts together to documents builds.  Instead, I wanted one dedicated page for each post that can be edited and added to as the project progresses.  This consolidates knowledge and information onto one page - something that makes more sense to me.  Thus it is possible for a project page to be created, go dormant for a while, and then appear under the "Recent" section in the sidebar when things have been added to the page. 

I am using TinyMCE as a WYSIWYG (what you see is what you get) editor.

The four most recently published projects are displayed in the slider on the homepage, and again displayed as a group underneath the slider so they may be viewed as a group.  The most recently published project is displayed under the "Recent" section on the sidebar.  Also in the sidebar is an archives section.  Clicking on the date will reveal a drop-down of project(s) that were started during that time.  Dates refer to start dates and are not updated if a project page is updated.

Web 3.0

Web 4.0

One may notice that the stying of Web 4.0 is different than Web 3.0!  A lot of things have changed.  Web 4.0 now serves as a portfolio for both Henry and Elizabeth, hence the new name: "Bianchini-Love Engineering" (BLE).  Stying has been re-done and the site rebranded to "BLE", including a new domain name.  An "owner" attribute is added to each post that allows the author to designate who completed each project.  This is ultimately shown using "badges"

The most exciting functional element of Web 4.0 is the ability to upload accompanying documents to project posts.  This feature is supported by Active Storage, introduced by Rails 5.2.  This was quite the transition as the entire website had to be upgraded to a new version of Rails, a daunting task for any Rails developer.  As with the images before, project documents are stored using Amazon's S3 storage service.