added font

This commit is contained in:
2026-01-16 00:20:32 -05:00
parent 7e5db6b233
commit 4af1325ad6
6 changed files with 237 additions and 31 deletions

BIN
static/ethnocentric.otf Normal file
View File

Binary file not shown.

View File

@@ -1,32 +1,50 @@
<!doctype html>
<html lang="en">
<head>
<head>
<link rel="stylesheet" href="/static/style.css"
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css"
</head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap" rel="stylesheet">
</head>
<body>
<div class="align-right card">
<p id="HeyIm">Hey! My name is</p>
<span use:animateTyping={["Jeremy Janella "]} id="jeremymaxxing"></span>
<p style="padding: 12px;">
An experienced cybersecurity analyst and full stack developer with a
certificate in penetration testing.
<span style="color: orangered;">Co-Op Computer Science Student</span> at
the <span style="color: orangered;"> University of Toronto</span> specializing
in Software Engineering, with a major in statistics and minor in astrophysics.
Active in CTFs, hackathons, programming competitions, and developing a videogame.
</p>
<p>
This site is still being ported! More of my projects are listed on my <a
href="./resume.pdf">resume</a
>
</p>
<!-- <p>Computer nerd, gamer, mountain biker, adventurer, hard sci-fi enjoyer, ethics enjoyer, swimmer, jumper</p> -->
</div>
<header>
<nav>
<ul>
<li>Posts</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div>
<p id="name">Jeremy Janella</p>
<h3>About me</h3>
<!-- <p>Computers, mountain bikes, adventurer, hard sci-fi enjoyer, ethics, swimming, jumper</p> -->
</div>
</body>
</html>
<div id="Game" class="align-left card">
<!-- <div id="Game" class="align-left card">
<h1>Game Development</h1>
<div style="float: right; padding: 20px; width: 10vw;">
<img
@@ -356,6 +374,4 @@
students, as well as providing direction for first year students within
the programs.
</p>
</div>
</body>
</html>
</div> -->

59
static/style.css Normal file
View File

@@ -0,0 +1,59 @@
@font-face {
font-family: 'Ethnocentric';
src: url('/static/ethnocentric.otf') format('opentype');
font-weight: normal;
font-style: normal;
font-display: swap; /* Shows fallback font until custom font loads */
}
header {
background-color: transparent; /* Light grey background */
border-bottom: 1px solid #ddd;
padding: 1rem 1rem;
}
nav {
display: flex; /* Aligns logo and menu horizontally */
justify-content: space-between; /* Pushes logo to left, menu to right */
align-items: center;
max-width: 1000px;
margin: 0 auto; /* Centers the header content */
}
nav ul {
list-style: none; /* Removes bullet points */
display: flex;
gap: 20px; /* Space between links */
margin: 0;
padding: 0;
}
#name {
font-size: 3rem;
margin: 20px;
padding: 0px;
text-shadow:
1px 1px orangered,
2px 2px yellow,
3px 3px green,
4px 4px cornflowerblue;
letter-spacing: 2px;
width: fit-content;
color: whitesmoke;
font-family: "Ethnocentric", sans-serif;
}
nav a {
text-decoration: none;
color: #333;
font-family: sans-serif;
}
nav a:hover {
color: #007bff; /* Changes color when you hover */
}
body {
background-color: #111;
}