Responsive page design challenge: landing page with changing design between mobile and desktop devices. My solution for one of challenges for frontendmentor.io
- Based on GatsbyJs and styled components
- Image optimisation using GraphQL (webp format and SVG filtering)
- Dynamically rendered links in footer and navigation components
- Responsive layouts based on Flexbox and CSS Grid
- Dropdown menu on mobile view
- CI/CD integration with Netlify
- Custom 404 page
Please navigate first to the "site" folder! Then run:
npm install
To run the app on a local server use:
npm run develop
gatsby develop // with gatsby-cli installed
In case of any performance issues, run this command:
gatsby clean
To compile for production build:
npm run build
gatsby build // with gatsby-cli installed
Testing production build locally:
npx serve public
- Designed by Frontend Mentor Team.
- Code written by ann-dev.