1- < a href = "itis3135/ "> Click to go to ITIS3135 Site</ a >
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 > Iohannes Manus | Personal Home Page</ title >
7+
8+ <!-- Required Accumulus Script -->
9+ < script src ="https://lint.page/kit/4d0fe3.js " crossorigin ="anonymous "> </ script >
10+
11+ <!-- Embedded CSS (required) -->
12+ < style >
13+ : root {
14+ --bg : # f7f7fb ;
15+ --ink : # 1f2937 ;
16+ --accent : # 2f6df6 ;
17+ --muted : # 6b7280 ;
18+ --card : # ffffff ;
19+ --ring : rgba (47 , 109 , 246 , 0.35 );
20+ --maxw : 900px ;
21+ }
22+
23+ html , body {
24+ height : 100% ;
25+ }
26+
27+ body {
28+ margin : 0 auto;
29+ max-width : var (--maxw );
30+ width : 92% ;
31+ background : var (--bg );
32+ color : var (--ink );
33+ font : 16 px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji" , "Segoe UI Emoji" ;
34+ }
35+
36+ header , main , footer {
37+ background : var (--card );
38+ border-radius : 14px ;
39+ box-shadow : 0 2px 12px rgba (0 , 0 , 0 , 0.06 );
40+ padding : 1.25rem ;
41+ margin : 1.1rem 0 ;
42+ }
43+
44+ h1 {
45+ margin : 0 0 0.25rem 0 ;
46+ font-size : clamp (1.6rem , 3vw , 2rem );
47+ font-weight : 800 ;
48+ }
49+
50+ .tagline {
51+ margin : 0.15rem 0 0 ;
52+ color : var (--muted );
53+ font-size : 0.975rem ;
54+ }
55+
56+ h2 {
57+ margin-top : 0 ;
58+ font-size : clamp (1.25rem , 2.2vw , 1.5rem );
59+ font-weight : 700 ;
60+ }
61+
62+ p { margin : 0 0 0.8rem ; }
63+
64+ a {
65+ color : var (--accent );
66+ text-decoration : none;
67+ }
68+ a : hover { text-decoration : underline; }
69+ a : focus-visible {
70+ outline : 3px solid var (--ring );
71+ outline-offset : 2px ;
72+ border-radius : 6px ;
73+ }
74+
75+ .footer-nav {
76+ display : flex;
77+ flex-wrap : wrap;
78+ gap : 0.5rem 0.9rem ;
79+ align-items : center;
80+ justify-content : center;
81+ margin-bottom : 0.6rem ;
82+ font-weight : 600 ;
83+ }
84+
85+ .sep { color : var (--muted ); }
86+
87+ .validators {
88+ display : flex;
89+ gap : 0.9rem ;
90+ justify-content : center;
91+ flex-wrap : wrap;
92+ font-size : 0.95rem ;
93+ }
94+
95+ .smallprint {
96+ margin-top : 0.75rem ;
97+ text-align : center;
98+ color : var (--muted );
99+ font-size : 0.9rem ;
100+ }
101+ </ style >
102+ </ head >
103+ < body >
104+ < header >
105+ < h1 > Iohannes Manus</ h1 >
106+ < p class ="tagline "> Mathematics major • Builder of clean, human-centered web experiences</ p >
107+ </ header >
108+
109+ < main >
110+ < h2 > Personal Home Page</ h2 >
111+
112+ < p >
113+ Welcome—this is my professional landing page. You can use the links below to reach my
114+ course work, public profiles, and hosted sites. I keep this page simple and distinct from
115+ specific class assignments so it remains an at-a-glance hub.
116+ </ p >
117+
118+ < p >
119+ I study mathematics at UNC Charlotte and enjoy applying structured thinking to real projects:
120+ from front-end web design and accessibility to game-development prototypes. I value readable
121+ code, thoughtful interfaces, and clear documentation.
122+ </ p >
123+ </ main >
124+
125+ < footer >
126+ < nav class ="footer-nav " aria-label ="Primary site links ">
127+ < a href ="https://github.com/TheQuantifier " target ="_blank " rel ="noopener "> GitHub.com</ a >
128+ < span class ="sep "> |</ span >
129+ < a href ="https://webpages.charlotte.edu/jhand12/ " target ="_blank " rel ="noopener "> CLT Web</ a >
130+ < span class ="sep "> |</ span >
131+ < a href ="https://thequantifier.github.io/ " target ="_blank " rel ="noopener "> GitHub.io</ a >
132+ < span class ="sep "> |</ span >
133+ < a href ="itis3135/ "> ITIS3135</ a >
134+ < span class ="sep "> |</ span >
135+ < a href ="https://www.linkedin.com/in/johnahand " target ="_blank " rel ="noopener "> LinkedIn</ a >
136+ </ nav >
137+
138+ < div class ="validators ">
139+ < a href ="https://validator.w3.org/nu/ " target ="_blank " rel ="noopener "> HTML Validator (W3C)</ a >
140+ < span class ="sep "> •</ span >
141+ < a href ="https://jigsaw.w3.org/css-validator/ " target ="_blank " rel ="noopener "> CSS Validator (W3C Jigsaw)</ a >
142+ </ div >
143+
144+ < p class ="smallprint "> © < span id ="year "> </ span > Iohannes Manus. All rights reserved.</ p >
145+ </ footer >
146+
147+ < script >
148+ document . getElementById ( 'year' ) . textContent = new Date ( ) . getFullYear ( ) ;
149+ </ script >
150+ </ body >
151+ </ html >
0 commit comments