Replace kramdown with commonmark and add sttyles

Gemfile

@@ -5,6 +5,5 @@ gem "jekyll", "~> 4.3.4"
 group :jekyll_plugins do
   gem "jekyll-feed", "~> 0.12"
   gem "jekyll-compose", "~> 0.12.0"
+  gem "jekyll-commonmark"
 end
-
-gem "kramdown-syntax-coderay", "~> 1.0"

Gemfile.lock

@@ -4,8 +4,8 @@ GEM
     addressable (2.8.7)
       public_suffix (>= 2.0.2, < 7.0)
     bigdecimal (3.1.8)
-    coderay (1.1.3)
     colorator (1.1.0)
+    commonmarker (0.23.11)
     concurrent-ruby (1.3.4)
     em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
@@ -35,6 +35,8 @@ GEM
       safe_yaml (~> 1.0)
       terminal-table (>= 1.8, < 4.0)
       webrick (~> 1.7)
+    jekyll-commonmark (1.4.0)
+      commonmarker (~> 0.22)
     jekyll-compose (0.12.0)
       jekyll (>= 3.7, < 5.0)
     jekyll-feed (0.17.0)
@@ -47,9 +49,6 @@ GEM
       rexml (>= 3.3.9)
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
-    kramdown-syntax-coderay (1.0.1)
-      coderay (~> 1.1)
-      kramdown (~> 2.0)
     liquid (4.0.4)
     listen (3.9.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
@@ -77,9 +76,9 @@ PLATFORMS
 
 DEPENDENCIES
   jekyll (~> 4.3.4)
+  jekyll-commonmark
   jekyll-compose (~> 0.12.0)
   jekyll-feed (~> 0.12)
-  kramdown-syntax-coderay (~> 1.0)
 
 BUNDLED WITH
    2.6.1

_config.yml

@@ -24,5 +24,4 @@ jekyll_compose:
     posts:
       layout: article
 
-kramdown:
+markdown: CommonMark
-  syntax_highlighter: coderay

_sass/_pygments_default.scss

@@ -0,0 +1,61 @@
+.highlight .hll { background-color: #ffffcc }
+.highlight .c { color: #408080; font-style: italic } /* Comment */
+.highlight .err { border: 1px solid #FF0000 } /* Error */
+.highlight .k { color: #008000; font-weight: bold } /* Keyword */
+.highlight .o { color: #666666 } /* Operator */
+.highlight .cm { color: #408080; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #BC7A00 } /* Comment.Preproc */
+.highlight .c1 { color: #408080; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #408080; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #A00000 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #FF0000 } /* Generic.Error */
+.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: #00A000 } /* Generic.Inserted */
+.highlight .go { color: #808080 } /* Generic.Output */
+.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #0040D0 } /* Generic.Traceback */
+.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #008000 } /* Keyword.Pseudo */
+.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #B00040 } /* Keyword.Type */
+.highlight .m { color: #666666 } /* Literal.Number */
+.highlight .s { color: #BA2121 } /* Literal.String */
+.highlight .na { color: #7D9029 } /* Name.Attribute */
+.highlight .nb { color: #008000 } /* Name.Builtin */
+.highlight .nc { color: #0000FF; font-weight: bold } /* Name.Class */
+.highlight .no { color: #880000 } /* Name.Constant */
+.highlight .nd { color: #AA22FF } /* Name.Decorator */
+.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
+.highlight .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #0000FF } /* Name.Function */
+.highlight .nl { color: #A0A000 } /* Name.Label */
+.highlight .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
+.highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
+.highlight .nv { color: #19177C } /* Name.Variable */
+.highlight .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #666666 } /* Literal.Number.Float */
+.highlight .mh { color: #666666 } /* Literal.Number.Hex */
+.highlight .mi { color: #666666 } /* Literal.Number.Integer */
+.highlight .mo { color: #666666 } /* Literal.Number.Oct */
+.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
+.highlight .sc { color: #BA2121 } /* Literal.String.Char */
+.highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
+.highlight .s2 { color: #BA2121 } /* Literal.String.Double */
+.highlight .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
+.highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */
+.highlight .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
+.highlight .sx { color: #008000 } /* Literal.String.Other */
+.highlight .sr { color: #BB6688 } /* Literal.String.Regex */
+.highlight .s1 { color: #BA2121 } /* Literal.String.Single */
+.highlight .ss { color: #19177C } /* Literal.String.Symbol */
+.highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #19177C } /* Name.Variable.Class */
+.highlight .vg { color: #19177C } /* Name.Variable.Global */
+.highlight .vi { color: #19177C } /* Name.Variable.Instance */
+.highlight .il { color: #666666 } /* Literal.Number.Integer.Long */

_sass/main.scss

@@ -1,3 +1,5 @@
+@use "pygments_default";
+
 html {
     box-sizing: border-box;
 }
@@ -15,8 +17,7 @@ html, body {
 }
 
 body {
-    font-family: Helvetica, Arial, sans-serif;
+    font-family: sans-serif;
-    font-size: 16px;
     max-width: 800px;
     display: flex;
     flex-direction: column;
@@ -24,7 +25,7 @@ body {
 }
 
 h1 {
-    font-size: 1.5rem;
+    font-size: 1.3rem;
 }
 
 h2 {

index.md

@@ -4,12 +4,12 @@ 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 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.
+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.
+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 🏡.
+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.