Skip to content

Commit

Permalink
Add About page, Contact page, images, global and per page styling, li…
Browse files Browse the repository at this point in the history 
…ght and dark theme, and form validation
  • Loading branch information
@alexbates
alexbates committed Feb 29, 2024
1 parent 397a6e8 commit 729e4c3
Show file tree
Hide file tree
Showing 31 changed files with 65,220 additions and 23 deletions.
152 changes: 152 additions & 0 deletions about/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Control size of viewport, prevent zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alex Bates - About</title>
<!-- Link a stylesheet that applies sitewide as well as one that is page specific -->
<link href="../stylesheets/global.css" rel='stylesheet' type='text/css'>
<link href="../stylesheets/about.css" rel='stylesheet' type='text/css'>
<!-- Import externally hosted Merriweather font family -->
<link href="https://fonts.googleapis.com/css2?family=Annapurna+SIL:wght@400;700&family=Fredoka:[email protected]&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
<!-- Wait until DOM is loaded until loading scripts -->
<script defer src="../scripts/global.js"></script>
</head>
<body>

<header class="navbar">
<!-- Create a container that is centered on screens wider than 1200px -->
<div class="navbarinner">
<!-- Hamburger nav menu that only displays on mobile devices -->
<nav class="mobilemenu">
<!-- Create hidden checkbox that is used to open and close menu -->
<input id="hiddencheckbox" type="checkbox" />
<label class="mobilemenubtn" for="hiddencheckbox">
<span></span>
</label>
<ul class="mobilemenubox">
<li><a class="mobilemenuitem" href="#">Home</a></li>
<li><a class="mobilemenuitem" href="#">About</a></li>
<li><a class="mobilemenuitem" href="#">Contact</a></li>
<!-- Github link that opens in new tab when clicked -->
<li><a class="mobilemenuitem mobilegithub" href="https://github.com/alexbates/" target="_blank">
Github
<!-- Credits to Flowbite for the Link icon https://flowbite.com/icons/ -->
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.2 9.8a3.4 3.4 0 0 0-4.8 0L5 13.2A3.4 3.4 0 0 0 9.8 18l.3-.3m-.3-4.5a3.4 3.4 0 0 0 4.8 0L18 9.8A3.4 3.4 0 0 0 13.2 5l-1 1"/>
</svg>
</a></li>
</ul>
</nav>
<!-- Logo image that displays at left of navbar on desktop and center on mobile -->
<img class="logo" alt="Alex Bates">
<div class="themeselector">
<!-- Create hidden checkbox that is used to switch between themes -->
<input type="checkbox" class="checkbox" id="checkbox">
<!-- Use a label that acts a button to toggle the checkbox -->
<label for="checkbox" class="checkbox-label">
<span class="ts-sun">☀</span>
<span class="ts-moon">☽</span>
<span class="ball"></span>
</label>
</div>
<!-- Site navigation that only appears on screens wider than 600px -->
<nav class="desktopnav">
<div class="github">
<a href="https://github.com/alexbates/">
<!-- Credits to Flowbite for the Github icon https://flowbite.com/icons/ -->
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 2c-2.4 0-4.7.9-6.5 2.4a10.5 10.5 0 0 0-2 13.1A10 10 0 0 0 8.7 22c.5 0 .7-.2.7-.5v-2c-2.8.7-3.4-1.1-3.4-1.1-.1-.6-.5-1.2-1-1.5-1-.7 0-.7 0-.7a2 2 0 0 1 1.5 1.1 2.2 2.2 0 0 0 1.3 1 2 2 0 0 0 1.6-.1c0-.6.3-1 .7-1.4-2.2-.3-4.6-1.2-4.6-5 0-1.1.4-2 1-2.8a4 4 0 0 1 .2-2.7s.8-.3 2.7 1c1.6-.5 3.4-.5 5 0 2-1.3 2.8-1 2.8-1 .3.8.4 1.8 0 2.7a4 4 0 0 1 1 2.7c0 4-2.3 4.8-4.5 5a2.5 2.5 0 0 1 .7 2v2.8c0 .3.2.6.7.5a10 10 0 0 0 5.4-4.4 10.5 10.5 0 0 0-2.1-13.2A9.8 9.8 0 0 0 12 2Z" clip-rule="evenodd"/>
</svg>
</a>
</div>
<!-- An unordered list contains links to other pages -->
<ul class="navlist">
<li><span><a href="/home/">Home</a></span></li><li class="active"><span>About</span></li><li><span><a href="/about/">Contact</a></span></li>
</ul>
</nav>
</div>
</header>
<main>
<!-- Division containing first paragraph -->
<div class="block1">
<!-- division has fixed width and is centered on screens wider than 1200px -->
<div class="b1inner">
<!-- A photo of myself with name positioned below -->
<div class="b1left">
<img src="../images/alexbates.jpg" alt="Alex Bates">
<span>Alex Bates</span>
</div>
<div class="b1right">
<!-- A section contains a heading and paragraph -->
<section class="b1text">
<h1>About Me</h1>
<p>
My name is Alex Bates and I'm from Smyrna, GA.
I'm a student at Kennesaw State University where I'm studying Information Technology.
Since my childhood, I have been drawn to the world of technology, the satisfaction of building things, and the endless possibilities that technology presents.
I enjoy working with computers, configuring and managing servers, designing websites and web apps, and engaging in woodworking and electrical projects.
</p>
</section>
</div>
</div>
</div>
<!-- Division containing second paragraph -->
<div class="block2">
<!-- division has fixed width and is centered on screens wider than 1200px -->
<div class="b2inner">
<div class="b2left">
<!-- A section contains a heading and nested unordered lists -->
<section class="b2text">
<h1>Skills</h1>
<ul class="ulouter">
<li>Building computers and installing operating systems</li>
<li>
Programming
<ul class="ulinner">
<li>HTML</li>
<li>CSS</li>
<li>Javascript and jQuery</li>
<li>Python and Flask Framework</li>
<li>C#</li>
</ul>
</li>
<li>Working with hypervisors (VMWare ESXi and Proxmox)</li>
<li>Navigating and configuring Linux</li>
<li>Shell scripting</li>
</ul>
</section>
</div>
<!-- Right aligned division contains image of homelab with description positioned below -->
<div class="b2right">
<img src="../images/homelab.jpg" alt="My Homelab">
<span>My Homelab</span>
</div>
</div>
</div>
<!-- Division containing third paragraph -->
<div class="block3">
<!-- division has fixed width and is centered on screens wider than 1200px -->
<div class="b3inner">
<!-- A section contains a heading and paragraphs -->
<section class="b3text">
<h1>Projects and Experience</h1>
<p>
A few of the websites I've designed include <a href="https://www.valuconsulting.com" >ValuConsulting</a> and <a href="http://bates.gg/archive/whitefieldtroop554.org/">Boy Scout Troop 554</a>.
In 2023, I began developing a fully-featured, open source recipe manager web app called Tamari.
It features user accounts, organization and search, an explore page with 36,000 recipes, shopping lists, a meal planner, customizability, and responsive design.
</p>
<p>
I have setup file servers for two companies.
The companies needed file servers that could be shared between multiple employees and mounted as a letter drive in Windows File Explorer.
I achieved this using Linux on the servers and SFTP software on the Windows clients.
I wrote custom scripts to automate daily, weekly, and monthly backups to USB hard drives, detailed logging, email notifications in the event of backup failure, deletion of old backups when disk space is low, and updating of Dynamic DNS.
</p>
</section>
</div>
</div>
</main>

</body>
</html>
118 changes: 118 additions & 0 deletions contact/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Control size of viewport, prevent zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alex Bates - Contact</title>
<!-- Link a stylesheet that applies sitewide as well as one that is page specific -->
<link href="../stylesheets/global.css" rel='stylesheet' type='text/css'>
<link href="../stylesheets/contact.css" rel='stylesheet' type='text/css'>
<!-- Import externally hosted Merriweather font family -->
<link href="https://fonts.googleapis.com/css2?family=Annapurna+SIL:wght@400;700&family=Fredoka:[email protected]&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
<!-- Wait until DOM is loaded until loading scripts -->
<script defer src="../scripts/global.js"></script>
<script defer src="../scripts/contact.js"></script>
</head>
<body>

<header class="navbar">
<!-- Create a container that is centered on screens wider than 1200px -->
<div class="navbarinner">
<!-- Hamburger nav menu that only displays on mobile devices -->
<nav class="mobilemenu">
<!-- Create hidden checkbox that is used to open and close menu -->
<input id="hiddencheckbox" type="checkbox" />
<label class="mobilemenubtn" for="hiddencheckbox">
<span></span>
</label>
<ul class="mobilemenubox">
<li><a class="mobilemenuitem" href="#">Home</a></li>
<li><a class="mobilemenuitem" href="#">About</a></li>
<li><a class="mobilemenuitem" href="#">Contact</a></li>
<!-- Github link that opens in new tab when clicked -->
<li><a class="mobilemenuitem mobilegithub" href="https://github.com/alexbates/" target="_blank">
Github
<!-- Credits to Flowbite for the Link icon https://flowbite.com/icons/ -->
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.2 9.8a3.4 3.4 0 0 0-4.8 0L5 13.2A3.4 3.4 0 0 0 9.8 18l.3-.3m-.3-4.5a3.4 3.4 0 0 0 4.8 0L18 9.8A3.4 3.4 0 0 0 13.2 5l-1 1"/>
</svg>
</a></li>
</ul>
</nav>
<!-- Logo image that displays at left of navbar on desktop and center on mobile -->
<img class="logo" alt="Alex Bates">
<div class="themeselector">
<!-- Create hidden checkbox that is used to switch between themes -->
<input type="checkbox" class="checkbox" id="checkbox">
<!-- Use a label that acts a button to toggle the checkbox -->
<label for="checkbox" class="checkbox-label">
<span class="ts-sun">☀</span>
<span class="ts-moon">☽</span>
<span class="ball"></span>
</label>
</div>
<!-- Site navigation that only appears on screens wider than 600px -->
<nav class="desktopnav">
<div class="github">
<a href="https://github.com/alexbates/">
<!-- Credits to Flowbite for the Github icon https://flowbite.com/icons/ -->
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 2c-2.4 0-4.7.9-6.5 2.4a10.5 10.5 0 0 0-2 13.1A10 10 0 0 0 8.7 22c.5 0 .7-.2.7-.5v-2c-2.8.7-3.4-1.1-3.4-1.1-.1-.6-.5-1.2-1-1.5-1-.7 0-.7 0-.7a2 2 0 0 1 1.5 1.1 2.2 2.2 0 0 0 1.3 1 2 2 0 0 0 1.6-.1c0-.6.3-1 .7-1.4-2.2-.3-4.6-1.2-4.6-5 0-1.1.4-2 1-2.8a4 4 0 0 1 .2-2.7s.8-.3 2.7 1c1.6-.5 3.4-.5 5 0 2-1.3 2.8-1 2.8-1 .3.8.4 1.8 0 2.7a4 4 0 0 1 1 2.7c0 4-2.3 4.8-4.5 5a2.5 2.5 0 0 1 .7 2v2.8c0 .3.2.6.7.5a10 10 0 0 0 5.4-4.4 10.5 10.5 0 0 0-2.1-13.2A9.8 9.8 0 0 0 12 2Z" clip-rule="evenodd"/>
</svg>
</a>
</div>
<!-- An unordered list contains links to other pages -->
<ul class="navlist">
<li><span><a href="/home/">Home</a></span></li><li><span><a href="/about/">About</a></span></li><li class="active"><span>Contact</span></li>
</ul>
</nav>
</div>
</header>
<main>
<!-- A fixed height division allows content to overflow, while still being contained within main -->
<div class="block1">
<!-- division has fixed width and is centered on screens wider than 1200px -->
<div class="maininner">
<!-- Appears on left side on desktop and top on mobile -->
<div class="mainleft">
<!-- Credits to Flowbite for the Mailbox icon https://flowbite.com/icons/ -->
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16v-5.5C11 8.5 9.4 7 7.5 7m3.5 9H4v-5.5C4 8.5 5.6 7 7.5 7m3.5 9v4M7.5 7H14m0 0V4h2.5M14 7v3m-3.5 6H20v-6a3 3 0 0 0-3-3m-2 9v4m-8-6.5h1"/>
</svg>
<h1>Reach Out</h1>
<h3>Use this form to send me an email.</h3>
</div>
<!-- Appears on right side on desktop and bottom on mobile -->
<div class="mainright">
<h2>Send Me a Message</h2>
<!-- Contact form labels describe the content of the inputs and text area -->
<!-- Form label spans are used for error messages and are empty except when validation fails -->
<!-- Form inputs, textarea, and spans use unique ids to enable manipulation with javascript -->
<form id="form" class="contactform">
<label for="name">Name <span id="errorname" class="errorspan"></span></label>
<input id="name" name="name" type="text">
<label for="email">Email <span id="erroremail" class="errorspan"></span></label>
<input id="email" name="email" type="text">
<label for="subject">Subject <span id="errorsubject" class="errorspan"></span></label>
<input id="subject" name="subject" type="text">
<label for="message"><span class="your">Your </span>Message <span id="errormessage" class="errorspan"></span></label>
<textarea rows="3" id="message" name="text"></textarea>
<!-- Form submit button consists of 'Send' text and icon contained within spans -->
<button type="submit">
<span class="btn-text">Send</span>
<span class="btn-icon">
<!-- Credits to Flowbite for the Paper Plane (send) icon https://flowbite.com/icons/ -->
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 2c.4 0 .8.3 1 .6l7 18a1 1 0 0 1-1.4 1.3L13 19.5V13a1 1 0 1 0-2 0v6.5L5.4 22A1 1 0 0 1 4 20.6l7-18a1 1 0 0 1 1-.6Z" clip-rule="evenodd"/>
</svg>
</span>
</button>
</form>
</div>
</div>
</div>
</main>

</body>
</html>
Binary file added fonts/Inter-Medium.eot
View file
Binary file not shown.
Binary file added fonts/Inter-Medium.otf
View file
Binary file not shown.
Loading

0 comments on commit 729e4c3

Please sign in to comment.