Hello there 👋, I’m Hans.

Front End Developer, Software Architect, and Photographer.

Welcome To My About Me Page!

About Me 😎

Hi there! I’m Hans. I’m a passionate person who loves building things with code.

My first experience with programming was when I was 12, but it didn’t last long: I learned Delphi, which is a dialect of Object Pascal programming language and even created a couple of smaller applications like a math exercise program. I lost my free time when Blizzard released Diablo, though 😬

Years later, I decided to try learning Objective-C to help out in a project that I was working on. It was a radically different experience and I distinctly remember that it started clicking for me and I was programming every moment of my free time again.

Since then, I completed a degree in computer science and found my true passion in Front End Development and Software Architecture. I love honing my skills to constantly get better in Javascript, Typescript, CSS and React. Seeing my projects improve with the level of my skills gives me great pleasure and feels super rewarding to me.

Besides programming, I enjoy photography 📸, cycling 🚴‍♂️, good wine 🍷 and being outdoor 🌿.

Photography naturally complements eye for detail, lines, composition, symmetry and proportions. For me, it’s about capturing the moment, beauty and wonders of our amazing world while being creative. It’s such an amazing art.

Some Things I’ve Built 🔮

Order Summary Component

My goal was to implement a design pixel-perfectly with only an image of it and the font-family given. Result was this beautiful and reuseable order summary component.

What I learned: estimate distance between UI elements, positioning and aligning items with CSS, improved my eye for detail

React.js | Material-ui | Netlify

Calculator

My goal was to create an interactive UI to showcase React’s capabilities for passing data between child-ccomponents using props.

I found that creating the Calculator-Layout with CSS Flexbox was really tedious and required many div-wrappers so I ended up using CSS Grid instead.

What I learned: CSS Grid Layout

React.js | CSS Grid | AWS S3

Electricity to Carbon Emissions

React-based frontend for carboninterface.com-API. You can enter your weekly electricity usage to receive estimates of your carbon emissions.

To avoid my API-key being exposed, I proxied all API-requests using Netlify-functions through Next.js.

What I learned: CSS specificity and customizing Material-UI components

Next.js | Material-UI | Node.js | Netlify

Greek Restaurant

Responsive restaurant page with design inspiration from Behance.

The entire menu, prices and news section are dynamically loaded from sanity.io, a headless CMS.

What I learned: render content dynamically from CMS, recreate design from figma

React.js | figma | sanity.io | Netlify

Responsive Stats Preview Card

Another implementation-challenge from given images.

What I learned: estimate implementation time, assess typography by eye

React.js | Material-ui | Netlify

Favorite Pictures 📸

Front End Development is a very creative process. Same is true for photography. It is an art which naturally complements eye for detail, lines, composition, symmetry and proportions. For me, it’s about capturing the moment, beauty and wonders of our amazing world while being creative.

Photography and Front End Development both being a real craft require a lot of practice, dedication, time and passion for honing your skills. I find it fascinating and infinitely rewarding to look back at own works and see actual progress in skilled craftmanship.

Here are some of my favorite pictures that I took.

  • #centaur

  • #curiosity

  • #sailing

  • #belvedere

  • #sunflower

  • #deeplook

  • #cosplay

  • #reflection

Let’s Build Something Together 🤝

Feel free to reach me out if you’re looking for a developer, have a question, or just want to connect.

hans@hanskrebs.me