My Personal Website

This repository is for my personal website.

The web pages are static. Why? Why not a full CMS? The reason is the intent. The content rarely changes. Given that static pages run faster, there's no need for a database or a CMS like WordPress.

BUT my Hello World blog is a WordPress website. You can check the custom Genesis-powered child theme here.

Features:

Well, let's see....It uses:

Flexbox to achieve the checkered boxes
Sass - of course, I'd use Sass as it's a more efficient approach to styling.
Animate.css
jQuery

I'm also using Bourbon and Neat, though I'm slowly removing these 3rd party libraries and opting for native CSS.

My favorite task runner is gulp. I'm using UpGulp, which is included in this repository.

Design Elements

I get a lot of questions about the design elements.

First off, this website is my playground. I like taking a different approach and stretching my design abilities. BTW, I am not a designer. Rather, I'm an engineer. So it's a struggle to push my design creativity.

But let me talk about some of the design elements to guide you.

Checkered Grids and Boxes

You may notice that there are different types of grid patterns. I like creating a checker-box design, probably from years of playing chess and checkers. My mind just goes to the checkered box look.

There are 4 different types of design patterns, each of which has a CodePen for you to fork and play with:

Checkered Flexbox 2-Column - see on CodePen
Reversed Checkered Flexbox 2-Column - see on CodePen
Half-Background Checked Flexbox List - see on CodePen
Reversed Half-Background Checked Flexbox - see on CodePen

The Sass module for all of these grid patterns is found in assets/sass/modules/grids.

Section Title

I had some fun with the section titles. Did you notice? For each section of the page, I added:

A light background text and then right aligned it.
Keyword in the bottom left sidebar (fixed and rotated 90 deg). This keyword changes as you scroll down the page.

As you scroll down the page (on a tablet or larger), notice that the bottom left sidebar keyword changes. See it? Oh come on, you have to check it out. Let's go to the home page. As you scroll down the page, notice that the "hello" changes to "me" and then "we" and then "faq".

The changing of the keywords is handled by jQuery. It checks to see if a new section is now visible on the screen. If yes, then it grabs the data attribute message and inserts it into the DOM. Check out the assets/js/jquery.page-background-text.js script for more details.

You can fork and play with the CodePen to adapt it to your needs.

Contributions