Sorry, error loading image

Development Log

I built this web portfolio from scratch using HTML and CSS markup. I implemented css-grid, a newly supported feature of CSS3 that allows developers to split web pages into regions without developing a custom grid or adopting a CSS framework. I used float-based fallbacks for older browsers that do not support the standard.

I also built the carousel and image viewer from scratch using JQuery, without use of third-party plugins.

9.13.18 Optimizations, Bug Fixes, and Project Updates

  • Added new projects to portfolio
  • Updated project images to share a design pattern
  • Fixed a double-scroll bar bug caused by overflow-x set to html,body in CSS
  • Improved carousel performance (though it still gets caught loading when it rotates)
  • Optimized initial load time by delaying off-screen images from loading until after they're selected
  • Fixed bug that was causing the development log to display when "view resume" was clicked
  • Changed "View Resume" to "Download Resume", since some browsers are configured to download by default. Future plans are to update config files to force resume to open in browser.

9.12.18 Design Update

  • Updated portfolio images for design and product management sections
  • Added gradient bg-color behind each portfolio image
  • Updated appearance of "about" overlay
  • Added border radius to each grid item
  • Increased margin between heading, nav, and grid

9.6.18 Feature Release & Patch

  • Added title and description framework to project modals
  • Added JQuery to display correct title/descriptions on click
  • Added JQuery to hide title/descriptions framework when none exists
  • Fixed incorrect title displaying on Snappea project

9.5.18 Patch

  • JS optimizations
  • Image size compression
  • Normalize.css minified
  • Added Google Analytics code snippet

Feature Roadmap

  • Implement Perch CMS, a PHP-based CMS that will allow me to update content without accessing the codebase.
  • Allow multiple images per portfolio item
  • Upload animated prototypes of designs
  • Add in-depth descriptions of each project

Bug Fixes

  • Add margin between grid items on Safari (desktop and mobile)
  • Fix momentum scrolling on iOS
  • Optimize image loading
  • Fix issue with hamburger menu collapsing on mobile
  • Hide grid templates that are outside the viewport so their height does not extend the height of the active grid

Other Updates

  • Add thorough in-line documentation
  • Optimize JS functions
  • Refactor CSS
  • Implement liquid templates
  • Implement Sass
  • Add remaining portfolio items from NewFounders, WellRight, and TBD Innovation

Jeremy Abrams

View Development Log | Download Resume