alyeung.github.io

:dog:

This is my General Assembly Front End Web Development Project

:+1: :+1:

Introduction

:sunny: Final project is under /final_project_template

Initially, I was inspired to create one of the following pages:

  1. Cell phone deals aggregator inspired by these tiles
  2. Visualizing resources for new bicyclists or non-car drivers in Seattle. I like the idea of visualing with Google Maps
  3. Dog owner resources with links to recommended products, perhaps playing with mapping of great spots in Seattle along with tiles for recommended products
  4. Mapping of tennis court facilities in the greater Seattle area, with links to stores and popular resources
  5. Mock up integration with payments interface because the payment forms look great on mobile

Finally, decided that a portfolio page would be best for future opportunities.

Site walkthrough

:walking:

  1. :floppy_disk: On index.html is the porfolio page, where you can use the bottom menu to navigate through: Data Insights, Software Development, Product Management, and Fun Stuff
  2. :iphone: In the upper left is a sandwich bar which will open the side menu to navigate the other 3 pages
  3. :eyeglasses: blog.html in inspired from AWS Technology blog, and some of my favorite technologies
  4. :bike: map.html is dedicated to those who have yet to get started with bicycling in Seattle
  5. feedback.html is a contact form with error checking and a Github contact tiles

Feature / Wow List

:snowman: :mortar_board:

  1. Responsive design with the use of a hamburger menu and columns stack correctly to make a nice mobile viewing experience
  2. Slide out side menu with hover effects for each button
  3. Bottom menu on index.html scrolls to ID elements on the page
  4. Added video banner to blog page with crop
  5. Utilized modal window with unique embedded Youtube videos
  6. Bike Map page uses Slick.js carousel to auto slide through article elements
  7. Created Youtube map with pinned locations and bicycle routes in one layer, and added a slide in from the left using, transform: translateX
  8. Feedback form with input form validation using JQuery, and form action connected to formspree.io
  9. Added github tile widget to feedback page.
  10. At the bottom of each page is Linkedin, Twitter and Facebook Fontawesome icons
  11. Favicon in browser tab is a tribute to Github cat

Describe the functionality

:+1:

  1. HTML 5 elements used, along with tags to structure content
  2. Applied fonts, colors, and styles to elements
  3. CSS utlizes classes and IDs
  4. Use of grid layout for index.html
  5. All buttons in side menu and bottom menu include hover effects, and transitions 6 Responsive design for mobile, with columns stacking, and mobile navigation menu
  6. Use 5+ Javascript and JQuery annimations

Final Project

How did you accomplish what you accomplished?

:raised_hands:

  1. Start with something small, get it working, then add onto it
  2. Re-use class exercises for ideas as they stylistically look great
  3. Use Codepen, Stack Overlow, and Google search

What is the ultimate goal of this site?

:running:

  1. Responsive portfolio that I can show during a discussion, and it acts as a passive advertisement of my capabilities
  2. A project or code with pictures speaks louder than the typical resume or Linkedin profile
  3. Fan page for Amazon Web Services and Bicycling in Seattle

Is your design responsive? Show us!

:iphone: Yes! Narrow the page to < 660 pixels, or view on your cell phone

Process Discussion

:bowtie:

  1. Ideate on some site ideas including as discussed in the introduction
  2. Created wire diagrams: wire 1, wire 2, wire 3
  3. Created html pages without any styling, just dropped elements
  4. Started styling
  5. Pseudo code for javascript, and then taking inspiration from class exercises

What was tricky?

:cry:

  1. Getting the Youtube videos on the blog page to pause, when the modal pop-up is closed
  2. Youtube embed iFrame was causing only the first Youtube video to show up on each pop up modal
  3. Adding the slick Jquery code correctly, as there is a dependency on other HTML pages even if the HTML page does not use the plug in due to using the same JS file.
  4. Replacing the placebear placeholder images with my own content images for the site, which took forever
  5. Styling, centering, positioning, and making the content look nice

What are you especially excited about being able to accomplish?

:muscle:

  1. Creating a portfolio page, that reflects my recent experience and capabilities
  2. while including some fun items such as my passion around Amazon Web Services technology and tools
  3. A github repository that reflects my coding style for HTML, CSS, Javascript, and JQuery
  4. Learn by doing, for example digging into using Git/Github via the command line, helper file here
  5. The Uber-like bottom menu on index.html that is responsive and looks really nice on a mobile devices

Known bugs or features to add in the future

:computer:

  1. Get FormSpree.io form working
  2. Take advantage of SASS to better structure the css
  3. Try out AJAX and storing content in a database, and injecting that into the HTML
  4. Integrating a QA workflow with some of the tools provided in class, and creating a repeatable creation process
  5. Here is the full list: Issues List
  6. And the toDo List