dereklseitz/dlseitz.dev-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Add privacy policy page and external links

Browse Source
This commit is contained in:
Derek L. Seitz
2025-08-25 20:24:14 -05:00
parent 516b893d6d
commit 04da9dde0b
8 changed files with 1959 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1681
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

24
package.json
View File

@@ -1,27 +1,27 @@
{
"name": "dereklseitz.github.io",
"name": "dlseitz.dev-frontend",
"version": "1.0.0",
"description": "Portfolio website",
"description": "Frontend code for Derek L. Seitz’s personal portfolio and web development services.",
"main": "script.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "npx @11ty/eleventy",
"dev": "npm run clean && npm run start",
"start": "npx @11ty/eleventy --serve",
"clean": "rimraf _site",
"dev": "npm run clean && npm run start"
"build": "npx @11ty/eleventy",
"clean": "rimraf _site"
},
"keywords": ["portfolio", "11ty", "eleventy", "web development", "static site", "frontend", "Derek Seitz"],
"author": "Derek L. Seitz",
"license": "MIT",
"homepage": "https://dlseitz.dev",
"repository": {
"type": "git",
"url": "git+https://github.com/dereklseitz/dereklseitz.github.io.git"
"url": "https://gitea.dlseitz.dev/dereklseitz/dlseitz.dev-frontend.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/dereklseitz/dereklseitz.github.io/issues"
"url": "https://gitea.dlseitz.dev/dereklseitz/dlseitz.dev-frontend/issues"
},
"homepage": "https://github.com/dereklseitz/dereklseitz.github.io#readme",
"devDependencies": {
"@11ty/eleventy": "^3.0.0",
"rimraf": "^6.0.1"
}
}

9
src/_includes/footer.html
View File

@@ -1,7 +1,10 @@
<footer>
<ul class="social-links">
<li class="linkedin"><a href="https://linkedin.com/in/dereklseitz" target="_blank">Connect on LinkedIn</a></li>
<li class="gitea"><a href="https://git.dsnet.pro/dereklseitz" target="_blank">My Project Repos</a></li>
<li class="linkedin"><a href="https://linkedin.com/in/dereklseitz" target="_blank" rel="noopener noreferrer"
>Connect on LinkedIn</a></li>
<li class="gitea"><a href="https://gitea.dlseitz.dev/dereklseitz" target="_blank" rel="noopener noreferrer"
>My Project Repos</a></li>
<li class="campfire"><a href="https://campfire.dlseitz.dev" target=_blank" rel="noopener noreferrer">Campfire Logs</a></li>
</ul>
<nav aria-label="Footer navigation">
@@ -11,6 +14,8 @@
<li><a href="/about/">About</a></li>
<li><a href="/demos/">Demos</a></li>
<li><a href="/about/#contact">Contact</a></li>
<li><a href="/privacy-policy/" target="_blank" rel="noopener noreferrer"
>Privacy Policy</a></li>
</ul>
</nav>

7
src/_includes/header.html
View File

@@ -1,12 +1,15 @@
<header class="main-header">
<header class="main-header top">
<nav class="main-nav">
<ul class="nav-list">
<li class="nav-item nav-logo"><a href="/">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="/about/#contact">Contact</a></li>
<li class="nav-item nav-blog"><a href="https://campfire.dlseitz.dev" target="_blank" rel="noopener noreferrer"
>Blog</a></li>
<li class="nav-item nav-repos"><a href="https://gitea.dlseitz.dev" target="_blank" rel="noopener noreferrer"
>My Repos</a></li>
</ul>
</nav>

6
src/index.njk
View File

@@ -2,7 +2,7 @@
layout: base.njk
metaDesc: "Elevate your business with a custom, high-quality website. Derek L. Seitz provides professional web design and development to help you grow your online presence."
title: "Derek L. Seitz - Portfolio"
stylesheet: styles/index.css
stylesheet: /styles/index.css
isLandingPage: true
pageScripts:
- "/scripts/benefits.js"
@@ -10,7 +10,7 @@ pageScripts:
---
<!-- ↓ Start Intro Module ↓ -->
<div id="top"></div>
<div class="intro module">
<h1>Grow Your Online Presence with Me, <span class="accent-name">Derek L. Seitz</span></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>
@@ -61,7 +61,7 @@ pageScripts:
<div class="transition">
<p>Tackling these areas yourself can demand a huge amount of your time. This is where I come in.</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>
<p>Trusting me to focus on getting your website noticed, you can instead focus on what makes your business thrive: <br><span class="thrive">the people and communities you serve</span>.</p>
</div>
</div>

122
src/privacy-policy.njk Normal file
View File

@@ -0,0 +1,122 @@
---
layout: base.njk
metaDesc: "Your privacy is my priority. This policy explains how I securely handle your contact information, what I use it for, and your rights to access or delete your data."
title: "Derek L. Seitz - Privacy Policy"
stylesheet: /styles/privacy.css
isLandingPage: false
---
<div class="module">
<h1>Privacy Policy</h1>
<strong>Last updated: August 25, 2025</strong>
<p>This Privacy Policy describes my policies and procedures on the collection and use of your information when you use my Service. I use your personal data to communicate with you regarding your inquiries.</p>
<hr>
<div id="toc" class="toc">
<h2>Table of Contents</h2>
<ul>
<li><a href="#definitions">Interpretation and Definitions</a></li>
<li><a href="#data-collection">What Information I Collect</a></li>
<li><a href="#data-use">How I Use Your Personal Data</a></li>
<li><a href="#no-tracking">No Cookies or Tracking</a></li>
<li><a href="#data-retention">How Long I Keep Your Information</a></li>
<li><a href="#data-protection">How I Protect Your Information</a></li>
<li><a href="#privacy-rights">Your Privacy Rights</a></li>
<li><a href="#policy-changes">Changes to This Privacy Policy</a></li>
<li><a href="#contact">How to Contact Me</a></li>
</ul>
</div>
<hr>
<section id="definitions">
<h2>Interpretation and Definitions</h2>
<p>For the purposes of this Privacy Policy:</p>
<p><strong>"I"</strong>, <strong>"me"</strong>, or <strong>"my"</strong> refers to <strong>Derek L. Seitz</strong>.<br>
<p><strong>"Country"</strong> refers to: <strong>Arkansas, United States</strong>.<br>
<p><strong>"Personal Data"</strong> is any information that relates to an identified or identifiable individual.<br>
<p><strong>"Service(s)"</strong> refers to the <strong>"Website"</strong> and all related services I offer, including client consultation, project discovery, and web development services.<br>
<p><strong>"Website"</strong> refers to <strong>Derek L. Seitz</strong>, accessible from <a href="https://dlseitz.dev">https://dlseitz.dev</a>.<br>
<p><strong>"You"</strong> or <strong>"Your"</strong> means the individual accessing or using the <strong>"Service"</strong>.<br>
</section>
<a class="back-to-top" href="./#top" aria-label="Back to top of page">Back to Top</a>
<hr>
<section id="data-collection">
<h2>What Information I Collect</h2>
<p>I collect information that you voluntarily provide to me when you express an interest in obtaining information about my Services or otherwise contact me. The personal information I collect includes:</p>
<ul>
<li>First name and last name</li>
<li>Phone number</li>
<li>Email address</li>
<li>Preferred contact method</li>
<li>Organization</li>
<li>Your message</li>
</ul>
<p>I may also collect certain technical information automatically, such as the date and time when a form is submitted, for the purpose of diagnostics and usage analysis.</p>
<p class="highlight-statement">I do not collect any information from third parties.<br>
I do not collect or process sensitive personal information.</p>
</section>
<a class="back-to-top" href="./#top" aria-label="Back to top of page">Back to Top</a>
<hr>
<section id="data-use">
<h2>How I Use Your Personal Data</h2>
<p>I process your personal information for a variety of reasons, including:</p>
<ul>
<li>To respond to inquiries and provide support</li>
<li>To deliver and facilitate the services you request</li>
<li>To maintain records of communication for continuity</li>
<li>To prevent spam or abuse</li>
<li>To comply with legal obligations, if necessary</li>
</ul>
<p>I do not sell, rent, or share your personal information with any third parties. I may disclose information only when required by law (such as a subpoena or legal process).</p>
</section>
<section id="no-tracking">
<h2>No Cookies or Tracking</h2>
<p>My website does not use cookies, tracking scripts, or analytics services. Your visit to my site is not monitored or tracked.</p>
</section>
<section id="data-retention">
<h2>How Long I Keep Your Information</h2>
<p>I will only keep your personal information for as long as is necessary for the purposes described in this Privacy Policy. No purpose in this notice will require me to keep your personal information for longer than 1 year.</p>
<p>When I no longer have a legitimate reason to process your data, I will delete it or securely store it until it can be deleted.</p>
</section>
<section id="data-protection">
<h2>How I Protect Your Information</h2>
<p>I have implemented reasonable technical and organizational security measures to protect your personal data. Your information is transmitted from the contact form using HTTPS encryption, which is enforced by default on this .dev domain.</p>
<p>Submitted data undergoes multiple security checks to prevent spam and abuse, including the use of hCaptcha and rate limiting to verify the user is a human and minimize the risk of unauthorized access to stored data. The data is also validated and sanitized to ensure its integrity before it is stored in my database.</p>
<p>However, security is an ongoing practice, and no method of electronic transmission or storage is ever absolutely secure. While I strive to protect your data, I cannot guarantee its absolute security.</p>
</section>
<a class="back-to-top" href="./#top" aria-label="Back to top of page">Back to Top</a>
<hr>
<section id="privacy-rights">
<h2>Your Privacy Rights</h2>
<p>You have the right to:</p>
<ul>
<li>Request access to the personal data I hold about you</li>
<li>Request corrections to inaccurate information</li>
<li>Request deletion of your personal data</li>
</ul>
<p>If I decline your request for legal or other reasons, you may contact me to appeal the decision. I will respond with the reason for my decision.</p>
</section>
<section id="policy-changes">
<h2>Changes to This Privacy Policy</h2>
<p>I may update this Privacy Policy from time to time. When I do, I will update the "Last updated" date at the top of this page. If I make material changes, I will post a notice on the Website. I encourage you to review this policy periodically to stay informed.</p>
</section>
<section id="contact">
<h2>How to Contact Me</h2>
<p>If you have any questions about this Privacy Policy or wish to exercise your privacy rights, you can contact me:</p>
<ul>
<li>By email: <a href="mailto:contact@dlseitz.dev">contact@dlseitz.dev</a></li>
<li>Or via the contact form on my website: <a href="https://dlseitz.dev/about/#contact" target="_blank" rel="noopener noreferrer">https://dlseitz.dev/about/#contact</a></li>
</ul>
</section>
<a class="back-to-top" href="./#top" aria-label="Back to top of page">Back to Top</a>
</div>

17
src/styles/index.css
View File

@@ -35,6 +35,7 @@ body {
.intro p {
font-size: 1.1em;
font-weight: 600;
color: #495057;
}
/*? ↓  Start Benefits Section  ↓ */
@@ -135,13 +136,17 @@ body {
}
.transition p:first-child {
font-size: 1.3em;
font-size: 1.1em;
}
.transition p:last-child {
font-size: 1.4rem;
font-size: 1.1rem;
}
.thrive {
color: #ca6e0b;
font-size: 1.2em;
}
/*? ↓  Start Services Container  ↓ */
.services-section.module {
@@ -164,7 +169,7 @@ body {
.accordion-container p {
font-weight: 600;
color: #333333;
color: #495057;
}
.accordion {
@@ -209,7 +214,7 @@ body {
box-shadow: none;
margin-bottom: 15px;
font-size: 1.3em;
color: #333333;
color: #495057;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease;
@@ -226,7 +231,7 @@ body {
transition: max-height 0.3s ease;
background-color: #ffffff;
padding: 0 15px;
color: #333333;
color: #495057;
}
.accordion-content ul {
@@ -237,7 +242,7 @@ body {
.accordion-content li {
padding: 10px;
color: #333333;
color: #495057;
}
.hover-list {

120
src/styles/privacy.css Normal file
View File

@@ -0,0 +1,120 @@
/* privacy.css */
/* Sets the background color for this page */
body {
background: linear-gradient(to bottom, #9FB8CC 0%, #DAE4F0 30%, #ffffff 50%, #DAE4F0 70%, #9FB8CC 100%);
font-family: var(--font-family-body);
}
/* Styles the main container that holds the content */
.module {
margin: var(--margin-medium) auto;
padding: var(--padding-large);
max-width: 900px;
box-shadow: var(--shadow-large);
background-color: var(--light-bg-color);
border-radius: 15px;
border: 1px solid #7B8899;
}
/* Styles the primary heading */
h1 {
color: var(--text-color);
text-align: center;
font-size: 2.5em;
margin-bottom: var(--margin-small);
}
/* Styles the secondary headings within sections */
h2 {
color: var(--primary-color);
font-size: 1.8em;
margin-top: var(--margin-medium);
margin-bottom: var(--margin-small);
text-align: center;
}
/* General paragraph and list item styles */
.module p,
.module li {
color: var(--text-color);
line-height: 1.6;
margin-bottom: var(--margin-small);
text-align: left;
margin-left: 30px;
margin-right: 30px;
}
/* Emphasizes strong text and headers for readability */
strong {
color: var(--primary-color);
}
/* Styles all links on the page */
a {
color: var(--secondary-color);
text-decoration: none;
transition: color 0.3s ease;
}
/* Defines the hover state for all links */
a:hover {
color: var(--primary-color);
text-decoration: underline;
}
/* Defines the style for the horizontal rule element */
hr {
border: none;
height: 1px;
background-color: var(--medium-gray-color);
margin: var(--margin-large) 0;
}
/* Styles the Table of Contents container */
.toc {
border-left: 3px solid var(--secondary-color);
padding-left: 15px;
margin-left: auto;
margin-right: auto;
text-align: center;
width: fit-content;
}
.toc ul {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.toc li {
padding: 2px 0;
padding-left: 10px;
margin: 0;
}
.highlight-statement {
color: var(--primary-color);
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
/* Styles the "Back to Top" link */
.back-to-top {
display: block;
text-align: center;
margin: var(--margin-large) 0;
font-size: 0.9em;
font-weight: bold;
color: var(--dark-gray-color);
text-decoration: underline;
transition: color 0.3s ease;
}
/* Styles the hover state for the "Back to Top" link */
.back-to-top:hover {
color: var(--primary-color);
text-decoration: none;
}