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:
- Cell phone deals aggregator inspired by these tiles
- Visualizing resources for new bicyclists or non-car drivers in Seattle. I like the idea of visualing with Google Maps
- Dog owner resources with links to recommended products, perhaps playing with mapping of great spots in Seattle along with tiles for recommended products
- Mapping of tennis court facilities in the greater Seattle area, with links to stores and popular resources
- 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:
- :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
- :iphone: In the upper left is a sandwich bar which will open the side menu to navigate the other 3 pages
- :eyeglasses: blog.html in inspired from AWS Technology blog, and some of my favorite technologies
- :bike: map.html is dedicated to those who have yet to get started with bicycling in Seattle
- feedback.html is a contact form with error checking and a Github contact tiles
Feature / Wow List
:snowman: :mortar_board:
- Responsive design with the use of a hamburger menu and columns stack correctly to make a nice mobile viewing experience
- Slide out side menu with hover effects for each button
- Bottom menu on index.html scrolls to ID elements on the page
- Added video banner to blog page with crop
- Utilized modal window with unique embedded Youtube videos
- Bike Map page uses Slick.js carousel to auto slide through article elements
- Created Youtube map with pinned locations and bicycle routes in one layer, and added a slide in from the left using, transform: translateX
- Feedback form with input form validation using JQuery, and form action connected to formspree.io
- Added github tile widget to feedback page.
- At the bottom of each page is Linkedin, Twitter and Facebook Fontawesome icons
- Favicon in browser tab is a tribute to Github cat
Describe the functionality
:+1:
- HTML 5 elements used, along with tags to structure content
- Applied fonts, colors, and styles to elements
- CSS utlizes classes and IDs
- Use of grid layout for index.html
- 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
- Use 5+ Javascript and JQuery annimations
Final Project
How did you accomplish what you accomplished?
:raised_hands:
- Start with something small, get it working, then add onto it
- Re-use class exercises for ideas as they stylistically look great
- Use Codepen, Stack Overlow, and Google search
What is the ultimate goal of this site?
:running:
- Responsive portfolio that I can show during a discussion, and it acts as a passive advertisement of my capabilities
- A project or code with pictures speaks louder than the typical resume or Linkedin profile
- 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:
- Ideate on some site ideas including as discussed in the introduction
- Created wire diagrams: wire 1, wire 2, wire 3
- Created html pages without any styling, just dropped elements
- Started styling
- Pseudo code for javascript, and then taking inspiration from class exercises
What was tricky?
:cry:
- Getting the Youtube videos on the blog page to pause, when the modal pop-up is closed
- Youtube embed iFrame was causing only the first Youtube video to show up on each pop up modal
- 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.
- Replacing the placebear placeholder images with my own content images for the site, which took forever
- Styling, centering, positioning, and making the content look nice
What are you especially excited about being able to accomplish?
:muscle:
- Creating a portfolio page, that reflects my recent experience and capabilities
- while including some fun items such as my passion around Amazon Web Services technology and tools
- A github repository that reflects my coding style for HTML, CSS, Javascript, and JQuery
- Learn by doing, for example digging into using Git/Github via the command line, helper file here
- 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:
- Get FormSpree.io form working
- Take advantage of SASS to better structure the css
- Try out AJAX and storing content in a database, and injecting that into the HTML
- Integrating a QA workflow with some of the tools provided in class, and creating a repeatable creation process
- Here is the full list: Issues List
- And the toDo List