New Jekyll site

.editorconfig

@@ -1,12 +0,0 @@
-# EditorConfig is awesome: https://EditorConfig.org
-
-# top-most EditorConfig file
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true

.eleventy.js

@@ -1,15 +0,0 @@
-const pluginTailwindCSS = require("eleventy-plugin-tailwindcss");
-
-module.exports = function (eleventyConfig) {
-  eleventyConfig.addPlugin(pluginTailwindCSS, {
-    src: "_includes/**/*.css",
-    keepFolderStructure: false,
-  });
-
-  return {
-    dir: {
-      input: "_content",
-      includes: "../_includes",
-    },
-  };
-};

.github/workflows/build-deploy-prod.yml

@@ -1,27 +1,29 @@
-name: Build and Deploy Production Site
+name: Build & Deployment
 
 on:
   push:
-    branches:
+    branches: [main]
-      - main
 
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: setup node
+      - name: Build Site
-        uses: actions/setup-node@v1
+        run: >-
+          docker run --rm
+          --workdir /app
+          -v ${{ github.workspace }}:/app
+          --entrypoint bash ruby:3.3 -c
+          "gem install bundler && bundle install && JEKYLL_ENV=production bundle exec jekyll build --config _config.yml && chmod 777 ./dist"
+      - name: Deploy Site
+        uses: milanmk/actions-file-deployer@master
         with:
-          node-version: 14.x
+          remote-protocol: "sftp"
-      - run: npm ci
+          remote-host: ${{ secrets.HOST }}
-      - run: npm run build --if-present
+          remote-port: ${{ secrets.PORT }}
-      - name: deploy site
+          remote-user: ${{ secrets.USERNAME }}
-        uses: appleboy/scp-action@v0.1.1
+          ssh-private-key: ${{ secrets.KEY }}
-        with:
+          sync: full
-          host: ${{ secrets.HOST }}
+          local-path: ./dist/
-          username: ${{ secrets.USERNAME }}
+          remote-path: /html/erickruizdechavez.com
-          password: ${{ secrets.PASSWORD }}
-          source: "_site"
-          target: "/home/${{ secrets.USERNAME }}/erch.co"
-          strip_components: 1

.gitignore

@@ -1,4 +1,5 @@
-_site
+dist
-.DS_Store
+.sass-cache
-.vscode
+.jekyll-cache
-node_modules
+.jekyll-metadata
+vendor

Dockerfile

@@ -0,0 +1,9 @@
+FROM ruby:3.3
+
+EXPOSE 4000
+WORKDIR /app
+
+COPY Gemfile .
+RUN gem install bundler
+RUN bundle install
+CMD [ "bundle", "exec", "jekyll", "serve", "--force_polling", "-H", "0.0.0.0", "-P", "4000" ]

Gemfile

@@ -0,0 +1,12 @@
+source "https://rubygems.org"
+
+gem "jekyll", "~> 4.3.4"
+
+# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
+# uncomment the line below. To upgrade, run `bundle update github-pages`.
+# gem "github-pages", group: :jekyll_plugins
+
+# If you have any plugins, put them here!
+group :jekyll_plugins do
+  gem "jekyll-feed", "~> 0.12"
+end

Gemfile.lock

@@ -0,0 +1,77 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
+    bigdecimal (3.1.8)
+    colorator (1.1.0)
+    concurrent-ruby (1.3.4)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    eventmachine (1.2.7)
+    ffi (1.17.0-x86_64-linux-gnu)
+    forwardable-extended (2.6.0)
+    google-protobuf (4.29.0-x86_64-linux)
+      bigdecimal
+      rake (>= 13)
+    http_parser.rb (0.8.0)
+    i18n (1.14.6)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.3.4)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (>= 2.0, < 4.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.3, >= 2.3.1)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (>= 0.3.6, < 0.5)
+      pathutil (~> 0.9)
+      rouge (>= 3.0, < 5.0)
+      safe_yaml (~> 1.0)
+      terminal-table (>= 1.8, < 4.0)
+      webrick (~> 1.7)
+    jekyll-feed (0.17.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-sass-converter (3.0.0)
+      sass-embedded (~> 1.54)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.5.1)
+      rexml (>= 3.3.9)
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.4)
+    listen (3.9.0)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (6.0.1)
+    rake (13.2.1)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.11.1)
+      ffi (~> 1.0)
+    rexml (3.3.9)
+    rouge (4.5.1)
+    safe_yaml (1.0.5)
+    sass-embedded (1.81.0-x86_64-linux-gnu)
+      google-protobuf (~> 4.28)
+    terminal-table (3.0.2)
+      unicode-display_width (>= 1.1.1, < 3)
+    unicode-display_width (2.6.0)
+    webrick (1.9.0)
+
+PLATFORMS
+  x86_64-linux-gnu
+
+DEPENDENCIES
+  jekyll (~> 4.3.4)
+  jekyll-feed (~> 0.12)
+
+BUNDLED WITH
+   2.5.23

_config.yml

@@ -0,0 +1,19 @@
+# Site settings
+title: Erick Ruiz de Chavez
+author: Erick Ruiz de Chavez
+url: https://erickruizdechavez.com
+
+social_links:
+  - title: 💼 LinkedIn
+    url: https://linkedin.com/in/erickruizdechavez
+  - title: 🐙 GitHub
+    url: https://github.com/eruizdechavez
+  - title: 🐘 Mastodon
+    url: https://erick.social/@erick
+  - title: 🦋 Bluesky
+    url: https://bsky.app/profile/erick.social
+
+# Build settings
+source: src
+destination: dist
+livereload: true

_content/_content.json

@@ -1,9 +0,0 @@
-{
-  "layout": "default",
-  "permalink": "/{{ title | slug }}/",
-  "eleventyExcludeFromCollections": true,
-  "site": {
-    "name": "Erick Ruiz de Chavez",
-    "tagline": "Web Developer, Podcaster, Pragmatist, Minimalist"
-  }
-}

_content/contact.njk

@@ -1,23 +0,0 @@
----
-title: Contact
----
-<h1>{{ title }}</h1>
-<script>
-  const accessTime = Date.now();
-  function formSubmit() {
-      document.querySelector('input[name="submit_time"]').value = parseInt((Date.now() - accessTime) / 1000, 10);
-  }
-</script>
-<form action="/_contact/contact.php" method="POST" class="flex flex-col" onsubmit="formSubmit()">
-  <input type="hidden" name="redirect" value="/contact/thanks.html">
-  <input type="hidden" name="subject" value="ERCH Contact Form">
-  <input type="hidden" name="submit_time" value="0">
-
-  <label for="name" class="mt-4">Your name:</label>
-  <input type="text" required id="name" name="name" class="p-2 dark:bg-gray-700 dark:text-gray-200 border-2 valid:border-green-600">
-  <label for="email" class="mt-4">Your email:</label>
-  <input type="email" required id="email" name="from" class="p-2 dark:bg-gray-700 dark:text-gray-200 border-2 valid:border-green-600">
-  <label for="message" class="mt-4">Your message:</label>
-  <textarea id="message" required name="message" class="h-48 p-2 dark:bg-gray-700 dark:text-gray-200 border-2 valid:border-green-600"></textarea>
-  <button class="mt-4 p-2 bg-gray-600 text-gray-200 dark:bg-gray-200 dark:text-gray-600 font-bold rounded-full">Submit</button>
-</form>

_content/index.md

@@ -1,13 +0,0 @@
----
-title: ""
----
-
-Howdy 👋🏻, I am Erick.
-
-I have experience in different technologies and programming languages like PHP, JavaScript, HTML, CSS, Less, Sass, MongoDB, MySQL, Web Servers, Web Services (REST, SOAP); to name some of them.
-
-I am a big fan of automation, particularly when it comes to daily chores, using different tools like scripts and some utilities and macros.
-
-If you want to know more about me, you can use my [contact form][contact] to send me an email.
-
-[contact]: /contact/

_content/thanks.md

@@ -1,6 +0,0 @@
----
-title: Thanks!
-permalink: contact/thanks.html
----
-
-Thank you for your email. I'll get back to you as soon as I can.

_includes/default.njk

@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html lang="{{ lang if lang else "en" }}">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>{{ title + " - " if title }}{{ site.name }}</title>
-    <link rel="stylesheet" href="/styles.css" />
-  </head>
-
-  <body class="bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
-    <header class="md:container md:mx-auto p-8 flex flex-col md:flex-row justify-between items-center">
-      <div>
-        <div class="text-2xl font-bold text-center md:text-left">{{ site.name }}</div>
-        <div class="text-lg font-semibold italic text-center md:text-left">
-          {{ site.tagline }}
-        </div>
-      </div>
-      <div class="flex flex-col md:flex-row text-center md:text-right pt-4 md:pt-0">
-        <a href="/" class="{{ "no-underline" if page.fileSlug == "" }} md:pr-4">Home</a>
-        <a href="/contact/" class="{{ "no-underline" if page.fileSlug == "contact" }}">Contact</a>
-      </div>
-    </header>
-
-    <main class="mx-auto p-4 md:pt-20 prose dark:prose-light">
-    {{ content | safe }}
-    </main>
-
-    <footer class="p-4 pt-20 pb-10 text-center text-xs italic text-gray-400 dark:text-gray-600">
-      This work by
-      <a xmlns:cc="http://creativecommons.org/ns#" href="/" property="cc:attributionName" rel="cc:attributionURL">
-        {{ site.name }}
-      </a>
-      is licensed under a
-      <a rel="license" ref="noopener,noreferrer" href="http://creativecommons.org/licenses/by/4.0/" target="_blank">
-        Creative Commons Attribution 4.0 International License
-      </a>.
-      <a rel="me" href="https://mstdn.mx/@erick" class="hidden">Mastodon</a>
-    </footer>
-  </body>
-</html>

_includes/styles.css

@@ -1,9 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  a {
-    @apply font-medium underline;
-  }
-}

compose.yml

@@ -0,0 +1,11 @@
+services:
+  jekyll:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    platform: linux/amd64
+    ports:
+      - 4000:4000
+      - 35729:35729
+    volumes:
+      - .:/app

package.json

@@ -1,13 +0,0 @@
-{
-  "private": true,
-  "scripts": {
-    "start": "eleventy --serve",
-    "build": "NODE_ENV=production eleventy"
-  },
-  "devDependencies": {
-    "@11ty/eleventy": "^0.11.1",
-    "@tailwindcss/typography": "^0.3.1",
-    "eleventy-plugin-tailwindcss": "^0.3.0"
-  },
-  "dependencies": {}
-}

src/_includes/footer.html

@@ -0,0 +1 @@
+<footer>&copy; {{ "now" | date: "%Y" }} {{ site.author }}</footer>

src/_includes/head.html

@@ -0,0 +1,6 @@
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="{{ "/assets/styles.css" | relative_url }}">
+</head>

src/_includes/header.html

@@ -0,0 +1,16 @@
+<header>
+  <img
+    src="{{ 'assets/Panda.jpg' | relative_url }}"
+    alt="Generated Image of an anthropomorphic Panda wearing a sweater and jeans, sitting on a couch, using a laptop."
+    style="width: 200px; height: 200px; border-radius: 100px"
+  />
+
+  {%- if site.social_links -%}
+  <nav>
+    {%- for my_page in site.social_links -%} {%- if my_page.title -%}
+    <a href="{{ my_page.url }}">{{ my_page.title | escape }}</a>
+    {%- endif -%} {%- endfor -%}
+  </nav>
+
+  {%- endif -%}
+</header>

src/_layouts/default.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+
+  {%- include head.html -%}
+
+  <body>
+    {%- include header.html -%}
+
+    <main>
+      {{ content }}
+    </main>
+
+    {%- include footer.html -%}
+  </body>
+</html>

src/_layouts/home.html

@@ -0,0 +1,11 @@
+---
+layout: default
+---
+
+<div class="home">
+    {%- if page.title -%}
+    <h1 class="page-heading">{{ page.title }}</h1>
+    {%- endif -%}
+
+    {{ content }}
+</div>

src/_sass/main.scss

@@ -0,0 +1,59 @@
+html {
+    box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: auto;
+}
+
+body {
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: 16px;
+    max-width: 800px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+header {
+    margin-top: 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+}
+
+nav {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 40px 0;
+
+    a {
+        display: block;
+        margin: 0 20px;
+        opacity: .8;
+    }
+}
+
+a {
+    text-decoration: none;
+}
+
+main {
+    margin: 20px;
+    opacity: .8;
+}
+
+footer {
+    margin-top: 40px;
+    opacity: .3;
+}

src/assets/styles.scss

@@ -0,0 +1,3 @@
+--- 
+--- 
+@use "main";

src/index.md

@@ -0,0 +1,15 @@
+---
+layout: home
+---
+
+Hi 👋, I’m Erick!
+
+I live in the U.S. 🇺🇸 with my wife, Lizzy, and our dogter, Masha. I’m fluent in both English and Spanish.
+
+I work as a Software Engineer 👨‍💻 at Bloomberg, where I’m passionate about software architecture, automation, and enhancing the developer experience.
+
+Giving back to the community is something I truly enjoy. I do this through mentorships 👨‍🏫, conducting mock interviews, and hosting knowledge-sharing sessions to pass on what I’ve learned throughout my career.
+
+In my free time, I love watching movies and TV shows 🍿, listening to audiobooks and music 🎧, playing video games 🎮 with Lizzy, and upgrading our home with smart automation 🏡.
+
+My pronouns are he/him/his.

tailwind.config.js

@@ -1,104 +0,0 @@
-const colors = require("tailwindcss/colors");
-const plugin = require("tailwindcss/plugin");
-
-// Info about Prose Dark (Light) Mode:
-// https://github.com/tailwindlabs/tailwindcss-typography/issues/69#issuecomment-752946920
-// tailwind.config.js
-
-// Add custom states (valid:)
-// https://github.com/tailwindlabs/tailwindcss/discussions/2465
-
-module.exports = {
-  purge: ["_includes/**/*.njk", "_content/**/*.njk", "_includes/**/*.css"],
-  darkMode: "media",
-  theme: {
-    extend: {
-      colors: {
-        transparent: "transparent",
-        current: "currentColor",
-        white: colors.white,
-        gray: colors.blueGray,
-      },
-      typography: (theme) => ({
-        light: {
-          css: [
-            {
-              color: theme("colors.gray.400"),
-              '[class~="lead"]': {
-                color: theme("colors.gray.300"),
-              },
-              a: {
-                color: theme("colors.gray.400"),
-              },
-              strong: {
-                color: theme("colors.gray.400"),
-              },
-              "ol > li::before": {
-                color: theme("colors.gray.400"),
-              },
-              "ul > li::before": {
-                backgroundColor: theme("colors.gray.600"),
-              },
-              hr: {
-                borderColor: theme("colors.gray.200"),
-              },
-              blockquote: {
-                color: theme("colors.gray.200"),
-                borderLeftColor: theme("colors.gray.600"),
-              },
-              h1: {
-                color: theme("colors.gray.400"),
-              },
-              h2: {
-                color: theme("colors.gray.400"),
-              },
-              h3: {
-                color: theme("colors.gray.400"),
-              },
-              h4: {
-                color: theme("colors.gray.400"),
-              },
-              "figure figcaption": {
-                color: theme("colors.gray.400"),
-              },
-              code: {
-                color: theme("colors.gray.400"),
-              },
-              "a code": {
-                color: theme("colors.gray.400"),
-              },
-              pre: {
-                color: theme("colors.gray.200"),
-                backgroundColor: theme("colors.gray.800"),
-              },
-              thead: {
-                color: theme("colors.gray.400"),
-                borderBottomColor: theme("colors.gray.400"),
-              },
-              "tbody tr": {
-                borderBottomColor: theme("colors.gray.600"),
-              },
-            },
-          ],
-        },
-      }),
-    },
-  },
-  variants: {
-    extend: {
-      typography: ["dark"],
-    },
-    borderColor: ({ after }) => after(["valid"]),
-    borderWidth: ({ after }) => after(["valid"]),
-  },
-  plugins: [
-    require("@tailwindcss/typography"),
-    plugin(function ({ addVariant, e }) {
-      addVariant("valid", ({ modifySelectors, separator }) => {
-        modifySelectors(({ className }) => {
-          return `.${e(`valid${separator}${className}`)}:valid`;
-        });
-      });
-    }),
-  ],
-};