About This Website

This website is build with Remix, a React framework. Actually this is my second personal / portofolio website. My old website is still Live on https://qwz.netlify.app. At first, I see NodeJS is just gonna make my site load longer as they had a crazy sh*t in "node_modules" folder. I started to intrested in React after re-watching Fireship video about reverse-engineering the Facebook's dropdown menu with React and Tailwind CSS. Then there's some hype around about Remix, a brand new JavaScript Framework (Actually already running since 2019 but it's paid, then recently they make it free and open-source)

Sometimes I think "Does using a JavaScript framework for a personal website an overkill?". If you asked me what is one think that stress me out during developing my website, It's no-reusable-components. On basic HTML file I have to copy and paste some main components from one file to another html file. And since in that time I had quite some files... It's stressing me out. I watch some React tutorial and I quickly understand how reusable-components work. Firstly I tried React CDN. And use babel as the "translator" for ES6/JSX syntax. I only use React for rendering basic components like header and footer. It work flawlessly, but to be fair, it kills the performance of my website. It loads horribly, and may impact the UX. After actually make a NodeJS App with npx create-react-app multi-million-dollar-startup, hell. I fell in love with it, really.

If we look the difference beetwen my first and this second site, it's indeed really different. The Major difference :

  1. Consistency
  2. Minimalistic
  3. Performance

Consistency

In my previous site, if you ever visit it maybe you'll notice that it's very vibrant and colorful. And you go to other page and it's became dark and cold. There is no persistant or consistency for one vision. And most of the components are made up on every page. Well, sometimes I think it's good... maybe?? I don't know. Every page has they're own unique style, and for some it may appears to be "not good"

Well now it's more consistent. Dark, suttle, blurry, simple, but still bring life to it. I really think it's worth it to make a whole new site rather than keep remaking and fixing what's broken (not really).

Minimalistic

My previous site is too rich of an elements. The colorful scheme, and many unessecary things floating around. I sometimes hate to see it to be honest. In my current site, I don't provide a whole menu for a category on the header nav. Instead, I only put the main pages. It's also now responsive on both wide and small screen

Performance

Maybe the biggest performance decrementials affect my site is when I use React and Babel both trough CDN. It's literally killing the UX, as the header and footer is loaded using React components. And using Babel straighly to the browser is indeed not a good idea.

And that is when I actually make a React app. And discover Remix trough Fireship.io as the "new" Javascript Framework. Couple days later after playing with plain React, I decided to try out Remix. And I never regret it...

ASSETS

// Logo's And Icons

Width : 1536px

Height : 1536px

File Size : 107kb

DOWNLOAD

Width : 3205px

Height : 738px

File Size : 53kb

DOWNLOAD

Width : ~ px

Height : ~ px

File Size : 6.5kb

DOWNLOAD

LICENSE

// CC-BY-NC-SA-4.0

Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International


You can use this Images for personal use, altough I don't know why... But not for commercial use. You can use it for a thumbnail, maybe. I don't actually know what I'm sayin' smh.

READ FULL

CONCLUSION


    Tech Used

  • ReactJS
  • Remix Run
  • NodeJS
  • Formspree
  • Netlify
  • Firebase
  • React-Cookie-Consent

    Tools I Use

  • Front-matter
  • Marked
  • Tiny-Invariant
  • SASS
  • Concurrently

githubgithub