Home | huus.dev

#TOR100

A project for continuous learning & experimenting

Read more about this project on Medium 🔗

A christmas note from Tor

During November/December I have decided to make this site a bit more festive.

Recent projects

Clock App

40 down, 60 to go. This is a Clock app, which uses 3 different APIs to fetch, quotes, time data and location data.

Banking Card Component / UI

Pretty simple session today, using HTML and SASS I created cards based on a design from UIDesignDaily

TODO APP

Partially completed TODO App, built with React, Recoil and styled-components. Will get back to completing it at a later point.

New Message Section App UI

A UI section of a messaging app. Fun with styling radio buttons, input fields and "close-icon".

Links UI

Things are becoming easier and easier, I need to make the move to more challenging challenges from now on, introducing javascript and JS frameworks in the mix daily when I have the time.

Stock Photo Site

Mockup of a very minimalistic stock photo site.

CSS Reference Section

Today's project allowed me to experiment with SASS @mixins. By using @mixins I am able to reduce the amount of repetitive code.

Recipe Newsletter Subscription

Did not learn anything new, this was simply a very standard newsletter subscription modal/form for a recipe blog/site.

Web Dev Course Landing Page

Got a chance to re-use yesterdays (day 31) email validation script to make a simple validation.

Pod Request Landing Page

The goal of this project is to create another landing page for a fictitious podcast SaaS. I will use HTML, SASS (BEM) and JavaScript.

404 Page

Project 30! A very easy 404 page, made using my standard HTML/SASS workflow.

React + Airtable Favorite Apps

This app is where it gets fun for me. I am able to pull in information from a completely different source, map it out and display it however I want. Just like magic!

Website Section

Cool little website section which can showcase blog posts or features! Created using my standard HTML/SASS workflow and BEM.

Christmas Gift Modal

A fun christmas gift/shopping modal. Created using my standard HTML/SASS workflow.

Mount Rack Landing Page

All caught up after completing 3 challenges today. This was a desktop design landing page that I decided to turn mobile at the very end of the challenge.

Electricity Company Dashboard Component

Another round of playing catch-up, simple dashboard component with hover and click animations using CSS

Profile Card Component

To catch up on the projctes after a weekend away from home I created this profile card component.

App List Page/Component

Made this one a little more personal. I used my top 6 favorite iOS apps to make up this app list modal/component! I also made a tooltip from just CSS! Using the before and after pseudo-selectors to display a "verified" tooltip on hover!

Course Progress Card

Another progress bar card! This time with CSS animation using @keyframes!

Customer Review Card

It's always fun to create progress bars in various formats. This card, created with HTML and SASS shows an example of a customer review component.

Share Card component

Share card component made with HTML and SASS

Stats Card UI Component

Very easy challenge today, a simple "stats card"-component, is responsive and made using HTML, SASS and BEM methodology.

Subscribe Card

Simple email newsletter subscription card

Coronavirus Accordion Component

A simple UI component/accordion from the awesome collection at UI Design Daily

Checklist Cards Component

Today's components are not my best work, today was more about completing SOMETHING rather then something perfect.

Alert Notfication Component

Switching it up, this is just a simple 3-piece alert/notification component. Built using HTML and SASS

Social Media Dashboard with Theme Switcher

HTML, CSS and JS Social Media Dashboard with a dark-mode switcher. Made about one month ago, published today as part of TOR100 Day 14.

FAQ Accordion Card Component

I have become substantially more proficient with CSS positioning and making things go where I want them to! JS to toggle --open class for the animation.

Officelite Coming Soon

Great project using HTML, SASS and JS to create a coming soon page with a Local Storage based countdown/timer.

Article Preview Component

A UI Component used to display posts, articles or similar. Created with HTML, SASS and JS!

Clipboard Landing Page

Landing page for "Clipboard". Better use of BEM on this project, but still exploring the best way to use it.

Insure Landing Page

Structure, and positioning images and vectors "wherever" needs to improve, but great project nonetheless.

Project Tracking Intro Page

Pretty basic component/landing page, but the placemenet of, and making the SVG responsive was tricky!

Coding Bootcamp Testimonials Slider

What seemed like a very simple challenge ended up being the most hackiest. It works, but I'll have to revisit this challenge at a later stage, to start over and make it cleaner.

Testimonials Grid Section

Another interesting challenge from Frontend Mentor. Great use of CSS Grid some keyframe animation and my first project using CSS BEM.

Ping Single Column Coming Soon Page

Used JavaScript to check for current viewport width, and then display the correct error message based on that width.

Huddle Landing Page with a Single Introductory Section

Landing page created using HTML and SASS, SASS made it a whole lot easier to structure and style nested elements, and makes the code modular and cleaner.

Single Price Grid Component

This simple project made me very aware of how lucky we are to have CSS extension languages like SASS.

Intro Component with Sign Up Form

Second project, simple landing page with a sign up form. Created a very basic form validation that checks if fields are empty or not.

Four Card Feature Section

The first project in #TOR100, a simple four-card feature section fully optimized for mobile screens.