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.
Technologies Used
HTML5
CSS3
jQuery
Responsive design
Progressive enhancement
Features
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].
