Writeup: Geneaology Project

For the Gifted and Talented program at my school, I was asked to make a project about my family history. My mother recommended that I read my great grandfather's autobiography, so I built my project around that. Originally I was going to make a slideshow, but I figured I needed to develop my skills in web development, so I made a site instead. This article will focus on the design elements - the content of the page will speak for itself. The only thing I will say about the content here is that it was a bit more emotionally taxing to make than most projects, given its personal nature.

The project is here: Ode to William Ray Kastning

Color scheme

I wanted to use alternating colors because I thought that'd look cool. I went for colors #ddd and #bbb at first, but found that scheme a bit too dark, so I used #eee and #ddd instead.

3DFX

I experimented with it before on this website, but this is the first time I've actually used fixed background attachment (better known by the buzzword parallax scrolling). Paired with a drop shadow it creates a nice 3D effect where the content appears above the banner. Implementing this is quite simple:

.class {
  background-image: url('https://picsum.photos/1920/1080?random')
  background-attachment: fixed;
  background-postition: bottom;
}

Making the text stay with the fixed image required a non-intuitive solution. Instead of making the text absolutely positioned within the image, I had to make the text fixed within the body and set the z-index of the whole banner to -1.

To create the box shadow with so many elements I simply wrapped all of the content in a div. It is quite difficult to make a good box shadow. I would simply recommend setting the horizontal and vertical sizes to zero and color to black or dark gray and playing with blur and spread radius for the optimal shadow. Exceptions to this rule are if you want an off-center shadow (vary horizontal and vertical size) or if you want to use the box shadow to make a glow effect (change shadow color).

Testing

I tested this on every browser engine apart from Microsoft Edge and NetSurf. It worked pretty well, though I noticed the browsers had different font preferences, so I set the default to Cantarell. I then found after reloading that weights below 400 were being ignored. I ultimately switched to Open Sans Light to fix the issue.

Navbar

I added a navbar as a result of Mom's insistence that I include multiple pages. It was rather difficult to get just right - specifically, I found that either the links were unclickable or the header continued to pop over the text. I won't go into all of the paramaters I had to tweak to get it to work, because there were so many and I seriously doubt my solution will be helpful to those with the same problems.

The brand "Stories by Ivan Stanton" was just something I thought of as an umbrella term for other simple projects like this one. I don't plan on trademarking it or selling it (yet), but I do plan on using it for future projects, and maybe if I make enough of them it could be a whole site.

Conclusion

The last thing I added was a page describing William's family history. Because I couldn't keep up the alternating images thing, I had to add a special class to add padding so I could create an article with this theme.