🤨 What is this?

This is my new lifestyle! Built from the ground up with an entirely new technology stack that I curated based on what I've learned and used over the years.

So with the amount of work that went into rebuilding my Front-End profile, a brand new look and feel with loads of new features and options, I thought now would be a good time to show you some of them.

❓ Why

In short, it took too long. I usually try to update my personal profile every year. I use it as an opportunity to show off what I've been using, see how much I've developed with new ideas, etc. However, due to complications, I kept putting it off and putting it off and never doing it. However, lately I've had a burst of motivation to make it and release it. Even my previous portfolio site, deployed in early 2021, looks good even today. However, it was built thick and fast using HTML with CSS and meant that if I wanted to expand on it it was perfectly possible, but anything else would have been a lot more work.

So, after a few months since the launch of my last portfolio website, I decided to work with what I've been learning, taking some inspiration from the communities I'm active as a base!

🔨 Tech Stack

• ⚛️ React / React Native / Preact (For Production)
• 🎖️ JavaScript
• 🌐 TypeScript
• 💪 Next.js
  • 🔍 next-seo
  • 🌙 next-themes
• 👩‍🎤 EmotionCSS
• 📦 Git (For GitBash)
• 💄 Twin.macro (For Tailwind CSS)
• 🪶 Feather Icons
• 🪶 Phosphor Icons
• 🗄️ Hookstate
• 👍 react-use

🤏 Vite

I originally started planning, designing and building this rebuild in early 2022, great for optimization, I guess I would say Vite and Next.js are my main production environments, for personal projects.

As my development progressed, I was planning to build projects using Vite and React, and I still do, I love Vite & React. However, since then, I've learned to use other tools to create even better products, faster. Next.js being the most obvious. Vite's hot module reloading (HMR) is incredibly fast! To this day I still think it's faster than Next.js (even with the ESModules experimental feature flag turned on), however I was willing to make that trade-off for the other features it offers out of the box compared to Vite.

✨ Features

As this is my new rebuild comes a host of new techniques and improvements.

💪 Next.js

Released in 2016 under MIT license, the Next.js.

In summary, it is an open source framework, created with React and allows the development of both front-end and back-end applications.

const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')

module.exports = (phase, { defaultConfig }) => {
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      /* development only configuration options here */
    }
  }

  return {
    /* configuration options for all phases except development here */
  }
}

⚛️ Preact

One little feature that I often forget I added, but helps a lot with package size, is Preact.

In short, my Next.js projects are configuring to replace React with Preact for better production builds.

webpack: (config, { dev, isServer }) => {
    if (!dev && !isServer) {
        Object.assign(config.resolve.alias, {
            'react': 'preact/compat',
            'react-dom/test-utils': 'preact/test-utils',
            'react-dom': 'preact/compat',
        });
    }

    return config;
},

💄 Tailwind

A hand on the wheel resource that after I added it to one of my projects, I didn't stop, it helps a lot with the styling part of the development, is Tailwind.

In short, you add component styling right into the classes!

<div>
  <p>
    I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at
    <a class="underline decoration-sky-500/30">My Company, Inc</a>.
    Outside of work, I like to <a class="underline decoration-pink-500/30">watch
    pod-racing</a> and have <a class="underline decoration-indigo-500/30">light-saber</a> fights.
  </p>
</div>

Install Tailwind CSS

Install tailwindcss via npm and create your tailwind.config.js file.

npm install -D tailwindcss
npx tailwindcss init

Configure your template paths

Add the paths to all your template files in your file tailwind.config.js.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind directives to your CSS

Add @tailwind directives to each of the directives from the Tailwind layers to your main CSS file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Start the Tailwind CLI build process

Run the CLI tool to check your files template for classes and build your CSS.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Start using Tailwind in your HTML or component

Add your compiled CSS file to <head> and start using Tailwind's utility classes to style your content.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

🔗 Finishing

This is just a little bit of the many news that I've been through, I hope that next year, I'll come to update this blog and see how far I've managed to get, I want to thank everyone present so far and I hope to meet and participate in more events to spread technologies and information that I see that has the possibility to change our future!