feat: Set up Eleventy and restructure project
Install and configure Eleventy for static site generation. - Reorganized project directories for Eleventy conventions. - Created base.njk, header.html, and footer.html for modularity. - Wrote the initial landing page content in index.njk.
This commit is contained in:
parent
fde00ef1b1
commit
ef6363b3bd
|
|
@ -0,0 +1,14 @@
|
|||
module.exports = function (eleventyConfig) {
|
||||
// Pass through static assets without processing
|
||||
eleventyConfig.addPassthroughCopy("src/images");
|
||||
eleventyConfig.addPassthroughCopy("src/styles");
|
||||
eleventyConfig.addPassthroughCopy("src/scripts");
|
||||
|
||||
return {
|
||||
dir: {
|
||||
input: "src",
|
||||
output: "_site",
|
||||
includes: "includes",
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
@ -0,0 +1 @@
|
|||
node_modules/
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"cSpell.words": [
|
||||
"wireframing"
|
||||
]
|
||||
}
|
||||
34
index.html
34
index.html
|
|
@ -5,24 +5,18 @@
|
|||
<title>Derek L. Seitz - Portfolio</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<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 ↓ -->
|
||||
<header class="main-header">
|
||||
|
||||
<!-- ↓ Start Nav ↓ -->
|
||||
|
||||
<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>
|
||||
|
||||
<!-- ↓ Start Main ↓ -->
|
||||
<main>
|
||||
|
|
@ -92,20 +86,6 @@
|
|||
</div>
|
||||
</main>
|
||||
<hr class="footer-separator">
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"name": "dereklseitz.github.io",
|
||||
"version": "1.0.0",
|
||||
"description": "Portfolio website",
|
||||
"main": "script.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/dereklseitz/dereklseitz.github.io.git"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/dereklseitz/dereklseitz.github.io/issues"
|
||||
},
|
||||
"homepage": "https://github.com/dereklseitz/dereklseitz.github.io#readme",
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^3.1.2"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
|
|
@ -0,0 +1,17 @@
|
|||
<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>
|
||||
|
|
@ -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"><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>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
---
|
||||
layout: base.njk
|
||||
title: "Derek L. Seitz - Portfolio"
|
||||
---
|
||||
|
||||
|
||||
<!--? 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. -->
|
||||
|
||||
<!--? 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 ↓ -->
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<!-- ↓ Start "Benefits" ↓ -->
|
||||
<h2>What a Well-Designed Website Can Do</h2>
|
||||
<p>There are countless benefits to having a professionally developed website. Some of the most impactful may be in areas where your business struggles the most.</p>
|
||||
|
||||
<!--? 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-container">
|
||||
|
||||
<div class="benefits-card">
|
||||
<h3>Grow Your Business</h3>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="benefits-card">
|
||||
<h3>Establish Your Brand's Authority</h3>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="benefits-card">
|
||||
<h3>Streamline Your Business Operations</h3>
|
||||
|
||||
<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>
|
||||
|
||||
</div>
|
||||
|
||||
<p>Tackling these areas yourself can demand a huge amount of your time.</p>
|
||||
<p>Trusting me to focus on getting your website noticed, you can instead focus on what makes your business thrive: the people and communities you serve.</p>
|
||||
|
||||
<!-- ↓ Start "Ways I Can Help" ↓ -->
|
||||
|
||||
<!--? 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-->
|
||||
|
||||
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<p>Perhaps you need inspiration... <a href="#demos" class="demos-link"> Explore My Work!</a></p>
|
||||
|
||||
<div class="project-steps">
|
||||
<h2>My Project Process</h2>
|
||||
<ol class="steps-list">
|
||||
<li id="li-1">Discovery: We'll begin with a conversation to understand your business, your goals, and your unique challenges. This is where we lay the groundwork for your project.</li>
|
||||
<li id="li-2">Planning: I will create a custom project plan and proposal that outlines the scope, timeline, and investment required to achieve your objectives.</li>
|
||||
<li id="li-3">Execution: Once we're aligned on the plan, I'll build and launch your website, ensuring it delivers on our shared vision.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<p>Interested in working together? <a href="#contact" class="cta-button">Let's Get Started on a Plan!</a></p>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
body {
|
||||
background-color: lightblue;
|
||||
}
|
||||
Loading…
Reference in New Issue