Here's a fun hot dog themed site built as a code challenge that uses a variety of my front-end skills. I was given an image and asked to build a site based off of it.
The site is straight html coded using html5 semantic tags. The layout is primarily in Flexbox with responsive design to work aross viewports.
- Responsive design
- Nav bar collapses into pure CSS dropdown for mobile viewing
- Inline SVG icons for Instagram logo and Hot Dog logo for fastest loading
- CSS Variables used throughout design
- "Dark mode" using the CSS variables to reverse interface colors
- Animated hover styles for main navigation
- BEM naming convention for all styles
- Images and content reorder to remain in the correct order (Image, content, image, content) on mobile but staggered on desktop
- Responsive type that grows/shrinks according to the viewport size
- Using web font "Open Sans" to match original comp image
- CSS written in SCSS with mixins for responsive type and breakpoints
- SASS compilation done through Gulp
View the live demo of the site at: rlahoda.github.io/demo-site/
- Download or clone the repo locally
- In the command line, navigate to that folder and type
$ npm install - After the installation is complete, type
$ gulp serve. This will start the development server and load the page
I'm a front-end web developer specializing in React and Drupal. I have a diverse background in both technical and creative areas that gives me a unique perspective on my work bridging the gap between pure designers and technical developers. I have experience in UX design, interface design, Drupal theming, React development, and just a lot of writing HTML and CSS. For more about me and more examples of my work, check out my website at: roblahoda.com.