refactor: Modularize Stylesheets
This commit is contained in:
parent
691968ceac
commit
16d93122ca
|
|
@ -8,7 +8,7 @@ module.exports = function (eleventyConfig) {
|
|||
dir: {
|
||||
input: "src",
|
||||
output: "_site",
|
||||
includes: "includes",
|
||||
includes: "_includes",
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
@ -1 +1,15 @@
|
|||
# .gitignore
|
||||
|
||||
# Eleventy output directory
|
||||
_site/
|
||||
|
||||
# Node.js dependencies
|
||||
node_modules/
|
||||
.npm/
|
||||
|
||||
# Eleventy cache directory
|
||||
.cache/
|
||||
|
||||
# NPM debug logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
91
index.html
91
index.html
|
|
@ -1,91 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Derek L. Seitz - Portfolio</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="stylesheet" href="/styles/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--? The flow and layout for this page should have a similar feel to "https://dribbble.com/shots/26383872-AI-Assistant-Website-Landing-Page" in that it flows smoothly, isn't overwhelming for the user, uses strategic coloring as a highlight (and not a domination). For the user, it needs to feel effortless to absorb the quality being presented. -->
|
||||
<!--*Additionally, it would be a good idea to reword some of the pitch to highlight and emphasize the collaborative approach being taken to understand the client's needs, their dynamic with their own customers, and how I can help them meet those needs through my work. Something like:
|
||||
“Working closely with you to understand your unique business and customers…”
|
||||
“Together, we’ll craft a website that reflects your vision and meets your audience’s needs…”
|
||||
“I’m here not just to build, but to partner with you in your growth journey…” -->
|
||||
|
||||
<!-- ↓ Start Header ↓ -->
|
||||
|
||||
|
||||
<!-- ↓ Start Main ↓ -->
|
||||
<main>
|
||||
<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>
|
||||
<h2>What a Well-Designed Website Can Do</h2>
|
||||
|
||||
<!-- ↓ Start ↓ -->
|
||||
<!--? The .benefits-list list will be a JavaScript feature that cycles through the list of benefits. The list likely needs to be lengthened further, and instead of flashing them one by one, perhaps use an accordion feature as a pop-out for different categories, or even a hover that expands the displayed benefits (tap-to-expand using javaScript for mobile devices)-->
|
||||
<div class="benefits-list">
|
||||
<ul class="growth">
|
||||
<li>Attract more visitors</li>
|
||||
<li>Expand your availability</li>
|
||||
<li>Convert visitors into customers</li>
|
||||
<li>Engage with your audience</li>
|
||||
</ul>
|
||||
|
||||
<ul class="brand-cred">
|
||||
<li>Share your expertise</li>
|
||||
<li>Build trust and credibility</li>
|
||||
<li>Showcase your products and services</li>
|
||||
<li>Communicate your vision</li>
|
||||
</ul>
|
||||
|
||||
<ul class="operations">
|
||||
<li>Transform your workflow</li>
|
||||
<li>Provide cost-effective marketing</li>
|
||||
<li>Enhance customer service</li>
|
||||
<li>Improve data analytics</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p>The list of benefits goes on and on.</p>
|
||||
<p>While I focus on getting your website noticed, you can focus on what makes your business thrive: the people and communities your serve.</p>
|
||||
|
||||
<!--? ↓ Start ↓ -->
|
||||
<!--? This section will feature a carousel of services on cards. The carousel will be scrollable, and when the card is clicked or touched, it will expand to provide a clearer description of the service. This will be accomplished with JavaScript-->
|
||||
<h2>The Ways I Can Help</h2>
|
||||
<div class="services">
|
||||
<h3>Web Development & Design:</h3>
|
||||
<ul class="web-dev-service">
|
||||
<li>Web development</li>
|
||||
<li>Design & related services</li>
|
||||
<li>Front-End & Back-End development</li>
|
||||
<li>Website redesigns</li>
|
||||
<li>Discovery & Planning sessions</li>
|
||||
<li>Wire-frames & mockups</li>
|
||||
<li>Custom solutions<br>(e.g., CMS, eCommerce, & booking tools)</li>
|
||||
</ul>
|
||||
|
||||
<h3>Maintenance & Ongoing Support:</h3>
|
||||
<ul class="ongoing-service">
|
||||
<li>Site maintenance & updates</li>
|
||||
<li>Technical support</li>
|
||||
<li>Routine maintenance & updates</li>
|
||||
<li>Post-launch support</li>
|
||||
<li>Ongoing support</li>
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
</main>
|
||||
<hr class="footer-separator">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -4,7 +4,11 @@
|
|||
"description": "Portfolio website",
|
||||
"main": "script.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"build": "npx @11ty/eleventy",
|
||||
"start": "npx @11ty/eleventy --serve",
|
||||
"clean": "rimraf _site",
|
||||
"dev": "npm run clean && npm run start"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
@ -18,6 +22,6 @@
|
|||
},
|
||||
"homepage": "https://github.com/dereklseitz/dereklseitz.github.io#readme",
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^3.1.2"
|
||||
"rimraf": "^6.0.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
layout: base.njk
|
||||
title: About Derek
|
||||
stylesheet: styles/about.css
|
||||
---
|
||||
|
||||
<h1>More About Derek</h1>
|
||||
<h2>Coming Soon!</h2>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
layout: base.njk
|
||||
title: Contact Derek
|
||||
stylesheet: styles/contact.css
|
||||
---
|
||||
|
||||
<h1>Contact Form Coming Soon!</h1>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
/* about.css */
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/* contact.css */
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/* demos.css */
|
||||
|
||||
h1, h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -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 */
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue