Project Summary:
Portfolio page showcasing projects/applications worked on.
Description:
In this exercise, I have developed a multiple page portfolio utilizing HTML, CSS & Bootstrap learnings & concepts. This is web & mobile responsive - meaning the page content, menus will resize if browser window size or zoom is changed or operation system zoom is increased or decreased as well as if a user were to access the web page on a mobile device and it's supported browser.
This portfolio consists of five different pages. On the home page, these are arranged in a tab like structure on a common header/navigation bar - each having it's own .html page. The header appears on every page & has the same css properties. Below are description for each page :
- Home : This has a background image with a one liner description of professional background.
- About : Photo added in the left panel along with brief description of my professional qualifications & other details such as email & phone contact,
address & incorporated social media links. These links have currently not been linked to my actual profile on those respective websites.
- Portfolio : This page currently has placeholders of future assignments/work to be showcased.
- Resume : This has a summary of skills, professional experience & education.
- Contact : This page will allow users on the web to contact me for my services if desired. This is done through a simple form & all of it's fields
are required. Currently validation will show one field at a time if left empty & if 'Submit' is clicked. I have used google api's to embed a small
map of the location/address.
Other than above pages, I have incorporated a sticky footer that has basic copyright information.
Other Features:
-
Responsive:
When the browser window size is reduced to a point where the page becomes responsive or this page were to be accessed on a mobile browser, the menu tabs are converted to a drop down menu which is shown with a 3-horizontal line icon in top right corner of the page. Clicking on it opens or closes the menu options & available pages can be accessed from here. -
Clicking on my name link in top left corner of the page will redirect to the 'Home' (index.html) page.
Testing:
Unit tested the page on Windows (Chrome, IE11 & Edge), MAC,Mobile and iPad to ensure that the layout is consistent in full view as well as in the responsive mode.
Purpose:
Apply learnings from HTML, CSS & Bootstrap to build a multi-page portfolio that is web & mobile responsive.
Code Installation:
$ cd [path_to_save_codebase]
$ git clone https://github.com/arti-karnik/MyPortfolioPage
Github Profile:
https://github.com/arti-karnik
Application Live URL:
https://arti-karnik.github.io/MyPortfolioPage/