volodymyr-kushnir / volodymyrkushnir.dev Goto Github PK

View Code? Open in Web Editor NEW

16.0 3.0 27.0 23.27 MB

My very own personal website. Basically this is just a résumé.

Home Page: https://volodymyrkushnir.dev/

License: MIT License

HTML 85.06% CSS 14.86% JavaScript 0.08%

personal website resume gh-pages html css javascript workbox

volodymyrkushnir.dev's People

Contributors

Stargazers

Watchers

volodymyrkushnir.dev's Issues

Elaborate on "do some extra things from time to time"

As I said last thursday at 10:30 AM:

Yeah, that's two projects and academy. Sometimes I "mentor", sometimes I amuse people, I'm good at kitchen talks if you ever would have a need for one, list goes on

Make <head> consistent between translations

Main index.html and both uk_UA and ru_RU versions should have the same <head>.

Translate Education block to Russian

Button loses color when active

"Midnight blue" and "Chartreuse" buttons loose color when clicked.

Update site previews for social sharing

It'd be nice to load images when user actually clicks the "dots". It is sort of an "Easter egg", not many users will find, let alone care for it, hence it's probably a good idea to implement a lazy loading mechanism.

So let's start with Dominant Colors for Lazy-Loading Images by Manuel Wieser. A week later Krasimir Tsonev released Coloor (which isn't actually a lazy loader I'm looking for, since it does provides thumbnails for images, but it also loads those images immediately when you include the client script on your page). So the alternative could be a Lazy Progressive Enhancement, but I've seen people complaining about <noscript> being a not very semantic solution, so to speak. Also, it's built around getBoundingClientRect and mentions that it's going to

be updated to use intersection observers when it becomes standardized.

Now that they are kind of here, I've been looking at this API in depth with the help of the Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver article on Smashing Magazine and post by Dean Hume called Lazy loading images using Intersection Observer.

So it seems like a complicated API. That's when it's probably good to take a step back and see if there are any other ways. Lazy Loading Images? Don’t Rely On JavaScript! sounds interesting. As well as the Immaculate Imagery with Lazy Pictures & BPG. Also I took some time to see the alternatives on GitHub, namely the Layzr.js and Responsively Lazy. Engineers from the Telerik have an interesting approach to solving the issue as well, go read Lazy Loading Images on the Web.

Now what will I choose? Can't tell, need to do some more research and see what http://caniuse.com says.

Style as A4 sheet of paper

As it is with the Résumé — style the letter as a sheet of A4 paper laying on the desktop. Add orange frame, switch to system fonts stack. Use the usual setup with stylesheet rules in ./assets/stylesheets/base.css.

Translate both Likes and Dislikes blocks to Russian

Add README.md

Add README.md and use it to explain project's purpose and structure, design and architectural decisions, vision on the project's future.

Extract avatar into an external svg and optimize it

Avatar may very well be an external asset — I can resize PNGs to a certain width (since I know that they are being resized by the browser anyway, so I don't need them to be that wide), base64 them and inline straight into the SVG. This will save some requests to the server and won't be harder to maintain, as it may seem at first, because the next version of the avatar would most likely require a complete overhaul anyway.

Max width for svg id="portrait", as I call it now, is set to 15em, which is 210px at 14px base font size. Well, let's set it to rem and base the asset on this width.

Add transition to the shadow behind the paper

Introduction letter already has it, so double-check it and if it is smooth enough, then apply it to the Resume page as well.

Translate Experience block to Ukrainian

Fix `lang` attribute

Set proper language codes for the lang attribute (ISO Language Codes).

Add a proper avatar

Replace avatar placeholder with something of mine.

Switch to FontAwesome 5 CDN or use inline SVGs

Let's say we are considering to implement AMP (Accelerated Mobile Pages), which means that it's probably best to inline the icons instead of making yet another HTTP request to fetch whole-blown collection of icons.

Set lang attributes in LANGUAGES section

All list items should have lang attribute set to the corresponding language.
Read this https://bitsofco.de/use-the-lang-pseudo-class-over-the-lang-attribute-for-language-specific-styles/ while you're at it. Useful.

Fix errors in console

Console yields "Uncaught TypeError: Cannot read property 'setAttribute' of null at (index):48". Problem with document boundaries or what?

Refactor list styles

Center glyphs for ordered, unordered, and collapsible lists. Make them look roughly the same size. Ordered lists should be available in two options — white on black and black on transparent.

Timeline has an unnecessary bottom margin

Look for this rule .timeline > ul and remove bottom margin, other lists may have it as well.

🚬

Note that you quit smoking as 1. this is important, and 2. this basically says that you have little to no bad habits (well, I mean, the common ones, you know).

Mention when you relocated to Lviv, add links to Google Maps for both cities you lived in

— What subject says. Also, it'd be great to calculate how many months of rent you have already paid. Let it be a reminder for you.
— Reminder of what? To buy an apartment?! To settle down?!
— Well, I don't know, let's have it anyway.

Upgrade to [email protected]

Translate Education block to Ukrainian

Prettify circles and bullets

Three dots in the timeline look awkward on iOS, black circles in the Education section seem to be too large as well. Let's maybe replace them with bullets.

Change a:hover effect

Here's a nice concept https://codepen.io/christiancroser/pen/xqrLBm.

Create folder structure

I think /posts/introduction-letter-to-binary-studio/ would be a nice home for the Introduction Letter. /posts/ would have to redirect to / for now, maybe later I'll create some sort of the Contents page with the links to all posts.

"Будувати", not "майструвати" in Ukrainian translation

Subject says it's all — just fix the translation error in intro.

"Domestic passport", not "internal"

English, motherfucker! Do you speak it?!

Switch to system fonts

Here's a nice post on the subject — Shipping system fonts to GitHub.com. Medium (System shock) and Booking.com (Implementing system fonts on Booking.com — A lesson learned) both have shared their experience as well. In fact, if you're up to know a whole lot more on the matter ― head over to A List Apart's Webfonts on the Prairie by Richard Fink.

A nice explanation of the term 'system fonts' can also be found in Craig Hockenberry's article I Left My System Fonts in San Francisco (make sure to also read the follow-up post as it has recent developments on the matter).

Basically, judging from my tests, Segoe UI will look almost identical to Open Sans, so switching to system fonts will save 8 requests (~100KB). Specific CSS rule can be obtained from the example shared by the guys from WordPress in Native Fonts in 4.6 (they also tested it extensively and they do have a large enough clients base to be a reliable source).

Translate Character block to Russian

Check commas

You need to have commas before "etc", for example. Look for more cases.

Create index.html

Use the same boilerplate as the root index.html does, replace the content with what's in the introduction-letter.pdf.

Translate Character block to Ukrainian

Upgrade to [email protected]

#frame has to have negative z-index

Since it is absolutely positioned it automatically covers the content area making it impossible to interact with the content (i.e. select the text, hover the links). Hence it has to be either lowered beneath the #content on z-axis with z-index: -1; or it could have pointer-events: none; so that it doesn't capture the mouse. Maybe latter is better.

Make it responsive

Nuff said.

Refactor CSS

Compare CSS of both résumé and introduction letter and level them up so they behave similar.

Fix childhood and grown-up anchors

<base> tag is used for convenience when specifying assets' URLs, but this also leads to a problem with <a href="#childhood"> and <a href="#grown-up"> in a translated versions of the document.

Add cross links

Add cross links from Résumé to Introduction Letter and back.

Make language selection links actually a links

So the language selection links are basically links, but behave like buttons so let's add a styling to them.

Maybe use srcset for images, optimize images

Resume can probably use high-resolution images, because those aren't loaded immediately, but introduction letter could probably leverage srcset attribute to load smaller images on mobile. Also it's probably a good idea to research on image optimization techniques in 2018 and leave research results here in the comments.

Fix sharing to Facebook

Fix sharing to Twitter

Keyboard accessibility

Make sure that site can be navigated solely by keyboard. The default keyboard navigation order must be logical and intuitive (left to right, top to bottom).

Clone and translate "Recent" and "Back then" block to Ukrainian and Russian

Both translations don't have abovementioned blocks, so it would be nice to add those.

Set proper meta information

Lighthouse complains that there's no meta tags for viewport and manifest, and also it isn't happy with service worker being omitted from this page.

Details/summary and rem calculation bug in Safari

Safari (both desktop and mobile) has a weirdest bug with calculating rem size if the page includes <details> tag. Any element that comes after this tag and has anything measured in rems — be it margin, padding, font-size, whatever — will have wrong values. This can be observed only until the very first repaint of the page — switching orientation or resizing the browser window will make this bug immediately go away. Hence, this whole situation can be fixed if one puts this script in the footer of the page

/*
 * Have to force redraw because using details/summary tag on iOS introduces rem bug
 * https://twitter.com/csswizardry/status/897110955448029184
 */
var hack = document.getElementById("grown-up");
hack.style.display = 'none';
hack.offsetHeight; // no need to store this anywhere, the reference is enough
hack.style.display = 'block';

essentially triggering a repaint immediately after the page loads.
Another possible solution would be to not use <details>, obviously.

Add photos

Add both profile picture and footer photo.

volodymyr-kushnir / volodymyrkushnir.dev Goto Github PK

volodymyrkushnir.dev's People

Contributors

Stargazers

Watchers

Forkers

volodymyrkushnir.dev's Issues

Recommend Projects

Recommend Topics

Recommend Org