This Website

May 25, 2022 – September 6, 2022

Jake Rubin

Click here for the Github repository
GitHub Pages
HTML
CSS
JavaScript

This website acts as a portfolio for my work throughout university. It makes the most sense for a website of computer engineering projects to be itself a computer engineering project, which is why this is made from scratch. You can call this page a recursive reference. The goal of this project is to show my range of skills with HTML, CSS, and JavaScript DOM using a variety of features from basic styling to JavaScript animations.

FEATURES

1/5 — Navigation Bar

1/5
Navigation Bar

This was the first part of the website that was constructed. After all, it is at the top of every page. There are four key attributes used in the creation of this bar.

  1. Fixed positioning: uses fixed position, body's margin-top property increased to compensate for space of bar.
  2. Collapsable menu: uses a click event listener to trigger function which shows or hides options and changes overflow properties of body to prevent scrolling. Another JavaScript function closes the "Projects" tab in the event that the collapsable menu closes when it is still open.
  3. Resizing property: uses the CSS @media rule with the max-width property to show the full menu or collapsable menu at different screen sizes. Another JavaScript function tracks screen size to close the collapsable menu if the screen width becomes wide enough to accomodate the full menu.
  4. Downloadable link: uses <a> tag's download attribute to download my resume upon the click of the "Resume" button.

2/5 — Project Showcase

2/5
Project Showcase

This part of the website showcases my top three projects on the home page, which also serve as links to the projects in question. Three components were utilized to provide the above appearance to this element.

  1. Tinted images: uses full grayscale, increased brightness and reduced opacity via CSS filter functions to create an image which can be "tinted" by the background color of the division containing the image.
  2. Link covering image: uses absolute positioning and CSS calc() function for width to place a link on top of an image within the bounds of the division.
  3. Seamless transitions: uses CSS transitions to smoothly change image height and background color over 0.25 seconds.

3/5 — Hobby Section

3/5
Hobby Section

This section of the about me page shows that there's more to me than just a computer engineering student. The opening and closing animations are written in JavaScript, and work in five steps:

  1. Remove event listeners from each hobby section's header to prevent multiple animations from being triggered in same window.
  2. Change style of the selected hobby or hobbies' header and textbox to reflect the section(s) being opened or closed.
  3. Frame by frame, open alter the height and opacity of each textbox until fully open or closed.
  4. Stop the animation and remove all transitionary styles not necessary for the needed result.
  5. Add event listeners for the next possible functions to perform on each hobby section.

4/5 — Modal Windows

4/5
Modal Windows

Some project pages display modal windows for two occasions: Fritzing hardware schematics and project demo videos. The Fritzing diagrams allow me to better visualize the way I build the hardware components of a project, and the demo video shows the project in action. Each of these modal windows are built in a different way, but overall use these building blocks:

  1. JS Event Listeners: event listeners placed on a link and the modal's close icon trigger functions to display or hide the modal image.
  2. CSS Animations: the Fritzing modal uses the CSS @keyframes rule to change the vertical position and opacity of the modal image immediately after display to seamlessly fade in the image.
  3. Creating/Appending HTML: using the JS createElement(), setAttribute(), and appendChild() functions, the demo video creates and inserts the modal and inserts it into the document. An event listener on the close icon triggers the remove() function to delete the modal from the document on a click.
  4. Embedded YouTube video: the demo video uses the <iframe> tag within several nested padded <div> tags to display a YouTube video with a fixed aspect ratio.

5/5 — Project Features

5/5
Project Features

This slideshow in every project page shows the most important parts of each project. Along with the recursive nature of this page, this entry in the features section is also recursive, so I'd count this as second-degree recursion. Jokes aside, the slideshow functionality was achieved using three components.

  1. Arrows: if not disabled, clicking an arrow calls a function which displays the previous or next feature, changing the highlit dot and enabling or disabling arrows if necessary.
  2. Dots: similarly to the arrows, calls a function which displays the feature corresponding to each dot and updating each arrow and dots as needed.
  3. CSS @media rule: arrows and dots change places or disappear entirely depending on screen size.