tweaks, css changes
This commit is contained in:
@@ -37,5 +37,10 @@
|
|||||||
"company": "Hargray",
|
"company": "Hargray",
|
||||||
"featured": false,
|
"featured": false,
|
||||||
"time": "May 2014 - February 2016"
|
"time": "May 2014 - February 2016"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Delivery Driver",
|
||||||
|
"company": "Pizza Hut",
|
||||||
|
"featured": false
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
@@ -96,11 +96,9 @@ article h1, article h2, article h3, article h4, article h5, article h6 {
|
|||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
article h1 { font-size: 2.5em; }
|
article h1 { font-size: 2.5em; }
|
||||||
article h2 { font-size: 2em; }
|
article h2 { font-size: 1.5em; }
|
||||||
article h3 { font-size: 1.75em; }
|
article h3 { font-size: 1.0em; }
|
||||||
article h4 { font-size: 1.5em; }
|
article h4 { font-size: 0.5em; }
|
||||||
article h5 { font-size: 1.25em; }
|
|
||||||
article h6 { font-size: 1em; }
|
|
||||||
|
|
||||||
article a {
|
article a {
|
||||||
color: #60a5fa;
|
color: #60a5fa;
|
||||||
|
22
src/index.md
22
src/index.md
@@ -8,7 +8,7 @@ layout: "layout.njk"
|
|||||||
<p id="typewriter" class="text-xl md:text-2xl text-blue-400 font-medium mb-8 h-8"></p>
|
<p id="typewriter" class="text-xl md:text-2xl text-blue-400 font-medium mb-8 h-8"></p>
|
||||||
<p class="text-lg md:text-xl text-gray-400 max-w-3xl mx-auto mb-8">10+ years of experience in troubleshooting, designing, and deploying robust network solutions. Let's build a reliable and efficient network for your business.</p>
|
<p class="text-lg md:text-xl text-gray-400 max-w-3xl mx-auto mb-8">10+ years of experience in troubleshooting, designing, and deploying robust network solutions. Let's build a reliable and efficient network for your business.</p>
|
||||||
<div class="flex justify-center space-x-4">
|
<div class="flex justify-center space-x-4">
|
||||||
<a href="#contact" class="btngray">Get in Touch</a>
|
<a href="#contact" class="btngray">Contact Me</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<!-- About Me Section -->
|
<!-- About Me Section -->
|
||||||
@@ -84,14 +84,14 @@ layout: "layout.njk"
|
|||||||
<i class="fas fa-briefcase text-white text-xs"></i>
|
<i class="fas fa-briefcase text-white text-xs"></i>
|
||||||
</span>
|
</span>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h3 class="flex items-center mb-1 text-lg font-semibold text-white">
|
<h3 class="flex items-center text-lg font-semibold text-white">
|
||||||
{{ role.title }}
|
{{ role.title }}
|
||||||
{% if role.company %}
|
|
||||||
<span class="text-blue-400 text-sm font-medium ml-2">
|
|
||||||
@ {{ role.company }}
|
|
||||||
</span>
|
|
||||||
{% endif %}
|
|
||||||
</h3>
|
</h3>
|
||||||
|
{% if role.company %}
|
||||||
|
<p class="text-blue-400 text-md font-medium mb-2 ">
|
||||||
|
{{ role.company }}
|
||||||
|
</p>
|
||||||
|
{% endif %}
|
||||||
<time class="block mb-2 text-sm font-normal leading-none text-gray-500">{{ role.time }}</time>
|
<time class="block mb-2 text-sm font-normal leading-none text-gray-500">{{ role.time }}</time>
|
||||||
{% if role.description %}
|
{% if role.description %}
|
||||||
<p class="mb-4 text-base font-normal text-gray-400">{{ role.description }}</p>
|
<p class="mb-4 text-base font-normal text-gray-400">{{ role.description }}</p>
|
||||||
@@ -106,12 +106,16 @@ layout: "layout.njk"
|
|||||||
</span>
|
</span>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h3 class="text-lg font-semibold text-white">Previous Roles</h3>
|
<h3 class="text-lg font-semibold text-white">Previous Roles</h3>
|
||||||
<time class="block mb-2 text-sm font-normal leading-none text-gray-500">Since May 2014</time>
|
<time class="block mb-2 text-sm font-normal leading-none text-gray-500">Since 2014</time>
|
||||||
<ul class="list-disc list-inside text-gray-400">
|
<ul class="list-disc list-inside text-gray-400">
|
||||||
{% for role in roles %}
|
{% for role in roles %}
|
||||||
{% if not role.featured %}
|
{% if not role.featured %}
|
||||||
<li>{{ role.title }}</li>
|
{% if role.company %}
|
||||||
|
<li>
|
||||||
|
{{ role.title }} at <span class="text-blue-400 text-md font-medium">{{ role.company }}</span>
|
||||||
|
</li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
@@ -4,21 +4,21 @@ date: "2025-08-06"
|
|||||||
layout: "post.njk"
|
layout: "post.njk"
|
||||||
---
|
---
|
||||||
|
|
||||||
### Purpose
|
## Purpose
|
||||||
This post is moreso a feature showcase of what I can do with Markdown
|
This post is a feature showcase of what you can do with Eleventy
|
||||||
|
|
||||||
### What is Eleventy?
|
## What is Eleventy?
|
||||||
Eleventy (or 11ty) is a simpler static site generator. It's written in JavaScript and transforms a directory of templates of various types into a folder of plain HTML files. It's known for its flexibility, speed, and the fact that it doesn't ship any client-side JavaScript by default.
|
Eleventy (or 11ty) is a simpler static site generator. It's written in JavaScript and transforms a directory of templates of various types into a folder of plain HTML files. It's known for its flexibility, speed, and the fact that it doesn't ship any client-side JavaScript by default.
|
||||||
|
|
||||||
***
|
***
|
||||||
|
|
||||||
### Markdown Features
|
## Markdown Features
|
||||||
Eleventy has excellent support for Markdown. Here are some examples of what you can do.
|
Eleventy has excellent support for Markdown. Here are some examples of what you can do.
|
||||||
|
|
||||||
#### Basic Formatting
|
### Basic Formatting
|
||||||
You can use **bold text**, *italic text*, and even ***both***. You can also create links, like this one to the [official Eleventy website](https://www.11ty.dev/).
|
You can use **bold text**, *italic text*, and even ***both***. You can also create links, like this one to the [official Eleventy website](https://www.11ty.dev/).
|
||||||
|
|
||||||
#### Lists
|
### Lists
|
||||||
* Unordered list item 1
|
* Unordered list item 1
|
||||||
* Unordered list item 2
|
* Unordered list item 2
|
||||||
* Nested item
|
* Nested item
|
||||||
@@ -26,7 +26,7 @@ You can use **bold text**, *italic text*, and even ***both***. You can also crea
|
|||||||
1. Ordered list item 1
|
1. Ordered list item 1
|
||||||
2. Ordered list item 2
|
2. Ordered list item 2
|
||||||
|
|
||||||
#### Code Blocks
|
### Code Blocks
|
||||||
You can include inline code like `<div>` within a sentence. For larger code blocks, you can use fenced code blocks with syntax highlighting:
|
You can include inline code like `<div>` within a sentence. For larger code blocks, you can use fenced code blocks with syntax highlighting:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
@@ -37,22 +37,22 @@ function greet(name) {
|
|||||||
greet('World');
|
greet('World');
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Tables
|
### Tables
|
||||||
|
|
||||||
| Feature | Description |
|
| Feature | Description |
|
||||||
| --------------- | ----------------------------------------------------------- |
|
| --------------- | ----------------------------------------------------------- |
|
||||||
| Templating | Supports over 10 different templating languages. |
|
| Templating | Supports over 10 different templating languages. |
|
||||||
| Data Cascade | Merge data from different sources to use in your templates. |
|
| Data Cascade | Merge data from different sources to use in your templates. |
|
||||||
|
|
||||||
#### Blockquotes
|
### Blockquotes
|
||||||
> "The web should be a platform for creativity and expression. Eleventy helps make that a reality."
|
> "The web should be a platform for creativity and expression. Eleventy helps make that a reality."
|
||||||
|
|
||||||
#### Markdown Plugins
|
### Markdown Plugins
|
||||||
You can extend Markdown's functionality with plugins. For example, with `markdown-it-emoji`, you can write things like :tada: and get 🎉.
|
You can extend Markdown's functionality with plugins. For example, with `markdown-it-emoji`, you can write things like :tada: and get 🎉.
|
||||||
|
|
||||||
***
|
***
|
||||||
|
|
||||||
### Templating and Data
|
## Templating and Data
|
||||||
Eleventy can use data from JSON or JavaScript files. Imagine you have a `_data/users.json` file.
|
Eleventy can use data from JSON or JavaScript files. Imagine you have a `_data/users.json` file.
|
||||||
<pre><code class="language-json">[
|
<pre><code class="language-json">[
|
||||||
{ "name": "Alice", "role": "Developer" },
|
{ "name": "Alice", "role": "Developer" },
|
||||||
@@ -61,7 +61,7 @@ Eleventy can use data from JSON or JavaScript files. Imagine you have a `_data/u
|
|||||||
</code></pre>
|
</code></pre>
|
||||||
You could then use a templating language like Nunjucks within your Markdown file to loop through this data:
|
You could then use a templating language like Nunjucks within your Markdown file to loop through this data:
|
||||||
|
|
||||||
#### Team Members:
|
### Team Members:
|
||||||
<ul>
|
<ul>
|
||||||
{%- for user in users -%}
|
{%- for user in users -%}
|
||||||
<li><strong>{{ user.name }}</strong> - {{ user.role }}</li>
|
<li><strong>{{ user.name }}</strong> - {{ user.role }}</li>
|
||||||
@@ -70,7 +70,7 @@ You could then use a templating language like Nunjucks within your Markdown file
|
|||||||
|
|
||||||
***
|
***
|
||||||
|
|
||||||
### Shortcodes
|
## Shortcodes
|
||||||
Shortcodes are reusable snippets of content. You could create a shortcode for a callout box like this:
|
Shortcodes are reusable snippets of content. You could create a shortcode for a callout box like this:
|
||||||
|
|
||||||
{% callout "Heads up!" %}
|
{% callout "Heads up!" %}
|
||||||
@@ -79,7 +79,7 @@ This is a custom callout box created with a shortcode. It's a great way to creat
|
|||||||
|
|
||||||
***
|
***
|
||||||
|
|
||||||
### Layouts
|
## Layouts
|
||||||
Layouts allow you to wrap your content in a parent template. For example, this entire page could be a Markdown file that uses a main layout file to provide the header, footer, and overall page structure. This avoids repeating the same HTML in every file.
|
Layouts allow you to wrap your content in a parent template. For example, this entire page could be a Markdown file that uses a main layout file to provide the header, footer, and overall page structure. This avoids repeating the same HTML in every file.
|
||||||
|
|
||||||
In your Markdown file's front matter, you would specify the layout like this:
|
In your Markdown file's front matter, you would specify the layout like this:
|
||||||
|
Reference in New Issue
Block a user