-
- )
-}
-
-export default Layout
diff --git a/.storybook/main.js b/.storybook/main.js
deleted file mode 100644
index 3002748..0000000
--- a/.storybook/main.js
+++ /dev/null
@@ -1,55 +0,0 @@
-module.exports = {
- stories: ["../stories/**/*.stories.js"],
- addons: [
- "@storybook/addon-actions",
- "@storybook/addon-links",
- "@storybook/addon-a11y/register",
- "storybook-dark-mode/register",
- "@storybook/addon-knobs/register",
- ],
- webpackFinal: async config => {
- // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
- config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]
-
- // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
- config.module.rules[0].use[0].loader = require.resolve("babel-loader")
-
- // use @babel/preset-react for JSX and env (instead of staged presets)
- config.module.rules[0].use[0].options.presets = [
- require.resolve("@babel/preset-react"),
- require.resolve("@babel/preset-env"),
- ]
-
- config.module.rules[0].use[0].options.plugins = [
- // use @babel/plugin-proposal-class-properties for class arrow functions
- require.resolve("@babel/plugin-proposal-class-properties"),
- // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
- require.resolve("babel-plugin-remove-graphql-queries"),
- ]
-
- config.module.rules.push({
- test: /\\.css$/,
- use: [
- // Loader for webpack to process CSS with PostCSS
- {
- loader: "postcss-loader",
- options: {
- sourceMap: true,
- config: {
- path: "./.storybook/",
- },
- plugins: () => [
- tailwindcss("./tailwind.config.js"),
- require("autoprefixer"),
- ],
- },
- },
- ],
- })
-
- // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
- config.resolve.mainFields = ["browser", "module", "main"]
-
- return config
- },
-}
diff --git a/.storybook/postcss.config.js b/.storybook/postcss.config.js
deleted file mode 100644
index ba5a14f..0000000
--- a/.storybook/postcss.config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-var tailwindcss = require("tailwindcss")
-
-module.exports = {
- plugins: [
- require("postcss-import")(),
- tailwindcss("./tailwind.config.js"),
- require("autoprefixer"),
- ],
-}
diff --git a/.storybook/preview.js b/.storybook/preview.js
deleted file mode 100644
index bde4808..0000000
--- a/.storybook/preview.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { action } from "@storybook/addon-actions"
-
-// Gatsby's Link overrides:
-// Gatsby Link calls the `enqueue` & `hovering` methods on the global variable ___loader.
-// This global object isn't set in storybook context, requiring you to override it to empty functions (no-op),
-// so Gatsby Link doesn't throw any errors.
-global.___loader = {
- enqueue: () => {},
- hovering: () => {},
-}
-
-// __PATH_PREFIX__ is used inside gatsby-link an other various places. For storybook not to crash, you need to set it as well.
-global.__PATH_PREFIX__ = ""
-
-// Navigating through a gatsby app using gatsby-link or any other gatsby component will use the `___navigate` method.
-// In Storybook it makes more sense to log an action than doing an actual navigate. Checkout the actions addon docs for more info: https://github.com/storybookjs/storybook/tree/master/addons/actions.
-
-window.___navigate = pathname => {
- action("NavigateTo:")(pathname)
-}
-
-import React from "react"
-import { addDecorator } from "@storybook/react"
-import Layout from "./layout"
-
-addDecorator(storyFn => {storyFn()})
diff --git a/.storybook/tailwind.config.js b/.storybook/tailwind.config.js
deleted file mode 100644
index 53b7e5c..0000000
--- a/.storybook/tailwind.config.js
+++ /dev/null
@@ -1,36 +0,0 @@
-module.exports = {
- purge: ["./src/**/*.js", "./src/**/*.jsx", "./src/**/*.ts", "./src/**/*.tsx"],
- theme: {
- extend: {
- fontFamily: {
- sans: [
- "Inter",
- "BlinkMacSystemFont",
- '"Segoe UI"',
- "Roboto",
- '"Helvetica Neue"',
- "Arial",
- '"Noto Sans"',
- "sans-serif",
- '"Apple Color Emoji"',
- '"Segoe UI Emoji"',
- '"Segoe UI Symbol"',
- '"Noto Color Emoji"',
- ],
- },
- backgroundColor: {
- primary: "var(--color-bg-primary)",
- secondary: "var(--color-bg-secondary)",
- },
- textColor: {
- primary: "var(--color-text-primary)",
- secondary: "var(--color-text-secondary)",
- tertiary: "var(--color-text-tertiary)",
- footerPrimary: "var(--color-text-footer-primary)",
- footerSecondary: "var(--color-text-footer-secondary)",
- },
- },
- },
- variants: {},
- plugins: [],
-}
diff --git a/README.md b/README.md
index 1304303..e39cdfd 100644
--- a/README.md
+++ b/README.md
@@ -3,18 +3,32 @@
[](https://opensource.org/licenses/MIT)
-My personal website running on Gatsby.
+My personal website running on [Next.js](https://nextjs.org/)
-## Tech Stack
+## Built using
-- [React](https://reactjs.org/)
-- [Gatsby](https://www.gatsbyjs.org/)
+- [Next.js + Typescript](https://nextjs.org/)
+- [MDX using `mdx-bundler`](https://github.com/kentcdodds/mdx-bundler/)
- [Tailwind CSS](https://tailwindcss.com/)
-- [Storybook](https://storybook.js.org/)
+- [Figma (mostly outdated)](https://www.figma.com/file/6umesgU3tEZgkQm9Hrw2PO/jeffjadulco.com)
-## Author
+## Development
-- [Jeff Jadulco](https://jeffjadulco.com)
+```bash
+git clone https://github.com/jeffjadulco/jeffjadulco.com.git
+cd jeffjadulco.com
+npm install
+npm run dev
+```
+
+## Configuration
+
+- MDX - located in `content/blog`
+- Analytics - I'm using [GoatCounter](https://www.goatcounter.com/). If you want to remove or replace it, remove/replace the `goat-counter` script in`_document.tsx` and `useAnalytics`.
+
+## Old version
+
+I initially made this website using Gatsby, here's the tagged version for the last commit before migrating to Next.js: [v1.3](https://github.com/jeffjadulco/jeffjadulco.com/tree/v1.3)
## License
diff --git a/content/blog/2020-into-2021/index.mdx b/content/blog/2020-into-2021.mdx
similarity index 89%
rename from content/blog/2020-into-2021/index.mdx
rename to content/blog/2020-into-2021.mdx
index c0446aa..0918818 100644
--- a/content/blog/2020-into-2021/index.mdx
+++ b/content/blog/2020-into-2021.mdx
@@ -1,18 +1,17 @@
---
title: 2020 into 2021
-date: 2020-12-30
-published: true
-tags: ["life"]
+publishedAt: '2020-12-30'
+updatedAt: '2021-05-08'
+isPublished: true
+tags: ['life']
description: My personal year in review
toc: true
-seoImage: "og-card-blog-2020-into-2021.png"
+seoImage: '/static/og/blog/2020-into-2021.png'
---
-import { ExtLink } from "../../../src/components/atoms.js"
-
2020 has been a year. Yep.
-This has been a loooong year. Or a short one maybe? It's been hard especially with the Covid-19. But it didn't stop us to adapt with the tremendous changes.
+This has been a [loooong](https://youtu.be/6-1Ue0FFrHY) year. Or a short one maybe? It's been hard especially with the Covid-19. But it didn't stop us to adapt with the tremendous changes.
For me, this year was full of growth. I learned so much. This article will serve as a retrospective look at how this year has gone for me.
@@ -36,13 +35,13 @@ Freelancing is great. My income was higher than my full-time work. But doing bot
## I created my personal website
-Creating my personal website was one of my goals this year. I treated it as a legit project with actual project planning using Clickup and time tracking using Toggl. I took inspirations from sites of other devs, but I tried to make it visually unique.
+Creating my personal website was one of my goals this year. I treated it as a legit project with actual project planning using [ClickUp](https://clickup.com/) and time tracking using [Toggl](https://toggl.com/track/). I took [inspirations](https://share.clickup.com/t/h/2xkaht/X0MKPPTJM2MXUHV) from sites of other devs, but I tried to make it visually unique.
From **July 1, 2020**, to **December 29, 2020**, there were **4.8K** sessions on this website. **51%** of the traffic were direct while **28%** came from organic search (Google). Also, this site's dark mode was toggled **6,368** times.
I received a few appreciation emails about my website and my tutorial article. I still remember the feeling when I received the first email, my happiness went through the roof. I never expected these, and I'm super happy that people appreciate my work. Thank you guys!
-I also created my gamedev portfolio website a month after, but it is kind of secret-ish (it's not searchable)
+I also created my [gamedev portfolio website](https://gamedev.jeffjadulco.com/) a month after.
## I started a blog ... kinda
diff --git a/content/blog/css-snippet-bottom-footer.mdx b/content/blog/css-snippet-bottom-footer.mdx
new file mode 100644
index 0000000..2d7972e
--- /dev/null
+++ b/content/blog/css-snippet-bottom-footer.mdx
@@ -0,0 +1,62 @@
+---
+title: 'CSS Snippet: Stay at the bottom, footer!'
+publishedAt: '2021-01-31'
+isPublished: true
+tags: ['css']
+description: CSS trick to keep the footer at the bottom
+toc: false
+seoImage: '/static/og/blog/bottom-footer.png'
+---
+
+
+
+I experienced this footer problem before in this site, but I got away with it because there are no pages that have no content to make this happen π. But in this [side project](https://hn.jeffjadulco.com) of mine (which is a Hacker News reader), there are times when a post don't have no comments yet, and I have no control over it.
+
+I've looked for solutions over the internet and this is the most clever solution I saw: using `flexbox`.
+
+```jsx
+
+
+ Header
+ Content
+
+
+
+```
+
+```css
+body {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+}
+
+main {
+ flex-grow: 1;
+}
+```
+
+I love this solution because it's so simple and it tells us what it does.
+
+> π‘ The whole body is a flexbox which has a minimum height of whatever the browser's height is.
+>
+> π‘ The main content's height grows to occupy the remaining space. Pushing the footer to the bottom of the page.
+
+
+
+And... that's it! Now the footer stays at the bottom whenever there are no or few contents in the page.
+
+You can easily do it on Tailwind too!
+
+```html
+
+ Header
+ Main Content
+
+
+```
+
+I've also made a simple example using CodeSandbox and Tailwind Play.
+
+- [CodeSandbox sample](https://codesandbox.io/s/hopeful-lichterman-g8dkb?file=/index.html)
+- [Tailwind Play sample](https://play.tailwindcss.com/pymHJ6XIPU)
diff --git a/content/blog/css-snippet-bottom-footer/index.mdx b/content/blog/css-snippet-bottom-footer/index.mdx
deleted file mode 100644
index 827fc2d..0000000
--- a/content/blog/css-snippet-bottom-footer/index.mdx
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: "CSS Snippet: Stay at the bottom, footer!"
-date: 2021-01-31
-published: true
-tags: ["css"]
-description: CSS trick to keep the footer at the bottom
-toc: false
-seoImage: "og-card-blog-bottom-footer.png"
----
-
-import { Callout } from "../../../src/components/atoms.js"
-import { ExtLink } from "../../../src/components/atoms.js"
-
-
-
-I experienced this footer problem before in this site, but I got away with it because there are no pages that have no content to make this happen π. But in this side project of mine (which is a Hacker News reader), there are times when a post don't have no comments yet, and I have no control over it.
-
-I've looked for solutions over the internet and this is the most clever solution I saw: using `flexbox`.
-
-```html
-
-
- Header
- Content
-
-
-
-```
-
-```css
-body {
- display: flex;
- flex-direction: column;
- min-height: 100vh;
-}
-
-main {
- flex-grow: 1
-}
-```
-
-I love this solution because it's so simple and it tells us what it does.
-
-
-
-π‘ The whole body is a flexbox which has a minimum height of whatever the browser's height is.
-
-π‘ The main content's height grows to occupy the remaining space. Pushing the footer to the bottom of the page.
-
-
-
-
-
-And... that's it! Now the footer stays at the bottom whenever there are no or few contents in the page.
-
-You can easily do it on Tailwind too!
-
-```html
-