/mr-disco

Updated portfolio featuring at least 3 examples of student work from deployed projects of homework

Primary LanguageHTMLMIT LicenseMIT

Updated Portfolio

Updated portfolio with examples from homework assignments and two group projects

Kay Davis Portfolio

Table of Contents
  1. View project
  2. About The Project
  3. Getting Started
  4. Usage
  5. Contributing
  6. License
  7. Contact

About The Project

Built using Javascript, Jquery, HTML, CSS and leveraging the GitHub REST API. This application showcases my projects during my coding bootcamp on Github as well as pulls my personal information into the site through the API. A resume is also included and can be downloaded as a PDF

Built With

Getting Started

To get a local copy up and running follow these simple steps. You can also download the source files provided. You will need a text editor such as Visual Studio Code, Xcode or similar to edit the source code.

Installation

  1. Clone the repo

    git clone https://github.com/FAC-73/mr-disco.git

  2. Pull the latest

    git pull

Usage

What's included

  1. HTML, CSS and Javascript (incl. Jquery) files include the source code for running the application
  2. This project includes examples of my recent projects completed during this course. Animated PNG images show looped interactive examples which include links that open the project from the github.io page. As well as links to each repo. Project utilizes the Github Rest API to pull public profile information directly from my Github user account. An updated resume is included in both html format and as a downloadable PDF"

Project deliverables

Included functionality

  1. A homepage with an introductory bio text. Text animated using CSS gradient and animations. Text color changes with a subtle effect. Scrolling down the page shows recent projects as animated PNG images, providing a more interactive and visual way to see the applications. Each section for a project includes links to the Github io page where the project is launched, and a link direct to the repo. Each project includes a detailed README.

On load view

Project view

  1. An event listener on the Resume link triggers Javascript functions that hides the html project sections, and shows resume html sections using a addClass/ remove class 'hidden' css property appended on these elements. A .text jquery method replaces the text for the headline to the correct corresponding link text.

Resume

Resume

  1. In the resume page a link to download the CV displays a PDF version of the CV. When clicked this is displayed in a new browser tab and can be downloaded from the window.

  1. The profile link includes an event listener that again triggers a set of javascript functions to hide and show hidden html sections including profile and resume content using the addClass/ removeClass method.

Profile

  1. Content in the profile is fetched on page load using a javascript fetch method from the Github rest API. Sections of the profile are created and appended into html. The profile image is pulled using the data.avatar.url from the api and an img element is appended into the document. A css class is added to add a desaturated black and white effect on the photo, as well as a round circular shape using CSS border radius. Information such as name, location, bio, github profile url are all fetched from the api. E-mail was not possible to obtain from the API so that is created and appended independently from using the api. As well as linking to the LinkedIn profile.

  1. The layout is fully responsive and scales down to 320px, media queries are in place to adjust large font sizes as well as image sizes too. Bootstrap grid framework is leveraged for many aspects of the layout.

Responsive

HTML, CSS and Javascript & Jquery

  1. Index.html - Contains basic layout structure. Main profile content information is contained in a div using the container class from bootstrap and leverages the responsive grid.
  • Javascript and Jquery dynamically append the profile information and image into html elements on page load.JS and Jquery is also used for hiding and showing sections of the page when switching between the homepage, profile page and the resume.
  • For improved accessibility additional descriptions for project images has been included, as well as including aria roles for CSS divs using bootstrap class the provide no semantic HTML information for screenreaders.

  1. styles.css - Contains layout, styling, animations and bootstrap CSS CDN is used to leveraging the responsive grid css.

  2. script.js - Contains functions for adding and removing classes to hide and show html sections and elements when switching views.

  • Makes use of the Github REST API for pulling profile information from my Github user profile. Saving me having to update infomtion in multiple places such as bio, location etc.
  • Functions to create and append this informtion into HTML for the profile. Dynamically generating the profile image and appling a class to style it as a circle and with a desaturation css filter. As well as dynamically generating other profile information such as a link to the profile.
  • A function to create and append my email into the page.
  • Event listeners on main navigation links for triggering functions for profile, projects and resume.

Pushing to GitHub

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/FeatureName)
  3. Commit your Changes (git commit -m 'Add some FeatureName)
  4. Push to the Branch (git push origin feature/FeatureName)
  5. Open a Pull Request

License

License: MIT

Distributed under the MIT License.

See LICENSE for more information.

Contact

Kay Davis

Project repo link: https://github.com/FAC-73/mr-disco
Project website: https://fac-73.github.io/mr-disco/