added font
This commit is contained in:
BIN
static/ethnocentric.otf
Normal file
BIN
static/ethnocentric.otf
Normal file
Binary file not shown.
@@ -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
59
static/style.css
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user