Skip to content

Commit 0bf9eb0

Browse files
TheQuantifierTheQuantifier
committed
Added first itis3135 site and connected it to homepage
1 parent df1dac3 commit 0bf9eb0

9 files changed

Lines changed: 278 additions & 2 deletions

File tree

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@
102102
</head>
103103
<body>
104104
<header>
105-
<h1>Iohannes Manus</h1>
105+
<h1>John Hand</h1>
106106
<p class="tagline">UNC Charlotte Mathematics major • Interactive Programming minor </p>
107107
</header>
108108

‎itis3135/.DS_Store‎

2 KB
Binary file not shown.

‎itis3135/contract.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>John Hand – ITIS 3135 – Course Contract</title>
7+
<!-- Accumulus (required) -->
8+
<script src="https://lint.page/kit/4d0fe3.js" crossorigin="anonymous"></script>
9+
<link rel="stylesheet" href="styles/default.css" />
10+
<script src="scripts/main.js" defer></script>
11+
</head>
12+
<body>
13+
<header>
14+
<h1>ITIS 3135 • John Hand</h1>
15+
<p class="tagline">Course Contract</p>
16+
</header>
17+
18+
<main>
19+
<h2>Contract</h2>
20+
<p>
21+
I, John A. Hand agree to abide by the terms of the course contract in my Fall 2025,
22+
ITIS3135, Web-Based Application Design & Development with my instructor, Professor D.I. von Briesen. I understand that all
23+
work that I do on publicly available online tools will be available to the world, and will not
24+
put information there that is inappropriate for schoolwork, or that I wish to keep private. I
25+
also understand that it is my work that counts for attendance, not logins or showing up for
26+
class. As such, failure to turn in assignments may show as absences. I also understand that
27+
given the structure and content of this class it’s possible to find many examples online or
28+
even view my classmates’ code directly. I swear that I will only use these resources to learn,
29+
and will not cut and paste code except where I have properly given credit (i.e. external
30+
libraries) and never from my classmates.
31+
</p>
32+
33+
<p class="signature"><em>
34+
Signed: John Alexander Hand, 02/09/2025 — Fall 2025, ITIS 3135, Web-Based Application Design & Development
35+
</em></p>
36+
</main>
37+
38+
<footer>
39+
<nav class="site-nav" aria-label="Site menu">
40+
<a href="index.html">Home</a>
41+
<span class="sep">|</span>
42+
<a href="introduction.html">Introduction</a>
43+
<span class="sep">|</span>
44+
<a href="contract.html" aria-current="page">Contract</a>
45+
</nav>
46+
<p class="built-by">Page built by <a href="index.html">John Hand</a></p>
47+
<p class="copyright">John Hand ©2025</p>
48+
</footer>
49+
</body>
50+
</html>

‎itis3135/images/profile.jpeg‎

248 KB
Loading

‎itis3135/index.html‎

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,59 @@
1-
<h1>I am John Hand and this is my ITIS3135 First Course Page </h1>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>John Hand – ITIS 3135 – Course Home</title>
7+
<!-- Accumulus (required) -->
8+
<script src="https://lint.page/kit/4d0fe3.js" crossorigin="anonymous"></script>
9+
<!-- Site CSS -->
10+
<link rel="stylesheet" href="styles/default.css" />
11+
<!-- Course JS (kept external to satisfy rubric) -->
12+
<script src="scripts/main.js" defer></script>
13+
</head>
14+
<body>
15+
<header>
16+
<h1>ITIS 3135 • John Hand</h1>
17+
<p class="tagline">Course Home</p>
18+
</header>
19+
20+
<main>
21+
<h2>Welcome</h2>
22+
<p>
23+
This is the home page for my ITIS 3135 course site. Use the links in the footer to
24+
navigate to my Introduction and Course Contract pages. This site is separate from my
25+
personal home page and focuses only on course content and requirements.
26+
</p>
27+
28+
<section aria-labelledby="quick-links">
29+
<h3 id="quick-links">Quick Links</h3>
30+
<ul>
31+
<li><a href="introduction.html">Introduction</a></li>
32+
<li><a href="contract.html">Course Contract</a></li>
33+
<li><a href="../">Back to my main CLT Web home</a></li>
34+
</ul>
35+
</section>
36+
</main>
37+
38+
<footer>
39+
<nav class="site-nav" aria-label="Site menu">
40+
<a href="index.html">Home</a>
41+
<span class="sep">|</span>
42+
<a href="introduction.html">Introduction</a>
43+
<span class="sep">|</span>
44+
<a href="contract.html">Contract</a>
45+
<span class="sep">|</span>
46+
<a href="https://webpages.charlotte.edu/jhand12/" target="_blank" rel="noopener">CLT Web</a>
47+
<span class="sep">|</span>
48+
<a href="https://thequantifier.github.io/" target="_blank" rel="noopener">GitHub.io</a>
49+
<span class="sep">|</span>
50+
<a href="https://github.com/TheQuantifier" target="_blank" rel="noopener">GitHub</a>
51+
</nav>
52+
53+
<p class="built-by">
54+
Page built by <a href="index.html">John Hand</a>
55+
</p>
56+
<p class="copyright">John Hand ©2025</p>
57+
</footer>
58+
</body>
59+
</html>

‎itis3135/introduction.html‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>John Hand – ITIS 3135 – Introduction</title>
7+
<!-- Accumulus (required) -->
8+
<script src="https://lint.page/kit/4d0fe3.js" crossorigin="anonymous"></script>
9+
<link rel="stylesheet" href="styles/default.css" />
10+
<script src="scripts/main.js" defer></script>
11+
</head>
12+
<body>
13+
<header>
14+
<h1>ITIS 3135 • John Hand</h1>
15+
<p class="tagline">Introduction</p>
16+
</header>
17+
18+
<main>
19+
<h2>About Me</h2>
20+
21+
<figure class="profile">
22+
<img src="images/profile.jpeg" alt="Portrait of John Hand" />
23+
<figcaption>John Hand</figcaption>
24+
</figure>
25+
26+
<section aria-labelledby="name-top">
27+
<h3 id="name-top">Name</h3>
28+
<p>John Alexander Hand (Preferred: Iohannes Manus)</p>
29+
</section>
30+
31+
<section aria-labelledby="personal-bg">
32+
<h3 id="personal-bg">Personal Background</h3>
33+
<p>
34+
I enjoy building clean web pages, prototyping simple games, and spending time outdoors.
35+
When I’m not coding, you’ll probably find me hiking, swimming, or digging into a good
36+
conversation about math or design.
37+
</p>
38+
</section>
39+
40+
<section aria-labelledby="professional-bg">
41+
<h3 id="professional-bg">Professional Background</h3>
42+
<p>
43+
I’ve held several campus roles (e.g., RA and student leadership positions) and regularly
44+
tutor math. I focus on organization, clarity, and creating helpful resources for others.
45+
</p>
46+
</section>
47+
48+
<section aria-labelledby="academic-bg">
49+
<h3 id="academic-bg">Academic Background</h3>
50+
<p>
51+
B.S. in Mathematics (in progress) at UNC Charlotte. Coursework includes Calculus I–III,
52+
Linear Algebra, Differential Equations, and more applied work in computing and design.
53+
</p>
54+
</section>
55+
56+
<section aria-labelledby="course-bg">
57+
<h3 id="course-bg">Background in this Course</h3>
58+
<p>
59+
I’m taking ITIS 3135 to strengthen practical web skills—clean HTML, accessible CSS,
60+
and straightforward site structure that looks good and is easy to maintain.
61+
</p>
62+
</section>
63+
64+
<section aria-labelledby="platform">
65+
<h3 id="platform">Primary Computer Platform</h3>
66+
<p>Apple MacBook Air (M3, 2024) – macOS; I typically work from my dorm.</p>
67+
</section>
68+
69+
<section aria-labelledby="courses">
70+
<h3 id="courses">Courses I’m Taking</h3>
71+
<ul>
72+
<li>ITIS 3135 – Web-Based Application Design & Development</li>
73+
<li>Upper-division Mathematics courses</li>
74+
<li>Honors coursework</li>
75+
</ul>
76+
</section>
77+
78+
<section aria-labelledby="story">
79+
<h3 id="story">A Funny/Interesting Story</h3>
80+
<p>
81+
I once spent hours tuning a game character’s walk cycle, only to realize the real issue
82+
was that the sun in the scene was pointing straight down. The fix? Rotate the sun.
83+
</p>
84+
</section>
85+
86+
<section aria-labelledby="something-else">
87+
<h3 id="something-else">Something Else to Share</h3>
88+
<p>
89+
I like systems that age well—simple CSS, semantic HTML, and small, readable files.
90+
</p>
91+
</section>
92+
</main>
93+
94+
<footer>
95+
<nav class="site-nav" aria-label="Site menu">
96+
<a href="index.html">Home</a>
97+
<span class="sep">|</span>
98+
<a href="introduction.html" aria-current="page">Introduction</a>
99+
<span class="sep">|</span>
100+
<a href="contract.html">Contract</a>
101+
</nav>
102+
<p class="built-by">Page built by <a href="index.html">Manus Design Co.</a></p>
103+
<p class="copyright">Manus Design Co. ©2025</p>
104+
</footer>
105+
</body>
106+
</html>

‎itis3135/scripts/main.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
//Intentionally blank

‎itis3135/styles/default.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/* Base layout */
2+
:root {
3+
--bg: #f8fafc;
4+
--card: #ffffff;
5+
--ink: #111827;
6+
--muted: #6b7280;
7+
--link: #2563eb;
8+
--ring: rgba(37, 99, 235, 0.35);
9+
--maxw: 920px;
10+
}
11+
12+
html, body { height: 100%; }
13+
14+
body {
15+
margin: 0 auto;
16+
max-width: var(--maxw);
17+
width: 92%;
18+
background: var(--bg);
19+
color: var(--ink);
20+
font: 16px/1.65 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
21+
Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
22+
}
23+
24+
header, main, footer {
25+
background: var(--card);
26+
border-radius: 14px;
27+
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
28+
padding: 1.25rem;
29+
margin: 1rem 0;
30+
}
31+
32+
h1 {
33+
margin: 0 0 0.25rem 0;
34+
font-size: clamp(1.6rem, 3vw, 2rem);
35+
font-weight: 800;
36+
}
37+
38+
.tagline { color: var(--muted); margin: 0.15rem 0 0; font-size: 0.95rem; }
39+
40+
h2 { margin-top: 0; font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
41+
42+
h3 { margin-top: 1.1rem; font-size: 1.05rem; }
43+
44+
p { margin: 0 0 0.9rem; }
45+
46+
ul { padding-left: 1.2rem; }
47+
48+
img { max-width: 100%; height: auto; border-radius: 10px; }
49+
50+
.profile { margin: 0 0 1rem; }
51+
52+
/* Links */
53+
a { color: var(--link); text-decoration: none; }
54+
a:hover { text-decoration: underline; }
55+
a:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
56+
57+
/* Footer */
58+
.site-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; justify-content: center; font-weight: 600; }
59+
.sep { color: var(--muted); }
60+
.built-by, .copyright { text-align: center; color: var(--muted); margin: 0.4rem 0 0; }
61+
.signature { margin-top: 1rem; }

0 commit comments

Comments
 (0)