Visit Site: Bikepacking Site
- About
- Features/Tools Used
- Preview of Site (PNG)
- Notable Features/Tools Learned from Building the Site
- Additional Images (PNGs)
Home page for bikepacking.com site. Purpose for creating this app is to showcase design of interactive multimedia applications for desktop and mobile devices using industry-standard tools to create applications emphasizing animation and interactivity. Only HTML5, CSS3, JavaScript, ScSS/SaSS were used to develop this application. Site is not functional/no active links.
- CSS Preprocessor | SaSS/ScSS
- sass-lang.com
- Mozilla Developer Docs: CSS Preprocessor
- Preprocessor scripting language interpreted/compiled into Cascading Style Sheets (CSS)
- JavaScript
- Mozilla Developer Docs: What is JavaScript
- Scripting language that enables creation of dynamically updating content, control multimedia, animate images, etc.
- HTML
- Mozilla Developer Docs: HTMl
- Markup language used to structure and give meaning to web content
- CSS
- Mozilla Developer Docs: CSS
- Language of style rules used to apply styling to HTML content
- Netlify
- netlify.com
- Deployed to Netlify via GitHub
Bikepacking.com
- sponsor logos - logos change from grey (default) to color on hover
- navigation hyperlinks - navigation links change color and feature an underline transition on hover
- multi-device compatible/responsive design - designed to be responsive for all devices using both mobile-first design, concious design decisions, and media queries
- explore cards - text and a darkening overlay effect appear when hovering over explore cards
- dispatch cards - dispatch card feature a scale-up animation when hovering
- Reusable components / design - features concise, functional, easy to maintain, loose coupling, high cohesion, modular coding practices. component-first design
Image capture of sponsor logo section:
Image capture of hero section:
