Portfolio

Summary

As a web developer in training at the University of Denver, it is vitally important that I create a portfolio of my work for the sake of future employability. The original version of this portfolio was built using HTML and CSS, the first two programming languages developers are taught when learning web development.

Deployment Link

Table of Contents

Description

The portfolio features a number of different elements to showcase my web development skills to future employers. There are currently 3 different links for landing pages on which several different apps will be showcased. I used this opportunity to experiment with a number of different HTML elements that I have never used before, such as main, button, aside, ids and classes. I also strived to use as many semantic elements as possibe to avoid any confusion in code readability. Additionally, I used an icon in the sidebar that I think gives the final product a nice, tasteful look.

Static Screenshots

Screen Shot 2022-10-17 at 10 24 21 PM

Screen Shot 2022-10-17 at 10 24 56 PM

Functionality

This portfolio contains href hyperlinks in the navbar that take the user to different sections of the page. Also, each app displayed on the site is wrapped in hrefs that can be clicked anyhere on the image. Images also feature hovering box-shadow for the user to easily navigate the page.

Challenges

Perhaps most difficult were the media queries. This took quite a bit of trial and error because as far as I am aware, there is no way to test the smaller screen size layout until you push to GitHub and wait for the updtaes to clear before sending the link to my phone to see how the layout looks on a mobile. Still working on workarounds for that. VS Code does not seem to have an iPhone app which means that only a live deployed link can be tested for mobile versions. That was quite time-consuming and I didn't get it 100% right. The 768px size was easy enough because the laptop can be conveniently tested with the localhost live server, but once we get into the 400px size, I stil haven't found a shortcut.

Future Development

In the future, the links will redirect to other apps I have built throughout the University of Denver coding bootcamp.

Technologies Used

  • HTML
  • CSS

Contact

Github: Github Profile Link

Email: rod.bennett75@gmail.com