Initial commit

.gitignore

@@ -0,0 +1 @@
+/_site

Gemfile

@@ -0,0 +1,8 @@
+source "https://rubygems.org"
+gem "jekyll"
+
+group :jekyll_plugins do
+    gem 'jekyll-sitemap'
+    gem 'jekyll-feed'
+    gem 'jekyll-seo-tag'
+end

Gemfile.lock

@@ -0,0 +1,79 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.8.5)
+      public_suffix (>= 2.0.2, < 6.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.2.2)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    eventmachine (1.2.7)
+    ffi (1.16.2)
+    forwardable-extended (2.6.0)
+    google-protobuf (3.24.3-x86_64-linux)
+    http_parser.rb (0.8.0)
+    i18n (1.14.1)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.3.2)
+      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-seo-tag (2.8.0)
+      jekyll (>= 3.8, < 5.0)
+    jekyll-sitemap (1.4.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.4.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.4)
+    listen (3.8.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 (5.0.3)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rexml (3.2.6)
+    rouge (4.1.3)
+    safe_yaml (1.0.5)
+    sass-embedded (1.68.0-x86_64-linux-gnu)
+      google-protobuf (~> 3.23)
+    terminal-table (3.0.2)
+      unicode-display_width (>= 1.1.1, < 3)
+    unicode-display_width (2.4.2)
+    webrick (1.8.1)
+
+PLATFORMS
+  x86_64-linux
+
+DEPENDENCIES
+  jekyll
+  jekyll-feed
+  jekyll-seo-tag
+  jekyll-sitemap
+
+BUNDLED WITH
+   2.4.20

_config.yml

@@ -0,0 +1,24 @@
+collections:
+  projects:
+    output: true
+
+defaults:
+  - scope:
+      path: ""
+      type: "projects"
+    values:
+      layout: "project"
+  - scope:
+      path: ""
+      type: "posts"
+    values:
+      layout: "post"
+  - scope:
+      path: ""
+    values:
+      layout: "default"
+
+plugins:
+  - jekyll-feed
+  - jekyll-sitemap
+  - jekyll-seo-tag

_data/navigation.yaml

@@ -0,0 +1,8 @@
+- name: Home
+  link: /
+- name: Projects
+  link: /projects.html
+- name: Blog
+  link: /blog.html
+- name: About
+  link: /about.html

_data/projects/project_01.yaml

@@ -0,0 +1,6 @@
+- title: Github Repository
+  link: https://example.com
+- title: Facebook Page
+  link: https://example.com
+- title: Arsenic Repository
+  link: https://example.com

_includes/footer.html

@@ -0,0 +1,8 @@
+<footer>
+    <p>
+        © 2023 - Emilio S. Chávez |
+        <a href="http://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-SA 4.0</a>
+    </p>
+
+</footer>
+

_includes/header.html

@@ -0,0 +1,3 @@
+<header>
+    <h1>{{ page.title }}</h1>
+</header>

_includes/navigation.html

@@ -0,0 +1,31 @@
+<nav>
+    <a class="nav_title" href="/">
+        <img
+            src="/assets/favicon.png"
+            alt="Website Icon"
+        />
+
+        <div class="ws_title">
+            <p>AMI</p>
+            <p>.sc</p>
+        </div>
+    </a>
+
+    <div id="drawer">
+        <a href="javascript:void(0)" onclick="closeDrawer()">&times;</a>
+        {% for item in site.data.navigation %}
+            <a href="{{ item.link }}">
+                {{ item.name }}
+            </a>
+        {% endfor %}
+    </div>
+
+    <div class="nav_links">
+        <img onclick="openDrawer()" src="/assets/menu.png" alt="Menu"/>
+        {% for item in site.data.navigation %}
+            <a href="{{ item.link }}" {% if page.url == item.link %}class="active"{% endif %}>
+                {{ item.name }}
+            </a>
+        {% endfor %}
+  </div>
+</nav>

_layouts/about.html

@@ -0,0 +1,10 @@
+---
+layout: default
+---
+
+<div class="grid about_grid">
+    {% include navigation.html %}
+    {% include header.html %}
+
+    {{ content }}
+</div>

_layouts/blog.html

@@ -0,0 +1,10 @@
+---
+layout: default
+---
+
+<div class="grid blog_grid">
+    {% include navigation.html %}
+    {% include header.html %}
+
+    {{ content }}
+</div>

_layouts/default.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+
+<html lang="eng-US">
+
+    <head>
+        <meta charset="utf-8"/>
+        <title>{{ page.title }}</title>
+        <link rel="stylesheet" href="/assets/css/styles.css"/>
+        <link rel="icon" href="/assets/favicon.png"/>
+        <script src="/assets/js/drawer.js"></script>
+        {% feed_meta %}
+        {% seo %}
+    </head>
+
+    <body>
+        {{ content }}
+
+        {% include footer.html %}
+    </body>
+
+</html>

_layouts/home.html

@@ -0,0 +1,10 @@
+---
+layout: default
+---
+
+<div class="grid home_grid">
+    {% include navigation.html %}
+    {% include header.html %}
+
+    {{ content }}
+</div>

_layouts/post.html

@@ -0,0 +1,13 @@
+---
+layout: default
+---
+
+<div class="grid post_grid">
+    {% include navigation.html %}
+
+    <img src="/assets/post_images/{{ page.image }}" alt="{{ page.title }}"/>
+    <h1>{{ page.title }}</h1>
+    <h2>{{ page.date | date_to_string }}</h2>
+
+    {{ content }}
+</div>

_layouts/project.html

@@ -0,0 +1,34 @@
+---
+layout: default
+---
+
+<div class="grid project_grid">
+    {% include navigation.html %}
+
+    <header>
+        <img src="/assets/project_icons/{{ page.name }}.png"/>
+        <div>
+            <h1>{{ page.title }}</h1>
+            <h2>{{ page.type | capitalize }} Project</h2>
+        </div>
+    </header>
+
+    <main>
+        <h3>Description</h3>
+        {{ content }}
+    </main>
+
+    <aside>
+        <h3>Project Status</h3>
+        <p>{{ page.status }}</p>
+
+        <h3>Links</h3>
+
+        {% for item in site.data.projects[page.name] %}
+        <a href="{{ item.link }}">
+            {{ item.title }}
+        </a>
+    {% endfor %}
+
+    </aside>
+</div>

_layouts/projects.html

@@ -0,0 +1,10 @@
+---
+layout: default
+---
+
+<div class="grid projects_grid">
+    {% include navigation.html %}
+    {% include header.html %}
+
+    {{ content }}
+</div>

_posts/2023-10-04-hello-world.md

@@ -0,0 +1,7 @@
+---
+image: italy_bridge.jpg
+---
+
+Hello there! This is my first blog in my new website. I'm still not sure what to write in this blog, but hopefully I'll learn throughout the way.
+
+The cover image of this blog is a picture I took from my visit to Italy in Srping 2023.

_projects/project_01.md

@@ -0,0 +1,8 @@
+---
+title: "Project 01"
+name: project_01
+type: research
+status: "In Progress"
+---
+
+Hello World

_projects/project_02.md

@@ -0,0 +1,7 @@
+---
+title: "Project 02"
+name: project_02
+type: research
+---
+
+Hello World

_projects/project_03.md

@@ -0,0 +1,7 @@
+---
+title: "Project 03"
+name: project_03
+type: research
+---
+
+Hello World

_projects/project_04.md

@@ -0,0 +1,7 @@
+---
+title: "Project 04"
+name: project_04
+type: research
+---
+
+Hello World

_sass/about/about_grid.scss

@@ -0,0 +1,37 @@
+/*** About Page Grid ***/
+
+/* Small Screen Layout */
+@media (max-width: 700px) {
+    .about_grid > header {
+        grid-column: col-start / span 12;
+        grid-row: 2;
+    }
+
+    .about_grid > aside {
+        grid-column: col-start / span 12;
+        grid-row: 3;
+    }
+
+    .about_grid > main {
+        grid-column: col-start / span 12;
+        grid-row: 4;
+    }
+}
+
+/* Large Screen Layout */
+@media (min-width: 700px) {
+    .about_grid > header {
+        grid-column: col-start / span 12;
+        grid-row: 2;
+    }
+
+    .about_grid > aside {
+        grid-column: col-start / span 4;
+        grid-row: 3;
+    }
+
+    .about_grid > main {
+        grid-column: col-start 5 / span 8;
+        grid-row: 3;
+    }
+}

_sass/about/about_main.scss

@@ -0,0 +1,21 @@
+/*** Home Page Main Content ***/
+
+.about_grid > main {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+}
+
+.about_grid > main > h2 {
+    margin: 0;
+    color: #FFFFFF;
+    font-family: "Fira Code SemiBold";
+}
+
+.about_grid > main > p {
+    margin: 0;
+    color: #FFFFFF;
+    font-family: "IBM Plex Sans Regular";
+    text-align: justify;
+}

_sass/about/about_sidebar.scss

@@ -0,0 +1,36 @@
+/*** Home Sidebar ***/
+
+.about_grid > aside {
+    padding: 1rem;
+    justify-content: center;
+
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    border-radius: 0.5rem;
+    background-color: #202020;
+    box-shadow: 0.1rem 0.1rem 0.25rem #000000;
+}
+
+.about_grid > aside > h3 {
+    margin: 0;
+    color: #FFFFFF;
+    font-family: "Fira Code Semibold";
+    font-size: 1.1rem;
+    text-align: center;
+
+    /* Gradient Colored Text */
+    background: -webkit-linear-gradient(145deg, #2F80ED, #56CCF2);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+    filter: drop-shadow(0.1rem 0.1rem 0.2rem #000000);
+}
+
+.about_grid > aside > ul > li {
+    color: #FFFFFF;
+    font-family: "IBM Plex Sans Regular";
+}

_sass/blog/blog_grid.scss

@@ -0,0 +1,25 @@
+/*** Blog Page Grid ***/
+
+/* Small Screen Layout */
+@media (max-width: 700px) {
+    .blog_grid > header {
+        grid-column: col-start / span 12;
+        grid-row: 2;
+    }
+
+    .blog_grid > .blog_box {
+        grid-column: span 12;
+    }
+}
+
+/* Large Screen Layout */
+@media (min-width: 700px) {
+    .blog_grid > header {
+        grid-column: col-start / span 12;
+        grid-row: 2;
+    }
+
+    .blog_grid > .blog_box {
+        grid-column: span 4;
+    }
+}

_sass/blog/post_box.scss

@@ -0,0 +1,65 @@
+/*** Blog Post Box ***/
+
+/* Container Properties */
+.blog_box {
+    padding: 1rem;
+    text-align: left;
+
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    border-radius: 0.5rem;
+    background-color: #202020;
+    box-shadow: 0.1rem 0.1rem 0.25rem #000000;
+
+    text-decoration: none;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 0.15rem;
+}
+
+/* Hover Properties */
+.blog_box:hover {
+    border-color: #2F80ED;
+    border-style: solid;
+    border-width: 0.15rem;
+}
+
+/* Image Properties */
+.blog_box > img {
+    width: 100%;
+    border-radius: 0.5rem;
+    box-shadow: 0.1rem 0.1rem 0.25rem #000000;
+}
+
+/* Header Properties */
+.blog_box > h2 {
+    margin: 0;
+    color: #FFFFFF;
+    font-family: "Fira Code Semibold";
+    font-size: 1.2rem;
+
+    /* Gradient Colored Text */
+    background: -webkit-linear-gradient(145deg, #2F80ED, #56CCF2);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+    filter: drop-shadow(0.1rem 0.1rem 0.2rem #000000);
+}
+
+/* Date Properties */
+.blog_box > h3 {
+    margin: 0;
+    color: #b6b6b6;
+    font-family: "Fira Code Semibold";
+    font-size: 0.8rem;
+}
+
+/* Paragraph Properties */
+.blog_box > p {
+    margin: 0;
+    color: #FFFFFF;
+    font-family: "IBM Plex Sans Regular";
+}

_sass/general/drawer.scss

@@ -0,0 +1,34 @@
+/*** Drawer Styles ***/
+
+#drawer {
+    height: 0;
+    width: 100%;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #000000;
+    transition: 0.5s;
+    overflow-x: hidden;
+
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+    justify-content: center;
+}
+
+#drawer > a {
+    color: #FFFFFF;
+    font-family: "Fira Code Regular";
+    list-style: none;
+    text-decoration: none;
+    padding: 0.5rem;
+    font-size: 1.5rem;
+}
+
+#drawer > a:hover {
+    font-family: "Fira Code Bold";
+    background-color: #3b3b3b;
+    border-radius: 0.5rem;
+}

_sass/general/footer.scss

@@ -0,0 +1,20 @@
+/*** Footer ***/
+
+/* Container Properties */
+footer {
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+/* Text Properties */
+footer > p {
+    color: #a3a3a3;
+    font-family: "Fira Code Regular";
+    font-size: 0.75rem;
+}
+
+/* Link Properties */
+footer > p > a {
+    color: #a3a3a3;
+}

_sass/general/global.scss

@@ -0,0 +1,10 @@
+/*** Global Styles ***/
+
+body {
+    background-color: #000000;
+}
+
+/* Disable default top and bottom margins for paragraphs. */
+p {
+    margin: 0;
+}

_sass/general/grid.scss

@@ -0,0 +1,47 @@
+/*** General Grid Configuration ***/
+
+/* Container Properties */
+.grid {
+    margin: 1em auto;
+    padding: 1rem;
+    max-width: 900px;
+    background-color: #0F0F0F;
+
+    border-radius: 10px;
+
+    display: grid;
+    grid-template-columns: repeat(12, [col-start] 1fr);
+    gap: 1.5rem;
+}
+
+/* Small Screen Layout */
+@media (max-width: 700px) {
+    html {
+        font-size: 16px;
+    }
+
+    nav {
+        grid-column: col-start / span 12;
+        grid-row: 1;
+    }
+
+    .nav_links > a {
+        display: none;
+    }
+}
+
+/* Large Screen Layout */
+@media (min-width: 700px) {
+    html {
+        font-size: 17px;
+    }
+
+    nav {
+        grid-column: col-start / span 12;
+        grid-row: 1;
+    }
+
+    .nav_links > img {
+        display: none;
+    }
+}

_sass/general/nav.scss

@@ -0,0 +1,116 @@
+/*** Navigation Bar ***/
+
+/* Container Properties */
+
+nav {
+    display: flex;
+    background-color: #272727;
+    box-shadow: 0.1rem 0.1rem 0.25rem #000000;
+
+    border-radius: 0.5rem;
+    align-items: center;
+}
+
+/* Title Container */
+.nav_title {
+    /* Parent Flexbox Properties */
+    flex: 40%;
+
+    /* Box Properties */
+    margin: 0.5rem;
+    margin-left: 1rem;
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    justify-content: left;
+
+    /* Link Properties */
+    text-decoration: none;
+}
+
+/* Website Icon */
+.nav_title > img {
+    width: 2rem;
+    height: 2rem;
+}
+
+/* Website Title */
+.ws_title {
+    display: flex;
+    align-items: baseline;
+    font-family: "Fira Code Bold";
+
+    /* Text Shadow */
+    filter: drop-shadow(0.2rem 0.2rem 0.25rem #000000);
+}
+
+/* AMI */
+.ws_title > p:nth-of-type(1) {
+    font-size: 1.5rem;
+
+    /* Gradient Colored Text */
+    background: -webkit-linear-gradient(45deg, #3CD3AD, #1488CC);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+/* .sc */
+.ws_title > p:nth-of-type(2) {
+    font-size: 1.2rem;
+    color: #FFFFFF;
+}
+
+/* Link Container */
+.nav_links {
+    /* Parent Flexbox Properties */
+    flex: 60%;
+
+    /* Box Properties */
+    margin: 0.5rem;
+    display: flex;
+    gap: 0.5rem;
+    justify-content: right;
+    align-items: center;
+}
+
+/* Link Properties */
+.nav_links > a {
+    /* Box Properties */
+    padding: 0.4rem 1.25rem 0.4rem 1.25rem;
+    border-radius: 0.25rem;
+
+    /* Text Properties */
+    color: #FFFFFF;
+    text-decoration: none;
+    text-align: center;
+    font-family: "Fira Code Semibold";
+}
+
+/* Link Hover Configuration */
+.nav_links > a:hover {
+    background-image: linear-gradient(145deg, #2F80ED, #56CCF2);
+}
+
+/* Link On-Click Configuration */
+.nav_links > a:active {
+    box-shadow: 2px 2px 4px #5a5a5a;
+}
+
+/* Active Link Properties */
+.nav_links > a.active {
+    background-color: #021B79;
+    background-image: linear-gradient(145deg, #021B79, #0575E6);
+}
+
+/* Active Link Hover Configuration */
+.nav_links > a.active:hover {
+    background-image: linear-gradient(145deg, #2F80ED, #56CCF2);
+}
+
+/* Hamburguer Menu Icon */
+.nav_links > img {
+    width: 2rem;
+    height: 2rem;
+    margin-right: 1rem;
+}

_sass/general/page_header.scss

@@ -0,0 +1,18 @@
+/*** Page Header ***/
+
+/* Container Properties */
+header {
+    box-shadow: 0.1rem 0.1rem 0.25rem #000000;
+    border-radius: 0.5rem;
+
+    background-color: #DE6161;
+    background-image: linear-gradient(145deg, #DE6161, #2657EB);
+}
+
+/* Header Properties */
+header > h1 {
+    color: #FFFFFF;
+    text-align: center;
+    font-family: "Fira Code Semibold";
+    text-shadow: 0.2rem 0.2rem 0.25rem #000000;
+}

_sass/home/home_grid.scss

@@ -0,0 +1,37 @@
+/*** Home Page Grid ***/
+
+/* Small Screen Layout */
+@media (max-width: 700px) {
+    .home_grid > header {
+        grid-column: col-start / span 12;
+        grid-row: 2;
+    }
+
+    .home_grid > aside {
+        grid-column: col-start / span 12;
+        grid-row: 3;
+    }
+
+    .home_grid > main {
+        grid-column: col-start / span 12;
+        grid-row: 4;
+    }
+}
+
+/* Large Screen Layout */
+@media (min-width: 700px) {
+    .home_grid > header {
+        grid-column: col-start / span 12;
+        grid-row: 2;
+    }
+
+    .home_grid > aside {
+        grid-column: col-start / span 4;
+        grid-row: 3;
+    }
+
+    .home_grid > main {
+        grid-column: col-start 5 / span 8;
+        grid-row: 3;
+    }
+}

_sass/home/home_main.scss

@@ -0,0 +1,21 @@
+/*** Home Page Main Content ***/
+
+.home_grid > main {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+}
+
+.home_grid > main > h2 {
+    margin: 0;
+    color: #FFFFFF;
+    font-family: "Fira Code SemiBold";
+}
+
+.home_grid > main > p {
+    margin: 0;
+    color: #FFFFFF;
+    font-family: "IBM Plex Sans Regular";
+    text-align: justify;
+}

_sass/home/home_sidebar.scss

@@ -0,0 +1,35 @@
+/*** Home Sidebar ***/
+
+.home_grid > aside {
+    padding: 1rem;
+    justify-content: center;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    border-radius: 0.5rem;
+    background-color: #202020;
+    box-shadow: 0.1rem 0.1rem 0.25rem #000000;
+}
+
+.home_grid > aside > h3 {
+    margin: 0;
+    color: #FFFFFF;
+    font-family: "Fira Code Semibold";
+    font-size: 1.1rem;
+    text-align: center;
+
+    /* Gradient Colored Text */
+    background: -webkit-linear-gradient(145deg, #2F80ED, #56CCF2);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+    filter: drop-shadow(0.1rem 0.1rem 0.2rem #000000);
+}
+
+.home_grid > aside > ul > li {
+    color: #FFFFFF;
+    font-family: "IBM Plex Sans Regular";
+}

_sass/post/post.scss

@@ -0,0 +1,55 @@
+/*** || Post Page ***/
+
+/* Container Properties */
+.post {
+    margin: 1rem;
+    padding: 1rem;
+    text-align: justify;
+
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+
+    border-radius: 0.5rem;
+    background-color: #202020;
+    box-shadow: 0.1rem 0.1rem 0.25rem #000000;
+
+    // text-decoration: none;
+    // border-color: transparent;
+    // border-style: solid;
+    // border-width: 0.15rem;
+}
+
+.post > img {
+    border-radius: 0.5rem;
+    box-shadow: 0.1rem 0.1rem 0.25rem #000000;
+}
+
+.post > h1 {
+    margin: 0;
+    color: #FFFFFF;
+    font-family: "Fira Code Semibold";
+
+    /* Gradient Colored Text */
+    background: -webkit-linear-gradient(145deg, #2F80ED, #56CCF2);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+    filter: drop-shadow(0.1rem 0.1rem 0.2rem #000000);
+}
+
+/* Date Properties */
+.post > h2 {
+    margin: 0;
+    color: #b6b6b6;
+    font-family: "Fira Code Semibold";
+    font-size: 1.2rem;
+}
+
+/* Paragraph Properties */
+.post > p {
+    margin: 0;
+    color: #FFFFFF;
+    font-family: "IBM Plex Sans Regular";
+}

_sass/post/post_content.scss

@@ -0,0 +1,7 @@
+/*** Post Content ***/
+.post_grid > p {
+    margin: 0;
+    color: #FFFFFF;
+    font-family: "IBM Plex Sans Regular";
+    text-align: justify;
+}

_sass/post/post_grid.scss

@@ -0,0 +1,45 @@
+/*** Post Page Grid ***/
+
+/* Small Screen Layout */
+@media (max-width: 700px) {
+    .post_grid > img {
+        grid-column: col-start / span 12;
+        grid-row: 2;
+    }
+
+    .post_grid > h1 {
+        grid-column: col-start / span 12;
+        grid-row: 3;
+    }
+
+    .post_grid > h2 {
+        grid-column: col-start / span 12;
+        grid-row: 4;
+    }
+
+    .post_grid > p {
+        grid-column: col-start / span 12;
+    }
+}
+
+/* Large Screen Layout */
+@media (min-width: 700px) {
+    .post_grid > img {
+        grid-column: col-start / span 12;
+        grid-row: 2;
+    }
+
+    .post_grid > h1 {
+        grid-column: col-start / span 12;
+        grid-row: 3;
+    }
+
+    .post_grid > h2 {
+        grid-column: col-start / span 12;
+        grid-row: 4;
+    }
+
+    .post_grid > p {
+        grid-column: col-start / span 12;
+    }
+}

_sass/post/post_header.scss

@@ -0,0 +1,22 @@
+/*** Post Header ***/
+
+.post_grid > h1 {
+    margin: 0;
+    color: #FFFFFF;
+    font-family: "Fira Code Semibold";
+
+    /* Gradient Colored Text */
+    background: -webkit-linear-gradient(145deg, #2F80ED, #56CCF2);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+    filter: drop-shadow(0.1rem 0.1rem 0.2rem #000000);
+}
+
+.post_grid > h2 {
+    margin: 0;
+    color: #b6b6b6;
+    font-family: "Fira Code Semibold";
+    font-size: 1.2rem;
+}

_sass/post/post_image.scss

@@ -0,0 +1,7 @@
+/*** Post Image ***/
+
+.post_grid > img {
+    border-radius: 0.5rem;
+    box-shadow: 0.1rem 0.1rem 0.25rem #000000;
+    width: 100%;
+}

_sass/project/project_description.scss

@@ -0,0 +1,24 @@
+/*** Project Description ***/
+
+.project_grid > main {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    padding: 1rem;
+    background-color: #272727;
+    box-shadow: 0.1rem 0.1rem 0.25rem #000000;
+    border-radius: 0.5rem;
+}
+
+.project_grid > main > h3 {
+    margin: 0;
+    color: #FFFFFF;
+    font-family: "IBM Plex Sans Bold";
+}
+
+.project_grid > main > p {
+    margin: 0;
+    color: #FFFFFF;
+    font-family: "IBM Plex Sans";
+}

_sass/project/project_grid.scss

@@ -0,0 +1,35 @@
+/*** Project Page Grid ***/
+
+@media (max-width: 700px) {
+    .project_grid > header {
+        grid-column: col-start / span 12;
+        grid-row: 2;
+    }
+
+    .project_grid > main {
+        grid-column: col-start / span 12;
+        grid-row: 4;
+    }
+
+    .project_grid > aside {
+        grid-column: col-start / span 12;
+        grid-row: 3;
+    }
+}
+
+@media (min-width: 700px) {
+    .project_grid > header {
+        grid-column: col-start / span 8;
+        grid-row: 2;
+    }
+
+    .project_grid > main {
+        grid-column: col-start / span 8;
+        grid-row: 3;
+    }
+
+    .project_grid > aside {
+        grid-column: col-start 9 / span 4;
+        grid-row: 2 / span 2;
+    }
+}

_sass/project/project_header.scss

@@ -0,0 +1,43 @@
+/*** Project Page Header ***/
+
+.project_grid > header {
+    display: flex;
+    flex-direction: row;
+
+    align-items: center;
+
+    box-shadow: 0.1rem 0.1rem 0.25rem #000000;
+    border-radius: 0.5rem;
+
+    background-color: #2C3E50;
+    background-image: linear-gradient(145deg, #2C3E50, #4CA1AF);
+}
+
+.project_grid > header > img {
+    margin: 1rem;
+    width: 5rem;
+    height: 5rem;
+}
+
+.project_grid > header > div:first-of-type {
+    margin: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.project_grid > header > div:first-of-type > h1 {
+    margin: 0;
+    color: #FFFFFF;
+    font-family: "Fira Code Semibold";
+    text-shadow: 0.2rem 0.2rem 0.25rem #000000;
+    font-size: 1.6rem;
+}
+
+.project_grid > header > div:first-of-type > h2 {
+    margin: 0;
+    color: #FFFFFF;
+    font-family: "Fira Code Regular";
+    text-shadow: 0.2rem 0.2rem 0.25rem #000000;
+    font-size: 1.0rem;
+}

_sass/project/project_sidebar.scss

@@ -0,0 +1,45 @@
+/*** Project Sidebar ***/
+
+.project_grid > aside {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    padding: 1rem;
+    background-color: #272727;
+    box-shadow: 0.1rem 0.1rem 0.25rem #000000;
+    border-radius: 0.5rem;
+}
+
+.project_grid > aside > h3 {
+    margin: 0;
+    color: #FFFFFF;
+    font-family: "IBM Plex Sans Bold";
+    font-size: 1rem;
+}
+
+.project_grid > aside > p {
+    margin: 0;
+    color: #FFFFFF;
+    font-family: "IBM Plex Sans";
+    font-size: 0.9rem;
+}
+
+.project_grid > aside > a {
+    padding: 0.5rem;
+    text-decoration: none;
+    margin: 0;
+    color: #FFFFFF;
+    font-family: "IBM Plex Sans";
+    font-size: 0.9rem;
+}
+
+.project_grid > aside > a:hover {
+    background-color: #525252;
+    border-radius: 0.5rem;
+}
+
+.project_grid > aside > a:active {
+    background-color: #4777a3;
+    border-radius: 0.5rem;
+}

_sass/projects/projects_box.scss

@@ -0,0 +1,62 @@
+/*** || Project Box ***/
+
+/* Container Properties */
+.projects_box {
+    padding: 1rem;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    border-radius: 0.5rem;
+    background-color: #202020;
+    box-shadow: 0.1rem 0.1rem 0.25rem #000000;
+}
+
+/* Header Properties */
+.projects_box > h2 {
+    margin: 0;
+    color: #FFFFFF;
+    font-family: "Fira Code Semibold";
+    font-size: 1.1rem;
+    text-align: center;
+
+    /* Gradient Colored Text */
+    background: -webkit-linear-gradient(145deg, #2F80ED, #56CCF2);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+    filter: drop-shadow(0.1rem 0.1rem 0.2rem #000000);
+}
+
+/* Description Properties */
+.projects_box > p {
+    color: #b6b6b6;
+    text-align: center;
+    font-family: "IBM Plex Sans Regular";
+}
+
+/* Project List Properties */
+.projects_box > ul {
+    list-style-type: none;
+    align-items: center;
+}
+
+.projects_box > ul > li > a {
+    display: flex;
+    gap: 1rem;
+    color: #FFFFFF;
+    font-family: "IBM Plex Sans Regular";
+    list-style: none;
+    text-decoration: none;
+}
+
+.projects_box > ul > li > a:hover {
+    font-family: "IBM Plex Sans Bold";
+}
+
+.projects_box > ul > li > a > img {
+    width: 20px;
+    height: 20px;
+}

_sass/projects/projects_grid.scss

@@ -0,0 +1,57 @@
+/*** Projects Page Grid ***/
+
+/* Small Screen Layout */
+@media (max-width: 700px) {
+    .projects_grid > header {
+        grid-column: col-start / span 12;
+        grid-row: 2;
+    }
+
+    .projects_grid > .projects_box:nth-of-type(1) {
+        grid-column: col-start / span 12;
+        grid-row: 3;
+    }
+
+    .projects_grid > .projects_box:nth-of-type(2) {
+        grid-column: col-start / span 12;
+        grid-row: 4;
+    }
+
+    .projects_grid > .projects_box:nth-of-type(3) {
+        grid-column: col-start / span 12;
+        grid-row: 5;
+    }
+
+    .projects_grid > .projects_box:nth-of-type(4) {
+        grid-column: col-start / span 12;
+        grid-row: 6;
+    }
+}
+
+/* Large Screen Layout */
+@media (min-width: 700px) {
+    .projects_grid > header {
+        grid-column: col-start / span 12;
+        grid-row: 2;
+    }
+
+    .projects_grid > .projects_box:nth-of-type(1) {
+        grid-column: col-start / span 6;
+        grid-row: 3;
+    }
+
+    .projects_grid > .projects_box:nth-of-type(2) {
+        grid-column: col-start 7 / span 6;
+        grid-row: 3;
+    }
+
+    .projects_grid > .projects_box:nth-of-type(3) {
+        grid-column: col-start / span 6;
+        grid-row: 4;
+    }
+
+    .projects_grid > .projects_box:nth-of-type(4) {
+        grid-column: col-start 7 / span 6;
+        grid-row: 4;
+    }
+}

about.html

@@ -0,0 +1,21 @@
+---
+title: "Ami :: About"
+layout: about
+---
+
+<aside>
+    <h3>Contact Information</h3>
+    <ul>
+        <li>hi@mail.ami.sc</li>
+        <li>+1 (870) 902 0363</li>
+        <li>PO Box 1547</li>
+    </ul>
+</aside>
+
+<main>
+    <h2>About Me</h2>
+
+    <p>
+        Under construction...
+    </p>
+</main>

assets/css/styles.scss

@@ -0,0 +1,66 @@
+---
+---
+
+/*** Fonts :: Import Statements ***/
+@font-face {
+    font-family: "Fira Code Regular";
+    src: url("../fonts/FiraCode.ttf");
+}
+
+@font-face {
+    font-family: "Fira Code Semibold";
+    src: url("../fonts/FiraCode-SemiBold.ttf");
+}
+
+@font-face {
+    font-family: "Fira Code Bold";
+    src: url("../fonts/FiraCode-Bold.ttf");
+}
+
+@font-face {
+    font-family: "IBM Plex Sans Regular";
+    src: url("../fonts/IBMPlexSans.otf");
+}
+
+@font-face {
+    font-family: "IBM Plex Sans Bold";
+    src: url("../fonts/IBMPlexSans-Bold.otf");
+}
+
+/*** General :: Styles ***/
+@import "general/global";
+@import "general/nav";
+@import "general/page_header";
+@import "general/grid";
+@import "general/footer";
+@import "general/drawer.scss";
+
+/*** Home Page :: Styles ***/
+@import "home/home_grid";
+@import "home/home_sidebar";
+@import "home/home_main";
+
+/*** Projects Page :: Styles ***/
+@import "projects/projects_grid";
+@import "projects/projects_box";
+
+/*** Blog Page :: Styles ***/
+@import "blog/blog_grid";
+@import "blog/post_box";
+
+/*** About Page :: Styles ***/
+@import "about/about_grid";
+@import "about/about_sidebar";
+@import "about/about_main";
+
+/*** Project Page :: Styles ***/
+@import "project/project_grid";
+@import "project/project_header";
+@import "project/project_description";
+@import "project/project_sidebar";
+
+/*** Post Page :: Styles ***/
+@import "post/post_grid.scss";
+@import "post/post_image.scss";
+@import "post/post_header.scss";
+@import "post/post_content.scss";

assets/js/drawer.js

@@ -0,0 +1,9 @@
+function openDrawer()
+{
+    document.getElementById("drawer").style.height = "100%";
+}
+
+function closeDrawer()
+{
+    document.getElementById("drawer").style.height = "0";
+}

blog.html

@@ -0,0 +1,13 @@
+---
+title: "Ami :: Blog"
+layout: blog
+---
+
+{% for post in site.posts %}
+    <a class="blog_box" href="{{ post.url }}">
+        <img src="assets/post_images/{{ post.image }}" alt="Post Image"/>
+        <h2>{{ post.title }}</h2>
+        <h3>{{ post.date | date_to_string }}</h3>
+        {{ post.excerpt }}
+    </a>
+{% endfor %}

index.html

@@ -0,0 +1,23 @@
+---
+title: "Ami :: Home"
+layout: home
+---
+
+<aside>
+    <h3>Contact Information</h3>
+    <ul>
+        <li>hi@mail.ami.sc</li>
+        <li>+1 (870) 902 0363</li>
+        <li>PO Box 1547</li>
+    </ul>
+</aside>
+
+<main>
+    <h2>Welcome!</h2>
+
+    <p>
+        Welcome to <code>ami.sc</code>, my personal website. My name is Emilio
+        Soriano. I'm a student at Arkansas State University. In my free time, I
+        like to jog, ride my bike, or just enjoy a good time with my friends.
+    </p>
+</main>

projects.html

@@ -0,0 +1,72 @@
+---
+title: "Ami :: Projects"
+layout: projects
+---
+
+<div class="projects_box">
+    <h2>Research Projects</h2>
+    <p>Projects developed as part of a research project</p>
+
+    <ul>
+        {% assign research_projs = site.projects | where: "type", "research" %}
+        {% for project in research_projs %}
+            <li>
+                <a href="{{ project.url }}">
+                    <img src="assets/project_icons/{{ project.name }}.png"/>
+                    {{ project.title }}
+                </a>
+            </li>
+        {% endfor %}
+    </ul>
+</div>
+
+<div class="projects_box">
+    <h2>Released Projects</h2>
+    <p>Various projects of public interest</p>
+
+    <ul>
+        {% assign released_projs = site.projects | where: "type", "released" %}
+        {% for project in released_projs %}
+            <li>
+                <a href="{{ project.url }}">
+                    <img src="assets/project_icons/{{ project.name }}.png"/>
+                    {{ project.title }}
+                </a>
+            </li>
+        {% endfor %}
+    </ul>
+</div>
+
+<div class="projects_box">
+    <h2>School Projects</h2>
+    <p>Projects developed as part of school assignments</p>
+
+    <ul>
+        {% assign school_projs = site.projects | where: "type", "school" %}
+        {% for project in school_projs %}
+            <li>
+                <a href="{{ project.url }}">
+                    <img src="assets/project_icons/{{ project.name }}.png"/>
+                    {{ project.title }}
+                </a>
+            </li>
+        {% endfor %}
+    </ul>
+</div>
+
+<div class="projects_box">
+    <h2>Personal Projects</h2>
+    <p>Personal-interest projects</p>
+
+    <ul>
+        {% assign personal_projs = site.projects | where: "type", "personal" %}
+        {% for project in personal_projs %}
+            <li>
+                <a href="{{ project.url }}">
+                    <img src="assets/project_icons/{{ project.name }}.png"/>
+                    {{ project.title }}
+                </a>
+            </li>
+        {% endfor %}
+    </ul>
+</div>