peterirlam / IrlGen-Digital

Personal project for a web development agency built using SASS. Features advanced CSS hover animations and CSS Grid.

Home Page:https://irlgen-digital.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

πŸ’»   Irlgen Digital

πŸ“–   Overview

A personal project built using HTML, SASS and JavaScript. Color palette inspiration drawn from Siteground.co.uk

Featuring:

  • JavaScript typewriter effect on home page
  • Stunning hover animation effects in the 'Featured Case Studies' section
  • Fully mobile responsive layout using CSS Grid and flexbox

πŸ”—   Demo

Live view by clicking the badge (use Ctrl/Cmd + Shift to open a new window): Netlify Status

You can also clone the project and open it in localhost (See Prerequisites below), or enjoy the preview video instead πŸ˜„

πŸ›    Technologies

  • HTML
  • SASS
  • JavaScript

πŸ—οΈ   How I Worked on This Project

  • I built this app using the branding colors of Siteground as inspiration: Siteground
  • I worked with tasks using Trello as a project management tool
  • I created feature branches using git

Why I Built the Project using SASS

I love how CSS can take a mundane website and transform it into a modern, elegant design. But now I'm hearing about how great Sass is and I wanted to understand how this 'preprocessor' works.

⏲️   If I Had More Time I Would Change

The time zone displays for the 3 offices. I originally thought this would be a cool feature but I don't like the overall design - it looks rather basic and a little amateurish.

Practical applications: In a real world scenario it could potentially confuse a user, especially one who's not very IT literate - "Do I use the contact form, or email an office? If I do fill out the contact form, which office will receive it?".

I may replace this section with some more 'social proof'. The testimonial section on the work page is clean and functional but nothing amazing. I may add a more advanced testimonial on the contacts page to encourage a user to get in touch, one that has some nice hover animation features perhaps.

Or simply 'Kill my darlings' as they say in the writing business.

I also intend to add a sticky and mobile navigation.

πŸ“¦   Prerequisites

Before cloning/forking this project, make sure you have the following tools installed:

About

Personal project for a web development agency built using SASS. Features advanced CSS hover animations and CSS Grid.

https://irlgen-digital.netlify.app/


Languages

Language:SCSS 100.0%