A project to build a personal portfolio page from scratch following progressive enhancement and mobile-first principles.
The basic single-column layout was designed with maximum compatibility in mind. Then using multiple techniques (using the CSS cascade, @media queries and @supports queries) the site is progressively enhanced for a better and more appealing experience for users with more modern browsers and larger screens.
- HTML5
- CSS3
- jQuery
- Responsive design
- Progressive enhancement
- A single page design with discrete sections
- A fully responsive design without the use of libraries
- A fixed sidebar menu, shrinking to a 'burger' sliding menu for smaller screen size
- Menu items become selected on scrolling to the section
- jQuery smooth scrolling: clicking on a menu item takes you to the section in a smooth scrolling movement
- Menu closes on selecting a section or clicking/touching outside of menu area
- Waypoints that trigger certain animations and actions on scroll
- A project section with a two card animation. Image and descriptions on top card, and on clicking "+" a project highlights card is revealed with links. An alternative single card exists as a fallback for older systems
- Simple, elegant design with functionality and usability as the top concern
- A fully functional simplified fallback version for browsers that don't support CSS flex-box design
