Website Day 1

Abeer Rao — Sat, 04 Feb 2023 06:04:44 +0000

So yesterday I took on the challenge to actually get started on my own personal portfolio website. I got started with the design and decided that I will add the content later on when all the heavy lifting has been done. So I went to Dribble to look for some design themes.
And the one I finalised is Neobrutalism. I am very trashy at design and know just about enough for it to pass. But this time I wanted to make the website look actually half decent. Neobrutalism follows the design of having sharp edges, bright colours, and bold strokes, which is quite different from what we see on modern websites today.
I then came across a website called dodonut.com whose colour palette I really liked, so I took out the most used colours and got to work.
I added a header, a basic introduction, my socials, and an about section all following the same pattern. I then realised that having a scroll progress on the header would be good so I looked up some code to do it and put it in.

const [completion, setCompletion] = useState(0)

    useEffect(() => {
        const updateScroll = () => {
            const progress = window.scrollY
            const scrollHeight = document.body.scrollHeight - window.innerHeight
            if (scrollHeight){
                setCompletion(
                    Number((progress / scrollHeight).toFixed(2)) * 100
                )
            }
        }
        window.addEventListener('scroll', updateScroll)
        return () => window.removeEventListener('scroll', updateScroll)
    }, [])

    return completion

This completion variable is a value between 0 and 100 depending on where you are on the page, now putting a transform property on an empty div adds a nice effect to show scroll progress.

<div
    style={{ transform: `scaleX(${completion / 100})` }}
    className={styles.progress} />

I then pushed these changes to the GitHub repo and despite how little you can see, this took a substantial amount of time.

The reason people code is still a mystery. To put oneself through so much pain to achieve so little goes against human intuitiveness. Yet so many of us do it on a daily basis and reap happiness out of it. Humans are truly a weird race - Abeer Rao 2023

Creating My Personal Website

Abeer Rao — Fri, 03 Feb 2023 05:41:20 +0000

Introduction

Having a personal website is a big improvement to any portfolio, especially when you are a full stack web developer. Being one for 4 years, I still don't have one myself to showcase all of my skills and projects. Instead, I rely solely on GitHub and LinkedIn. But today I will be changing that and finally start working on my own website. I will be using Next.JS along with Tailwind CSS and HeadlessUI to style it. I will use GitHub to save all the code and make it open-source.

Step 1 - Getting started

To get started, I created a new GitHub repo and a Next.JS application with Tailwind CSS and connected the remote workflow to the local.

npx create-next-app@latest -e with-tailwindcss abr-dev
git remote add origin git@github.com:AbeerRao/abr-dev.git
git branch -M main
git push -u origin main

And with that, a basic app has been set up. Now I will start making it look how I want it. All updates will be shared through Twitter and dev.to

Link to the GitHub code : https://github.com/AbeerRao/abr-dev

Follow to see how miserable I am at the end of all this.

Forem: Abeer Rao

Website Day 1

Creating My Personal Website

Introduction

Step 1 - Getting started