migrate website to astro

2024-06-25 10:07:29 -06:00 · 2024-06-25 10:07:29 -06:00 · 667038d811
commit 667038d811
parent f1b9e3ff61
71 changed files with 13571 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,25 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
+.vercel
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,54 @@
+# Astro Starter Kit: Basics
+
+```sh
+npm create astro@latest -- --template basics
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+│   └── favicon.svg
+├── src/
+│   ├── components/
+│   │   └── Card.astro
+│   ├── layouts/
+│   │   └── Layout.astro
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -0,0 +1,32 @@
+import { defineConfig } from "astro/config";
+import react from "@astrojs/react";
+import tailwind from "@astrojs/tailwind";
+import mdx from "@astrojs/mdx";
+import rehypePrettyCode from "rehype-pretty-code";
+import rehypeSlug from "rehype-slug";
+import vercel from "@astrojs/vercel/serverless";
+
+// https://astro.build/config
+export default defineConfig({
+  output: "hybrid",
+  adapter: vercel(),
+  site: "https://www.juancman.dev/",
+  integrations: [
+    react(),
+    tailwind({
+      applyBaseStyles: false,
+    }),
+    mdx({
+      syntaxHighlight: false,
+      rehypePlugins: [
+        rehypeSlug,
+        [
+          rehypePrettyCode,
+          {
+            theme: "catppuccin-mocha",
+          },
+        ],
+      ],
+    }),
+  ],
+});
--- a/components.json
+++ b/components.json
@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.mjs",
+    "css": "./src/styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,45 @@
+{
+  "name": "website",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.7.0",
+    "@astrojs/mdx": "^3.1.1",
+    "@astrojs/react": "^3.6.0",
+    "@astrojs/rss": "^4.0.7",
+    "@astrojs/tailwind": "^5.1.0",
+    "@astrojs/vercel": "^7.7.2",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@tailwindcss/typography": "^0.5.13",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "astro": "^4.11.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "fast-glob": "^3.3.2",
+    "lucide-react": "^0.396.0",
+    "markdown-it": "^14.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.1",
+    "rehype-pretty-code": "^0.13.2",
+    "rehype-slug": "^6.0.0",
+    "sanitize-html": "^2.13.0",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss": "^3.4.4",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.5.2"
+  },
+  "devDependencies": {
+    "pocketbase": "^0.21.3"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/favicon.svg
+++ b/public/favicon.svg
--- a/src/assets/about/written-by-human-not-by-ai.svg
+++ b/src/assets/about/written-by-human-not-by-ai.svg
@ -0,0 +1,30 @@
+<svg width="131" height="42" viewBox="0 0 131 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 0.5H116C124.008 0.5 130.5 6.99187 130.5 15V41.5H15C6.99187 41.5 0.5 35.0081 0.5 27V0.5Z" fill="white" stroke="black"/>
+<path d="M17.9605 24.1575C21.4266 26.9643 26.3836 26.9643 29.8497 24.1575L28.5095 22.5026C25.8248 24.6766 21.9854 24.6766 19.3007 22.5026L17.9605 24.1575Z" fill="black"/>
+<path d="M19.404 20.5134V17.6365H21.5336V20.5134H19.404Z" fill="black"/>
+<path d="M26.012 17.6365V20.5134H28.1415V17.6365H26.012Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35 21.5C35 27.8513 29.8513 33 23.5 33C17.1487 33 12 27.8513 12 21.5C12 15.1487 17.1487 10 23.5 10C29.8513 10 35 15.1487 35 21.5ZM32.8705 21.5C32.8705 26.6752 28.6752 30.8705 23.5 30.8705C18.3248 30.8705 14.1295 26.6752 14.1295 21.5C14.1295 16.3248 18.3248 12.1295 23.5 12.1295C28.6752 12.1295 32.8705 16.3248 32.8705 21.5Z" fill="black"/>
+<path d="M48.2896 22.1781C49.2796 22.1781 50.088 22.4414 50.7148 22.9681C51.3474 23.4889 51.6638 24.356 51.6638 25.5692V32.0851H49.098V26.1995C49.098 25.6905 49.0307 25.2999 48.8959 25.0277C48.6499 24.5305 48.1813 24.282 47.49 24.282C46.6407 24.282 46.0578 24.646 45.7415 25.3739C45.5775 25.7586 45.4954 26.2498 45.4954 26.8475V32.0851H43V22.4266H45.4164V23.8381C45.7385 23.341 46.0432 22.9829 46.3302 22.764C46.8457 22.3734 47.4988 22.1781 48.2896 22.1781Z" fill="black"/>
+<path d="M57.5604 30.3008C58.2926 30.3008 58.855 30.0374 59.2475 29.5107C59.6399 28.984 59.8362 28.2353 59.8362 27.2648C59.8362 26.2942 59.6399 25.5485 59.2475 25.0277C58.855 24.501 58.2926 24.2376 57.5604 24.2376C56.8282 24.2376 56.2629 24.501 55.8646 25.0277C55.4721 25.5485 55.2758 26.2942 55.2758 27.2648C55.2758 28.2353 55.4721 28.984 55.8646 29.5107C56.2629 30.0374 56.8282 30.3008 57.5604 30.3008ZM62.4634 27.2648C62.4634 28.6851 62.0592 29.9013 61.2509 30.9133C60.4425 31.9194 59.2152 32.4225 57.5692 32.4225C55.9231 32.4225 54.6959 31.9194 53.8875 30.9133C53.0791 29.9013 52.675 28.6851 52.675 27.2648C52.675 25.8681 53.0791 24.6578 53.8875 23.6339C54.6959 22.6101 55.9231 22.0982 57.5692 22.0982C59.2152 22.0982 60.4425 22.6101 61.2509 23.6339C62.0592 24.6578 62.4634 25.8681 62.4634 27.2648Z" fill="black"/>
+<path d="M62.5608 24.2997V22.4977H63.8964V19.799H66.3742V22.4977H67.9295V24.2997H66.3742V29.4131C66.3742 29.8096 66.424 30.0581 66.5236 30.1587C66.6232 30.2534 66.9278 30.3008 67.4374 30.3008C67.5136 30.3008 67.5927 30.3008 67.6747 30.3008C67.7626 30.2949 67.8475 30.2889 67.9295 30.283V32.1739L66.7433 32.2183C65.56 32.2597 64.7516 32.0526 64.3181 31.5969C64.037 31.3069 63.8964 30.8601 63.8964 30.2564V24.2997H62.5608Z" fill="black"/>
+<path d="M77.602 22.1958C78.8615 22.1958 79.8456 22.6545 80.5544 23.5718C81.2691 24.4891 81.6264 25.6728 81.6264 27.1227C81.6264 28.6259 81.2749 29.8717 80.572 30.8601C79.869 31.8484 78.8878 32.3426 77.6284 32.3426C76.8376 32.3426 76.202 32.1828 75.7217 31.8632C75.4346 31.6738 75.1242 31.3424 74.7903 30.8689V32.0851H72.3388V19.0178H74.8342V23.6695C75.1505 23.2197 75.4991 22.8764 75.8798 22.6397C76.3309 22.3438 76.905 22.1958 77.602 22.1958ZM76.9606 30.2564C77.605 30.2564 78.1058 29.993 78.4631 29.4663C78.8205 28.9396 78.9991 28.2472 78.9991 27.389C78.9991 26.7025 78.9113 26.1344 78.7355 25.6846C78.4016 24.8324 77.7866 24.4063 76.8903 24.4063C75.9823 24.4063 75.3585 24.8235 75.0187 25.658C74.843 26.1018 74.7551 26.6759 74.7551 27.3802C74.7551 28.2087 74.9367 28.8952 75.2999 29.4397C75.6631 29.9842 76.2167 30.2564 76.9606 30.2564Z" fill="black"/>
+<path d="M83.0945 33.9405L83.4108 33.9582C83.6568 33.9701 83.8912 33.9612 84.1137 33.9316C84.3363 33.902 84.5238 33.8339 84.6761 33.7274C84.8225 33.6268 84.9573 33.4167 85.0803 33.0971C85.2092 32.7775 85.2619 32.5822 85.2385 32.5112L81.7237 22.4089H84.5092L86.6004 29.5462L88.5774 22.4089H91.2398L87.9536 31.9253C87.3209 33.76 86.8201 34.8963 86.451 35.3342C86.082 35.7781 85.3439 36 84.2368 36C84.0142 36 83.8355 35.997 83.7008 35.9911C83.566 35.9911 83.3639 35.9822 83.0945 35.9645V33.9405Z" fill="black"/>
+<path d="M97.783 27.1405H101.069L99.4525 21.9916L97.783 27.1405ZM97.95 19H101.008L105.594 32.0851H102.66L101.825 29.3953H97.0537L96.1575 32.0851H93.3281L97.95 19Z" fill="black"/>
+<path d="M110.59 32.0851H107.902V19H110.59V32.0851Z" fill="black"/>
+<path d="M106.306 19H112V21.2258H106.306V19Z" fill="black"/>
+<path d="M106.306 29.8624H112V32.0882H106.306V29.8624Z" fill="black"/>
+<path d="M42.9754 9.89597L43.9953 13.8667L45.0301 9.89597H46.0303L47.07 13.8432L48.1544 9.89597H49.0456L47.5058 14.9347H46.5799L45.5005 11.0345L44.4558 14.9347H43.5299L42 9.89597H42.9754Z" fill="black"/>
+<path d="M49.8156 9.89597H50.6622V10.7663C50.7316 10.597 50.9016 10.3915 51.1722 10.15C51.4429 9.90538 51.7548 9.78306 52.108 9.78306C52.1245 9.78306 52.1526 9.78463 52.1922 9.78777C52.2318 9.7909 52.2994 9.79718 52.3952 9.80659V10.7005C52.3424 10.6911 52.2928 10.6848 52.2466 10.6817C52.2037 10.6785 52.1559 10.6769 52.1031 10.6769C51.6541 10.6769 51.3092 10.815 51.0682 11.091C50.8273 11.3638 50.7068 11.679 50.7068 12.0366V14.9347H49.8156V9.89597Z" fill="black"/>
+<path d="M53.0662 9.9195H53.9722V14.9347H53.0662V9.9195ZM53.0662 8.02352H53.9722V8.98327H53.0662V8.02352Z" fill="black"/>
+<path d="M55.4008 8.48928H56.3019V9.89597H57.1485V10.5876H56.3019V13.8761C56.3019 14.0518 56.3646 14.1694 56.49 14.229C56.5593 14.2635 56.6749 14.2807 56.8366 14.2807C56.8795 14.2807 56.9257 14.2807 56.9752 14.2807C57.0248 14.2776 57.0825 14.2729 57.1485 14.2666V14.9347C57.0462 14.9629 56.9389 14.9833 56.8267 14.9958C56.7178 15.0084 56.599 15.0146 56.4702 15.0146C56.0543 15.0146 55.7721 14.9143 55.6236 14.7135C55.475 14.5097 55.4008 14.2462 55.4008 13.9232V10.5876H54.6828V9.89597H55.4008V8.48928Z" fill="black"/>
+<path d="M58.1215 8.48928H59.0227V9.89597H59.8693V10.5876H59.0227V13.8761C59.0227 14.0518 59.0854 14.1694 59.2108 14.229C59.2801 14.2635 59.3957 14.2807 59.5574 14.2807C59.6003 14.2807 59.6465 14.2807 59.696 14.2807C59.7455 14.2776 59.8033 14.2729 59.8693 14.2666V14.9347C59.767 14.9629 59.6597 14.9833 59.5475 14.9958C59.4386 15.0084 59.3197 15.0146 59.191 15.0146C58.7751 15.0146 58.4929 14.9143 58.3444 14.7135C58.1958 14.5097 58.1215 14.2462 58.1215 13.9232V10.5876H57.4036V9.89597H58.1215V8.48928Z" fill="black"/>
+<path d="M62.8723 9.78306C63.2486 9.78306 63.6134 9.86775 63.9666 10.0371C64.3197 10.2033 64.5888 10.4198 64.7736 10.6864C64.9518 10.9404 65.0707 11.2368 65.1301 11.5755C65.1829 11.8076 65.2093 12.1777 65.2093 12.6858H61.3226C61.3391 13.1971 61.4662 13.6079 61.7039 13.9185C61.9415 14.2258 62.3095 14.3795 62.808 14.3795C63.2734 14.3795 63.6447 14.2337 63.922 13.942C64.0804 13.7726 64.1927 13.5766 64.2587 13.3539H65.135C65.1119 13.5389 65.0344 13.7459 64.9023 13.9749C64.7736 14.2007 64.6284 14.3858 64.4666 14.5301C64.196 14.781 63.8609 14.9503 63.4615 15.0382C63.247 15.0883 63.0044 15.1134 62.7337 15.1134C62.0735 15.1134 61.5141 14.886 61.0552 14.4313C60.5964 13.9733 60.367 13.3335 60.367 12.5118C60.367 11.7026 60.5981 11.0455 61.0602 10.5405C61.5223 10.0355 62.1264 9.78306 62.8723 9.78306ZM64.2933 12.0131C64.257 11.6461 64.1729 11.3528 64.0408 11.1333C63.7966 10.7256 63.3889 10.5217 62.8179 10.5217C62.4086 10.5217 62.0653 10.6628 61.788 10.9451C61.5108 11.2243 61.3639 11.5802 61.3474 12.0131H64.2933Z" fill="black"/>
+<path d="M66.2071 9.89597H67.0537V10.6111C67.3046 10.3163 67.5703 10.1045 67.8509 9.97595C68.1315 9.84736 68.4434 9.78306 68.7867 9.78306C69.5392 9.78306 70.0476 10.0324 70.3116 10.5311C70.4569 10.804 70.5295 11.1945 70.5295 11.7026V14.9347H69.6234V11.759C69.6234 11.4516 69.5756 11.2039 69.4798 11.0157C69.3214 10.702 69.0342 10.5452 68.6183 10.5452C68.4071 10.5452 68.2338 10.5656 68.0984 10.6064C67.8542 10.6754 67.6396 10.8134 67.4548 11.0204C67.3062 11.1866 67.2089 11.3591 67.1627 11.5379C67.1198 11.7135 67.0983 11.966 67.0983 12.2953V14.9347H66.2071V9.89597Z" fill="black"/>
+<path d="M74.4015 8H75.268V10.5076C75.4628 10.2661 75.6955 10.0826 75.9661 9.95714C76.2368 9.82854 76.5306 9.76424 76.8474 9.76424C77.5076 9.76424 78.0423 9.98066 78.4516 10.4135C78.8642 10.8432 79.0705 11.4783 79.0705 12.3189C79.0705 13.1155 78.8675 13.7773 78.4615 14.3042C78.0555 14.8312 77.4927 15.0946 76.7732 15.0946C76.3705 15.0946 76.0305 15.0021 75.7532 14.817C75.5882 14.7073 75.4116 14.5316 75.2234 14.2901V14.9347H74.4015V8ZM76.7187 14.3466C77.2006 14.3466 77.5604 14.1647 77.7981 13.8008C78.039 13.437 78.1595 12.9571 78.1595 12.3612C78.1595 11.8312 78.039 11.3921 77.7981 11.0439C77.5604 10.6958 77.2089 10.5217 76.7435 10.5217C76.3375 10.5217 75.981 10.6644 75.674 10.9498C75.3703 11.2352 75.2185 11.7057 75.2185 12.3612C75.2185 12.8348 75.2812 13.219 75.4066 13.5139C75.641 14.069 76.0784 14.3466 76.7187 14.3466Z" fill="black"/>
+<path d="M83.3262 9.89597H84.3115C84.1861 10.219 83.9071 10.9561 83.4747 12.1072C83.1513 12.9728 82.8806 13.6785 82.6627 14.2243C82.1478 15.5102 81.7847 16.2943 81.5735 16.5766C81.3622 16.8589 80.9991 17 80.4842 17C80.3588 17 80.2614 16.9953 80.1921 16.9859C80.1261 16.9765 80.0435 16.9592 79.9445 16.9341V16.1626C80.0997 16.2033 80.2119 16.2284 80.2812 16.2378C80.3505 16.2473 80.4116 16.252 80.4644 16.252C80.6294 16.252 80.7499 16.2253 80.8258 16.172C80.9051 16.1218 80.9711 16.0591 81.0239 15.9838C81.0404 15.9587 81.0998 15.8301 81.2021 15.598C81.3045 15.3659 81.3787 15.1934 81.4249 15.0805L79.4643 9.89597H80.4743L81.8953 13.9984L83.3262 9.89597Z" fill="black"/>
+<path d="M87.7033 8H88.5945V10.5781C88.8057 10.3241 88.9955 10.1453 89.1639 10.0418C89.4511 9.86304 89.8092 9.77365 90.2383 9.77365C91.0074 9.77365 91.5289 10.0293 91.8029 10.5405C91.9514 10.8197 92.0257 11.207 92.0257 11.7026V14.9347H91.1097V11.759C91.1097 11.3889 91.0602 11.1176 90.9612 10.9451C90.7994 10.6691 90.4958 10.5311 90.0502 10.5311C89.6805 10.5311 89.3454 10.6519 89.0451 10.8934C88.7447 11.1349 88.5945 11.5912 88.5945 12.2624V14.9347H87.7033V8Z" fill="black"/>
+<path d="M94.1375 9.89597V13.241C94.1375 13.4982 94.1804 13.7083 94.2662 13.8714C94.4246 14.1725 94.7201 14.3231 95.1525 14.3231C95.773 14.3231 96.1955 14.0596 96.42 13.5327C96.5421 13.2504 96.6032 12.863 96.6032 12.3706V9.89597H97.4944V14.9347H96.6527L96.6626 14.1913C96.5471 14.3826 96.4035 14.5442 96.2318 14.6759C95.8919 14.9394 95.4793 15.0711 94.994 15.0711C94.2381 15.0711 93.7232 14.8312 93.4493 14.3513C93.3007 14.0941 93.2265 13.7507 93.2265 13.321V9.89597H94.1375Z" fill="black"/>
+<path d="M98.7892 9.89597H99.6706V10.6111C99.8818 10.3633 100.073 10.183 100.245 10.07C100.539 9.87872 100.872 9.78306 101.245 9.78306C101.668 9.78306 102.008 9.88186 102.265 10.0795C102.41 10.1924 102.542 10.3586 102.661 10.5781C102.859 10.3084 103.092 10.1093 103.359 9.98066C103.627 9.84893 103.927 9.78306 104.26 9.78306C104.973 9.78306 105.459 10.0277 105.716 10.517C105.855 10.7804 105.924 11.1349 105.924 11.5802V14.9347H104.998V11.4344C104.998 11.0988 104.909 10.8683 104.731 10.7428C104.556 10.6174 104.341 10.5546 104.087 10.5546C103.737 10.5546 103.435 10.666 103.181 10.8887C102.93 11.1113 102.805 11.483 102.805 12.0037V14.9347H101.899V11.6461C101.899 11.3042 101.856 11.0549 101.77 10.8981C101.635 10.6628 101.382 10.5452 101.012 10.5452C100.676 10.5452 100.369 10.6691 100.091 10.9169C99.8174 11.1647 99.6805 11.6132 99.6805 12.2624V14.9347H98.7892V9.89597Z" fill="black"/>
+<path d="M107.818 13.5938C107.818 13.8385 107.912 14.0314 108.1 14.1725C108.288 14.3136 108.511 14.3842 108.769 14.3842C109.082 14.3842 109.386 14.3152 109.68 14.1772C110.175 13.9482 110.422 13.5734 110.422 13.0528V12.3706C110.313 12.4365 110.173 12.4914 110.001 12.5353C109.83 12.5792 109.661 12.6106 109.496 12.6294L108.957 12.6952C108.633 12.736 108.391 12.8003 108.229 12.8881C107.955 13.0355 107.818 13.2708 107.818 13.5938ZM109.977 11.8813C110.181 11.8562 110.318 11.7747 110.388 11.6367C110.427 11.5614 110.447 11.4532 110.447 11.3121C110.447 11.0235 110.338 10.815 110.12 10.6864C109.906 10.5546 109.597 10.4888 109.194 10.4888C108.729 10.4888 108.399 10.6079 108.204 10.8463C108.095 10.978 108.024 11.1741 107.991 11.4344H107.159C107.176 10.8134 107.387 10.3821 107.793 10.1406C108.202 9.89598 108.676 9.77365 109.214 9.77365C109.838 9.77365 110.345 9.88657 110.734 10.1124C111.12 10.3382 111.313 10.6895 111.313 11.1662V14.069C111.313 14.1568 111.332 14.2274 111.368 14.2807C111.408 14.334 111.488 14.3607 111.611 14.3607C111.65 14.3607 111.695 14.3591 111.744 14.356C111.794 14.3497 111.847 14.3419 111.903 14.3325V14.9582C111.764 14.9958 111.658 15.0193 111.586 15.0288C111.513 15.0382 111.414 15.0429 111.289 15.0429C110.982 15.0429 110.759 14.9394 110.62 14.7324C110.548 14.6226 110.496 14.4673 110.467 14.2666C110.285 14.4924 110.024 14.6884 109.684 14.8547C109.345 15.0209 108.97 15.104 108.561 15.104C108.069 15.104 107.666 14.9629 107.352 14.6806C107.042 14.3952 106.887 14.0392 106.887 13.6127C106.887 13.1453 107.041 12.7831 107.348 12.5259C107.654 12.2687 108.057 12.1103 108.556 12.0507L109.977 11.8813Z" fill="black"/>
+<path d="M112.678 9.89597H113.524V10.6111C113.775 10.3163 114.041 10.1045 114.321 9.97595C114.602 9.84736 114.914 9.78306 115.257 9.78306C116.01 9.78306 116.518 10.0324 116.782 10.5311C116.927 10.804 117 11.1945 117 11.7026V14.9347H116.094V11.759C116.094 11.4516 116.046 11.2039 115.95 11.0157C115.792 10.702 115.505 10.5452 115.089 10.5452C114.878 10.5452 114.704 10.5656 114.569 10.6064C114.325 10.6754 114.11 10.8134 113.925 11.0204C113.777 11.1866 113.679 11.3591 113.633 11.5379C113.59 11.7135 113.569 11.966 113.569 12.2953V14.9347H112.678V9.89597Z" fill="black"/>
+</svg>
--- a/src/assets/blog/a-better-way-for-consuming-content/banner.webp
+++ b/src/assets/blog/a-better-way-for-consuming-content/banner.webp
--- a/src/assets/blog/how-computers-works/banner.jpg
+++ b/src/assets/blog/how-computers-works/banner.jpg
--- a/src/assets/blog/i-participated-in-a-hackathon/banner.png
+++ b/src/assets/blog/i-participated-in-a-hackathon/banner.png
--- a/src/assets/blog/i-will-not-continue-creating-content-in-spanish-for-my-website/banner.jpg
+++ b/src/assets/blog/i-will-not-continue-creating-content-in-spanish-for-my-website/banner.jpg
--- a/src/assets/blog/peddler-app/banner.png
+++ b/src/assets/blog/peddler-app/banner.png
--- a/src/assets/blog/rewind-2023-and-future-plans/2023-complete!.png
+++ b/src/assets/blog/rewind-2023-and-future-plans/2023-complete!.png
--- a/src/assets/blog/rewind-2023-and-future-plans/banner.jpg
+++ b/src/assets/blog/rewind-2023-and-future-plans/banner.jpg
--- a/src/assets/blog/the-monotony-of-social-media/banner.jpg
+++ b/src/assets/blog/the-monotony-of-social-media/banner.jpg
--- a/src/assets/blog/website-2.0/banner.png
+++ b/src/assets/blog/website-2.0/banner.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/portfolio/build-a-fullstack-app/banner.png
+++ b/src/assets/portfolio/build-a-fullstack-app/banner.png
--- a/src/assets/portfolio/human-to-js/banner.png
+++ b/src/assets/portfolio/human-to-js/banner.png
--- a/src/assets/portfolio/next-intl-blog-template/banner.png
+++ b/src/assets/portfolio/next-intl-blog-template/banner.png
--- a/src/assets/portfolio/workarise/banner.png
+++ b/src/assets/portfolio/workarise/banner.png
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@ -0,0 +1,58 @@
+import { Code, RssIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import formatDate from "@/utils/format-date";
+
+export default function Footer() {
+  return (
+    <footer className="border-t border-secondary px-6 py-10 text-center text-sm font-light md:px-16">
+      <section className="space-y-2">
+        <p>
+          Developed by{" "}
+          <strong className="font-bold text-primary">juancmandev</strong>
+        </p>
+        <p>
+          Built handcrafted with{" "}
+          <Button
+            asChild
+            size={null}
+            variant="link"
+            className="m-0 p-0 text-base no-underline hover:underline"
+          >
+            <a href="https://astro.build/" target="_blank">
+              Astro
+            </a>
+          </Button>
+        </p>
+        <p>Last built {formatDate(new Date())}</p>
+      </section>
+      <ul className="mx-auto mt-4 flex max-w-[200px] justify-between">
+        <li>
+          <Button
+            asChild
+            size={null}
+            variant="link"
+            className="flex flex-col justify-center"
+          >
+            <a target="_blank" href="https://github.com/juancmandev/website">
+              <Code className="w-6" />
+              Source Code
+            </a>
+          </Button>
+        </li>
+        <li>
+          <Button
+            asChild
+            size={null}
+            variant="link"
+            className="flex flex-col justify-center"
+          >
+            <a target="_blank" href="https://juancman.dev/rss.xml">
+              <RssIcon className="w-6" />
+              RSS feed
+            </a>
+          </Button>
+        </li>
+      </ul>
+    </footer>
+  );
+}
--- a/src/components/link-button.tsx
+++ b/src/components/link-button.tsx
@ -0,0 +1,30 @@
+import { Button } from "@/components/ui/button";
+
+type Props = {
+  children: React.ReactNode;
+  href: string;
+  variant?:
+    | "default"
+    | "destructive"
+    | "outline"
+    | "secondary"
+    | "ghost"
+    | "link"
+    | null
+    | undefined;
+  className?: string;
+  size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+};
+
+export default function LinkButton(props: Props) {
+  return (
+    <Button
+      asChild
+      size={props.size}
+      variant={props.variant}
+      className={props.className}
+    >
+      <a href={props.href}>{props.children}</a>
+    </Button>
+  );
+}
--- a/src/components/mdx/astro-image.astro
+++ b/src/components/mdx/astro-image.astro
@ -0,0 +1,13 @@
+---
+import { Image } from "astro:assets";
+
+const { src, alt } = Astro.props;
+---
+
+<Image
+    src={src}
+    alt={alt}
+    width={1092}
+    height={986}
+    class="w-auto h-auto rounded-md aspect-auto"
+/>
--- a/src/components/mdx/copy-button.tsx
+++ b/src/components/mdx/copy-button.tsx
@ -0,0 +1,42 @@
+import { useCallback, useEffect, useState } from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { CheckIcon, CopyIcon } from "lucide-react";
+
+interface CopyButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+  value: string;
+}
+
+export default function CopyButton(props: CopyButtonProps) {
+  const [hasCopied, setHasCopied] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setHasCopied(false);
+    }, 2000);
+  }, [hasCopied]);
+
+  const copyToClipboard = useCallback((value: string) => {
+    navigator.clipboard.writeText(value);
+
+    setHasCopied(true);
+  }, []);
+
+  return (
+    <Button
+      title={hasCopied ? "Copied!" : "Copy to clipboard"}
+      size={null}
+      variant="ghost"
+      className={cn("absolute right-2 top-1.5 p-2 ", props.className)}
+      onClick={() => copyToClipboard(props.value)}
+      {...props}
+    >
+      <span className="sr-only">Copy</span>
+      {hasCopied ? (
+        <CheckIcon className="h-4 w-4" />
+      ) : (
+        <CopyIcon className="h-4 w-4" />
+      )}
+    </Button>
+  );
+}
--- a/src/components/mdx/custom-anchor.tsx
+++ b/src/components/mdx/custom-anchor.tsx
@ -0,0 +1,11 @@
+type TAnchor = {
+  href: string;
+} & React.HTMLAttributes<HTMLAnchorElement>;
+
+export default function CustomAnchor(props: TAnchor) {
+  return props.href.startsWith("/") || props.href.startsWith("#") ? (
+    <a {...props} className="inline-flex outline-ring" />
+  ) : (
+    <a {...props} className="inline-flex outline-ring" target="_blank" />
+  );
+}
--- a/src/components/mdx/wrapper.ts
+++ b/src/components/mdx/wrapper.ts
@ -0,0 +1,9 @@
+import AstroImage from "@/components/mdx/astro-image.astro";
+import CustomAnchor from "@/components/mdx/custom-anchor";
+
+const components = {
+  img: AstroImage,
+  a: CustomAnchor,
+};
+
+export default components;
--- a/src/components/microblog-item.tsx
+++ b/src/components/microblog-item.tsx
@ -0,0 +1,41 @@
+import ReactMarkdown from "react-markdown";
+import type { MicroblogsResponse, TagsResponse } from "@/utils/pocketbase";
+import formatDate from "@/utils/format-date";
+
+type Props = MicroblogsResponse<unknown> & {
+  expand: {
+    tags: TagsResponse[];
+  };
+};
+
+export default function MicroblogItem(props: Props) {
+  return (
+    <article className="rounded-sm border px-4 py-2">
+      <header className="mb-2">
+        <div className="flex items-center justify-between text-sm">
+          <span className="font-light">
+            {formatDate(new Date(props.published))}{" "}
+          </span>
+          <span className="text-sm font-thin">
+            {new Date(props.published).toLocaleTimeString()}
+          </span>
+        </div>
+        <div className="mt-1">
+          {props.expand &&
+            props.expand.tags &&
+            props.expand.tags.map(
+              (tag) =>
+                tag && (
+                  <span className="text-sm" key={tag.id}>
+                    #{tag.name}{" "}
+                  </span>
+                ),
+            )}
+        </div>
+      </header>
+      <main>
+        <ReactMarkdown>{props.content}</ReactMarkdown>
+      </main>
+    </article>
+  );
+}
--- a/src/components/mobile-menu.tsx
+++ b/src/components/mobile-menu.tsx
@ -0,0 +1,54 @@
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTrigger,
+  SheetClose,
+} from "@/components/ui/sheet";
+import { MenuIcon } from "lucide-react";
+import { navItems } from "@/utils/nav-links";
+import { Button } from "@/components/ui/button";
+
+export default function MobileMenu() {
+  return (
+    <Sheet>
+      <SheetTrigger asChild title="Open menu">
+        <Button size="icon" variant="ghost">
+          <MenuIcon />
+        </Button>
+      </SheetTrigger>
+      <SheetContent
+        side="right"
+        className="w-max border-0 bg-secondary px-0 pt-14 shadow-2xl"
+      >
+        <SheetHeader>
+          <ScrollArea>
+            <nav className="h-[calc(100vh_-_100px)]">
+              <section className="mt-1 flex flex-col">
+                <ul className="flex flex-col gap-1">
+                  {navItems.map((navItem) => (
+                    <li key={navItem.label} className="flex h-max w-full">
+                      <SheetClose asChild>
+                        <Button
+                          asChild
+                          size={null}
+                          variant="link"
+                          className="w-full cursor-default rounded-none px-10 py-3 hover:bg-background/50 hover:no-underline focus:bg-background/50"
+                        >
+                          <a className="capitalize" href={navItem.to}>
+                            {navItem.label}
+                          </a>
+                        </Button>
+                      </SheetClose>
+                    </li>
+                  ))}
+                </ul>
+              </section>
+            </nav>
+          </ScrollArea>
+        </SheetHeader>
+      </SheetContent>
+    </Sheet>
+  );
+}
--- a/src/components/navbar.astro
+++ b/src/components/navbar.astro
@ -0,0 +1,52 @@
+---
+import { navItems } from "@/utils/nav-links";
+import MobileMenu from "@/components/mobile-menu";
+import logo from "@/assets/logo.png";
+import { Image } from "astro:assets";
+import LinkButton from "@/components/link-button";
+---
+
+<nav
+    class="py-2 fixed top-0 z-50 flex w-full items-center justify-between border-b border-secondary backdrop-blur-lg"
+>
+    <div
+        class="px-4 flex w-full max-w-[65ch] items-center justify-between mx-auto"
+    >
+        <section class="flex max-w-max">
+            <LinkButton
+                href="/"
+                size="icon"
+                variant="link"
+                className="rounded-full px-0"
+            >
+                <Image
+                    src={logo}
+                    width={80}
+                    height={80}
+                    class="w-auto h-auto"
+                    alt="juancmandev logo"
+                />
+            </LinkButton>
+        </section>
+        <section class="hidden items-center md:flex">
+            <ul class="flex items-center gap-1">
+                {
+                    navItems.map((navItem) => (
+                        <li class="w-max h-max">
+                            <LinkButton
+                                variant="link"
+                                className="px-2"
+                                href={navItem.to}
+                            >
+                                {navItem.label}
+                            </LinkButton>
+                        </li>
+                    ))
+                }
+            </ul>
+        </section>
+        <section class="flex h-max items-center md:hidden">
+            <MobileMenu client:idle />
+        </section>
+    </div>
+</nav>
--- a/src/components/post-item.tsx
+++ b/src/components/post-item.tsx
@ -0,0 +1,29 @@
+import formatDate from "@/utils/format-date";
+import { Button } from "@/components/ui/button";
+
+type Props = {
+  slug: string;
+  date: Date | string;
+  title: string;
+  type: "blog" | "portfolio";
+};
+
+export default function PostItem(props: Props) {
+  return (
+    <Button
+      asChild
+      size={null}
+      variant="link"
+      className="px-4 whitespace-normal py-2 hover:no-underline focus:no-underline flex flex-col items-start italic border border-secondary hover:border-foreground focus:border-foreground transition-colors rounded-md"
+    >
+      <a className="no-underline" href={`/${props.type}/${props.slug}`}>
+        <span className="text-sm font-light no-underline">
+          {formatDate(props.date)}
+        </span>
+        <span className="text-primary text-underline text-lg font-semibold underline">
+          {props.title}
+        </span>
+      </a>
+    </Button>
+  );
+}
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@ -0,0 +1,55 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-foreground hover:bg-secondary/60",
+        ghost: "shadow-none hover:bg-foreground/10",
+        link: "shadow-none underline-offset-4 hover:underline focus-within:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@ -0,0 +1,46 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@ -0,0 +1,138 @@
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
--- a/src/content/blog/a-better-way-for-consuming-content.mdx
+++ b/src/content/blog/a-better-way-for-consuming-content.mdx
@ -0,0 +1,122 @@
+---
+title: A Better Way for Consuming Content
+description: Get your news without visiting websites with algorithms that shows content that you don't want to see.
+tags: [Tech]
+image: /blog/a-better-way-for-consuming-content/banner.webp
+imageCaption: Newspapers. Photo by Ashni on Unsplash
+date: 2024-4-11
+author: Juan Manzanero
+rss: true
+---
+
+![Newspapers](@/assets/blog/a-better-way-for-consuming-content/banner.webp) _Photo by
+[Ashni](https://unsplash.com/@ashni_ahlawat?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)
+on
+[Unsplash](https://unsplash.com/photos/text-ePWaAwUn80k?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)_
+
+Get your news without visiting websites with algorithms that shows content that you don't want to see.
+
+## Algorithms that Dictates What You See
+
+Social media are not designed for showing you the latest and most important
+news, but for showing you content dictated by an algorithm.
+
+And this content is normally viral, and viral doesn't mean interesting.
+
+Usually this algorithm prioritizes content that get you angry.
+
+Content that promotes negativity gets more clicks rather than those whose
+promotes positivity.
+
+That's the reason why Twitter and Facebook are full of stupid and irrelevant
+posts (usually).
+
+Of course, it's really cool when the algorithm shows you content that you like,
+discovering new people and pages, but that's not usual.
+
+Without mentioning the annoying ads and more stuff that wants you to click it.
+
+Meta (previously Facebook) knows about this, and encourages it in their products
+like Instagram and Facebook, and the same for Twitter.
+
+## The Solution: News Aggregators (RSS)
+
+RSS is an acronym for "Really Simple Syndication".
+
+It's an ancient technology, not promoted so much by companies.
+
+That's because when you read a post in an RSS Reader, you don't need to visit
+the website, and the website can't show advertisements using Google Ads (for
+example). You don't generate traffic; your visits don't count, at least not if
+you don't open the post link in your RSS Reader.
+
+The good thing is that almost every RSS Reader shows you content sorted by date,
+not by a creepy algorithm that wants you to be mad.
+
+[For my website](https://github.com/juancmandev/website/blob/main/scripts/rss.ts),
+I use a Node.js script that takes the `.mdx` files inside `content/blog` and
+`content/portfolio`, then generates the RSS Items, those with the `rss: true` in
+the metadata.
+
+## How to Use an RSS Reader
+
+First, you should download one.
+
+There are many options:
+
+- [NetNewsWire](https://netnewswire.com/): a native RSS Reader for macOS and
+  iOS, free and Open Source, my favorite option as an Apple ~~Sinner~~ user
+- [Akregator](https://apps.kde.org/akregator): from the KDE project for Linux
+- [Feeder](https://play.google.com/store/apps/details?id=com.nononsenseapps.feeder.play):
+  for Android
+- [Raven Reader](https://ravenreader.app/): desktop cross-platform
+
+### Adding Feeds
+
+Now you need to search for the RSS URL on your favorite website, like
+[this one](https://juancman.dev/rss.xml)!
+
+```
+https://juancman.dev/rss.xml
+```
+
+If you open it, you'll get a weird page with code similar to HTML.
+
+Once copied, go to your RSS feed and search for "Add feed" or something similar,
+and paste the link, and you're done! Now you'll get the latest posts from my
+website.
+
+### Adding Social Media Feeds
+
+You can even add feeds from sites like Reddit or YouTube.
+
+#### Reddit
+
+Just change `[SUBREDDIT]` for the name of your subreddit to add:
+
+```
+https://reddit.com/r/[SUBREDDIT]/new/.rss
+```
+
+#### YouTube
+
+Go to the channel to add, then go to the **About** tab, then click on **Share >
+Copy channel ID**.
+
+Now just change `[CHANNEL ID]` for the copied one:
+
+```
+https://youtube.com/feeds/videos.xml?channel_id=[CHANNEL ID]
+```
+
+### My Favorite Feeds
+
+- [juancman.dev (obviously!)](https://www.juancman.dev/rss.xml)
+- [Astronomic Picture of the Day (apod)](https://apod.com/feed.rss)
+- [Earth Science Picture of the Day (epod)](https://feeds2.feedburner.com/EarthSciencePictureoftheDay)
+- [Erick Murphy (cool guy)](https://ericmurphy.xyz/index.xml)
+
+## More About RSS
+
+- [Privacy Tools - RSS Feed Readers](https://www.privacytools.io/privacy-rss-feed-readers)
+- [Privacy Guides - News Aggregators](https://www.privacyguides.org/en/news-aggregators/)
--- a/src/content/blog/how-computers-works.mdx
+++ b/src/content/blog/how-computers-works.mdx
@ -0,0 +1,156 @@
+---
+title: How Computers Works
+description: Today we use, in some way, the computer in almost every activity in our lives, it could be for work or just fun, but if we think carefully, computers are an invention from the previous century, and have changed our lives.
+tags: [Tech, Informatic]
+image: /blog/how-computers-works/banner.jpg
+imageCaption: An open laptop. Photo by Philipp Katzenberger on Unsplash
+date: 2023-5-29
+author: Juan Manzanero
+rss: true
+---
+
+![Open laptop](@/assets/blog/how-computers-works/banner.jpg) _An open laptop. Photo by
+[Philipp Katzenberger](https://unsplash.com/@fantasyflip?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText')
+on
+[Unsplash](https://unsplash.com/photos/iIJrUoeRoCQ?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_
+
+Today we use, in some way, the computer in almost every activity in our lives, it could be for work or just fun, but if we think carefully, computers are an invention from the previous century, and have changed our lives.
+
+New works have appeared, new careers to study, and new problems to be solved.
+
+However, do we know how computers penetrated our lives? Do we know how a
+computer works? How does the Internet work?
+
+Many people use their smartphones to communicate with family and friends and to
+share their lives, but they don’t know how all this is possible.
+
+I’m not saying that everyone needs to be a Software Engineer or IT Expert, but
+knowing about this could be outstanding knowledge.
+
+## The power of computers
+
+Computers can expand our brains, such things like sends messages to people from
+the other side of the Earth, to create an app that speeds up delivery.
+
+All these things are possible by flipping 0’s and 1’s, but how is this possible?
+
+If you've watched The Imitation Code, maybe you know this story.
+
+### Computing Fundaments
+
+Alan Turing was the inventor of the Turing Machine, a simple but powerful
+machine that can receive instructions to move along a long tape, changing the
+state of each slot. This three things, a head, a long tape and a set of
+instructions are the bases for the modern computers.
+
+The head is the Central Processing Unit (CPU), a piece of hardware that can be
+used for general purposes, receiving instructions (Algorithm) whose are
+transformed to electric pulses, understanding if electricity pass trough or not,
+if it's true or false, 1 or 0. All these instructions are saved in a Random
+Access Memory (RAM) for a quick access of the work that needs to be
+accomplished, and using a Read-Only Memory (ROM) to store persistent data that
+needs to be saved even if the computer shuts down.
+
+An algorithm's like a recipe, declaring ingredients (variables) and the steps to
+follow to achieve the result (functions).
+
+A variable is an identifier that points to a slot of memory in the RAM, storing
+a value that can be a number, a text (known as “string”), a boolean (true or
+false), or an object (a set of multiple variables and functions that can be
+instanced), etc.
+
+Functions are blocks of instructions that achieve a task, like obtaining your
+current location or sending a message.
+
+And maybe you are asking, how do I tell a computer how to do what I want?
+
+### Programming languages
+
+If you try to speak with someone who doesn’t speak the same language as you, you
+try to use a translator or use gestures, something that you know that both can
+in some way understand, the same is for computers.
+
+Computers are powerful, but they need someone to tell them what to do, this is
+work for humans, and to achieve it we use programming languages. With a
+programming language you use a specific syntax to tell a computer your desired
+task, then you compile that file where you type all your instructions, when a
+file compiles, is transformed to a computer nature language (1’s and 0’s) and
+then the computer executes the task.
+
+There are different programming languages, and all of them are designed to
+achieve specific needs, like the programming languages C and C++, both are
+low-level languages, which means that are close to how a computer “speaks” and
+are used to control and administrate memory in high-efficient apps, or to
+illuminate the screen of your computer.
+
+There is Java, is a language that can create an environment when is compiled,
+meaning that can be used on almost every computer.
+
+JavaScript (is NOT Java or something like that) is a language that our browsers
+understands, with the help of JavaScript, we can access to a web page and see
+nice interactions when we click a button, login with a username and password,
+and more.
+
+JavaScript is a high-level language, that is easiest to learn than Java or C,
+but not that is worse or better, just resolves a different need.
+
+### The Browser
+
+A powerful software that can access other computers using the Hyper Text
+Transfer Protocol (HTTP), it means that thanks to this protocol different
+computers can send and receive information to communicate, even if they’re far
+away. The browsers receive data in the form of a file, mainly three:
+
+- Hyper Text Markup Language (HTML)
+- Cascading Styles Sheet (CSS)
+- JavaScript
+
+### HTML
+
+Helps the browser to structure data like texts or images, using a markup
+language (tags). The browser can know where to put an input to type your email
+or a button to subscribe to your favorite artist.
+
+### CSS
+
+It gives colors and forms to the HTML tags using selectors. It can be used to
+change page's background color, change button's rounded borders, modify text
+color, and everything your creativity can give.
+
+### JavaScript
+
+Combining HTML and CSS with JavaScript creates an interactive web site, or web
+app (like this one). You can for example, add a button that changes the theme to
+dark/light, or store items in a shopping cart and show a number of items you
+have.
+
+For all this you need to store your files somewhere, letting people access a
+computer to download all these files using their browsers, that's the
+functionality of servers.
+
+Servers are computers that are connected to the Internet, and store files that
+can be downloaded or uploaded using protocols and security rules. Some companies
+like Google or Microsoft have multiple centers with many servers in different
+regions of the planet, called Data Centers, and can be used with a fee for
+storing your web app, these multiple Data Centers are called Cloud.
+
+### The Cloud
+
+Administrating a powerful computer can be difficult, but if you know how to use
+it, you can save a lot of money instead of maintaining local computers that need
+to be turned on 24/7. Thanks to the cloud we can deliver the fastest apps, and
+we can have a 24/7 service for our customers with a marginal cost.
+
+## Computers Changed Humanity
+
+Computers simplifies our daily tasks, software can be easy replicated and
+distributed without need of logistics like a tangible product. You just need an
+Internet connection to reach someone’s project.
+
+You don’t need a factory or natural resources like wood to produce paper, you
+need a group of engineers, UX/UI designers, digital marketers, and more IT
+people to reach billions of customers.
+
+The reason that computers are too powerful is that the marginal cost is minimal,
+you don’t need to extract something from the earth to build an app, you need a
+group of talented persons that uses their brains to create solutions.
--- a/src/content/blog/i-participated-in-a-hackathon.mdx
+++ b/src/content/blog/i-participated-in-a-hackathon.mdx
@ -0,0 +1,64 @@
+---
+title: I participated in a Hackathon
+description: I recently participated in a Supabase Hackathon, forming a team with people from other countries.
+tags: [Tech, Hobby, Hackaton]
+image: /blog/i-participated-in-a-hackathon/banner.png
+imageCaption: 'Tech stack used: Supabase, Next.js and Shadcn/UI, My first hackathon!'
+date: 2023-8-16
+author: Juan Manzanero
+rss: true
+---
+
+![Tech Stack](@/assets/blog/i-participated-in-a-hackathon/banner.png) _Tech stack used:
+Supabase, Next.js and Shadcn/UI, My first hackathon!_
+
+I recently participated in a Supabase Hackathon, forming a team with people from other countries.
+
+The Hackathon thematic was free, the only main rule is to use Supabase for any
+feature, like authentication, as a PostgreSQL database or using vectors for AI,
+with 10 days to build a product using any technology and upload it in a GitHub
+repository.
+
+We developed an e-commerce app with a Walmart products model, implementing
+vectors for better search results.
+
+Using Supabase we implemented auth and protected routes so the user needs to log
+in to see recommendations and more.
+
+The user can add products to the shopping cart and check their items for saved
+it and see recommendations and which items are frequently bought.
+
+My main role was focused on creating the UI using the Next.js 13 app router,
+protecting routes only for authenticated users, and create reusable components
+such as product cards, and of course, making the layout responsive for mobile
+and desktop.
+
+We used [Shadcn/UI](https://ui.shadcn.com/) as those components are already
+implemented functionalities with accessibility like modals or sidebars, like the
+sidebar that appears when you’re on a mobile device and open the button in the
+header, with a smooth animation.
+
+We submitted the project on time and waiting for the results, and this is my
+first time participating in a Hackathon, I really enjoy it and hope to continue
+contributing to the project on GitHub.
+
+It's amazing work with people from other countries, using English even if is not
+our native language, but with a purpose in common, create a great product.
+
+I’ll keep looking to participate in more Hackathons in the future and contribute
+to open source projects on Github because I really enjoy the feeling of
+developing something big with more people.
+
+I learned too much in these few days, like integrating Next.js with Supabase for
+authentication and protected routes, using the Supabase docs as a guide, and
+using it for the first time Shadcn/UI, and looking forward to keep using it.
+
+It took me so long to participate in a Hackathon, as before I hesitated about my
+experience, but the reality is we’ll never be ready for new challenges because
+if you’re already ready it means that’s too late.
+
+I want to learn more about using vectors for AI, so I’ll investigate more about
+the topic, as the tech tends to go that way, who knows what would be the next
+big tech trend or when.
+
+[You can see the project: Grocewise here](https://groce-wise.vercel.app/)
--- a/src/content/blog/i-will-not-continue-creating-content-in-spanish-for-my-website.mdx
+++ b/src/content/blog/i-will-not-continue-creating-content-in-spanish-for-my-website.mdx
@ -0,0 +1,29 @@
+---
+title: I will not continue creating content in Spanish for my website
+description: I had the idea of maintaining my website in both English and Spanish; however, that is giving me some trouble, like taking more time to create content.
+tags: [Personal]
+image: /blog/i-will-not-continue-creating-content-in-spanish-for-my-website/banner.jpg
+imageCaption: Letters mixed
+date: 2024-2-20
+author: Juan Manzanero
+rss: true
+---
+
+![Letters mixed](@/assets/blog/i-will-not-continue-creating-content-in-spanish-for-my-website/banner.jpg)
+_Mixed letters. Photo by
+[Jason Leung](https://unsplash.com/@ninjason?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)
+on
+[Unsplash](https://unsplash.com/photos/red-alphabet-decors-0sBTrm726C8?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)_
+
+I had the idea of maintaining my website in both English and Spanish; however, that is giving me some trouble, like taking more time to create content.
+
+That's why I have decided to only create content in English for now and in the
+future.
+
+It doesn't mean that I reject my mother tongue or something like that, but just
+practicality.
+
+I'll try to update the links to my posts shared on social media, as this website
+will be just juancman.dev/blog instead of juancman.dev/[locale]/blog.
+
+However, if you want to contact me in Spanish, feel free to do it.
--- a/src/content/blog/peddler-app.mdx
+++ b/src/content/blog/peddler-app.mdx
@ -0,0 +1,65 @@
+---
+title: Peddler App
+description: You hear the ice cream man in his truck, you try to catch him, but the guy is already far away.
+tags: [Tech, SideProject]
+image: '/blog/peddler-app/banner.png'
+imageCaption: Peddler App provisional logo
+date: 2023-12-11
+author: Juan Manzanero
+rss: true
+---
+
+![Peddler App provisional logo](@/assets/blog/peddler-app/banner.png) _Peddler App
+provisional logo_
+
+## The idea
+
+You hear the ice cream man in his truck, you try to catch him, but the guy is already far away.
+
+Why not get a notification on your phone when the ice cream man is near you? So
+you can just tap the notification and request the ice cream man to go to your
+location.
+
+That's the purpose of this app.
+
+## Overwhelming for me
+
+I'd never developed a big app just by myself, but I want to try and see what
+happens.
+
+I want to follow the Indie Hacker way, sharing in public the progress, and
+getting feedback from the community.
+
+This post is the first step before designing in Figma or even creating the
+landing page, so I want to hear if you're interested, why you're not, or what
+would be great for the app.
+
+## Starting small
+
+I really want to start small, launching a Minimum Viable Product (MVP), with the
+next features:
+
+- User registration and login
+- Two types of users, peddlers and customers
+- Peddlers
+  - If the user is a peddler (wants to sell), redirect to the peddler form
+  - Peddlers can create a profile with the name of their company and products
+    that offer, for example ice cream, candy, etc
+  - Once the registration is finished, peddlers can start routes
+  - The app gets the location of the peddler, showing it on a map
+  - The backend will detect if the peddler enters a radius of a customer, and
+    send a push notification to the customer
+  - Once the peddler has a request, the app will show the location of the
+    requesting customer on the map
+  - The peddler can go to the destination, and fulfill the transaction
+- Customers
+  - Customers can just create a profile with their name or alias, and set
+    locations, for example: house
+  - Once a peddler is near, the backend will send a notification to the customer
+  - If the customer taps and confirms the notification
+
+Of course, customers would change notifications settings and more, but that's
+the core idea.
+
+For the MVP I don't want to implement in-app payments, but of course, it could
+be a future feature.
--- a/src/content/blog/rewind-2023-and-future-plans.mdx
+++ b/src/content/blog/rewind-2023-and-future-plans.mdx
@ -0,0 +1,109 @@
+---
+title: Rewind 2023 and future plans
+description: My rewind for 2023 and my plans for 2024 and beyond.
+tags: [Thoughts]
+image: /blog/rewind-2023-and-future-plans/banner.jpg
+imageCaption: A sunset with a sign, photo by Javier Allegue Barros on Unsplash
+date: 2023-12-16
+author: Juan Manzanero
+rss: true
+---
+
+![A sunset with a sign](@/assets/blog/rewind-2023-and-future-plans/banner.jpg) _Photo by
+[Javier Allegue Barros](https://unsplash.com/@soymeraki?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)
+on
+[Unsplash](https://unsplash.com/photos/silhouette-of-road-signage-during-golden-hour-C7B-ExXpOIE?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)_
+
+My rewind for 2023 and my plans for 2024 and beyond.
+
+I hope you are having a good time this holiday.
+
+Life is a succession of choices, and in retrospect, I'm happy that this year I
+made the right ones.
+
+## In retrospect about my career this 2023
+
+I grew up drastically as a Full Stack Developer, learning new libraries and
+establishing my tech stack.
+
+I even started hacking (not the thing you hear in the news), creating side
+projects looking to create solutions.
+
+I updated this website, creating new functionalities for content creation.
+
+Now I have more confidence in my skills, ready to keep growing up and taking on
+new challenges.
+
+## Futures plans for my career this 2024
+
+I want to start freelancing, I'll be creating templates and demo projects for
+selling my services as a Frontend Developer mainly, but I'll keep learning about
+backend and cloud, as well as keep practicing my English to enter the USA or
+European markets.
+
+Maybe I'll not achieve this in 2024, but I must keep growing, as each year
+passes, I'll be more prepared.
+
+I'll check if I could contribute to an Open Source project, as almost every tool
+that I use is an Open Source one, I couldn't be here without if not with the
+help of Open Source projects.
+
+Honestly, my true wish is to work full time in a Software as a Service startup,
+or any startup with a focus on Software.
+
+The good thing that is I keep growing professionally, and I expect (and will)
+the next year I'll reach more milestones.
+
+And of course, I'll continue hacking (in a creative way, not stealing info or
+criminal things) with side projects, creating an extra incoming source will be
+great for my finances.
+
+## Retrospect of 2023 personally and more
+
+This year I rediscovered the hobby of reading, and I really enjoy it.
+
+I discovered my new favorite book, **Ready Player One**, it was a really
+exciting and great lecture, the next year I'll read the sequel.
+
+I also started reading **Ikigai**, to keep acquiring good habits for a long and
+happy life, and seek a purpose in life.
+
+Another book I started reading is **The Little Book of Common Sense Investing**,
+as I already had a good habit of saving, but I want my money to keep growing
+more for a dignified retirement.
+
+I'm spending less time on social media,
+[even I wrote an article about this](https://www.juancman.dev/en/blog/the-monotony-of-social-media),
+doing things that **I really want to do** instead.
+
+Is really horrible how much time social media steals from us, keeping us away
+from doing things that we really enjoy.
+
+I'm doing moderate exercise, but indoors, I want to go outdoors too, I need more
+solar light.
+
+I'm happy spending my time with my family, even if the majority of the time I'm
+working or studying, I keep contact with my loved ones, and continue doing it,
+clearly.
+
+## Future plans for 2024 personally and more
+
+I'll keep reading, I'll write more on this website.
+
+I want to acquire new habits, like pixel art.
+
+And I'm retaking an old hobby, **GameDev**.
+
+As Unity is doing questionable things, I'll be using
+[Godot](https://godotengine.org/) instead.
+
+I don't have in mind a big project or something like that, just retake to
+develop simple videogames demos, it would be great to launch a little videogame,
+but a complete one.
+
+Trust me, is really, **REALLY** challenging to develop videogames, so instead of
+overwhelming myself, I'll keep my **ambitions simple**, but **constant**.
+
+### Happy holidays!
+
+![2023 complete image!](/blog/rewind-2023-and-future-plans/2023-complete!.png)
--- a/src/content/blog/the-monotony-of-social-media.mdx
+++ b/src/content/blog/the-monotony-of-social-media.mdx
@ -0,0 +1,92 @@
+---
+title: The Monotony of Social Media
+description: Abstracting human interaction using software has caused many problems that didn’t exist before.
+tags: [Thoughts]
+image: /blog/the-monotony-of-social-media/banner.jpg
+imageCaption: Person checking social media. Photo by Austin Distel on Unsplash
+date: 2023-7-17
+author: Juan Manzanero
+rss: true
+---
+
+![Person checking social media](@/assets/blog/the-monotony-of-social-media/banner.jpg)
+_Person checking social media. Photo by
+[Austin Distel](https://unsplash.com/@austindistel?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)
+on
+[Unsplash](https://unsplash.com/photos/person-using-both-laptop-and-smartphone-tLZhFRLj6nY?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)_
+
+Abstracting human interaction using software has caused many problems that didn’t exist before.
+
+It’s obvious, a lot of interactions on the Internet occurs through social media,
+letting you send friend requests, chat, or share memes and photos. However,
+abstracting human interaction using software has caused many problems that
+didn’t exist before.
+
+When the Internet started, many people created their own websites because that's
+was the thing you must have if you want to be cool, and a lot of these websites
+was just blogpost-like where the users shares their hobbies like movies, sports,
+books, videogames, etc. This motivation made more unique and human websites,
+where you can meet someone and their likes or dislikes.
+
+Now, with the boom of social media in the middle of 2000's, people prefer to
+connect just searching for a name or looking the friends of their friends, and
+send friend requests to try and connect. That was cool at the start, as anything
+new, but the problems started when companies like Facebook (now Meta) or Google
+(with YouTube) needed to monetize their platforms, mostly with Ads.
+
+And of course, that means that they needed to suppress, censor or ban anything
+that could be harmful for society, like hate speeches or stupid challenges that
+could risk people's lives.
+
+But, the bat thing about this, is that they homogenize almost everyone, forcing
+them to act as the algorithms keeps recommending users with likes and comments,
+guiding the people to act like someone else, and so.
+
+Now almost everyone does mainly two things, post photos about their "perfect"
+lives or share memes, and don't get me wrong, it's ok to enter to social media
+and try to disconnect for your job or problems, but using this every day as
+instant escape instead of confronting your own problems could be harmful in the
+long term, isolating you from the need of socialize in real life, with real
+people, and thinking that everyone has a perfect life.
+
+No, EVERYONE has problems in their lives, even more than yours, but social media
+algorithms promotes mainly "positive vibes only" and all that shit that in big
+dose is hamrful for our minds.
+
+And don't mention the censorship and shadow-banning if you post something
+controversial, it could be something that should not be tolerated like incite
+hate to a group, or it could be something that don't everyone agrees but it
+could be useful think a little about it, but still being controversial.
+
+Should everyone can tell what they thinks? Yeah, always if doesn't promotes hate
+or hurt other people or animals.
+
+They're reports like Twitter promotes hate in the algorithm, and Meta knows that
+Instagram increases anxiety and depression on young people, and actually;
+promotes it... as all negative feelings keeps you on the social media
+interacting with others, as that's what those companies sell, your data and time
+to advertisers.
+
+I recently heard a video talking about this topic, and that would be cool if we
+go back as the starts of the Internet where people created content as a hobby,
+instead of looking for validation through likes and comments, being more
+authentic persons instead of products.
+
+Should software solutions replace human interactions? I think not, but it's too
+late for almost everyone, but if you're reading this, start changing your life
+first if you want to be honest with yourself.
+
+Blog inspired by "Why does every personal website look like this now?" by Eric
+Murphy on YouTube.
+
+Source Video:
+
+<iframe
+  width='100%'
+  height='320'
+  className='rounded-md'
+  src='https://www.youtube-nocookie.com/embed/_x6SCSz7g5I'
+  title='YouTube video player'
+  allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+  allowFullScreen
+></iframe>
--- a/src/content/blog/website-2.0.mdx
+++ b/src/content/blog/website-2.0.mdx
@ -0,0 +1,115 @@
+---
+title: The reason to create a version 2.0 of my website
+description: I commited some errors when creating the first version of my website, here I will share what I have learned.
+tags: [Tech]
+image: /blog/website-2.0/banner.png
+imageCaption: Tech Stack of this website. Next.js, Vercel, React.js, TypeScript and TailwindCSS
+date: 2023-4-7
+author: Juan Manzanero
+rss: true
+---
+
+![Tech stack](@/assets/blog/website-2.0/banner.png) _Tech Stack of this website.
+Next.js, Vercel, React.js, TypeScript and TailwindCSS_
+
+I commited some errors when creating the first version of my website, here I will share what I have learned.
+
+The first version of my website was one of my biggest projects so fat, but
+**now** as I’ve **more** **experience** as a **Frontend** Engineer, I realize I
+**didn’t** do **enough** **research** into **creating** a **web** site with a
+**blog**.
+
+## Client Side Rendering (CSR) vs Server Side Rendering (SSR) vs Static Generation (SG)
+
+When developing a **web** **application**, you should **think** **about** the
+type of **rendering** to use, while **considering** the **requirements** of the
+**problems** you want to **solve**.
+
+### Client Side Rendering (CSR)
+
+For example, a web **application** like a **SaaS** to create tasks and manage
+people will have **dynamic** **pages** to show the tasks, update the cards when
+is edited or deleted, show notifications, etc. In this situation, a **CSR**
+would be **better**, to **render** the page **each** time the user **request**
+access will **keep** the data **updated**. However, a **CSR** needs to
+**hydrate** the page when is **requested**, this causes a **slow** **first**
+**load**, and uses **more** **resources** of the user’s PC.
+
+### Server Side Rendering (SSR)
+
+This could be solved using **SSR**, this consist in **generate** the page in the
+**Server** where the web app is hosted **using** all the **power** that a
+**server** can provide. The problem is that a **server** is **required**, Google
+Cloud provides with serverless options like App Engine or Cloud Run, but you’ll
+need to learn about this services and how to deploy the project, so the
+**technical** **knowledge** is **high**.
+
+The **disadvantage** of **CSG** and **SSR** is that because **each** **page**
+**must** be **rendered** on each **request**, **web** **crawlers** and
+**search** **engines** such as Google's will take **longer** to **obtain**
+**information** about your page, resulting in a **low** **SEO** priority.
+
+### Static Generation (SG)
+
+Well, if a **page** **doesn’t** require **fetch** **data** for **each**
+**request**, then you could use **SG**, this means that the **page** is
+**generated** when you **build** the **production** directory **before** you
+**deploy** it. The page will be generated into a HTML/CSS/JS one time, and if
+you need to **update** the **data** in that page you’ll need to do the
+**changes** and **deploy** the project. Yes, you’ll need to be more cautious
+when reviewing the changes before deploying, but as the page is already
+generated, **web** **crawlers** and the Google’s **search** **engine** will get
+the **info** in your page **faster**, **improving** your **SEO**.
+
+## The cool thing about Next.js
+
+In the **past** you will require to **think** if go **full** CSR, SSR or SG,
+linking your web to their respecting sections, like the app, blog, etc.
+
+**[Next.js](https://nextjs.org/)** is a **Node.js** **meta-framework** that uses
+**[React.js](https://react.dev/)** to build the UI, and provides with CSR, SSR,
+SG and more, so you can generate SG fetching async data, allowing you to don’t
+**need** to **create** **every** **static** **page**.
+
+Is that the **approach** **used** for **this** **web** site, **instead** of
+**fetch** the data on **each** **request**, I only **fetch** data **when** I
+**create** the **build** of the project.
+
+**Each** **article** is a SG page, but I use a **template** to keep every blog
+similar, using **markdown** syntax for the content of the blog, and with an
+**extension** of **TailwindCSS** I keep the styles consistent.
+
+So, **Next.js** allows you to **choose** the **rendering** method for **each**
+**page** in your web, this feature permits to create amazing websites in the
+same project, keeping consistence and with fast load times, Next.js even lazy
+loads each page and start loading when you hover a link like Home, Contact, etc.
+
+> I’ll explain in more detail the architecture of this project in the future!
+
+## TailwindCSS vs MUI
+
+I choose to use **[TailwindCSS](https://tailwindcss.com/)** to learn about this
+CSS library, and I’m impressed the **faster** that makes the development of the
+styles of a web project. **MUI** **provides** **functionalities**, but sometimes
+**gives** **problems** with **hydration** like in my previous website, when you
+**first** **load** the page it takes a **time** to **show** all the **styles**,
+now it no longer occurs because TailwindCSS is pure CSS and the pages are
+static.
+
+## Deploying on Vercel
+
+**[Vercel](https://vercel.com)** is the company behind Next.js, and they
+provides with **hosting** services **optimized** for **Node.js** apps, and as
+I’m learning about Cloud Development maybe I could try to host this web like my
+previous web into a Cloud Service like Cloud Run, but this time I choose to use
+**Vercel** to get the **analytics** that are very useful, and as the **hobby
+plan** gives me free hosting for small projects.
+
+To deploy I use the **[Vercel CLI](https://vercel.com/docs/cli)**, pretty simple
+and straightforward.
+
+## More content coming soon!
+
+I’ll keep updating with posts, features and more content to share my experience,
+and know I’m writing this paragraph, I think the next feature it would be a
+newsletter to notify people when I create a new post. Time to work!
--- a/src/content/config.ts
+++ b/src/content/config.ts
@ -0,0 +1,37 @@
+import { defineCollection, z } from "astro:content";
+
+const contentSchema = z.object({
+  title: z.string(),
+  description: z.string(),
+  image: z.string(),
+  imageCaption: z.string(),
+  date: z.coerce.date(),
+  tags: z.array(z.string()),
+  author: z.string(),
+  rss: z.boolean(),
+  draft: z.boolean({}).optional(),
+});
+
+const blog = defineCollection({
+  type: "content",
+  schema: contentSchema,
+});
+
+const portfolio = defineCollection({
+  type: "content",
+  schema: contentSchema,
+});
+
+const pages = defineCollection({
+  type: "content",
+  schema: z.object({
+    title: z.string(),
+    description: z.string(),
+  }),
+});
+
+export const collections = {
+  blog,
+  portfolio,
+  pages,
+};
--- a/src/content/pages/about.mdx
+++ b/src/content/pages/about.mdx
@ -0,0 +1,22 @@
+---
+title: About
+description: This website was first created as a portfolio, but learning about how the personal website is the digital form of the house tree, I like the idea of going that way instead of a generic landing with my social media.
+---
+
+# About
+
+This website was first created as a portfolio, but learning about how the
+personal website is the digital form of the house tree, I like the idea of going
+that way instead of a generic landing with my social media.
+
+I'm trying to expand my skills, as I'm a Frontend Developer (with knowledge on
+Backend), but skills like writing are important.
+
+This website is in English to reach more people and put it into practice, but
+Spanish is my mother tongue.
+
+All content written here is without AI; I don't use it for generating ideas; the
+only exception is [LanguageTool](https://languagetool.org/) for validating my
+grammar.
+
+[![Written by human, not by AI](@/assets/about/written-by-human-not-by-ai.svg)](https://notbyai.fyi/)
--- a/src/content/pages/contact.mdx
+++ b/src/content/pages/contact.mdx
@ -0,0 +1,36 @@
+---
+title: Contact
+description: You can contact me if you want me to work, or just say hello.
+---
+
+# Contact
+
+You can contact me if:
+
+- You want me to work
+- Just say hello
+
+Please consider that **I don't**:
+
+- Work for free
+- Work on your startup idea and just get equity in return (I can't pay my bills
+  with lottery tickets)
+- Work for you and get "exposure" (I can't pay my bills with exposure)
+- Communicate via phone number; all communication must be via email (we can use
+  Discord, Slack, etc. once you hire me).
+
+## My email
+
+Just change `[at]` for `@` and `[dot]` for `.`. This is for preventing web
+crawlers from getting my email:
+
+```
+contact[at]juancman[dot]dev
+```
+
+## Social media
+
+You can send me a direct message:
+
+- [LinkedIn](https://www.linkedin.com/in/juancmandev)
+- [GitHub](https://github.com/juancmandev)
--- a/src/content/pages/resources.mdx
+++ b/src/content/pages/resources.mdx
@ -0,0 +1,62 @@
+---
+title: Resources
+description: Here you can find websites, YouTube channels, courses and more stuff that I consume or find interesting.
+---
+
+# Resources
+
+Here you can find websites, YouTube channels, courses and more stuff that I
+consume or find interesting.
+
+## Programming and Web Development
+
+To **power-up** my career.
+
+### Websites (courses, docs, etc.)
+
+- [fireship.io](https://fireship.io) - My favorite premium courses about WebDev
+
+- [MDN Web Docs](https://developer.mozilla.org/en-US) - Best docs for HTML, CSS
+  and JS
+
+### Tech Stack
+
+Technologies that I use for personal projects and sometimes for work.
+
+- [Next.js](https://nextjs.org) - Dynamic and flexible React meta-framework,
+  used on this Website
+
+- [Supabase](https://supabase.com) - Open Source Backend as a Service
+  alternative for Firebase, uses PostgreSQL and is really good if you're working
+  alone or you want a solid backend without investing to much
+
+- [TailwindCSS](https://tailwindcss.com) - Best way to write CSS
+
+- [shadcn/ui](https://ui.shadcn.com) - Best components for React, sinergy with
+  TailwindCSS
+
+---
+
+## Inspiration and Learning
+
+For writing, thinking or growing my career.
+
+### Personal Websites
+
+- [Eric Murphy](https://ericmurphy.xyz) - The guy who inspired me to retake this
+  side project and create more content
+
+- [Bikobatanari](https://www.bikobatanari.art) - Super original, fun and source
+  of inspiration
+
+### Favorite Blogs
+
+- [Why I Will Never Join Mastodon (or the rest of the Fediverse)](https://ericmurphy.xyz/blog/mastodon) -
+  Social media is bullshit
+
+- [Create More, Consume Less](https://www.bikobatanari.art/posts/2020/create-more) -
+  Today people prefers talk about celebrities and other peoples lifes rather
+  than our own milestones
+
+- [My Website is a Personal Museum](https://www.bikobatanari.art/posts/2020/personal-museum) -
+  The digital form of the three house
--- a/src/content/portfolio/build-a-fullstack-app.mdx
+++ b/src/content/portfolio/build-a-fullstack-app.mdx
--- a/src/content/portfolio/human-to-js.mdx
+++ b/src/content/portfolio/human-to-js.mdx
@ -0,0 +1,76 @@
+---
+title: Human to JS
+description: Translate human language to JavaScript code!
+tags: [ChatGPT, Next.js, JavaScript, Vercel]
+image: /portfolio/human-to-js/banner.png
+imageCaption: Human to JS Banner
+date: 2023-4-14
+author: Juan Manzanero
+rss: true
+---
+
+![Human to JS banner](@/assets/portfolio/human-to-js/banner.png) _Human to JS diagram_
+
+_This project has been achieved._
+
+## Background
+
+I’m always looking to grow my career by learning new technologies as well known
+Software Engineer; however, that could be dangerous because Software Engineer is
+not about using the ultimate tech stack but making things happen.
+
+## Inspiration source
+
+I was checking Twitter until I found a tweet where a person created a side
+project over a weekend. That project is
+[SQL Translator](https://www.sqltranslate.app/), a simple UI to put text input
+describing a query; then you get the query into SQL, simple!
+
+[@whoiskatrin](https://twitter.com/whoiskatrin?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1634973237829599233%7Ctwgr%5Eb49b9d28e6ea7383ef16ea3c8c6040656ff0c944%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fpublish.twitter.com%2F%3Fquery%3Dhttps3A2F2Ftwitter.com2Fwhoiskatrin2Fstatus2F1634973237829599233widget%3DTweet)
+used ChatGPT API to send a prompt typed by the user, and then show SQL response
+into a component to copy to the clipboard. That was enough to get the deserved
+attention of the community.
+[Tweet link](https://twitter.com/whoiskatrin/status/1634973237829599233)
+
+## My idea
+
+> _“Why not a web app to type a prompt to generate JavaScript code?”_
+
+So I started to build my idea using this tech stack:
+
+- **Next.js**: Web framework to build the UI and Next.js provides you with an
+  API directory to communicate with ChatGPT API
+- **MUI**: To use the UI components and as a design system
+- **Formik & Yup**: To manage the state of the prompt form and create validation
+  schemas
+
+Using all these technologies I build a simple UI with a MUI Card component, then
+I created a form where I manage all the inputs with Formik, the text and select
+inputs are directly from MUI, and to create the validation schema I used Yup to
+mark as required those fields and don’t send them empty.
+
+With the UI finished, I started creating the endpoint in the API directory to
+consume ChatGPT’s API, just using a fetch
+like [@whoiskatrin](https://twitter.com/whoiskatrin?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1634973237829599233%7Ctwgr%5Eb49b9d28e6ea7383ef16ea3c8c6040656ff0c944%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fpublish.twitter.com%2F%3Fquery%3Dhttps3A2F2Ftwitter.com2Fwhoiskatrin2Fstatus2F1634973237829599233widget%3DTweet)’s
+project, indicating which OpenAI model to use, in this case, *text-davinci-003*,
+you can learn more about those
+models [here](https://platform.openai.com/docs/api-reference/models/list).
+Obviously, in that request, I send the prompt from the user into a string
+indicating ChatGPT to only give me the code, without comments or more results.
+
+## Added value
+
+Yes, there’re options like GitHub Copilot that resolve that problem, that’s why
+I added a select option to choose if the syntax should be an arrow function or a
+simple function.
+
+I’ll add more features, like a TypeScript option, and use a TS Interface to use
+as a reference, but now I’m working on more projects!
+
+## Inspiring people!
+
+The cool thing about side projects is that inspires people like us, we can use
+our tech skill that serves the bread on the table to transform ideas into
+products, and products into a community, as
+[@Serudda](https://twitter.com/serudda) talks in this
+[video](https://www.youtube.com/watch?v=LXgPNdw8avI&t) (video audio in Spanish).
--- a/src/content/portfolio/next-intl-blog-template.mdx
+++ b/src/content/portfolio/next-intl-blog-template.mdx
@ -0,0 +1,148 @@
+---
+title: Next Intl Blog Template
+description: Start your blog in multiple languages!
+tags: [Next.js, next-intl, tailwindcss]
+image: /portfolio/next-intl-blog-template/banner.png
+imageCaption: Next Intl Blog Template banner
+date: 2023-12-18
+author: Juan Manzanero
+rss: true
+---
+
+![Next Intl Blog Template banner](@/assets/portfolio/next-intl-blog-template/banner.png)
+_Next Intl Blog Template banner_
+
+[GitHub](https://github.com/juancmandev/next-intl-blog-template)
+
+[Website](https://next-intl-blog-template.vercel.app/en)
+
+## Overview
+
+Recently I update this website, and as you may know, is an **English and Spanish
+content website**.
+
+I'm not using a translation plugin, instead I write every work in both English
+and Spanish.
+
+Thanks to Next.js and [next-intl](https://next-intl-docs.vercel.app/) I can
+achieve this, rendering routes for each language in the website, accessing a
+dictionary that contains the content translated by me.
+
+For the .mdx files, I created a directory for each language, and inside of those
+directories it contains the content in both languages too.
+
+## How to use
+
+This template is an extension of
+[next-intl](https://next-intl-docs.vercel.app/), chek the
+[getting started](https://next-intl-docs.vercel.app/docs/getting-started) to
+learn the basics, the purpouse of the template is to create a simple layout for
+future customization.
+
+### Add or remove locales
+
+You can add or remove locales in the `src/lang/locales.ts` file.
+
+```ts title="src/lang/locales.ts"
+export type locales = 'en' | 'es';
+
+export const localesList: locales[] = ['en', 'es'];
+```
+
+Just add or remove a locale from the `locales` const, and add or remove it from
+the list.
+
+The first item in the `localesList` must be the default locale.
+
+The list is used for static generation of the routes in
+`src/app/[locale]/layout.tsx`.
+
+```ts title="src/app/[locale]/layout.tsx"
+import { localesList } from '@/lang/locales';
+
+export function generateStaticParams() {
+  return localesList.map((locale) => ({ locale }));
+}
+```
+
+Remember to update the matcher in `src/middleware.ts`.
+
+```ts title="src/middleware.ts"
+//...
+
+export const config = {
+  matcher: ['/', '/(en|es)/:path*'],
+};
+```
+
+And of course, update your `src/lang/[locale].json` files.
+
+### Content creation
+
+Use `src/content/[locale]` for create content, in the `/[locale]/` directory
+ceate the directory for each purpouse, for example: `/[locale]/blog`.
+
+Inside create the .mdx file with an unique name, the name will be used as the
+slug for create the static page for that post.
+
+For create a blog section, you'll use the _getAllContent_ function in your
+route, for example: `src/app/[locale]/blog/[slug]/page.tsx`.
+
+```tsx title="src/app/[locale]/blog/[slug]/page.tsx"
+import { Mdx } from '@/components';
+import { TParamsLocale, TPage, TSlugLang } from '@/types';
+import { Metadata } from 'next';
+import { getAllContent, getContent } from '@/utils/getContent';
+
+export async function generateStaticParams(
+  props: TParamsLocale,
+): Promise<TSlugLang[]> {
+  const blogs = await getAllContent(props.params.locale, 'blog');
+
+  if (!blogs) return [];
+
+  return blogs.map((blog) => ({
+    slug: blog.slug,
+    locale: props.params.locale,
+  }));
+}
+
+//...
+```
+
+This will create each static page for each blog post.
+
+You can get the metadata of the .mdx file too.
+
+```tsx title="src/app/[locale]/blog/[slug]/page.tsx"
+//...
+
+export async function generateMetadata(props: TPage): Promise<Metadata> {
+  const blog = await getContent(props.params.locale, 'blog', props.params.slug);
+
+  if (!blog) return {};
+
+  return {
+    title: blog.title,
+    //...
+  };
+}
+
+//...
+```
+
+Then, render the content using the _Mdx_ component.
+
+```tsx title="src/app/[locale]/blog/[slug]/page.tsx"
+//...
+
+export default async function Page(props: TPage) {
+  const post = await getContent(props.params.locale, 'blog', props.params.slug);
+
+  if (!post) return null;
+
+  return <Mdx code={post.body.code} />;
+}
+```
+
+[You can fork this template here](https://github.com/juancmandev/next-intl-blog-template)
--- a/src/content/portfolio/workarise.mdx
+++ b/src/content/portfolio/workarise.mdx
@ -0,0 +1,74 @@
+---
+title: Workarise
+description: Workarise Web App, manage tasks with your team.
+tags: [React.js, Vite.js, MUI, Firebase, GCP, Node.js]
+image: /portfolio/workarise/banner.png
+imageCaption: Workarise Banner
+date: 2023-4-13
+author: Juan Manzanero
+rss: true
+---
+
+![Workarise Banner](@/assets/portfolio/workarise/banner.png) _Workarise Banner_
+
+[Website](https://workarise.com)
+
+## Overview
+
+[Workarise](http://workarise.com) is a Team Manager Software as a Service to
+create task cards assigning people, set a start and due date, add attachments
+files, etc.
+
+You can use the Calendar to see the tasks' due dates and schedule Google Meet
+events authorizing the use of your Google Calendar. You can edit and delete
+events which sync with your Google Calendar and guests' Google Calendars. The
+Gantt provides you with a timeline to check task duration.
+
+The web app is developed with [React.js](https://react.dev/),
+using [Vite.js](https://vitejs.dev/) to run the development environment. For
+functionality like modals, and popovers we use [MUI](https://mui.com/). To
+manage the state of components we’re using useContext.
+
+To create Google Meet events and sync the calendar we'd develop a small Node.js
+API to use Google OAuth 2 API, as we need to prompt our users to give access to
+their Google Calendars.
+
+Currently, Workarise is in the first version,
+using [Firebase](https://firebase.google.com/) to authenticate users and store
+raw data and files. Firebase
+uses [Firestore](https://firebase.google.com/docs/firestore), a NoSQL DB,
+however we’re developing an API using [Django](https://www.djangoproject.com/)
+running on [Cloud Run](https://cloud.google.com/run) connected
+to [Cloud SQL](https://cloud.google.com/sql) to a MySQL instance, as we’ll be
+using a SQL DB in the future. Currently the web app and landing are deployed on
+Firebase Hosting, but we’ll move the landing page to Vercel, and it’ll be
+updated to use Next.js in the future to optimize SEO and publish blog posts.
+
+## My impact in Workarise
+
+Currently, we’re developing an MVP, and everyone is working part-time on this
+project. I joined in December, but before there wasn’t a product that users can
+use, so as I was the only Frontend Engineer at that moment I taked full
+responsibility for delivering something that can be considered an MVP.
+
+It took me like 3 months to achieve that, I updated some dependencies of the
+project to improve the development flow, and I suggested using Firebase as
+Backend and Hosting.
+
+Thanks to all this we got our first users and feedback, so we’re working on that
+feedback to keep improving our app, our users like the design and simplicity!
+
+At the moment there’re 3 engineers in the team, 2 on the front (including me)
+and 1 on the back, but I’m helping to our Backend Engineer to deploy on GCP to
+production the API and DB, and I'm guiding the new Frontend to deliver new
+features, he’d developed the responsive design and some features to complement
+the task cards.
+
+I’m happy to test my skills in this project, it’s not easy to take more
+responsibility with less than 2 years of labor experience, and it’d help me to
+grow a lot in these months.
+
+Even if the market doesn’t consider my years of experience as a senior, I think
+that doesn’t matter at all, the only thing that matters is that you can
+understand why you’re using code, to create solutions and reach people across
+their computers.
--- a/src/content/videos/nadie-entiende-la-privacidad.mdx
+++ b/src/content/videos/nadie-entiende-la-privacidad.mdx
@ -0,0 +1,29 @@
+---
+title: Nadie Entiende la Privacidad
+description:
+  Hablar de privacidad es complicado, ya que no todo el mundo la entiende de
+  verdad.
+tags:
+  - Tech
+  - Freedom
+  - Libre
+image: https://img.youtube.com/vi/Wlw6rscU4gI/maxresdefault.jpg
+imageCaption: Video thumbnail.
+date: 6/3/2024
+author: Juan Manzanero
+rss: true
+---
+
+<iframe
+  width='100%'
+  height='320'
+  className='rounded-md'
+  src='https://www.youtube-nocookie.com/embed/_x6SCSz7g5I'
+  title='YouTube video player'
+  allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+  allowFullScreen
+></iframe>
+
+Cuando respecto a la privacidad, por lo general la respuesta de la gente es "como si tuviese algo que ocultar" o "es imposible ocultar todo lo que hacemos", y es justo a esas frases cuando digo que nadie entiende la privacidad.
+
+La privacidad es una necesidad humana, un derecho, está en nuestra naturaleza. Prueba de ello, cuando vas a un baño público, generalmente cierras la puerta, o intentas usar un espacio donde no haya gente cerca. Y es que todos sabemos qué se hace cuando se va al baño, pero todos queremos tener un momento de privacidad para hacer nuestras necesidades, ya que es algo que no queremos compartir con extraños.
--- a/src/env.d.ts
+++ b/src/env.d.ts
@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@ -0,0 +1,36 @@
+---
+import Footer from "@/components/footer";
+import Navbar from "@/components/navbar.astro";
+import "@/styles/globals.css";
+
+interface Props {
+    title: string;
+}
+
+const { title, description, lang } = Astro.props;
+---
+
+<!doctype html>
+<html lang={lang || "en"}>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="description" content={description} />
+        <meta name="viewport" content="width=device-width" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link
+            rel="alternate"
+            title="juancmandev"
+            type="application/rss+xml"
+            href={new URL("rss.xml", Astro.site)}
+        />
+        <meta name="generator" content={Astro.generator} />
+        <title>{title}</title>
+    </head>
+    <body>
+        <Navbar />
+        <main class="px-4 min-h-screen max-w-[65ch] py-32 mx-auto">
+            <slot />
+        </main>
+        <Footer />
+    </body>
+</html>
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/src/pages/[...slug].astro
+++ b/src/pages/[...slug].astro
@ -0,0 +1,28 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import { getCollection } from "astro:content";
+import type { CollectionEntry } from "astro:content";
+import components from "@/components/mdx/wrapper";
+
+interface Props {
+    page: CollectionEntry<"pages">;
+}
+
+export async function getStaticPaths() {
+    const allPages = await getCollection("pages");
+
+    return allPages.map((page) => ({
+        params: { slug: page.slug },
+        props: { page },
+    }));
+}
+
+const { page } = Astro.props;
+const { Content } = await page.render();
+---
+
+<Layout title={page.data.title} description={page.data.description}>
+    <article class="prose prose-invert">
+        <Content components={{ ...components }} />
+    </article>
+</Layout>
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@ -0,0 +1,38 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import { getCollection } from "astro:content";
+import type { CollectionEntry } from "astro:content";
+import components from "@/components/mdx/wrapper";
+import formatDate from "@/utils/format-date";
+
+interface Props {
+    post: CollectionEntry<"blog">;
+}
+
+export async function getStaticPaths() {
+    const allBlogPosts = await getCollection(
+        "blog",
+        ({ data }) => data.draft !== true,
+    );
+
+    return allBlogPosts.map((post) => ({
+        params: { slug: post.slug },
+        props: { post },
+    }));
+}
+
+const { post } = Astro.props;
+const { Content } = await post.render();
+---
+
+<Layout title={post.data.title} description={post.data.description}>
+    <article class="prose prose-invert">
+        <h1>{post.data.title}</h1>
+        <Content components={{ ...components }} />
+        <hr />
+        <p>
+            <strong>Posted: </strong>
+            {post.data.date && formatDate(new Date(post.data.date))}
+        </p>
+    </article>
+</Layout>
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@ -0,0 +1,32 @@
+---
+import PostItem from "@/components/post-item";
+import Layout from "@/layouts/Layout.astro";
+import { getCollection } from "astro:content";
+
+const allPosts = await getCollection("blog", ({ data }) => data.draft !== true);
+allPosts.sort(
+    (a, b) =>
+        Date.parse(b.data.date.toString()) - Date.parse(a.data.date.toString()),
+);
+---
+
+<Layout title="Blog" description="Check my projects.">
+    <section class="prose prose-invert">
+        <h1>Blog</h1>
+        <p>Long format about thoughts and other topics.</p>
+    </section>
+    <ul class="mt-4 flex flex-col gap-4">
+        {
+            allPosts.map((blogpost) => (
+                <li>
+                    <PostItem
+                        type="blog"
+                        slug={blogpost.slug}
+                        date={blogpost.data.date!}
+                        title={blogpost.data.title!}
+                    />
+                </li>
+            ))
+        }
+    </ul>
+</Layout>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -0,0 +1,95 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import LinkButton from "@/components/link-button";
+import { getCollection } from "astro:content";
+import PostItem from "@/components/post-item";
+import { Image } from "astro:assets";
+import logo from "@/assets/logo.png";
+
+const allPosts = await getCollection("blog", ({ data }) => data.draft !== true);
+allPosts.sort(
+    (a, b) =>
+        Date.parse(b.data.date.toString()) - Date.parse(a.data.date.toString()),
+);
+const last3Blogs = allPosts.slice(0, 3);
+
+const allProjects = await getCollection(
+    "portfolio",
+    ({ data }) => data.draft !== true,
+);
+allProjects.sort(
+    (a, b) =>
+        Date.parse(b.data.date.toString()) - Date.parse(a.data.date.toString()),
+);
+const last3Projects = allProjects.slice(0, 3);
+---
+
+<Layout title="juancmandev" description="Welcome to my domain, stranger.">
+    <div class="space-y-16">
+        <section class="flex flex-col items-start gap-5">
+            <div class="space-y-1">
+                <h1 class="text-3xl font-bold text-primary">
+                    Welcome to my domain, stranger.
+                </h1>
+                <h2 class="text-xl">
+                    I am <span class="font-semibold text-primary"
+                        >juancmandev</span
+                    >.
+                </h2>
+                <p class="text-lg font-light">
+                    I like computers, and all stuff related to technology.
+                </p>
+                <p class="text-lg font-light">
+                    Take a seat, drink some tea, and enjoy your stay.
+                </p>
+            </div>
+            <Image
+                src={logo}
+                width={160}
+                height={160}
+                alt="juancmandev logo"
+                class="w-40 h-40 aspect-square"
+            />
+        </section>
+        <section>
+            <h2 class="text-3xl">Latest posts</h2>
+            <ul class="mt-4 flex flex-col gap-4">
+                {
+                    last3Blogs.map((blogpost) => (
+                        <li>
+                            <PostItem
+                                type="blog"
+                                slug={blogpost.slug}
+                                date={blogpost.data.date!}
+                                title={blogpost.data.title!}
+                            />
+                        </li>
+                    ))
+                }
+            </ul>
+            <LinkButton variant="secondary" href="/blog" className="mt-8"
+                >More posts</LinkButton
+            >
+        </section>
+        <section>
+            <h2 class="text-3xl">Latest projects</h2>
+            <ul class="mt-4 flex flex-col gap-4">
+                {
+                    last3Projects.map((project) => (
+                        <li>
+                            <PostItem
+                                type="portfolio"
+                                slug={project.slug}
+                                date={project.data.date!}
+                                title={project.data.title!}
+                            />
+                        </li>
+                    ))
+                }
+            </ul>
+            <LinkButton variant="secondary" href="/portfolio" className="mt-8"
+                >More projects</LinkButton
+            >
+        </section>
+    </div>
+</Layout>
--- a/src/pages/microblog.astro
+++ b/src/pages/microblog.astro
@ -0,0 +1,33 @@
+---
+export const prerender = false;
+
+import MicroblogItem from "@/components/microblog-item";
+import Layout from "@/layouts/Layout.astro";
+import { createServerClient } from "@/utils/pocketbase";
+
+const pb = createServerClient(import.meta.env.SECRET_POCKETBASE_API_URL);
+const data = await pb.collection("microblogs").getFullList({
+    expand: "tags",
+    sort: "-published",
+});
+---
+
+<Layout
+    title="Microblog"
+    description="Short-format writing. Instead of using shitty social media."
+>
+    <div class="prose prose-invert">
+        <h1>Microblog</h1>
+        <p>Short-format writing.</p>
+        <p>Instead of using shitty social media.</p>
+        <ul class="mx-auto p-0 mt-10 flex flex-col gap-10 list-none">
+            {
+                data.map((item: any) => (
+                    <li>
+                        <MicroblogItem {...item} />
+                    </li>
+                ))
+            }
+        </ul>
+    </div>
+</Layout>
--- a/src/pages/portfolio/[...slug].astro
+++ b/src/pages/portfolio/[...slug].astro
@ -0,0 +1,38 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import { getCollection } from "astro:content";
+import type { CollectionEntry } from "astro:content";
+import components from "@/components/mdx/wrapper";
+import formatDate from "@/utils/format-date";
+
+interface Props {
+    project: CollectionEntry<"portfolio">;
+}
+
+export async function getStaticPaths() {
+    const allProjects = await getCollection(
+        "portfolio",
+        ({ data }) => data.draft !== true,
+    );
+
+    return allProjects.map((project) => ({
+        params: { slug: project.slug },
+        props: { project },
+    }));
+}
+
+const { project } = Astro.props;
+const { Content } = await project.render();
+---
+
+<Layout title={project.data.title} description={project.data.description}>
+    <article class="prose prose-invert">
+        <h1>{project.data.title}</h1>
+        <Content components={{ ...components }} />
+        <hr />
+        <p>
+            <strong>Posted: </strong>
+            {project.data.date && formatDate(new Date(project.data.date))}
+        </p>
+    </article>
+</Layout>
--- a/src/pages/portfolio/index.astro
+++ b/src/pages/portfolio/index.astro
@ -0,0 +1,35 @@
+---
+import PostItem from "@/components/post-item";
+import Layout from "@/layouts/Layout.astro";
+import { getCollection } from "astro:content";
+
+const allProjects = await getCollection(
+    "portfolio",
+    ({ data }) => data.draft !== true,
+);
+allProjects.sort(
+    (a, b) =>
+        Date.parse(b.data.date.toString()) - Date.parse(a.data.date.toString()),
+);
+---
+
+<Layout title="Blog" description="Long format about thoughts and other topics.">
+    <section class="prose prose-invert">
+        <h1 class="text-3xl font-bold">Portfolio</h1>
+        <p>Check my projects.</p>
+    </section>
+    <ul class="mt-4 flex flex-col gap-4">
+        {
+            allProjects.map((project) => (
+                <li>
+                    <PostItem
+                        type="portfolio"
+                        slug={project.slug}
+                        date={project.data.date!}
+                        title={project.data.title!}
+                    />
+                </li>
+            ))
+        }
+    </ul>
+</Layout>
--- a/src/pages/rss.xml.js
+++ b/src/pages/rss.xml.js
@ -0,0 +1,50 @@
+import rss from "@astrojs/rss";
+import { getCollection } from "astro:content";
+import sanitizeHtml from "sanitize-html";
+import MarkdownIt from "markdown-it";
+const parser = new MarkdownIt();
+
+export async function GET(context) {
+  const blog = await getCollection(
+    "blog",
+    ({ data }) => data.draft !== true && data.rss === true,
+  );
+  const portfolio = await getCollection(
+    "portfolio",
+    ({ data }) => data.draft !== true && data.rss === true,
+  );
+
+  const blogItems = blog.map((post) => ({
+    title: post.data.title,
+    pubDate: post.data.date,
+    description: post.data.description,
+    tags: post.data.tags,
+    author: post.data.author,
+    link: `/blog/${post.slug}/`,
+    content: sanitizeHtml(parser.render(post.body), {
+      allowedTags: sanitizeHtml.defaults.allowedTags.concat(["img"]),
+    }),
+  }));
+
+  const portfolioItems = portfolio.map((project) => ({
+    title: project.data.title,
+    pubDate: project.data.date,
+    description: project.data.description,
+    tags: project.data.tags,
+    author: project.data.author,
+    link: `/portfolio/${project.slug}/`,
+    content: sanitizeHtml(parser.render(project.body), {
+      allowedTags: sanitizeHtml.defaults.allowedTags.concat(["img"]),
+    }),
+  }));
+
+  const items = [...blogItems, ...portfolioItems];
+
+  return rss({
+    title: "juancmandev",
+    description: "Welcome to my domain, stranger.",
+    customData: `<language>en-us</language><lastBuildDate>${new Date()}</lastBuildDate>`,
+    site: context.site,
+    items,
+  });
+}
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@ -0,0 +1,36 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
+    [data-rehype-pretty-code-figure] {
+        @apply bg-[#1e1e2e] rounded-md pt-4;
+    }
+    [data-rehype-pretty-code-figure] figcaption {
+        @apply m-0 mb-2 px-4 pb-4 border-b-[0.5px] border-secondary;
+    }
+    [data-rehype-pretty-code-figure] pre {
+        @apply py-3 px-4;
+    }
+    [data-rehype-pretty-code-figure] pre > code > span {
+        @apply pr-4;
+    }
+    [data-rehype-pretty-code-fragment] {
+        @apply relative my-5 rounded-md border border-border/20 bg-[#282c34];
+    }
+    .prose code {
+        @apply rounded-md border border-border/20 font-normal p-0.5 bg-secondary before:content-none after:content-none;
+    }
+    .prose pre > code {
+        @apply bg-transparent border-none;
+    }
+    * {
+        scroll-margin-top: 72px;
+    }
+}
--- a/src/utils/format-date.ts
+++ b/src/utils/format-date.ts
@ -0,0 +1,23 @@
+const months = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+export default function formatDate(date: Date | string) {
+  const newDate = new Date(date);
+  const month = months[newDate.getMonth()];
+  const day = newDate.getDate();
+  const year = newDate.getFullYear();
+
+  return `${month} ${day}, ${year}`;
+}
--- a/src/utils/nav-links.tsx
+++ b/src/utils/nav-links.tsx
@ -0,0 +1,36 @@
+type TNavItem = {
+  label: string;
+  to: string;
+};
+
+export const navItems: TNavItem[] = [
+  {
+    label: "Blog",
+    to: "/blog",
+  },
+  {
+    label: "Portfolio",
+    to: "/portfolio",
+  },
+
+  {
+    label: "Microblog",
+    to: "/microblog",
+  },
+  {
+    label: "Resources",
+    to: "/resources",
+  },
+  // {
+  //   label: "Videos",
+  //   to: "/videos",
+  // },
+  {
+    label: "About",
+    to: "/about",
+  },
+  {
+    label: "Contact",
+    to: "/contact",
+  },
+];
--- a/src/utils/pocketbase.ts
+++ b/src/utils/pocketbase.ts
@ -0,0 +1,84 @@
+import PocketBase from "pocketbase";
+import type { RecordService } from "pocketbase";
+
+export enum Collections {
+  Microblogs = "microblogs",
+  Tags = "tags",
+  Users = "users",
+}
+
+export type IsoDateString = string;
+export type RecordIdString = string;
+export type HTMLString = string;
+
+export type BaseSystemFields<T = never> = {
+  id: RecordIdString;
+  created: IsoDateString;
+  updated: IsoDateString;
+  collectionId: string;
+  collectionName: Collections;
+  expand?: T;
+};
+
+export type AuthSystemFields<T = never> = {
+  email: string;
+  emailVisibility: boolean;
+  username: string;
+  verified: boolean;
+} & BaseSystemFields<T>;
+
+export type MicroblogsRecord = {
+  content?: string;
+  published: IsoDateString;
+  tags?: RecordIdString[];
+};
+
+export type TagsRecord = {
+  name?: string;
+};
+
+export type UsersRecord = {
+  avatar?: string;
+  name?: string;
+};
+
+export type MicroblogsResponse<Texpand = unknown> = Required<MicroblogsRecord> &
+  BaseSystemFields<Texpand>;
+export type TagsResponse<Texpand = unknown> = Required<TagsRecord> &
+  BaseSystemFields<Texpand>;
+export type UsersResponse<Texpand = unknown> = Required<UsersRecord> &
+  AuthSystemFields<Texpand>;
+
+export type CollectionRecords = {
+  microblogs: MicroblogsRecord;
+  tags: TagsRecord;
+  users: UsersRecord;
+};
+
+export type CollectionResponses = {
+  microblogs: MicroblogsResponse;
+  tags: TagsResponse;
+  users: UsersResponse;
+};
+
+export type TypedPocketBase = PocketBase & {
+  collection(idOrName: "microblogs"): RecordService<MicroblogsResponse>;
+  collection(idOrName: "tags"): RecordService<TagsResponse>;
+  collection(idOrName: "users"): RecordService<UsersResponse>;
+};
+
+export function createServerClient(url: string) {
+  if (!url) {
+    throw new Error("Pocketbase API url not defined !");
+  }
+
+  if (typeof window !== "undefined") {
+    throw new Error(
+      "This method is only supposed to call from the Server environment",
+    );
+  }
+
+  const client = new PocketBase(url) as TypedPocketBase;
+
+  return client;
+}
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@ -0,0 +1,61 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  prefix: "",
+  theme: {
+    fontFamily: {
+      sans: ["Helvetica", "Arial", "sans-serif"],
+    },
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "#eee",
+        input: "#00adb5",
+        ring: "#00adb5",
+        background: "#222831",
+        foreground: "#eee",
+        primary: {
+          DEFAULT: "#00adb5",
+          foreground: "#000",
+        },
+        secondary: {
+          DEFAULT: "#393e46",
+          foreground: "#eee",
+        },
+        destructive: {
+          DEFAULT: "#ff2e63",
+          foreground: "#eee",
+        },
+        muted: {
+          DEFAULT: "#393e46",
+          foreground: "#eee",
+        },
+        accent: {
+          DEFAULT: "#00adb5",
+          foreground: "#eee",
+        },
+        popover: {
+          DEFAULT: "#393e46",
+          foreground: "#eee",
+        },
+        card: {
+          DEFAULT: "#393e46",
+          foreground: "#eee",
+        },
+      },
+      borderRadius: {
+        lg: "8px",
+        md: "4px",
+        sm: "2px",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+};
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,11 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}