Let's Build: A Consultancy Website - Part 25 - Coding the About Page (Continued)

Hi, My name is Andy Leverenz. I design, code, and am an author of things. Check out my agency called Couple of Creatives https://coupleofcreatives.com and my blog Web-Crunch https://web-crunch.com🤘🏻

======

Part 25 of my Let's Build: A Consultancy Website series continues on the About page.

The design calls for a brief call to action and image of Alyssa herself for people to better identify who they might be working with. This section is treated like a bio of sorts but offers a citation and quote from Alyssa herself.

Coding this section is fairly straight forward but I had to get creative with positioning the image of Alyssa so it both looked like the design and scaled decently for other devices.

Serving retina ready images as background images

My goal for all background images is to create a sass mixin for retina-ready screens. At specific resolutions, different images will be served to the user so they appear sharp no matter what device you use.

That mixin I mentioned looks like the following code:

@mixin image-retina( $filename , $extension, $width , $height ) { background-image: url($filename + '.' + $extension);

@media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) { & { background-image: url($filename + '@2x.' + $extension); -webkit-background-size: $width $height; } } }

Putting this to use looks like this:

#myElement { @include image-retina('path/to/image','png', 1000px, 500px); }

We pass a few arguments through to the mixin and in return it outputs media queries and other CSS specific to devices with a higher pixel ratio (retina).

You'll notice I pass the path to the image separately from the image extension. Doing this assumes you have another image at retina size with a @2x attribute added to the filename. Some "prep" is required for this all to work nicely but you can make it adapt to your workflow and cover all your tracks when it comes to retina screens.

======

⚙ Download the source code: https://github.com/justalever/endlyssdesigns

💻 Previously published at: https://web-crunch.com/lets-build-consultancy-website-part-25/

💻 Check out the blog: https://web-crunch.com

💡 👫 Check out my agency: https://coupleofcreatives.com

🚀 Links: Weekly Newsletter: https://web-crunch.com/subscribe Twitter: https://twitter.com/webcrunchblog Twitter(Personal Account): https://twitter.com/justalever Facebook: https://facebook.com/webcrunchblog Dribbble: https://dribbble.com/justalever Github: https://github.com/justalever Medium: https://medium.com/the-web-crunch-publication

📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/books/luxd

📙 Check out my FREE book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/books/ptt

📌Recommended Stuff I Use to Shoot Video: Canon EOS Rebel SL1 - http://amzn.to/2m3EZDH Linco Lighting Set - http://amzn.to/2mF8Shs Logitech HD Pro Webcam C920 - http://amzn.to/2mpqzBk Rode NT-USB Condenser Microphone - http://amzn.to/2mFhaG9

💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease: http://bit.ly/webcrunchhosting ... https://www.youtube.com/watch?v=kK2fQnb5DLg