Spectral Salon

Spectral Salon is a website that offers a wide range of beauty and grooming services for men and women. Services offered may include hair cutting, coloring, styling, nail care, waxing, facials, and more.

Link to website: Spectral Salon

How It's Made

Tech Used: HTML5, CSS3, JavaScript, JQuery, Responsive Tools

I built this website using HTML5, CSS3, JavaScript, and JQuery.

• HTML5 provided the structure and content for the website
• CSS3 was used to style and layout the website
• JavaScript was used to create interactive features such as the navigation bar and form validation.
• JQuery added some functionality when it came to styling and responsiveness.

I also used a responsive design approach to ensure the website looks great on all devices.

Optimizations

Here are some ways that I could increase performance on my website:

I could have:

• Minified and compressed all CSS and JavaScript files to reduce load times
• Optimized all images by reducing their file size and using correct image formats
• Implemented lazy loading for images to only load them when they are in the viewport
• Used a Content Delivery Network (CDN) to serve static assets from multiple locations
• Leveraged browser caching to improve page load time for repeat visitors
• Used Google PageSpeed Insights, GTMetrix, etc. to measure and analyze website performance and identify opportunities for optimization.

Spectral Salon is a pretty light webpage, so I really did not find it necessary to do any of these things. The page loads fine on any computer or device that I have tested it on.

Lessons Learned

Building my personal portfolio website was a great learning experience and I took away several valuable lessons.

• The importance of planning and organization in the development process
• The power of CSS Grid and Flexbox in creating responsive and flexible layouts
• The importance of performance optimization and website accessibility
• The importance of testing and debugging in the development process
• The significance of keeping up with the latest web development technologies and trends
• The benefit of using version control with Git and hosting the code on Github

Credit

Landed by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)

A dark, slick, modern, responsive, adjective-drenched design built around an extremely dynamic landing page (scroll that mofo!). Inspired by Big Picture, another design of mine with a similarish feel/flow, only this time I took it waaaaaay further and actually made it multipurpose (versus copping out and making it a one pager like I did last time ;) Includes multiple pages, a bunch of pre-styled elements, and all its Sass sources.

Demo images* courtesy of Unsplash, a radtastic collection of CC0 (public domain) images you can use for pretty much whatever.

(* = Not included)

Feedback, bug reports, and comments are not only welcome, but strongly encouraged :)

AJ aj@lkn.io | @ajlkn

Credits:

Demo Images:
	Unsplash (unsplash.com)

Icons:
	Font Awesome (fontawesome.io)

Other:
	jQuery (jquery.com)
	Scrollex (github.com/ajlkn/jquery.scrollex)
	Responsive Tools (github.com/ajlkn/responsive-tools)