111 lines
5.4 KiB
HTML
111 lines
5.4 KiB
HTML
<!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.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. -->
|
|
<!-- ↓ 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>
|
|
<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">
|
|
<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> |