kieran6roberts / Kieran-SaaS-Landing

✌ This is my landing page built for a fictional SaaS that I'm definitely not building.

Kieran's SaaS Landing

Welcome to Kieran's SaaS Landing. This is a fictional landing page built as a personal project for my portfolio. I wanted to first create a design using Figma before building out the code myself.

The focus would be to create a modern design and ensure the site was responive, accessible and performant.

Deployment

Live site is available here kieran-sass-landing.netlify.app

Screenshots

Content

• Designed by myself using Figma

• Responisve & accessible landing page

• Optimized for performance

Tech Stack

• HTML
• SCSS
• Vanilla JS (not required)
• Snowpack 3.2.2
• PostCSS 8.2.9

Run Locally

Clone the project

  git clone https://link-to-project

Go to the project directory

  cd Kieran-SaaS-Landing

Install dependencies

  yarn install

Start snowpack dev

  yarn start

Watch for style changes

  yarn watch:sass

Snowpack build

  yarn build

Lessons Learned

The main takeaway from this project is how I was able to be a much more productive developer when working from a design. I usually end up iterating designs in the browser which leads to much wasted time.

This time however I designed my first page using Figma and was surprised at how quickly I could come up with a good looking design. Going forward I will designing any personal projects before starting with the code.

Roadmap

• Fill out some of the whitespace in the features section

• No current plans to build out the rest of the site.

Feedback

If you have any feedback, please reach out to me at @Kieran6dev

Author

• @kieran6roberts.