Portfolio 1.0

Portfolio site to showcase top projects and skills. Fully responsive for mobile, tablet, and desktop.

Build Status: Complete

Project Schedule

Day	Deliverable	Status
Day 1	Project Description	Complete
Day 1	Wireframes / Priority Matrix / Timeline	Complete
Day 1.5	Core Application Structure for mobile (HTML, add work to project spreadsheet)	Complete
Day 2	Core Application Structure for mobile(CSS)	Complete
Day 3	Javascrip and jquery for work page	Complete
Day 4	Media queries & and responsiveness to tablet and desktop	Complete
Day 5	MVP & Bug Fixes	Complete
Day 6	Bugs/Post MVP	Complete
Day 7	Final Touches	Complete
Day 8	Record video	Complete

Deliverables

• An About, Projects, Contact form (connected to your own account on Fromspree)
• A mobile nav that expands and collapses when a user clicks on the hamburger icon.
• "Mobile first" design approach.
• A Git repository, hosted on your personal GitHub
  • Includes a link to your hosted site
  • Site url should be in the form of githubusername.github.io
  • An updated project worksheet with all sections filled out accordingly.
  • Repo must contain frequent commits (minimum 15+) dating back to the beginning of the project.
• A 3 min recording
  • DUE: 1/4/2021
  • INCLUDE:
    • Functionality
    • responsive design: Desktop, Tablet, and Mobile
    • Project worksheet

Requirements

• Use semantic markup for HTML and CSS, adhering to best practices.
• Use CSS GRID to create a multi-column layout
• Use Flexbox for content
• Must be mobile mobile first, then tablet and desktop responsive
• Must pull in projects via API call from google sheet
• Be deployed and accessible online either via Github Pages or Surge.

Wireframes

Upload images of wireframe to cloudinary and add the link here with a description of the specific wireframe. Do not include the actual image and have it render on the page.

• Mobile
  • Home
  • Menu
  • About
  • Work
  • Contact
• Tablet
  • Home
  • About
  • Work
  • Contact
• Desktop
  • Home
  • About
  • Work
  • Contact

Time/Priority Matrix

MVP/PostMVP

MVP

• Gallery, a collection of works (A)
  • Google sheets API
• A navigation bar that slides open in mobile & tablet (B)
• About page (C)
  • Links to social media, linkedin (D)
• Contact form (E)
• Skill listing w/ icons (F)
• Responsive design (G)
• Grid + flex box (H)
• Github pages (I)

PostMVP

• Hover animation on nav menu items (J)
  • Underlines appear on hover
• Hover animation on project card (K)
  • Color change on image
• Carosel for project cards (L)
• Hamburger animarion on mobile & tablet (M)
  • Hamburger lines cross
• box frames on home page responsive to window size (M)
• fix projects (tarot & startup)(L)

Functional Components

MVP

Component	Priority	Estimated Time	Actual Time
Filling in project worksheet & deploying projects	H	1hr	1.5hr
HTML structure	H	1hr	1.5hr
Basic CSS for mobile	H	2hr	5 hr
Hamburger menu (including responsive)	H	3hr	0.5hr
Nav menu	H	2hr	6 hr
About page	H	2hrs + 1hr responsive	5 hr
Contact form	H	3hrs + 1 responsive	4 hr
skill section: w/icons	M	3hrs + 1 responsive	5 hr
Project gallery	H	3hrs + 1 responsive	5 hr
Social Media Icons	L	1hr	2 hr
Total	H	22 hrs	35.5 hrs

PostMVP

Component	Priority	Estimated Time	Actual Time
Hover animation on nav menu items	H	4hr	hr
Hover animation on project card	L	4hr	hr
Carosel for project cards	M	4hr	hr
Hamburger animation on mobile	L	4hr	hr
box frames on home page responsive to window size	M	3hr	hr
Total	H	19hrs	hrs

Code, Style & Framework

• HTML, CSS, vanilla JS, JQuery
• External references to main styles and responsive styles

Additional Libraries

• FontAwesome
• Shoelace
• Font: H1-4 Playfair Display
• Font: p Roboto Light

Code Snippets

// SHOELACE DRAWER CUSTOMIZATION FOR NAV //
$(() => {
  const drawer = document.querySelector('.drawer-placement-left')

  const openButton = drawer.nextElementSibling

    const closeButton = $('.nav-button').on('click', () => {
        drawer.hide()
        })

  openButton.addEventListener('click', () => drawer.show())

});

// PULL AND RENDER DATA FROM GOOGLE SHEETS //

$.ajax("https://spreadsheets.google.com/feeds/list/11wvPAVvRzcKv7hORaWcsidISosUxtyNx0AuugxxMwyo/1/public/full?alt=json")
.then((data) => {

    //put out projects in a variable
    const rawProjects = data.feed.entry

    //log our projects
    console.log(rawProjects)

    //Prettify projects array
    const projects = rawProjects.map((project) => {
        return{
            name: project.gsx$name.$t,
            img: project.gsx$img.$t,
            description: project.gsx$description.$t,
            live: project.gsx$live.$t,
            github: project.gsx$github.$t
        }
    })

Issues and Resolutions

• fonts using REM sizing not being responsive -- added font-size in html tag

• white space appears when bootstrap scripts are included in html file -- background color on html tag changed, also avoided using bootstap

• changeing certain cards that don't have github links, so they are not all the same -- used terinary operator "if statement"

• can't seem to target contact form -- used form lable/input

• button group not responding to flex or grid

  • took out button grouping element and changed to individual buttons

• Shoelace drawer used as nav not closing when links are clicked

  • used jquery to remove close button and add event listener to close drawer on click of any button

• Some image links broken in work section -replaced links in data sheet