RYAN S. LE

Ryan Le

Ryan Le

Software Engineer III @ American Express



Home

About

Experience

Skills

Projects

Contact



Other Links

GitHub

LinkedIn

Resume

Credits




Updated Portfolio

: https://ryanle.dev/

: https://github.com/ryansle/updated-portfolio

    React.jsChakra UINext.jsReact IconsEmailJS

If you ever saw my old portfolio, you might remember how... clunky it felt. So, once I realized how easy Chakra UI was to work with, and how nice it looked, I knew I couldn't try to advertise my skills as a front-end developer while sticking with my original portfolio website that I built while still trying to figure out how to use React.js.

There were a number of things wrong with it. For starters, I was literally building the website at the time to learn how to use React.js. For a time, I had no idea what I was doing. Whatever code I could steal off of StackOverflow to make things functional, whether I understood it or not, I did. The codebase probably violates the DRY principle of software development more times than you can count, and I didn't know how to use functions like arrays.map(), so there were all sorts of wonky things inside.

So I figured the best thing I could do was just start a new and rebuild my portfolio from scratch.

Mistakes I made originally

  • Since I was in the process of learning React.js, I didn't understand the best practices.
  • I completely misunderstood the concept of building components.
  • I rushed out development to have something ready for the fall recruiting season.
  • I wasn't aware of JavaScript's functional programming paradigms.

What did I learn building this?

For starters: better practices within React.js! I've learned how to build more function-specific components, and some better ways to handle written content like this. It's not perfect yet, but it's a big step forward from my previous implementation. More specifically, how to use a new component library, Chakra UI, which I've since fallen in love with. I also got to gain some additional practice using Next.js and some of its core functions like server-side rendering, routing, and more.