Cocktail bar mockup page

Ah, long time no posting. To be honest, I don't know why - guess I've just got lazy.

But then again, I forgot how this kind of  "journal" could be helpful for taking notes of how much I improved (or didn't) over time. Now, back to business ----->


This is probably my best work so far concerning the design only. It has nice color combinations, cool effects (especially that text-shadow property that gives that kind of 3d effect and feeling of depth on those letters).

Last, but not least is that hamburger menu is written from scratch in vanilla JavaScript. Yes, it has a few more lines of code comparing it with the same thing written in jQuery (in which I coded it first), but I like my pure JS more :)

I won't post a screenshot, here is the link to the live demo.

Github link

Interactive responsive form

Here is (another) form made by me. This time, it's a bit interactive, since user can choose to sign up and to check if he wants to get updates. Messed with keyframe animations a bit, which are slowely becoming my favorite part of CSS.

Also, I did lost a bit nerves with all those hacky positioning :)))

Github link

Portfolio 3 / About section

Finished About section, I might add a few more details just to make it visually more appealing. But nevertheless, it looks really good imo.

First React app

This is my first React app that's not something too basic. It's not that it is something complex either, but I think that it was just fine for me to grasp some of the main concepts. There is almost everything - user input handling, conditional rendering, API calls. UI (Semantic UI) is pretty simple, but I'm planning to change that some time in the future.

Github link

Portfolio part 2

I didn't manage to dedicate as much time as I wanted to this project, since it is kind of ovewhelming to make few things at the same time while still learning those technologies. However, this is the final form of my portfolio landing page. There are some quirks to fix, like hamburger menu etc., but guess I will do that at the end.

Portfolio part 1

The time has come for me to finally make a portfolio site. Since I'm getting old, and I don't go out anymore, what could be more fun than some coding on a Saturday night ?

Landing page is ready, it is responsive, and looks pretty ok to me. 

Well, today is Sunday and while browsing internet for some subtitles, I found a site which color scheme seemed very interesting to me, so I applied it on my own and now it is yellowish/dark blue, before it was grey/black.

Quiz app

This is so far the most complex app that I have made and the first time that I have used multiple JS files with local storage (yeah, not that good practice).

In short: app consumes questions from an API, displays them to the user, user chooses the answer and proceeds. If user gets it correct, he gets 10 points, if he's wrong, he gets nothing. Simple as that. At the end there is a form for user to enter his current score, and scores are ranked by the highest.


Github link

Holy grail layout

This one is made for the sole purpose of having a flexbox responsive template which I could use in some future projects. Again, nothing too complex, but very useful.

Github link

Image gallery

I was overwhelmed with some personal stuff last two weeks, so I didn't make any updates.

Here is a small project, a simple image gallery made with vanilla JavaScript. 

Github link

Rock, paper, scissors

I've been a bit lazy lately about posting stuff here, but here it is finally.

Standard rock, paper, scissors game, first time I wrote every non-anonymous function as an arrow function.

Everything works fine, but I think that it could be refactored a bit, so I will definitely have that in mind.

Github link

Responsive register form

I had some health problems so I didn't write this right away, but here it is. 

Again, nothing too complex, I was practicing visual design skills which I lack, but I really think it looks nice.

Github link

Task list :D

The bread and butter of every serious web developer.

Seriously, I just wanted to use ES6 class constructor function, and to mess with the DOM a little bit.

The result is astonishing!

Speech recognition app

I'm couple of days late with this input, but better late than never.

Here is my speech recognition app (although my laptop mic is not the best choice to go with) that reconizes user's speech and translate it into english words on the screen.

It is made with using SpeechRecognition interface of Web Speech API (which is, btw, still experimental techology if you look it up on MDN site). Basic functionality is here, but unfortunately, it doesn't work offline.

Github link

Consulting company site

Here is my latest work, a consulting company web site. It's not anything complex, actually it is a pretty cookie cutter design, but it helped me to grasp a bit more on the responsive design, with which I'm still not 100% comfortable yet, butt I'm getting there.

This is also the first time that I've implemented smooth scrolling, which is imo a pretty cool effect, and to achieve what I wanted, I've used - jQuery(!).

One more thing is that this is a pretty good example to refactor things, especially because there a lot nested elements that have the same class prefixes. I will do this in SASS.

Github link

Expandable search bar

Once again, one of those "basic" projects, but I had a few issues until I made it to work the way I imagined.

This was my first try 

Everything worked fine, except the typewritter effect that I wanted to achieve. The letters were showing up, but not the way I wanted. They were showing one by one and then disappearing, and I wanted them to show up without disappearing. After 40+ minutes of fiddling around and googleing, somehow I manage to come up with my own solution and it looks like this

So, I just dropped getAttribute and simply displayed input message as a current character that is added from placeholderMessage variable into inputMessage variable when typeWriterEffect function runs.

Also, I've used classList API add, toggle and remove methods to manipulate with CSS.

Github link

Small fixes on my Cinemash site

Today I've added some small fixes on my Cinemash site, few new classes in HTML to meet BEM standard, and also some changes in my CSS to apply thoses changes on these new classes.

Digital clock

Yeah, still pretty basic stuff, but I had some issues with making those template literals work. Also, I found out that in JavaScript, days of the week start with Sunday being at the index position of 0.

There was also a string variable named period, which would change despite if it was AM or PM time, but I later dismissed it since the clock is based on European standard.

edit: fixed an issue where clock showed 12 insted of 00 hours.

Github link

JavaScript calculator using grid layout

Since I'm getting to grasp basics of grid layout, what project could be better than the good old calculator ?

Despite my initial thinking that it will be somehow complex to implement, it was actually pretty easy and neat, about 3 lines of code. I've learned about grid-template and grid-column shorthand, repeat function and span option on grid-column.

About JavaScript part, there is nothing too fancy, just some usual functionalities - basic arithmetic operations. Also, this is the first time that I have used eval() function, since I didn't really want to bother with regular expressions, and I think that this way the code is much neater and easier to read.

edit 30.1: changed variable name to be more readable

Github link

Test

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et nibh auctor, imperdiet nulla nec, congue turpis. Sed pulvinar a massa sit amet congue. Cras a tincidunt lacus. Vivamus et neque sodales, viverra lacus nec, consequat est. Etiam non mollis augue. Vestibulum eu ultricies ex. Nullam ornare ipsum in diam iaculis elementum. Aenean odio felis, aliquam eu felis eget, pretium mattis ligula. Nulla convallis lacinia est vel tristique. Morbi eu turpis dictum dolor rhoncus mattis. Nullam vestibulum arcu vitae nulla dictum imperdiet.

Aenean metus enim, sodales eget blandit fermentum, vestibulum et magna. Vivamus vulputate scelerisque lorem. Curabitur pharetra purus tortor. Curabitur congue molestie neque, nec pharetra dui dignissim nec. Praesent hendrerit, diam ac iaculis elementum, nulla massa consectetur tellus, et bibendum dui felis id mi. Integer pharetra vestibulum erat. Suspendisse suscipit dapibus sapien vitae tempus. Proin vitae sapien turpis. Duis eleifend, ipsum et tincidunt hendrerit, libero erat dapibus ante, non porttitor turpis ipsum quis tortor. Donec ut dui vitae tellus elementum fermentum. Sed consectetur, ligula sed pretium aliquam, nisi elit varius neque, sed suscipit tortor quam sed sem. Cras elit augue, finibus sit amet tristique non, dictum quis sapien.