Syk-Houdeib
Syk-Houdeib copied to clipboard
My full front-end portfolio; web development skills, examples of my projects, contact links, and a bit about me.
Syk Houdeib
Front-End Developer Portfolio
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.
![](https://user-images.githubusercontent.com/29199184/31143027-44c85698-a87c-11e7-9845-39b9892ed7cf.png)
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
![](https://user-images.githubusercontent.com/29199184/31144319-af0622de-a880-11e7-8511-e57d06e051e0.png)
![](https://user-images.githubusercontent.com/29199184/31144495-358bd1f0-a881-11e7-90b0-5fc4ff88488d.gif)
![](https://user-images.githubusercontent.com/29199184/31144170-289221f8-a880-11e7-8bf6-1e86625168de.gif)