Anna Karlovskaya

Selected Works

ReactJs Projects

ReactJs icon

Burger Builder

Single-Page App

  • A user can choose ingredients from the list, add and remove them
  • The app shows total price and order summary
  • npm module: CSS Modules for scoped CSS
View Live
ReactJs icon

Zodiac Checker

Get Zodiac Signs of your friends or team

  • App accepts mm/dd DOB format and Name
  • Displays corresponding zodiac sign as text, table and pie chart
  • Input validation
  • NPM modules: CSS Module with Sass, "react-google-charts", "react-fontawesome", "uuid" for dynamic IDs
View Live
ReactJs icon

FooBar website

Single-Page App with React-Router

  • Routing: HashRouter, Switch, Route, Link, Navlink and Redirect from react-router-dom package
  • CSS: Bootstrap (Bootswatch Lux theme) plus custom style as inline CSS and component CSS files
  • Nice transition effect using CSSTransitionGroup from react-transition-group
  • Classnames module for conditional CSS and Radium styling library for hovers
View Live
ReactJs icon

Contact Manager App

ReactJS simple app to manage contacts

  • Full CRUD functionality using Context API
  • JSON Placeholder (fake online REST API) and Axios library for HTTP requests
  • UUID npm module for generating IDs on the fly (when did not use JSON Placeholder)
  • Classnames module for conditional CSS
  • HashRouter from react-router-dom module
View Live

Vanilla JS Projects

Js icon

Book List

Add and delete a book using simple UI

  • OOP
  • ES5 (ES6 version see in GitHub repository)
  • Validation and Alerts
  • Sceleton UI Framework
View
Js icon

Calories Tracker

Vanilla JS and Module Pattern

  • ES6 syntax
  • Three module controllers: Main App, Item and UI
  • Materialize CSS as UI framework (based on Material Design)
View
Js icon

Chuck Norris Jokes

Vanilla JS, AJAX and external API practice

  • Enter number of jokes (only positive numbers)
  • App gets random jokes from external database
  • And shows specified number of random jokes
View
Js icon

Tasks Tracking

Add, delete, filter through tasks

  • ES6
  • Error handling
  • Materialize CSS as UI framework
View
Js icon

Loan Calculator

Simple calculator using Vanilla JS

  • ES6
  • Error handling and input validation
  • Bootstrap UI Framework
View
Js icon

Drum Kit

Hit the key and enjoy its sound!

  • ES6
  • Plays sounds on key press
  • Adds nice button animation
View
Magento Logo

Featured Magento Projects

Landing Page about MS Office 2019
This page is dedicated to coming MS Office 2019 version. Based on design requirements I used following CSS3 features such as svg transform for animation, gradients for interesting Headers effect, flex-box for layout.
MS Office Versions Comparison Page
Versions Comparison Page helps users easily to see most popular MS Office versions and navigate to particular one using tabs. This is a custom Magento Module which I built to encapsulate data, functionality and view for this particular page.
Knowledge Base Pages about MS Office
This is a set of pages about troubleshooting MS Office products installation, activation and other most common questions. I like this type of complex tasks, because they require to plan your workflow, organize code and file structure in advance. There are 12 pages with similar design and layouts. So in this particular case I identified design patterns and created one common stylesheet for all pages and then specific css files with individual style for each page. As result, there is only one place for editing most of the style, however it's possible to customize each page individually too if needed.

Tools:

  • HTML/HTML5, XML
  • LESS/SASS, CSS/CSS3
  • Javascript/jQuery
  • PHP/PHTML
  • GIT
  • InVision, Photoshop
  • Responsive Web Design (RWD)
  • Command-line user interface (Terminal)
A Spa Salon Theme

Spanova, A WordPress Theme

Freelance Project

Completed: January 2017

Another spa salon theme designed and developed by me for Cappers Applications company. This is a minimalistic, simple Wordpress website with two pages — Front Page (Home) with four sections and Posts Page (News). The feature of this site is that Services and Prices are combined in one section. To make it happen, I chose Tabbed navigation as solution and made it responsive and accessible using best development practices.

Tools:

  • WordPress
  • UI/UX Design
  • Illustrator
  • Balsamiq Wireframing
  • GIT
  • SASS
View live
Spa Salon Website

Vancouver Green Spa

Freelance Project

Completed: December 2016

This is new Wordpress website for beauty salon Vancouver Green Spa. The main goals of this project were to redesign the previous version of the site and create modern look and feel for it without dramatical changes of the current style. In addition to that, the client wanted to edit content easily and share it on the social media platforms. Also, in scope of the project I made a research and implementation in order to find better solution for the booking processes automatization.

More information about structure and site features see in the Wireframesin PDF format and Mockupin PDF format files.

Tools:

  • WordPress
  • UI/UX Design
  • Illustrator
  • GIT
  • SASS
View live
An Artist’s Portfolio Website

Portfolio Website

Final Project, Technical Web Design Program, BCIT

Completed: October 2016

Working in team me and three partners redesigned and developed new version of the current website of the artist, Aimée Henny Brown. We created responsive WordPress website using Underscores Starter Theme and the best UI/UX practices.

Tools:

  • WordPress
  • UI/UX Design
  • GitHub
  • SASS
View live
Partiendo. Business Brochure Website

Partiendo

Technical Web Design Program Project, BCIT

Completed: June 2016

This was Level 02 project for HTML and CSS Course at TWD Program. In addition to code quality this work was marked by creativity and usability of the design as well.

I decided to make web site for a fictional recruitment company — “Partiendo”.

Note: layout of this project is not responsive and there are only three working pages (Home, Job Seeker and About) due to time limit.

Tools:

  • HTML5 and CSS/CSS3
  • Information Architecture
  • Balsamiq Wireframing
  • Visual Design
  • Photoshop
Read more about working process View live
Landing Page

Landing Page

Technical Web Design Program Project, BCIT

Completed: May 2016

This is my landing page for TWD Program projects.

This page was designed for mobile devices first. I used CSS3 Flexbox mode which helps elements behave predictably and Media Queries with two breakpoints at 575px and 960px.

Tools:

  • HTML5 and CSS/CSS3
  • Responsive Design
  • Mobile First
View live
Responsive Web Page from a pre-designed Mock-Up

Mini Group Project

Technical Web Design Program Project, BCIT

Completed: July 2016

It was small group project where me and a partner created fully responsive web page that matched to the design of the mock-up. I was responsible for aside, trending posts sections and footer. The challenging part for me was to create responsive iframes using positioning and percentages and to fit them in given layout.

For this project we wrote our CSS using SASS and used version control system Git and stored code on GitHub.

Tools:

  • HTML5 and CSS/CSS3
  • Javascript and jQuery
  • Responsive Design
  • GitHub
  • SASS
View live
WOW Radio. Responsive Web Page

WOW Radio

Technical Web Design Program Project, BCIT

Completed: July 2016

This is a single responsive web page for a fictional radio station — “WOW Radio”.

My preferable way to create responsive content is using the CSS3 Flexible Boxes, or Flexboxes. I find the flexbox model effective and easy to use for complex layouts. For example, I can easily change order or direction of content, horizontally or vertically align items, specify the length of a flex items etc. In my opinion, flexbox concept is a new level of creating responsive website layouts comparing with floats.

To ensure that my layout will be adaptable to any current and future devices, I prefer to set breakpoints based on content, not defined device widths. Also I use Chrome DevTools’ Device Mode and viewport controls (responsive or device-specific mode) to test layout.

Tools:

  • HTML5 and CSS/CSS3
  • Responsive Design
  • Logo Design
  • Photoshop
View live

New Worlds Explorer. Matching Game

New Worlds Explorer

Technical Web Design Program Project, BCIT

Completed: June 2016

This was Level 01 project for JavaScript and jQuery Course at TWD Program.

In addition to creating matching game with traditional logic, my aim was to make fun game with animated cartoon graphic and some story. I chose space theme where a user become a scientist in an expedition to remote planets and his goal is to find and collect new species.

Animated rocket ship in the beginning of the game and animated asteroid and aliens in the end were made by using animate.css library.

Note: layout of this project is not responsive due to time limit.

Tools:

  • Javascript and jQuery
  • HTML5 and CSS/CSS3
  • Visual design
  • Photoshop
View live

Let’s make great things together!