mobile updates
This commit is contained in:
Joey Kimsey
@ -46,12 +46,12 @@
|
||||
|
||||
<!-- Centered Logo (Now inside normal document flow) -->
|
||||
<a href="/" class="align-items-center text-white text-decoration-none d-flex d-md-none">
|
||||
<img src="{ROOT_URL}{LOGO}" width="40" height="32" alt="{SITENAME} Logo" class="bi">
|
||||
<img src="{ROOT_URL}images/logo.png" width="40" height="32" alt="{SITENAME} Logo" class="bi">
|
||||
</a>
|
||||
|
||||
<!-- Logo (Normal Position for Large Screens) -->
|
||||
<a href="/" class="align-items-center text-white text-decoration-none d-none d-md-flex">
|
||||
<img src="{ROOT_URL}{LOGO}" width="40" height="32" alt="{SITENAME} Logo" class="bi">
|
||||
<img src="{ROOT_URL}{LOGO}" height="48" alt="{SITENAME} Logo" class="bi">
|
||||
</a>
|
||||
|
||||
<div class="navbar-expand-md flex-grow-1">
|
||||
|
||||
@ -1,28 +1,30 @@
|
||||
<div class="card context-main context-main-bg col-8 offset-2 my-4 p-3">
|
||||
<h2 class="text-center">Portfolio</h2>
|
||||
<hr>
|
||||
{LOOP}
|
||||
<div class="card context-main context-third-bg py-2 my-2">
|
||||
<div class="row g-0">
|
||||
<div class="col-md-4 ps-2 d-flex justify-content-center align-items-center">
|
||||
<a href="{url}">
|
||||
<img class="img-fluid rounded" src="{image}" alt="{title} preview">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">{title}</h4>
|
||||
<p class="card-text">
|
||||
{description}
|
||||
</p>
|
||||
<div class="col-12 col-md-10 col-lg-8 offset-lg-2 offset-md-1 offset-0 mb-3 mb-lg-5 mt-2 mt-lg-4">
|
||||
<div class="p-2 p-lg-4 mb-lg-4 m-2 rounded-3 context-main context-main-bg">
|
||||
<h2 class="text-center">Portfolio</h2>
|
||||
<hr>
|
||||
{LOOP}
|
||||
<div class="card context-main context-third-bg py-2 my-2">
|
||||
<div class="row g-0 p-lg-2">
|
||||
<div class="col-md-4 ps-2 d-flex justify-content-center align-items-center">
|
||||
<a href="{url}">
|
||||
<img class="img-fluid rounded" src="{image}" alt="{title} preview">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">{title}</h4>
|
||||
<p class="card-text">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<div class="card context-main context-main-bg">
|
||||
<p>None Found</p>
|
||||
</div>
|
||||
{/ALT}
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<div class="card context-main context-main-bg">
|
||||
<p>None Found</p>
|
||||
</div>
|
||||
{/ALT}
|
||||
</div>
|
||||
</div>
|
||||
@ -1,10 +1,10 @@
|
||||
<div class="my-3 row" role="group" aria-label="Resume Downloads">
|
||||
<!-- Adjusted the col-3 div -->
|
||||
<div class="col-3 d-flex align-items-center justify-content-end">
|
||||
<div class="col-4 col-md-3 d-flex align-items-center justify-content-end">
|
||||
<h3>Download</h3>
|
||||
</div>
|
||||
<!-- Button group -->
|
||||
<div class="btn-group btn-group-justified col-6" role="group" aria-label="Resume Downloads">
|
||||
<div class="btn-group btn-group-justified col-8 col-md-6" role="group" aria-label="Resume Downloads">
|
||||
<a href="/downloads/resume/docx" class="btn btn-primary" role="button" target="_blank" download>Word</a>
|
||||
<a href="/downloads/resume/pdf" class="btn btn-primary" role="button" target="_blank" download>PDF</a>
|
||||
<a href="/downloads/resume/md" class="btn btn-primary" role="button" target="_blank" download>Markdown</a>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<div class="mb-3 row" role="group" aria-label="Resume View Type">
|
||||
<div class="btn-group btn-group-justified col-6 offset-3" role="group" aria-label="Resume View Type">
|
||||
<div class="btn-group btn-group-justified col-6 offset-lg-3" role="group" aria-label="Resume View Type">
|
||||
<a href="?view=tiimeline" class="btn btn-primary" role="button">Timeline</a>
|
||||
<a href="?" class="btn btn-primary" role="button">Standard</a>
|
||||
</div>
|
||||
<div class="form-check form-switch col-3 d-flex align-items-center">
|
||||
<div class="form-check form-switch col-6 col-lg-3 d-flex align-items-center justify-content-center justify-content-lg-start">
|
||||
<input class="form-check-input" type="checkbox" role="switch" name="hidebs" id="hidebs" value="true">
|
||||
<label class="form-check-label ps-2" for="hidebs">Hide the Fluff</label>
|
||||
</div>
|
||||
|
||||
@ -1,34 +1,36 @@
|
||||
<div class="card context-main context-main-bg col-8 offset-2 my-4 p-3">
|
||||
<h2 class="text-center">Resume</h2>
|
||||
<hr>
|
||||
{RESUME_NAV}
|
||||
{LOOP}
|
||||
<div class="card context-main context-third-bg py-2 my-2 rounded">
|
||||
<div class="row g-0 px-3">
|
||||
<div class="col-md-4 d-flex justify-content-center align-items-center">
|
||||
<img class="img-fluid rounded" src="{image}" alt="{name}">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">{name}</h4>
|
||||
<p class="card-text">
|
||||
<b>{position}</b> from <i>{prettyStart}</i> to <i>{prettyEnd}</i>
|
||||
</p>
|
||||
<div class="details card-text">
|
||||
{details}
|
||||
</div>
|
||||
<div class="details_nobs card-text d-none">
|
||||
{details_nobs}
|
||||
<div class="col-12 col-md-10 col-lg-8 offset-lg-2 offset-md-1 offset-0 mb-3 mb-lg-5 mt-2 mt-lg-4">
|
||||
<div class="p-2 p-lg-4 mb-lg-4 m-2 rounded-3 context-main context-main-bg">
|
||||
<h2 class="text-center">Resume</h2>
|
||||
<hr>
|
||||
{RESUME_NAV}
|
||||
{LOOP}
|
||||
<div class="card context-main context-third-bg py-2 my-2 rounded">
|
||||
<div class="row g-0 px-3">
|
||||
<div class="col-md-4 d-flex justify-content-center align-items-center p-2">
|
||||
<img class="img-fluid" src="{image}" alt="{name}">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">{name}</h4>
|
||||
<p class="card-text">
|
||||
<b>{position}</b> from <i>{prettyStart}</i> to <i>{prettyEnd}</i>
|
||||
</p>
|
||||
<div class="details card-text">
|
||||
{details}
|
||||
</div>
|
||||
<div class="details_nobs card-text d-none">
|
||||
{details_nobs}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<div class="resume-position">
|
||||
<p>None Found</p>
|
||||
</div>
|
||||
{/ALT}
|
||||
{RESUME_DOWNLOADS}
|
||||
</div>
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<div class="resume-position">
|
||||
<p>None Found</p>
|
||||
</div>
|
||||
{/ALT}
|
||||
{RESUME_DOWNLOADS}
|
||||
</div>
|
||||
@ -1,33 +1,35 @@
|
||||
<div class="card context-main context-main-bg col-8 offset-2 my-4 p-3">
|
||||
<h2 class="text-center">Resume</h2>
|
||||
<hr>
|
||||
{RESUME_NAV}
|
||||
<div class="details_nobs card-text d-none text-center col-6 offset-3">
|
||||
<p>
|
||||
Honestly, I really wanted to do something fun and interactive here.
|
||||
Unfortunately I didn't have a specific idea in mind and this was abandoned in favor of spending my time somewhere with a bigger impact.
|
||||
</p>
|
||||
</div>
|
||||
{LOOP}
|
||||
<div class="resume-timeline">
|
||||
<div class="timeline-container {side}">
|
||||
<div class="timeline-content context-third-bg">
|
||||
<h3 class="resume-position-title">{name}</h3>
|
||||
<p><b>{position}</b> from <i>{prettyStart}</i> to <i>{prettyEnd}</i></p>
|
||||
<div class="details card-text">
|
||||
{details}
|
||||
</div>
|
||||
<div class="details_nobs card-text d-none">
|
||||
{details_nobs}
|
||||
<div class="col-12 col-md-10 col-lg-8 offset-lg-2 offset-md-1 offset-0 mb-3 mb-lg-5 mt-2 mt-lg-4">
|
||||
<div class="p-2 p-lg-4 mb-lg-4 m-2 rounded-3 context-main context-main-bg">
|
||||
<h2 class="text-center">Resume</h2>
|
||||
<hr>
|
||||
{RESUME_NAV}
|
||||
<div class="details_nobs card-text d-none text-center col-6 offset-3">
|
||||
<p>
|
||||
Honestly, I really wanted to do something fun and interactive here.
|
||||
Unfortunately I didn't have a specific idea in mind and this was abandoned in favor of spending my time somewhere with a bigger impact.
|
||||
</p>
|
||||
</div>
|
||||
{LOOP}
|
||||
<div class="resume-timeline">
|
||||
<div class="timeline-container {side}">
|
||||
<div class="timeline-content context-third-bg">
|
||||
<h3 class="resume-position-title">{name}</h3>
|
||||
<p><b>{position}</b> from <i>{prettyStart}</i> to <i>{prettyEnd}</i></p>
|
||||
<div class="details card-text">
|
||||
{details}
|
||||
</div>
|
||||
<div class="details_nobs card-text d-none">
|
||||
{details_nobs}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<div class="resume-timeline">
|
||||
<p>None Found</p>
|
||||
</div>
|
||||
{/ALT}
|
||||
{RESUME_DOWNLOADS}
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<div class="resume-timeline">
|
||||
<p>None Found</p>
|
||||
</div>
|
||||
{/ALT}
|
||||
{RESUME_DOWNLOADS}
|
||||
</div>
|
||||
</div>
|
||||
@ -17,6 +17,7 @@ use TheTempusProject\Bedrock\Functions\Check;
|
||||
use TheTempusProject\Canary\Bin\Canary as Debug;
|
||||
use TheTempusProject\Classes\DatabaseModel;
|
||||
use TheTempusProject\Plugins\Wip as Plugin;
|
||||
use DateTime;
|
||||
|
||||
class Projects extends DatabaseModel {
|
||||
public $tableName = 'projects';
|
||||
@ -25,6 +26,7 @@ class Projects extends DatabaseModel {
|
||||
[ 'description', 'text', '' ],
|
||||
[ 'progress', 'int', '3' ],
|
||||
[ 'startDate', 'varchar', '32' ],
|
||||
[ 'endDate', 'varchar', '32' ],
|
||||
];
|
||||
public $plugin;
|
||||
|
||||
@ -73,7 +75,20 @@ class Projects extends DatabaseModel {
|
||||
$instance = $postArray;
|
||||
$end = true;
|
||||
}
|
||||
$instance->prettyStart = $instance->startDate;
|
||||
if ( ! empty( $instance->startDate ) ) {
|
||||
$startDate = DateTime::createFromFormat( 'Y-m', $instance->startDate );
|
||||
$startDateFormatted = $startDate->format('F Y');
|
||||
$instance->prettyStart = $startDateFormatted;
|
||||
} else {
|
||||
$instance->prettyStart = 'TBD';
|
||||
}
|
||||
if ( ! empty( $instance->endDate ) ) {
|
||||
$endDate = DateTime::createFromFormat( 'Y-m', $instance->endDate );
|
||||
$endDateFormatted = $endDate->format('F Y');
|
||||
$instance->prettyEnd = $endDateFormatted;
|
||||
} else {
|
||||
$instance->prettyEnd = 'TBD';
|
||||
}
|
||||
$out[] = $instance;
|
||||
if ( !empty( $end ) ) {
|
||||
$out = $out[0];
|
||||
@ -82,4 +97,4 @@ class Projects extends DatabaseModel {
|
||||
}
|
||||
return $out;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,24 +1,29 @@
|
||||
<div class="col-8 mx-auto p-3 rounded shadow-sm my-4 context-main-bg">
|
||||
<h1 class="text-center">Work in Progress</h1>
|
||||
<hr>
|
||||
{LOOP}
|
||||
<div class="wip-project">
|
||||
<h3 class="wip-project-title atb-green">{title}</h3>
|
||||
<small class=""><b>Started: </b><i>{prettyStart}</i></small>
|
||||
<div class="progress mt-2">
|
||||
<div class="progress-bar atb-green-bg" role="progressbar" style="width: {progress}%" aria-valuenow="{progress}" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="m-2 m-lg-4">
|
||||
<div class="col-12 mx-5 col-sm-10 col-lg-8 mx-auto p-4 rounded shadow-sm context-main-bg">
|
||||
<h1 class="text-center">Work in Progress</h1>
|
||||
<hr>
|
||||
{LOOP}
|
||||
<div class="wip-project">
|
||||
<h3 class="wip-project-title text-center text-md-start text-primary">{title}</h3>
|
||||
<div class="d-flex justify-content-between">
|
||||
<small><span class="text-muted">Started: </span><i class="">{prettyStart}</i></small>
|
||||
<small><span class="text-muted">Finished: </span><i class="">{prettyEnd}</i></small>
|
||||
</div>
|
||||
<div class="progress mt-2">
|
||||
<div class="progress-bar" role="progressbar" style="width: {progress}%" aria-valuenow="{progress}" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="well my-3">
|
||||
{description}
|
||||
</div>
|
||||
</div>
|
||||
<div class="well my-3">
|
||||
{description}
|
||||
<div class="col-6 offset-3 my-2">
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 offset-3 my-2">
|
||||
<hr>
|
||||
</div>
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<div class="wip-project">
|
||||
<p>None Found</p>
|
||||
</div>
|
||||
{/ALT}
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<div class="wip-project">
|
||||
<p>None Found</p>
|
||||
</div>
|
||||
{/ALT}
|
||||
</div>
|
||||
</div>
|
||||
@ -30,8 +30,7 @@
|
||||
<!-- Side Navigation -->
|
||||
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;">
|
||||
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
|
||||
<img src="{ROOT_URL}{LOGO}" class="bi me-2" width="40" height="32" role="img" aria-label="{SITENAME} Logo">
|
||||
<span class="fs-4">{SITENAME}</span>
|
||||
<img src="{ROOT_URL}{LOGO}" class="bi me-2" height="48" role="img" aria-label="{SITENAME} Logo">
|
||||
</a>
|
||||
<hr>
|
||||
{ADMIN}
|
||||
|
||||
@ -46,12 +46,12 @@
|
||||
|
||||
<!-- Centered Logo (Now inside normal document flow) -->
|
||||
<a href="/" class="align-items-center text-white text-decoration-none d-flex d-md-none">
|
||||
<img src="{ROOT_URL}{LOGO}" width="40" height="32" alt="{SITENAME} Logo" class="bi">
|
||||
<img src="{ROOT_URL}images/logo.png" width="40" height="32" alt="{SITENAME} Logo" class="bi">
|
||||
</a>
|
||||
|
||||
<!-- Logo (Normal Position for Large Screens) -->
|
||||
<a href="/" class="align-items-center text-white text-decoration-none d-none d-md-flex">
|
||||
<img src="{ROOT_URL}{LOGO}" width="40" height="32" alt="{SITENAME} Logo" class="bi">
|
||||
<img src="{ROOT_URL}{LOGO}" height="48" alt="{SITENAME} Logo" class="bi">
|
||||
</a>
|
||||
|
||||
<div class="navbar-expand-md flex-grow-1">
|
||||
|
||||
@ -1,42 +1,44 @@
|
||||
<div class="container context-main-bg p-3 my-4">
|
||||
<div class="row d-flex justify-content-center align-items-center m-5">
|
||||
<div class="col-md-4">
|
||||
<img src="/images/voting.jpg" class="img-fluid center-block" alt="Description of image">
|
||||
<div class="m-2 m-lg-4">
|
||||
<div class="col-12 mx-5 col-sm-10 col-lg-8 mx-auto p-4 rounded shadow-sm context-main-bg">
|
||||
<div class="row d-flex justify-content-center align-items-center mb-2 mb-lg-3">
|
||||
<div class="col-4">
|
||||
<img src="/images/voting.jpg" class="img-fluid center-block" alt="Description of image">
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<img src="/images/on-call.jpg" class="img-fluid center-block" alt="Description of image">
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<img src="/images/cleaned-up.jpg" class="img-fluid center-block" alt="Description of image">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<img src="/images/on-call.jpg" class="img-fluid center-block" alt="Description of image">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<img src="/images/cleaned-up.jpg" class="img-fluid center-block" alt="Description of image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row d-flex justify-content-center align-items-center m-5">
|
||||
<h2 class="text-center mb-4">About Me</h2>
|
||||
<div class="col-md-offset-3 col-md-6">
|
||||
<hr>
|
||||
</div>
|
||||
<div class="col-md-offset-2 col-md-8" style="padding-top: 20px;">
|
||||
<p>Generally speaking, I feel uncomfortable talking to anyone about myself.
|
||||
It may seem a bit hollow to say in the about-me section of a website bearing my own name, but its true.</p>
|
||||
|
||||
<p>My name is... Joey Kimsey and I am a 34 year old web-developer. I think it would be fair to say I am a full-stack developer though I find myself working on and gravitating towards backend development more.
|
||||
Over the past decade I have moved from professionally designing popup advertising for major car manufacturers, to working for the CDC in a major time of crisis,
|
||||
to harassing AI to spread information to entrepreneurs in other languages. I love this technology and I love what we can do with it.</p>
|
||||
|
||||
<p>Things always get a bit awkward when I tell people I am 33 but I've been doing this for 20 years, but its true. When I was still in single-digits, we got our first PC, with windows 98.
|
||||
I won't lie to you about remembering the specs, but I can tell you that it changed the world for me. I believe we had internet access through our phone provider before, but eventually we wound up on AOL and the world expanded in front of me.
|
||||
There were websites for everything and it was all new. They were still talking about the internet like it was something that was going to happen, but I was already living through it, it was already changing the world around me.</p>
|
||||
|
||||
<p>As many children do, I became curious and wanted to know how the internet worked. I found out I could have my onw little spot on the internet with lycos or angelfire.
|
||||
I learned about html, images, pearl scripts, and I even made webpages for everything I liked: runescape, skateboarding, vampires. Eventually I really wanted to make something so my friends could send me messages on the website.
|
||||
At the time, pearl was pretty complicated, not many people used it, and it was heavily limited on free hosting. I needed to find a different way, so I started searching and eventually stumbled into php.</p>
|
||||
|
||||
<p>Once I found php, I fell in love with programming. Not only was the web new and fresh, I knew how it worked. I had a magical superpower that no one else did.
|
||||
Over the years I built dozens of projects including working for many local business-owners from a young age.
|
||||
I eventually went to college for computer science, where I learned that java is a terrible language and that I was more interested in building than learning how to build, so I dropped out.
|
||||
After working several jobs over the following years, I was given the opportunity by a close friend to move out of my small town.
|
||||
When I moved to Atlanta, I finally found an employer willing to give me a shot and my resume picks up from there.</p>
|
||||
|
||||
<div class="row d-flex justify-content-center align-items-center">
|
||||
<h2 class="text-center mb-4">About Me</h2>
|
||||
<div class="col-md-offset-3 col-md-6">
|
||||
<hr>
|
||||
</div>
|
||||
<div class="col-md-offset-2 col-md-8" style="padding-top: 20px;">
|
||||
<p>Generally speaking, I feel uncomfortable talking to anyone about myself.
|
||||
It may seem a bit hollow to say in the about-me section of a website bearing my own name, but its true.</p>
|
||||
|
||||
<p>My name is... Joey Kimsey and I am a 34 year old web-developer. I think it would be fair to say I am a full-stack developer though I find myself working on and gravitating towards backend development more.
|
||||
Over the past decade I have moved from professionally designing popup advertising for major car manufacturers, to working for the CDC in a major time of crisis,
|
||||
to harassing AI to spread information to entrepreneurs in other languages. I love this technology and I love what we can do with it.</p>
|
||||
|
||||
<p>Things always get a bit awkward when I tell people I am 33 but I've been doing this for 20 years, but its true. When I was still in single-digits, we got our first PC, with windows 98.
|
||||
I won't lie to you about remembering the specs, but I can tell you that it changed the world for me. I believe we had internet access through our phone provider before, but eventually we wound up on AOL and the world expanded in front of me.
|
||||
There were websites for everything and it was all new. They were still talking about the internet like it was something that was going to happen, but I was already living through it, it was already changing the world around me.</p>
|
||||
|
||||
<p>As many children do, I became curious and wanted to know how the internet worked. I found out I could have my onw little spot on the internet with lycos or angelfire.
|
||||
I learned about html, images, pearl scripts, and I even made webpages for everything I liked: runescape, skateboarding, vampires. Eventually I really wanted to make something so my friends could send me messages on the website.
|
||||
At the time, pearl was pretty complicated, not many people used it, and it was heavily limited on free hosting. I needed to find a different way, so I started searching and eventually stumbled into php.</p>
|
||||
|
||||
<p>Once I found php, I fell in love with programming. Not only was the web new and fresh, I knew how it worked. I had a magical superpower that no one else did.
|
||||
Over the years I built dozens of projects including working for many local business-owners from a young age.
|
||||
I eventually went to college for computer science, where I learned that java is a terrible language and that I was more interested in building than learning how to build, so I dropped out.
|
||||
After working several jobs over the following years, I was given the opportunity by a close friend to move out of my small town.
|
||||
When I moved to Atlanta, I finally found an employer willing to give me a shot and my resume picks up from there.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,29 +1,22 @@
|
||||
<div class="container mt-auto">
|
||||
<footer class="pt-4">
|
||||
<!-- Footer Toggle Button (Visible on Small Screens) -->
|
||||
<div class="text-center border-top context-main-border">
|
||||
<div class="container mt-auto border-top context-main-border">
|
||||
<footer class="pt-2">
|
||||
<div class="d-lg-block collapse" id="footerMenu">
|
||||
<div class="d-flex justify-content-between align-items-center py-2 my-2">
|
||||
<a href="/" class="text-decoration-none lh-1">
|
||||
<img src="/images/logo.png" class="bi me-2" width="40" height="32" alt="Joey Kimsey Logo">
|
||||
</a>
|
||||
<div class="material-switch">
|
||||
<input name="dark-mode-toggle" type="checkbox" id="dark-mode-toggle" class="form-check-input">
|
||||
<label for="dark-mode-toggle" class="label-default"></label>
|
||||
</div>
|
||||
{SOCIAL}
|
||||
</div>
|
||||
{COPY}
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button class="d-md-none my-3 btn btn-lg context-main context-main-border" type="button" data-bs-toggle="collapse" data-bs-target="#footerMenu" aria-controls="footerMenu" aria-expanded="false" aria-label="Toggle footer navigation">
|
||||
<i class="fa fa-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Collapsible Footer Content -->
|
||||
<div class="collapse d-md-block my-4" id="footerMenu">
|
||||
<div class="row">
|
||||
{FOOTER_LEFT}
|
||||
{FOOTER_CENTER}
|
||||
{FOOTER_RIGHT}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Copy & Social (Always Visible) -->
|
||||
<div class="d-flex flex-column flex-md-row justify-content-md-between py-3 border-top context-main-border">
|
||||
{COPY}
|
||||
</div>
|
||||
<div class="material-switch">
|
||||
<input name="dark-mode-toggle" type="checkbox" id="dark-mode-toggle" class="form-check-input">
|
||||
<label for="dark-mode-toggle" class="label-default"></label>
|
||||
</div>
|
||||
{SOCIAL}
|
||||
</footer>
|
||||
</div>
|
||||
@ -1,3 +1,3 @@
|
||||
<div class="d-flex justify-content-center justify-content-md-start text-center text-md-start">
|
||||
<div class="d-flex justify-content-center mb-2 text-center text-md-start">
|
||||
<span>© 2025 {SITENAME}, Powered by <a href="https://thetempusproject.com" class="text-decoration-none">The Tempus Project</a></span>
|
||||
</div>
|
||||
@ -1,24 +1,23 @@
|
||||
<div class="d-flex justify-content-center justify-content-md-end mt-3 mt-md-0">
|
||||
<ul class="list-unstyled d-flex mb-0">
|
||||
<li class="ms-3">
|
||||
<a class="context-main" href="{ROOT_URL}fb">
|
||||
<span class="fa-brands fa-fw fa-facebook"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ms-3">
|
||||
<a class="context-main" href="{ROOT_URL}twitter">
|
||||
<span class="fa-brands fa-fw fa-twitter"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ms-3">
|
||||
<a class="context-main" href="{ROOT_URL}in">
|
||||
<span class="fa-brands fa-fw fa-linkedin"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ms-3">
|
||||
<a class="context-main" href="{ROOT_URL}git">
|
||||
<span class="fa-brands fa-fw fa-github"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="list-unstyled d-flex mb-0">
|
||||
<li class="ms-3">
|
||||
<a class="context-main" href="{ROOT_URL}fb">
|
||||
<span class="fa-brands fa-fw fa-facebook"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ms-3">
|
||||
<a class="context-main" href="{ROOT_URL}twitter">
|
||||
<span class="fa-brands fa-fw fa-twitter"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ms-3">
|
||||
<a class="context-main" href="{ROOT_URL}in">
|
||||
<span class="fa-brands fa-fw fa-linkedin"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ms-3">
|
||||
<a class="context-main" href="{ROOT_URL}git">
|
||||
<span class="fa-brands fa-fw fa-github"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@ -1,59 +1,61 @@
|
||||
<div class="container context-main-bg p-3 my-4">
|
||||
<!-- Hero Section -->
|
||||
<div class="text-center py-5 rounded context-third-bg">
|
||||
<h1 class="fw-bold">Let's Build Something Amazing Together</h1>
|
||||
<p class="lead text-muted">I'm a full-stack developer specializing in backend development. Whether you're looking for freelance support, a long-term contractor, or a full-time developer, I'm here to help!</p>
|
||||
<a href="#hire-me" class="btn btn-primary btn-lg mt-3">Get in Touch</a>
|
||||
</div>
|
||||
<div class="col-12 col-md-10 col-lg-8 offset-lg-2 offset-md-1 offset-0 mb-3 mb-lg-5 mt-2 mt-lg-4">
|
||||
<div class="p-2 p-lg-4 mb-lg-4 m-2 rounded-3 context-main context-main-bg">
|
||||
<!-- Hero Section -->
|
||||
<div class="text-center py-5 rounded context-third-bg">
|
||||
<h1 class="fw-bold">Let's Build Something Amazing Together</h1>
|
||||
<p class="lead text-muted">I'm a full-stack developer specializing in backend development. Whether you're looking for freelance support, a long-term contractor, or a full-time developer, I'm here to help!</p>
|
||||
<a href="#hire-me" class="btn btn-primary btn-lg mt-3">Get in Touch</a>
|
||||
</div>
|
||||
|
||||
<!-- Work Preferences -->
|
||||
<div class="mt-5">
|
||||
<h2 class="text-center mb-4">Work Preferences</h2>
|
||||
<div class="d-flex justify-content-center gap-3 flex-wrap">
|
||||
<span class="badge bg-primary p-3">Freelance / Limited Contract Work</span>
|
||||
<span class="badge bg-success p-3">Long-Term Contract Work</span>
|
||||
<span class="badge bg-success p-3">Salaried Positions</span>
|
||||
<!-- Work Preferences -->
|
||||
<div class="mt-3 mt-lg-5">
|
||||
<h2 class="text-center mb-4">Work Preferences</h2>
|
||||
<div class="d-flex justify-content-center gap-3 flex-wrap">
|
||||
<span class="badge bg-primary p-3">Freelance / Limited Contract Work</span>
|
||||
<span class="badge bg-success p-3">Long-Term Contract Work</span>
|
||||
<span class="badge bg-success p-3">Salaried Positions</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- About Section -->
|
||||
<div class="mt-3 mt-lg-5 ps-3">
|
||||
<h2>About Me</h2>
|
||||
<p class="text-muted">
|
||||
As a full-stack developer, I excel in backend development but may not be the best fit for design-heavy projects requiring frequent revisions. I focus on delivering robust and scalable solutions for my clients.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Pricing Section -->
|
||||
<div class="mt-3 mt-lg-5 ps-3">
|
||||
<h2>Pricing</h2>
|
||||
<p class="text-muted">
|
||||
My standard rate for smaller projects is hourly with a two-hour minimum. For larger or repeat projects, I'm open to flexible arrangements. Let's discuss your project to find a solution that works for both of us.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Contact Form -->
|
||||
<div class="mt-3 mt-lg-5 ps-3">
|
||||
<h2>Contact Me</h2>
|
||||
<p class="text-muted">To respect privacy, I don't share personal contact details publicly. Please fill out the form below or connect with me on LinkedIn. I typically respond within 24 hours.</p>
|
||||
|
||||
<form action="" method="post" class="row g-3" id="hire-me">
|
||||
<div class="col-md-6">
|
||||
<label for="name" class="form-label">Name</label>
|
||||
<input type="text" class="form-control" id="name" name="name" placeholder="Your Full Name">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="contactEmail" class="form-label">Email</label>
|
||||
<input type="email" class="form-control" id="contactEmail" name="contactEmail" placeholder="Your Email Address">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="details" class="form-label">Details (max 2000 characters)</label>
|
||||
<textarea class="form-control" id="details" name="details" rows="5" maxlength="2000" placeholder="Tell me about your project"></textarea>
|
||||
</div>
|
||||
<input type="hidden" name="token" value="{TOKEN}">
|
||||
<div class="col-12 text-center">
|
||||
<button type="submit" name="submit" value="submit" class="btn btn-primary btn-lg">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- About Section -->
|
||||
<div class="mt-5 ps-3">
|
||||
<h2>About Me</h2>
|
||||
<p class="text-muted">
|
||||
As a full-stack developer, I excel in backend development but may not be the best fit for design-heavy projects requiring frequent revisions. I focus on delivering robust and scalable solutions for my clients.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Pricing Section -->
|
||||
<div class="mt-5 ps-3">
|
||||
<h2>Pricing</h2>
|
||||
<p class="text-muted">
|
||||
My standard rate for smaller projects is hourly with a two-hour minimum. For larger or repeat projects, I'm open to flexible arrangements. Let's discuss your project to find a solution that works for both of us.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Contact Form -->
|
||||
<div class="mt-5 ps-3">
|
||||
<h2>Contact Me</h2>
|
||||
<p class="text-muted">To respect privacy, I don't share personal contact details publicly. Please fill out the form below or connect with me on LinkedIn. I typically respond within 24 hours.</p>
|
||||
|
||||
<form action="" method="post" class="row g-3" id="hire-me">
|
||||
<div class="col-md-6">
|
||||
<label for="name" class="form-label">Name</label>
|
||||
<input type="text" class="form-control" id="name" name="name" placeholder="Your Full Name">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="contactEmail" class="form-label">Email</label>
|
||||
<input type="email" class="form-control" id="contactEmail" name="contactEmail" placeholder="Your Email Address">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="details" class="form-label">Details (max 2000 characters)</label>
|
||||
<textarea class="form-control" id="details" name="details" rows="5" maxlength="2000" placeholder="Tell me about your project"></textarea>
|
||||
</div>
|
||||
<input type="hidden" name="token" value="{TOKEN}">
|
||||
<div class="col-12 text-center">
|
||||
<button type="submit" name="submit" value="submit" class="btn btn-primary btn-lg">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<div class="col-8 offset-2 mb-5 mt-4">
|
||||
<div class="p-4 mb-4 rounded-3 context-main context-main-bg">
|
||||
<div class="col-12 col-md-10 col-lg-8 offset-lg-2 offset-md-1 offset-0 mb-3 mb-lg-5 mt-2 mt-lg-4">
|
||||
<div class="p-2 p-lg-4 mb-lg-4 m-2 rounded-3 context-main context-main-bg">
|
||||
<div class="container text-center">
|
||||
<div class="jumbotron text-center pb-5">
|
||||
<div class="jumbotron text-center pb-3 pb-lg-5">
|
||||
<p class="fs-4">
|
||||
There are too many stories to tell them all on one site. Feel free to explore a few of those stories below.
|
||||
</p>
|
||||
<div class="col-4 offset-4 mb-3">
|
||||
<div class="col-12 col-sm-10 col-md-8 col-lg-4 offset-0 offset-md-2 offset-lg-4 mb-3">
|
||||
<select class="form-control dropdown-big" id="postSelector">
|
||||
{LOOP}
|
||||
<option value="{post}">{option}</option>
|
||||
@ -30,157 +30,165 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card context-main context-main-bg col-8 offset-2 mb-5">
|
||||
<div class="row g-0 px-3">
|
||||
<div class="col-md-4">
|
||||
<div id="carousel-career" class="carousel slide carousel-fade m-3" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/ba.png" class="img-fluid" alt="Black Airplane" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
</div>
|
||||
<div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/emeals.png" class="img-fluid" alt="eMeals" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
</div>
|
||||
<div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/springbot.png" class="img-fluid" alt="Springbot" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
</div>
|
||||
<div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/ione.png" class="img-fluid" alt="IgnitionOne" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
<div class="col-12 col-md-10 col-lg-8 offset-lg-2 offset-md-1 offset-0 my-2 my-lg-3">
|
||||
<div class="card context-main context-main-bg m-2">
|
||||
<div class="p-2 p-lg-3 m-2 rounded-3 row">
|
||||
<div class="col-md-4">
|
||||
<div id="carousel-career" class="carousel slide carousel-fade m-2 m-lg-3" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/ba.png" class="img-fluid" alt="Black Airplane" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
</div>
|
||||
<div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/emeals.png" class="img-fluid" alt="eMeals" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
</div>
|
||||
<div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/springbot.png" class="img-fluid" alt="Springbot" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
</div>
|
||||
<div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/ione.png" class="img-fluid" alt="IgnitionOne" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carousel-career" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon bg-dark p-4 rounded" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carousel-career" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon bg-dark p-4 rounded" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carousel-career" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon text-dark" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carousel-career" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon text-dark" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8 d-flex justify-content-center align-items-center">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title text-center">
|
||||
<a href="/resume" class="text-decoration-none">
|
||||
My Career
|
||||
</a>
|
||||
</h4>
|
||||
<p class="card-text">
|
||||
From IPB to ChatGPT and everything in-between; I have worked with, and on, many platforms. What I would refer to as my "professional experience" spans 7 years but my experience
|
||||
in this field spans another decade at least. Learn more when you view my Resume. It can be viewed, downloaded, and expounded upon via my blog. Feel free to explore and follow up with any questions.
|
||||
</p>
|
||||
<div class="col-md-8 d-flex justify-content-center align-items-center">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title text-center">
|
||||
<a href="/resume" class="text-decoration-none">
|
||||
My Career
|
||||
</a>
|
||||
</h4>
|
||||
<p class="card-text text-center text-md-start">
|
||||
From IPB to ChatGPT and everything in-between; I have worked with, and on, many platforms. What I would refer to as my "professional experience" spans 7 years but my experience
|
||||
in this field spans another decade at least. Learn more when you view my Resume. It can be viewed, downloaded, and expounded upon via my blog. Feel free to explore and follow up with any questions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card context-main context-main-bg col-8 offset-2 mb-5">
|
||||
<div class="row g-0 px-3">
|
||||
<div class="col-md-8 d-flex justify-content-center align-items-center">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title text-center">
|
||||
<a href="/portfolio" class="text-decoration-none">
|
||||
My Products
|
||||
</a>
|
||||
</h4>
|
||||
<p class="card-text">
|
||||
One of the downfalls I have as a developer is failing to save my failures. (trust me, its less philosophical than it sounds) Many times when I finish projects, or call it quits, the code is
|
||||
either resigned to its life in production where I would prefer it not to be publicly available, or It goes to the big backup disk in the sky. When you factor in my immense respect
|
||||
for lawyers and the whimsically worded writs they have me sign; I am left with limited examples to share. Fortunately I have some long running project examples which are available for download and review.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div id="carousel-products" class="carousel slide carousel-fade m-3" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/AAA_M_Additions.png" class="img-fluid" alt="AAA M+ Additions" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
</div>
|
||||
<div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/bedrock.jpg" class="img-fluid" alt="Bedrock" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
</div>
|
||||
<div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/canary.jpg" class="img-fluid" alt="Canary" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
</div>
|
||||
<div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/houdini.jpg" class="img-fluid" alt="Houdini" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
</div>
|
||||
<div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/hermes.jpg" class="img-fluid" alt="Houdini" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
</div>
|
||||
<div class="col-12 col-md-10 col-lg-8 offset-lg-2 offset-md-1 offset-0 my-2 my-lg-3">
|
||||
<div class="card context-main context-main-bg m-2">
|
||||
<div class="p-2 p-lg-3 m-2 rounded-3 row">
|
||||
<div class="col-md-8 d-flex justify-content-center align-items-center">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title text-center">
|
||||
<a href="/portfolio" class="text-decoration-none">
|
||||
My Products
|
||||
</a>
|
||||
</h4>
|
||||
<p class="card-text text-center text-md-start">
|
||||
One of the downfalls I have as a developer is failing to save my failures. (trust me, its less philosophical than it sounds) Many times when I finish projects, or call it quits, the code is
|
||||
either resigned to its life in production where I would prefer it not to be publicly available, or It goes to the big backup disk in the sky. When you factor in my immense respect
|
||||
for lawyers and the whimsically worded writs they have me sign; I am left with limited examples to share. Fortunately I have some long running project examples which are available for download and review.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div id="carousel-products" class="carousel slide carousel-fade m-2 m-lg-3" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/AAA_M_Additions.png" class="img-fluid" alt="AAA M+ Additions" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
</div>
|
||||
<div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/bedrock.jpg" class="img-fluid" alt="Bedrock" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
</div>
|
||||
<div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/canary.jpg" class="img-fluid" alt="Canary" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
</div>
|
||||
<div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/houdini.jpg" class="img-fluid" alt="Houdini" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
</div>
|
||||
<div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/hermes.jpg" class="img-fluid" alt="Houdini" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carousel-products" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon bg-dark p-4 rounded" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carousel-products" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon bg-dark p-4 rounded" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carousel-products" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon text-dark" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carousel-products" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon text-dark" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card context-main context-main-bg col-8 offset-2 mb-5">
|
||||
<div class="row g-0 px-3">
|
||||
<div class="col-md-4">
|
||||
<div id="carousel-projects" class="carousel slide carousel-fade m-3" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/tte.png" class="img-fluid" alt="TableTopElite" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
</div>
|
||||
<div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/ttp.jpg" class="img-fluid" alt="eMeals" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
</div>
|
||||
<div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/atb.jpg" class="img-fluid" alt="eMeals" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
<div class="col-12 col-md-10 col-lg-8 offset-lg-2 offset-md-1 offset-0 my-2 my-lg-3">
|
||||
<div class="card context-main context-main-bg m-2">
|
||||
<div class="p-2 p-lg-3 m-2 rounded-3 row">
|
||||
<div class="col-md-4">
|
||||
<div id="carousel-projects" class="carousel slide carousel-fade m-2 m-lg-3" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/tte.png" class="img-fluid" alt="TableTopElite" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
</div>
|
||||
<div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/ttp.jpg" class="img-fluid" alt="eMeals" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
</div>
|
||||
<div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
|
||||
<img src="{ROOT_URL}images/atb.jpg" class="img-fluid" alt="eMeals" style="max-height: 100%; max-width: 100%; object-fit: contain;">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carousel-projects" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon bg-dark p-4 rounded" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carousel-projects" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon bg-dark p-4 rounded" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carousel-projects" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon text-dark" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carousel-projects" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon text-dark" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8 d-flex justify-content-center align-items-center">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title text-center">
|
||||
<a href="/wip" class="text-decoration-none">
|
||||
My Projects
|
||||
</a>
|
||||
</h4>
|
||||
<p class="card-text">
|
||||
At any given time I have at least a half dozen projects in various stages of completion. As most could attest; interests peak and
|
||||
wain as moods and times change. Here you can find a brief overview of the various projects I am devoting some level of attention to.
|
||||
Not guaranteed acuate, and not guaranteed complete, but you're here anyways, so take a peak behind the homepage
|
||||
</p>
|
||||
<div class="col-md-8 d-flex justify-content-center align-items-center">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title text-center">
|
||||
<a href="/wip" class="text-decoration-none">
|
||||
My Projects
|
||||
</a>
|
||||
</h4>
|
||||
<p class="card-text">
|
||||
At any given time I have at least a half dozen projects in various stages of completion. As most could attest; interests peak and
|
||||
wain as moods and times change. Here you can find a brief overview of the various projects I am devoting some level of attention to.
|
||||
Not guaranteed acuate, and not guaranteed complete, but you're here anyways, so take a peak behind the homepage
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card context-main context-main-bg col-8 offset-2 mb-5">
|
||||
<div class="row g-0 px-3">
|
||||
<div class="col-md-8 d-flex justify-content-center align-items-center">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title text-center">
|
||||
Contact Me
|
||||
</h4>
|
||||
<p class="card-text">
|
||||
While I do not make my phone number or email available, you can still reach out about anything using my contact form here.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<a class="btn btn-outline-primary btn-lg" href="/contact" role="button">Contact Me</a>
|
||||
<div class="col-12 col-md-10 col-lg-8 offset-lg-2 offset-md-1 offset-0 my-2 my-lg-3">
|
||||
<div class="card context-main context-main-bg m-2">
|
||||
<div class="p-2 p-lg-3 m-2 rounded-3 row">
|
||||
<div class="col-md-8 d-flex justify-content-center align-items-center">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title text-center">
|
||||
Contact Me
|
||||
</h4>
|
||||
<p class="card-text">
|
||||
While I do not make my phone number or email available, you can still reach out about anything using my contact form here.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<a class="btn btn-outline-primary btn-lg" href="/contact" role="button">Contact Me</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 p-3">
|
||||
<img class="img-fluid" src="/images/vacation.jpg" alt="still-working">
|
||||
<div class="col-md-4 p-3 d-flex justify-content-center">
|
||||
<img class="img-fluid" src="/images/vacation.jpg" alt="still-working" style="max-height: 356px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user