Anzelika Jerofenko


Front End Web

See my work!

profile picture

About

Myself

Self-taught junior front end web developer, practicing the art of bending the will of pixels for a year now. Every day in this field is an adventure and it continues to marvel me how a good font and color choice or a few lines of code turn bland into brilliant. I find that just a functional website is not enough - it needs to visually appeal and harmoniously live with the content it has been trusted to present.

Skills

What I can do for you

Web Design

Aesthetically pleasing website is more than just pixelated information, right? In my hands, every project deserves going for the extra mile finding the exact right color scheme, layout and font.

Web Development

Lately I prefer to build web with Vue, utilising Vuetify library to create polished UIs. Vue has become my favourite framework since it optimises performance (no one likes laggy apps!) and makes dynamic content rendering a breeze

Graphic Design

Illustrative design has been one of my creative hobbies for years. I'm no stranger to fiddling around in Photoshop layers, drawing cartoons or making mockups of a website.

Vue

Vuetify

CSS3

Bootstrap

Javascript

jQuery

Photoshop

Portfolio

What I've done

Sapling business website

Visit site
View Github
More info
kuusetaimed
GOAL:

Make a lightweight website for a family business to replace their out-dated and non-responsive homepage here.

The old site pictured here was made by a "professional" local web developer. It boggled my mind that he charged 800 EUR to put together a site which hurts your eyes with the color scheme and has not thought about mobile responsiveness at all.

So I decided to give this family business a bit of a more deserving web-home pro bono, especially considering that growing trees is a very worthwhile cause.

LEARNING POINTS:
  • Migrating from 5 HTML files to a one page solution. I started with vanilla CSS and HTML, and halfway switched to Bootstrap due to their convenient tab-menu system allowing the site to be a one-pager as opposed to making the user load 5 different HTML files (+background image!) when browsing the site. Due to the minimal content, one-page solution really was best here.
  • Overwriting Bootstrap default styles. I learned a lot about the importance of !important (he-he-he) and ended up in StackOverflow plenty times to see how to disable some of Bootstrap's native behaviour.
  • Mobile responsiveness. At first I handled it with flexbox, but during this project I finally got to first name basis with Bootstrap grid system too. Differences between BS3 and BS4 sometimes caused problem, since you use the screen size prefix -sm- or -lg- differently, but once you get a hang of it, it flies like a dream!
  • Less is more. The old site planted text above pictures and gradients everywhere in the background. All in all, it cluttered everything and made it hard to focus on the actual important information: pricing and address. So I decided to go for a simple approach font-wise here, making sure that the background does not compete with the content and text is easily legible.

GOAL:

Make a website for a magic school larp, allowing players to conveniently get their customised timetable depending on their path/year instead of trying to find themselves in the big timetable for everyone (picture).

This project is where my heart lies. It offered countless facepalms countered with happy "AHA!" moments. Since larping is one of my hobbies and Czocha magic school larp very dear to my heart (after all, where else can you live out your Harry Potter fantasies!), it felt immensely good to build something for my fellow players to use during the game.

LEARNING POINTS:
  • Javascript. It was my first time dwelling deeper in functions, since I had to generate the logic for generating lessons. In this project, I had to create event listeners that kick in only after 1 button from each button group is pressed, and then populate a lesson slot according to their answers
  • Bootstrap grid. Lots of more practice with mobile responsiveness, especially on the songs section, where the number of cards per row changes depending on viewport
  • The tiny touches, color scheme and fonts. This project allowed a lot more creativity and I very much enjoyed choosing fonts, background patterns and tiny logos to artistically illustrate the button options. I also learned about the name="theme-color meta tag , changing mobile browser color: Since the site is meant to be used on mobile devices, matching the browser color with the body backround color added a nice touch and more of an "app" feel rather than a website. I'm now using this tag on every one of my projects for that extra thoughtfulness for mobile browsers :)

GOAL:

Make an personal site showcasing a technical engineer's work experience and projects in a more visually appealing way than just sending a resume PDF.

LEARNING POINTS:

Make an personal site showcasing a technical engineer's work experience and projects in a more visually appealing way than just sending a resume PDF.

  • Modifying a premade Bootstrap theme. Added the following custom elements:
    • Additional profile picture only appearing on mobile view
    • Animated gear icon above navigation menu for a thematic touch
    • Thematic background
    • Picture gallery for one of the projects allowing fullscreen viewing
  • toggle
  • jQuery toggles. On this project there was a necessity to hide certain text from view unless the viewer is really interested. This made me jump into jQuery documentation and StackOverflow and read about accordion toggle functionality. I could even say it was a bit of a stepping stone in my coding journey, since smoothly hiding/showing information really adds a more professional level of interactiveness I did not know how to create before. It was also fascinating to see the comparison and length in code when it comes to toggling with vanilla Javascript and jQuery. Of course knowing the basics is necessary, but oh boy, does jQuery steal my heart in matters like this! (toggleSlide <3 )

GOAL:

Make a fluid single-page personal portfolio site showcasing my skills as a front end web developer.

LEARNING POINTS:
    toggle
  • Visual appeal versus user friendliness. I made this website with a help of a tutorial which included a flamboyant animated fullscreen toggle menu. None of the menu items were visible even on full desktop view. After implementing it and scrolling on my site, I realised it was actually a bit disorienting. So I scrapped the initial navbar code and opted for a sticky top navigation instead, allowing anyone on this site to navigate with ease.
  • Making a site from scratch with vanilla CSS/HTML, not using any frameworks doing the alignments and responsiveness thinking for me. The site you're on right now has been an amazing opportunity to practice flexbox.
  • Pros and cons of libraries. This site implements AOS animations, but one whole day of coding was wasted trying to debug a very weird margin in mobile view which was explained nowhere in my code. By the end of the day I found out that AOS library's classes fade-right/fade-left were the culprits, creating an odd margin in mobile viewports that no inspector could identify the cause of. I learned a lot here through process of elimination, squinting at the box model and googling, which I am sure helps me debug future weird visual errors faster.
  • Form functionality on static Github pages. Since I am not yet all that proficient in backend business and Github does not support PHP, I had to get creative with the contact form you can see below
  • Using a animations as a background. I found particles.js library actually a long time ago and saved it for a special project. It ended up being on my own site right here! Implementing this library was good practice of learning abot z-index and making sure the animation fills the entire background without interfering with other page elements.
  • Finding a gallery solution without Bootstrap. This was quite tricky actually, since I've been so used to Bootstrap's lightbox. However, after some surfing I found this lightweight gallery without a single line of Javascript! I redesigned it to fit my needs:
    • Fixed thumbnail sizes for a clean look
    • Object-fit: cover on thumbnails to remove distortion
    • Repositioned the previous/next buttons
    • Restyled the buttons by replacing them with Font Awesome icons
    • Adjusted border radius and hover effects on thumbnails
  • The above gallery solution was actually a really pleasant surprise since I was looking for a lightweight solution for clickable thumbnail images for ages (such as the before/after picture here)! I'll surely save this code snippet for later use.

GOAL:

Build an interactive feedback presentation tool and manager for team leads.

TECHNOLOGIES USED:

Vue

Vuex

Vuetify

API model

LEARNING POINTS:

This project was my first "hands-on" experience to develop something in a team, during my internship at Joineer AG (Swiss startup for employee surveys). Developing this from scratch was an amazing learning experience where my role as a front end developer was in beautiful synergy with the rest of the team. Inspired by my learnings, I wrote a post on dev.to: "8 things I learned as an intern". Besides the things laid out in the post, here are some key project takeaways:

  • Getting comfortable developing with a JS framework. This porfolio site is built with vanilla JS/CSS and everything written on one HTML page. It's been incredibly eye opening to spend a few months with components, props and 2-way data binding to build more complex project.
  • Refining workflow within the team. We set up a Kanban board and 2 week sprints for realistic development goals working towards the release date. It gave structure to my work and allowed to discuss in advance what parts of the project need co-operating.
  • Deep-dive to CSS. While most of the UI "legwork" was done by Vuetify, I did not want our site to look like it came straight out of the box. Overwriting default styling or JS behaviour required quite a few research hours and it was gratifying to learn how to "mold" a framework exactly to your needs.
  • Data normalisation. In the demo app and repository you may see that I loop through a local dataset to render content. It's kept this way for the dummy data prototype (client demos etc), but the in the production version it's been thoroughly reworked to accommodate API calls that retrieve normalised data. This allows splitting up the code in components more conveniently, since the whole thing no longer depends on the giant "mother array".
  • Lifecycle hooks. Something I didn't have a chance to practice prior my internship, but as I worked on a project where component data was retrieved via API calls, asyncronous tasks and mounted() hook became my best friends!
  • Cute login screen. Practiced my asyncronous skills and sequencing by making a more personalised login UX for our project.
Oh good, you're still here! Here are some corgis as a thank you :)

Personal

Who is the person behind the keyboard?
plane route

My roots are actually from a tiny, yet proudly tech-savy country of Estonia. It's a land of Skype, TransferWise, e-voting from a cold tub and best rye bread your tastebuds can hope for.

However, as fate had it, I moved to Switzerland to follow my heart in the summer of 2019. I live here now with my partner and our two felines, a perfect stereotypical family of "crazy cat people". A mandatory picture of them both below, as they would loudly protest at being left out. (Don't worry, the cat in the middle picture is in perfect health. The weirdo simply likes to sleep with his eyes open)

picture of a larp character lordi leeroy

Sometimes you can find me in Poland, in a castle of Czocha with a hundred other LARPing enthusiasts. Running around in pointy hats and shouting spells is undoubtedly a great way to escape the routine and inject some magic in your life. You need only ask and I can talk for hours about the mayhem that has taken place in that castle.


  • I named one of our cats Leeroy Jenkins as a tribute to my World of Warcraft raiding days.
  • 6 cups of coffee per day. This is the way.
  • Harry Potter and Witcher franchises have my heart
  • I'm at my happiest when I'm elbow deep in some DIY project or a good book.
  • Biggest money pit lately has been boardgames. Everdell collector's editions and Gloomhaven. I could sit up for hours crafting tiny components and painting miniatures. You can see some of my work here!

Contact

Let's create something together! Get in touch: anzelika91@gmail.com