Custom HTML/CSS
UNfortunately….
My best attempt to get this to run with the Divi editor was thwarted with errors, so the next best possible option was a video demo! This is my high school senior year portfolio project that was a graduation requirement for all students. My vocational shop was Programming & Web Development, so we were required to build a website for it! I consider this one of my favorite projects mainly for it’s significance and the new concepts I learned from the project, seen below.
Download my CSS here!
YOU MUST BE LOGGED IN TO AN RWU ACCOUNT TO ACCESS!!!!!
Project Overview
Release Date
March 2023
Languages Used
HTML, CSS
The main goal of the project was to create a clean, sleek, easy on the eyes, dark themed site that is still appealing to the senses and features interesting schema. My main goal was to create something nice looking WITHOUT the use of JavaScript. This was done through the use of divs to create individual rows of hexagons, repeating this to fill the screen. Next, I created a mouse hover rainbow effect that rotated between RGB values on a clock cycle. To bring it all together, I implemented z-indexes to layer everything together. The end-result is a modern design with colorful flare.
pROJECT Features
Every major feature of the project, in sliiiightly more detail.
Mouse-Hover Effect
Self-explanatory. There is a specific module in CSS that lets you attach style to the cursor on your screen. I manipulated the color-pattern using CSS animations and altered the radius
Z-index
Three dimensional! We all know the x-axis controls what side an element appears on the page, and the y-axis controls the height of an element on the page. The z-index controls the ground it sits on! In this example, the cursor effect has a lower z-index value than the container div that holds the hexagon pattern. As such, the hexagons appear IN FRONT of the rainbow cursor effect! Neat, huh?
Uncover the Whole Story
Some screenshots of the most important pieces of my code from this project. I’ve made sure both sections of the HTML and CSS I screenshotted feature an attribute key to making this portfolio site complete.
CONCLUSION
I peaked in high school. JUST KIDDING! The actual conclusion is that this project was, at the time, my magnum opus and the added challenge of “no JavaScript” only made it harder, yet I was able to create something very modern-feeling with the resources as hand. The moral of this story is that the best tool you have is your brain, and that Rome wasn’t built in a day, so time and knowledge are the most valuable resources for success.