refactor: Modularize Stylesheets
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
@@ -6,7 +7,8 @@
|
||||
|
||||
<title>{{title}}</title>
|
||||
|
||||
<link rel="stylesheet" href="styles/styles.css">
|
||||
<link rel="stylesheet" href="/styles/header-footer.css">
|
||||
<link rel="stylesheet" href="{{ stylesheet }}">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -21,5 +23,5 @@
|
||||
{% include "footer.html" %}
|
||||
|
||||
</body>
|
||||
</html}
|
||||
</html>
|
||||
|
||||
20
src/_includes/footer.html
Normal file
20
src/_includes/footer.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<footer>
|
||||
<ul class="social-links">
|
||||
<li><a href="https://linkedin.com/in/dereklseitz" target="_blank">Connect on LinkedIn</a></li>
|
||||
<li><a href="https://git.dsnet.pro/dereklseitz" target="_blank">My Project Repos</a></li>
|
||||
</ul>
|
||||
|
||||
<nav aria-label="Footer navigation">
|
||||
<ul class="footer-links">
|
||||
<li><a href="#top">Back to Top</a></li>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li><a href="demos.html">Demos</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<p>© 2025, Derek L.Seitz, All rights reserved.</p>
|
||||
|
||||
</footer>
|
||||
14
src/_includes/header.html
Normal file
14
src/_includes/header.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<header class="main-header">
|
||||
|
||||
<nav class="main-nav">
|
||||
|
||||
<ul class="nav-list">
|
||||
<li class="nav-item nav-logo"><a href="#home">Derek L. Seitz</a></li>
|
||||
<li class="nav-item nav-about"><a href="#about">About</a></li>
|
||||
<li class="nav-item nav-demos"><a href="#demos">Demos</a></li>
|
||||
<li class="nav-item nav-contact"><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
8
src/about.njk
Normal file
8
src/about.njk
Normal file
@@ -0,0 +1,8 @@
|
||||
---
|
||||
layout: base.njk
|
||||
title: About Derek
|
||||
stylesheet: styles/about.css
|
||||
---
|
||||
|
||||
<h1>More About Derek</h1>
|
||||
<h2>Coming Soon!</h2>
|
||||
7
src/contact.njk
Normal file
7
src/contact.njk
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
layout: base.njk
|
||||
title: Contact Derek
|
||||
stylesheet: styles/contact.css
|
||||
---
|
||||
|
||||
<h1>Contact Form Coming Soon!</h1>
|
||||
7
src/demos.njk
Normal file
7
src/demos.njk
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
layout: base.njk
|
||||
title: Demos
|
||||
stylesheet: styles/demos.css
|
||||
---
|
||||
|
||||
<h1>Demos Coming Soon!</h1>
|
||||
@@ -1,17 +0,0 @@
|
||||
<footer>
|
||||
|
||||
<ul class="footer-links">
|
||||
<li><a href="#home">Back to Top</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#portfolio">Portfolio</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
|
||||
<ul class="external-links">
|
||||
<li><a href="https://linkedin.com/in/dereklseitz" target="_blank">Connect on LinkedIn</a></li>
|
||||
<li><a href="https://git.dsnet.pro/dereklseitz" target="_blank">My Project Repos</a></li>
|
||||
</ul>
|
||||
|
||||
<p>© 2025, Derek L.Seitz</p>
|
||||
|
||||
</footer>
|
||||
@@ -1,14 +0,0 @@
|
||||
<header class="main-header">
|
||||
|
||||
<nav class="main-nav">
|
||||
|
||||
<ul class="nav-list">
|
||||
<li class="nav-item nav-logo"><a href="#home">Derek L. Seitz</a></li>
|
||||
<li class="nav-item"><a href="#about">About</a></li>
|
||||
<li class="nav-item portfolio-dropdown"><a href="#portfolio">Portfolio</a></li>
|
||||
<li class="nav-item"><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: base.njk
|
||||
title: "Derek L. Seitz - Portfolio"
|
||||
stylesheet: styles/index.css
|
||||
---
|
||||
|
||||
|
||||
@@ -9,7 +10,7 @@ title: "Derek L. Seitz - Portfolio"
|
||||
<!--? Because this is a portfolio site, i'm building it from scratch myself a a demonstration in itself of my work (in addition to other demos that will be subdomains linked into the site. How I explained it to somebody else earlier is this: consider this landing page as the front door to my house. I want it to be simply designed, approachable, and easy to absorb. From there, the About and Contact pages will be similar to a foyer or atrium, following a similar style but in more detail by expanding the conversation. My demos, each hosted with their own subdomain will represent the different rooms of the house, where each one is able to have its own vibe, its own personality, its own style and purpose. That is my vision for this portfolio website (perhaps it's ambitious, but I think it's genius). Once this is done, my work shifts from building this house, to finding people to visit it. Direct outreach and cold calling is what that means. I've already planned this out. After I've had a few clients, I'm going to add a testimonials section, sort of like decorating a front porch for the holidays. You know how people love to go drive through neighborhoods around Christmas to look at the lights and decorations? That's what I'm hoping will start to happen as people give me a shot, and I (hopefully) deliver on my promises. Once I've got a better flow going, then I'll add in social media. I've got a lot left to build before I get there. But this is what I have planned, using www.dlseitz.dev as my biggest prop. -->
|
||||
|
||||
<!-- ↓ Start Main ↓ -->
|
||||
|
||||
<div id="top"></div>
|
||||
<h1>Grow Your Online Presence with Me, Derek L. Seitz</h1>
|
||||
<p>A great website is often your most powerful sales tool. It's the first impression you make and the cornerstone of your online presence.</p>
|
||||
|
||||
@@ -68,36 +69,43 @@ title: "Derek L. Seitz - Portfolio"
|
||||
<div class="services-container">
|
||||
<h2>The Ways I Can Help</h2>
|
||||
|
||||
<!-- Website Design -->
|
||||
<div class="service-card">
|
||||
<h3>Website Design</h3>
|
||||
<ul class="design-service">
|
||||
<li>Custom web design & user experience (UX) services</li>
|
||||
<li>Discovery, planning, & wireframing</li>
|
||||
<li>Website redesign & optimization</li>
|
||||
</ul>
|
||||
<button class="carousel-button prev-button">❮</button>
|
||||
|
||||
<div class="service-cards">
|
||||
<!-- Website Design -->
|
||||
<div class="service-card">
|
||||
<h3>Website Design</h3>
|
||||
<ul class="design-service">
|
||||
<li>Custom web design & user experience (UX) services</li>
|
||||
<li>Discovery, planning, & wireframing</li>
|
||||
<li>Website redesign & optimization</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Website Development -->
|
||||
<div class="service-card">
|
||||
<h3>Website Development</h3>
|
||||
<ul class="development-service">
|
||||
<li>Full-stack web development (Front-End & Back-End)</li>
|
||||
<li>Custom solutions (e.g., CMS, eCommerce, booking systems)</li>
|
||||
<li>Ongoing maintenance & support</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Other Services -->
|
||||
<div class="service-card">
|
||||
<h3>Other Related Services</h3>
|
||||
<ul class="other-service">
|
||||
<li>Basic SEO setup & Google Analytics integration</li>
|
||||
<li>Hosting services</li>
|
||||
<li>Deployment</li>
|
||||
<li>E-commerce</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Website Development -->
|
||||
<div class="service-card">
|
||||
<h3>Website Development</h3>
|
||||
<ul class="development-service">
|
||||
<li>Full-stack web development (Front-End & Back-End)</li>
|
||||
<li>Custom solutions (e.g., CMS, eCommerce, booking systems)</li>
|
||||
<li>Ongoing maintenance & support</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Other Services -->
|
||||
<div class="service-card">
|
||||
<h3>Other Related Services</h3>
|
||||
<ul class="other-service">
|
||||
<li>Basic SEO setup & Google Analytics integration</li>
|
||||
<li>Hosting services</li>
|
||||
<li>Deployment</li>
|
||||
<li>E-commerce</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button class="carousel-button next-button">❯</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
5
src/styles/about.css
Normal file
5
src/styles/about.css
Normal file
@@ -0,0 +1,5 @@
|
||||
/* about.css */
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
5
src/styles/contact.css
Normal file
5
src/styles/contact.css
Normal file
@@ -0,0 +1,5 @@
|
||||
/* contact.css */
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
5
src/styles/demos.css
Normal file
5
src/styles/demos.css
Normal file
@@ -0,0 +1,5 @@
|
||||
/* demos.css */
|
||||
|
||||
h1, h2 {
|
||||
text-align: center;
|
||||
}
|
||||
74
src/styles/header-footer.css
Normal file
74
src/styles/header-footer.css
Normal file
@@ -0,0 +1,74 @@
|
||||
/* Header and Footer Styles */
|
||||
|
||||
/* Reset some default browser styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Calibri, sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*? ↓ Start Header ↓ */
|
||||
.main-header {
|
||||
background-color: #333; /* Dark background for the header */
|
||||
color: #fff; /* White text color */
|
||||
padding: 10px 20px; /* Add some padding for spacing */
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
display: flex; /* Use flexbox to align items in a row */
|
||||
justify-content: space-between; /* Space items evenly */
|
||||
align-items: center; /* Vertically center items */
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
list-style: none; /* Remove default list styling */
|
||||
display: flex; /* Use flexbox to align list items in a row */
|
||||
gap: 20px; /* Add some space between list items */
|
||||
}
|
||||
|
||||
.nav-item a {
|
||||
background-color: #2e97be;
|
||||
color: #fff; /* White text color for links */
|
||||
text-decoration: none; /* Remove underline from links */
|
||||
font-weight: bold; /* Make text bold */
|
||||
transition: color 0.3s; /* Smooth color transition on hover */
|
||||
padding: 5px 10px; border-radius: 10px;
|
||||
}
|
||||
|
||||
.nav-item a:hover {
|
||||
color: #2e97be;
|
||||
background-color: #fff /* Change link color on hover */
|
||||
}
|
||||
|
||||
.nav-logo a {
|
||||
font-size: 1.5em; /* Make the logo text larger */
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
margin-right: 20vw;
|
||||
}
|
||||
|
||||
|
||||
/*? ↓ Start Footer ↓ */
|
||||
|
||||
.footer-links {
|
||||
display: flex; /* Use flexbox to align items in a row */
|
||||
align-items: center;
|
||||
justify-content: space-between; /* Center the footer links */
|
||||
gap: 20px; /* Add some space between links */
|
||||
margin-top: 20px; /* Add some space above the footer links */
|
||||
width: 75vw;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.external-links {
|
||||
display: flex;
|
||||
justify-content: center; /* Center the external links */
|
||||
gap: 50px; /* Add some space between links */
|
||||
}
|
||||
105
src/styles/index.css
Normal file
105
src/styles/index.css
Normal file
@@ -0,0 +1,105 @@
|
||||
/* index.css */
|
||||
|
||||
|
||||
/*? ↓ Start Benefits Section ↓ */
|
||||
|
||||
.benefits-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 60vw;
|
||||
padding: 20px;
|
||||
margin-top: 50px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.benefits-container div {
|
||||
border: 2px solid darkslategray;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.benefits-card ul {
|
||||
list-style: none;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.benefits-card.hover ul {
|
||||
max-height: var(--ul-height);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*? ↓ Start Services Container ↓ */
|
||||
|
||||
.service-cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;;
|
||||
}
|
||||
|
||||
.service card {
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid darkslategray;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.service-card ul {
|
||||
list-style: none;
|
||||
|
||||
}
|
||||
|
||||
.carousel-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center; /* Center the carousel vertically */
|
||||
}
|
||||
|
||||
.carousel {
|
||||
display: flex;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
min-width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
margin: 0 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.carousel-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 24px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.prev-button {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.next-button {
|
||||
right: 10px;
|
||||
}
|
||||
Reference in New Issue
Block a user