keith/keith-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify hero and expand experience section
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source
This commit is contained in:
Keith Casko
2026-10-06 10:52:59 -04:00
parent ae8a0124af
commit 7065ee730e
2 changed files with 64 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+31 -8
View File
@@ -197,8 +197,8 @@ section { padding: 64px 0; }
box-shadow: 0 2px 6px rgba(16, 38, 61, 0.06);
padding: 40px;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 40px;
grid-template-columns: 1fr;
gap: 24px;
align-items: center;
}
.hero h1 { font-size: 34px; margin-bottom: 18px; line-height: 1.2; }
@@ -211,6 +211,25 @@ section { padding: 64px 0; }
margin-top: 24px;
}
.hero-facts {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid var(--rule-soft);
}
.hero-facts span {
background: #eef2f6;
border: 1px solid var(--rule);
border-radius: 3px;
padding: 6px 9px;
font-size: 12.5px;
color: var(--muted-2);
font-weight: 600;
}
.btn {
display: inline-flex;
align-items: center;
@@ -483,15 +502,14 @@ section { padding: 64px 0; }
/* ---------- About ---------- */
.about-grid {
display: grid;
grid-template-columns: .9fr 1.45fr 1fr;
grid-template-columns: minmax(240px, .8fr) 1.7fr;
gap: 24px;
align-items: stretch;
align-items: start;
}
.about-photo {
background: #e9edf1;
border: 1px solid var(--rule);
border-radius: 3px;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.about-text {
@@ -544,6 +562,12 @@ section { padding: 64px 0; }
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.experience-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.panel {
background: var(--panel);
border: 1px solid var(--rule);
@@ -620,6 +644,7 @@ section { padding: 64px 0; }
.skills-grid { grid-template-columns: repeat(2, 1fr); }
.about-grid { grid-template-columns: 1fr; }
.two-col { grid-template-columns: 1fr; }
.experience-grid { grid-template-columns: 1fr; }
.contact-cta { flex-direction: column; align-items: flex-start; }
}
@@ -654,9 +679,7 @@ section { padding: 64px 0; }
.about-headshot {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
height: auto;
display: block;
}
index.html
+33 -37
View File
@@ -66,15 +66,12 @@
<a class="btn btn-primary" href="#projects">View Projects</a>
<a class="btn btn-secondary" href="assets/resume/Keith_Casko_IT_Cloud_Resume.pdf" download>Download Resume</a>
</div>
</div>
<div class="hero-montage" aria-label="Selected project screenshots">
<img class="montage-main"
src="assets/images/homelab-topology.svg"
alt="ByteGeist Active Directory homelab topology" />
<img src="assets/screenshots/bytegeist-infrastructure-live.png"
alt="ByteGeist infrastructure monitoring dashboard" />
<img src="assets/screenshots/bytegeist-support-live.png"
alt="ByteGeist Support Lab application" />
<div class="hero-facts" aria-label="Professional highlights">
<span>AWS Certified Cloud Practitioner</span>
<span>Google IT Support Professional</span>
<span>B.S. Software Engineering &mdash; In Progress</span>
<span>Kalamazoo, Michigan</span>
</div>
</div>
</div>
</div>
@@ -308,20 +305,6 @@
</p>
</div>
<aside class="about-focus" aria-label="Current focus">
<h3>Current Focus</h3>
<ul>
<li>Windows Server &amp; Active Directory administration</li>
<li>AWS serverless applications and cloud operations</li>
<li>Linux, Docker, monitoring, and infrastructure troubleshooting</li>
<li>B.S. Software Engineering coursework at WGU</li>
</ul>
<div class="about-links">
<a href="https://github.com/kcasko" rel="noopener">GitHub</a>
<a href="https://www.linkedin.com/in/keith-casko/" rel="noopener">LinkedIn</a>
<a href="assets/resume/Keith_Casko_IT_Cloud_Resume.pdf" download>Resume</a>
</div>
</aside>
</div>
</div>
</section>
@@ -334,35 +317,48 @@
<span class="subtitle">Current study and professional background</span>
</div>
<div class="two-col">
<div class="experience-grid">
<div class="panel">
<h3>Western Governors University</h3>
<div class="meta">Bachelor of Science, Software Engineering &middot; In Progress</div>
<h4>Recent Coursework</h4>
<p>
Building a software engineering foundation alongside hands-on work in
systems administration, cloud infrastructure, networking, Java, and web development.
</p>
</div>
<div class="panel">
<h3>Hands-On Technical Experience</h3>
<div class="meta">Homelab, cloud projects, and deployed applications</div>
<ul>
<li>Cloud Foundations &mdash; completed</li>
<li>Java Frameworks &mdash; completed project work</li>
<li>Hardware &amp; Operating Systems Essentials &mdash; current study</li>
<li>Windows Server 2022, Active Directory, DNS, SMB shares, permissions, and domain troubleshooting</li>
<li>Linux, Docker, reverse proxy, TLS, monitoring, and service administration</li>
<li>AWS Lambda, API Gateway, DynamoDB, Amplify, IAM, S3, EC2, and Systems Manager</li>
<li>Documented troubleshooting with verification steps rather than installation-only demos</li>
</ul>
</div>
<div class="panel">
<h3>Costco Wholesale &mdash; Baker</h3>
<div class="meta">June 2015 &ndash; Present</div>
<h4>Transferable Experience</h4>
<ul>
<li>High-volume production environment</li>
<li>Accuracy and process discipline</li>
<li>Prioritization under time pressure</li>
<li>Day-to-day troubleshooting of equipment and workflows</li>
<li>Coordinating with team members and supervisors</li>
<li>Training coworkers on procedures</li>
<li>Customer service and clear communication</li>
<li>Problem solving and follow-through</li>
<li>High-volume production work requiring accuracy, prioritization, and process discipline</li>
<li>Day-to-day troubleshooting of equipment and workflow problems</li>
<li>Training coworkers, customer service, and clear communication under time pressure</li>
</ul>
</div>
<div class="panel">
<h3>Earlier Grocery &amp; Bakery Experience</h3>
<div class="meta">Prior to Costco</div>
<p>
Additional long-term experience in bakery and grocery environments,
contributing to roughly three decades of customer service, production,
teamwork, training, and operational problem-solving.
</p>
</div>
</div>
</div>
</section>