Justin Salcedo's Final Project

This project is a multi-page website about software development topics, especially frontend and backend web technologies. These pages feature modern interactions and transitions for popular web design elements. The motivation behind this site is to reflect the knowledge learned during the WBG 310: Interactive Web Page Scripting with Lab course, where I created professional web applications with clean styles and solid business logic using CSS3 and jQuery, a lightweight JavaScript library.

I selected a dark theme for this site because it minimizes visual fatigue and screen glare caused by extensive white backgrounds and high-contrast elements. Besides, I'm familiar with designing dark user interfaces. I chose the Inter font family because it eases reading and is ideal for modern UIs. By keeping a line height of 1.625 and paragraphs short, I ensure visitors aren't bothered by clustered text.

The background colors have slight tone differences, enough to distinguish the header, navigation bar, and footer from the main content. Moreover, I included high-quality images in PNG format with edited resolution to avoid long content load times. Most images are free for public use, and some are part of my authorship.

Features

All pages display a drop-down navigation bar that supports nested link menus, responding to the cursor's rollover. This site is mobile-first and responsive, meaning it will adapt its layout and elements according to viewport sizes, starting from smaller screens. The following pages display unique characteristics:

  • About Us > Our Offices: Business directions use Google Maps widgets to facilitate physical location to the user. Widgets adapt to the screen width.
  • Libellus Gallery: Clicking on a thumbnail displays a page overlay with the image in full resolution. This overlay also presents a sliding gallery to see the rest of the pictures. Clicking on the image on view takes the user to a related topic page.
  • Contact Us: The form uses three text boxes, a text area, a radio group with two options, and four checkboxes for the user to submit a contact request. The form supports input validation via HTML attributes, jQuery, JavaScript, and CSS to style error messages.

You can visit this site at https://justinsalcedo.com/academic-portfolio/wbg310-final-project/ (or maybe you're already here). Check out my other works, too!