Skip to main content

Hello world: how I built this site

00:03:47:99

How it all started

Back in 2007 I left college without my bachelors filled with hope and a know it all attitude to web development, I knew the fundamentals and theory but a bull heade stubborness prevented my growth into a great developer. I deployed an e commerce site that was moderatly successfull erfelHeath. This was bteween 2010 to 2016 where the web 2.0 had not exploded in complexity(the cloud, mobile development, cyber security etc etc) and I considered myself fairly well rehersed in the technologies. However I started a family, and my current full time employment as a mechanical technician, drained me of all free time and familiarity with industry trends & modern constructs. .

F is Family is show I was drawn to due to how close to home this guys family was to mine

2022

After the birth of my son, I dusted off the desktop and see whats changed in the developer eco system. I had so many questions So Confused.

  • What is react ?
  • A million frameworks, right which one?
  • What is a component?
  • What is a hook?
  • What is a state?
  • What is a prop?
  • What is a promise?
  • What is a fetch?
  • Web 3.0?
  • What is a serverless function?
  • What is a headless CMS? I was overwhelmed, but I was determined to learn and build something. I started with the basics, HTML, CSS, JS, then I moved to React, then I started to build this site. I forked this site from a talented Aussie Developer Hamish Williams.
    I wanted to learn how to build a site from scratch, and I wanted to learn how to build a site that was visually appealing. I wanted to learn how to build a site that was fast, and I wanted to learn how to build a site that was accessible.
    I wanted to learn how to build a site that was fun to use, and I wanted to learn how to build a site that was easy to maintain. I wanted to learn how to build a site that was responsive, and I wanted to learn how to build a site that was interactive. I wanted to learn how to build a site that was engaging, and I wanted to learn how to build a site that was informative. I wanted to learn how to build a site that was beautiful, and I wanted to learn how to build a site that was unique.
    I wanted to learn how to build a site that was mine.

Present Day

Sohere are the components I used to build this site:

  • The site is now based on Remix pages.
  • Styling is now vanilla CSS with postcss to add support for the future native CSS nesting and custom media queries features. I'm using CSS modules instead of BEM syntax to avoid style conflicts.
  • For generating pages from .mdx files.
  • For animation I use Framer Motion.
  • 3D effects are still all using Three.js, but I've added three-stdlib as a better maintained replacement for modules from Three's examples.
  • I'm still using the same useTheme hook to manage the theme, but I've added a usePrefersDarkMode hook to automatically set the theme based on the user's system preferences. I've also added a useMediaQuery hook to manage the responsive design.
  • I'm using the useScroll hook to manage the scroll position and trigger animations.
  • I'm using the useIntersectionObserver hook to lazy load images and trigger animations.
  • I'm using the useLocalStorage hook to save the preferred theme in local storage.
  • I'm using the useSessionStorage hook to save the preferred theme in session storage.
  • I'm using the useCookie hook to save the preferred theme in a cookie.
  • I'm using the useDebounce hook to debounce the scroll event.
  • I'm using the useThrottle hook to throttle the scroll event.
  • I'm using the usePrevious hook to get the previous value of a state.

Conclusion

Behind all the complexity and move quickly and breaking things, I have isolated a few developers who move by a different mottos

  • shift right for security
  • shift left for quality
  • shift up for performance
  • shift down for cost
  • shift in for compliance
  • shift out for innovation I recently completed my bachelors from AlgomaU and I am now a full time developer at a local software company.
    I am still learning and growing, but I am proud of what I have accomplished so far.
    I am proud of this site, and I am proud of the journey that brought me here.
    I am proud of the mistakes I have made, and I am proud of the lessons I have learned.
    I am proud of the present moment, and I am proud of the journey that brought me here. After Training, I am ready.