Iristorm Design is the website for my freelance web and graphic design business, and of course, I created my own website.
The Iristorm logo is an abstract eye with its iris and pupil shaped like a lightning bolt. The logo, which I created in Adobe Illustrator, is the visual result of visually merging an eye and a lightning bolt together. The inspiration behind the design of this logo came from little doodles I used to draw in notebooks as a kid, and many those doodles were eyeballs and lightning bolts.
The home page of the Iristorm Design website is divided into six sections: Intro, Portfolio, Services, Testimonials, About Me, and Contact Me. Since each of these sections were fairly small, I decided to put all of them on a single long home page rather than on separate smaller pages.
Based on the “stormy” element of the Iristorm logo, I gave the website a background of storm clouds. The website’s color scheme is mainly yellow and purple; the yellow comes from the logo’s lightning-bolt-shaped iris, and the purple is a complementary color to the yellow and adds to the mysterious feel from the logo.
Each subheading in the Services section of the Iristorm Design homepage is represented by an icon beside it. All eight service icons use a uniform yellow/purple/white color scheme, matching the website’s overall color scheme.
I fully hand-coded the website with HTML, CSS, and PHP, plus a little jQuery. I used the SASS-based grid system Susy to set up the web pages’ layout.
The Iristorm Design website is fully responsive to viewport widths. The layout contracts or expands based on the available space. At narrow viewports, the main navigation menu collapses into a single drop-down “Menu” button.
This website utilizes various code libraries and services, including:
- Modernizr: Detects whether or not the user’s web browser supports certain cutting-edge features, and if not, provide a way for the developer to make an alternative solution. For this website, I’ve set up Modernizr to detect support for flexbox and SVGs.
- Responsive Nav by Viljamis: Adds basic functionality for an expandable and collapsible menu (visible on narrow viewports).
- Lazysizes: Because the home page of this site is fairly long, I applied “lazy-loading” with Lazysizes. Lazy-loading is a method of making images and other elements on a web page download only just before they start to scroll into view in the user’s browser. (This changes the standard behavior of browsers, which is to load all the elements on the page at once, sometimes resulting in slow loading times.)
- jQuery Smooth Scroll by Karl Swedberg: This is for the tall home page of this site. When the user clicks on one of the section links in the navigation menu bar, instead of the page suddenly jerking down to that section of the page (as is the default behavior of web browsers), this plugin makes the page slide down smoothly instead.
- Magnific Popup: Lets the user click (or tap) on an image, and a larger view of the image pops up over the page. This is used for some images on some portfolio pages.
- Cloudflare: A CDN (content delivery network) which caches the website’s files onto proxy servers located throughout the world, thus helping speed up the loading time of web pages. It also provides basic SSL/TLS security.
- Google Analytics: Provides data to me (as the manager of this website) about which pages of the site that visitors go to, how long visitors stay on the page, where in the world the visitors are browsing from, etc.
- Google ReCAPTCHA: Helps catch annoying automated spammers that try to fill out the website’s contact forms.
According to an analysis by WebPageTest, this website aces all six categories in loading speed.