Writing my profile 5-Dec-2020

Final result

You can check the final result on my website.

The story

The second day of working on my personal website started (actually it’s 7 PM but a true n̶o̶l̶i̶f̶e̶r̶ developer starts coding right at this time).

Problem: on navigation link click the user is being instantly teleported to the section on my portfolio.

Solution: to fix this issue by add smooth scrolling functionality.

How to NPM power

One of the most beautiful parts of learning React & Typescript is the possibility to use npm.

If you don’t know what is NPM — I`ll try to explain it in 5 small steps:

  1. You have a problem/idea
  2. You want to solve/implement it
  3. You go to npm, write keywords
  4. You find that someone has already implemented it and have thousands of downloads per week

̶5̶.̶ ̶Y̶o̶u̶`̶r̶e̶ ̶c̶r̶y̶i̶n̶g̶ ̶b̶e̶c̶a̶u̶s̶e̶ ̶e̶v̶e̶r̶y̶o̶n̶e̶ ̶i̶s̶ ̶a̶ ̶b̶e̶t̶t̶e̶r̶ ̶d̶e̶v̶e̶l̶o̶p̶e̶r̶ ̶t̶h̶a̶n̶ ̶y̶o̶u̶.̶ ̶

5. You`re reusing existing implementation

React-scroll

Let me be a gentleman and place found components here for you (I know you won’t go & google it on your own, my little lazy friend):

P.s. luckily 4 me there was a @types definition for the Typescript, so instead of writing it on my own I can spend time & write this article. What a time to be alive.

Free code snippet — a bonus for my readers:

const CreateLink = (text: string, id: string) => <LinkclassName=”pl-3"activeClass=”active”to={`${id}`}spy={true}smooth={true}hashSpy={true}offset={0}duration={500}isDynamic={true}ignoreCancelEvents={false}> {text} </Link>;

*Small note: In the class section, you will find “pl-3" — this is a bootstrap spacing class.

**Yeah, yeah, I’m using bootstrap, I’m not a real web developer. Here you are, take this 🏔️ rock and throw it into me. I wasn’t even able to find real rock emoji, what to say about writing real CSS…

Result

It’s only the first step in a long trip of great UX, but I`m already happy with the very first result.

DevLog article created by Anton Vlasiuk

You can find me on https://www.linkedin.com/in/vlasiuk-anton/

Don’t forget to be awesome ;)

.NeRD developer