Skip to content

Commit f21280d

Browse files
aidandhaidandh
committed
new webiste
1 parent f7fecdc commit f21280d

File tree

9 files changed

+140
-67
lines changed

9 files changed

+140
-67
lines changed

‎404.html

-13
This file was deleted.

‎img/favicon.ico

-13.9 KB
Binary file not shown.

‎img/icons/mail.svg renamed to ‎img/icons/email.svg

+1-1
Loading

‎img/icons/github.svg

+1-1
Loading

‎img/icons/linkedin.svg

+1-1
Loading

‎index.html

+28-15
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,33 @@
11
<!DOCTYPE html>
22

33
<html lang="en">
4-
<head>
5-
<link rel="stylesheet" href="styles.css">
6-
<title>Aidan Hert</title>
7-
<link rel="icon" type="image/x-icon" href="/img/favicon.ico">
8-
</head>
94

10-
<body>
11-
<div id="centered">
12-
<h1 id="name">Aidan Hert</h1>
13-
<div id="icons">
14-
<a href="mailto:[email protected]" target="_blank"><img src="img\icons\mail.svg" alt="Email"></a>
15-
<a href="https://www.linkedin.com/in/aidan-hert/" target="_blank"><img src="img\icons\linkedin.svg" alt="LinkedIn"></a>
16-
<a href="https://github.com/aidandh" target="_blank"><img src="img\icons\github.svg" alt="GitHub"></a>
17-
</div>
5+
<head>
6+
<title>Aidan Hert</title>
7+
<link rel="stylesheet" type="text/css" href="style.css">
8+
<link rel="icon" type="image/png" href="img/favicon.ico">
9+
<script src="script.js" async></script>
10+
</head>
11+
12+
<body class="light">
13+
<div id="light-mode-selector-container">
14+
<svg id="light-mode" class="light-mode-selector light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/></svg>
15+
<svg id="dark-mode" class="light-mode-selector light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"/></svg>
16+
</div>
17+
<div id="main">
18+
<h1 id="name">Aidan Hert</h1>
19+
<div id="icon-row">
20+
<a class="icon-link" href="mailto:[email protected]" target="_blank">
21+
<svg class="icon light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>
22+
</a>
23+
<a class="icon-link" href="https://www.linkedin.com/in/aidan-hert/" target="_blank">
24+
<svg class="icon light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
25+
</a>
26+
<a class="icon-link" href="https://github.com/aidandh" target="_blank">
27+
<svg class="icon light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
28+
</a>
1829
</div>
19-
</body>
20-
</html>
30+
</div>
31+
</body>
32+
33+
</html>

‎script.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
let lightMode = true;
2+
const lightModeSelectorContainer = document.getElementById('light-mode-selector-container');
3+
lightModeSelectorContainer.addEventListener('click', () => {
4+
const styledElements = [...document.getElementsByClassName(lightMode ? 'light' : 'dark')];
5+
for (const element of styledElements) {
6+
element.classList.remove(lightMode ? 'light' : 'dark');
7+
element.classList.add(lightMode ? 'dark' : 'light');
8+
}
9+
lightMode = !lightMode;
10+
});

‎style.css

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
2+
3+
html {
4+
box-sizing: border-box;
5+
}
6+
7+
*,
8+
*:before,
9+
*:after {
10+
box-sizing: inherit;
11+
}
12+
13+
html, body {
14+
margin: 0;
15+
padding: 0;
16+
height: 100%;
17+
font-family: 'Roboto', sans-serif;
18+
transition: all 0.3s ease;
19+
}
20+
21+
.light {
22+
background-color: #f9f9f9;
23+
color: #272727;
24+
}
25+
26+
.dark {
27+
background-color: #222831;
28+
color: #eeeeee;
29+
}
30+
31+
#main {
32+
display: flex;
33+
flex-direction: column;
34+
align-items: center;
35+
justify-content: center;
36+
height: 100vh;
37+
font-size: xx-large;
38+
}
39+
40+
.light-mode-selector {
41+
width: 1em;
42+
height: 1em;
43+
position: absolute;
44+
top: 1em;
45+
right: 1em;
46+
width: 2em;
47+
height: 2em;
48+
transition: all 0.3s ease;
49+
background-color: transparent;
50+
}
51+
52+
.light-mode-selector.light {
53+
fill: #272727;
54+
}
55+
56+
#light-mode.dark {
57+
display: none;
58+
}
59+
60+
#dark-mode.light {
61+
display: none;
62+
}
63+
64+
.light-mode-selector.dark {
65+
fill: #eeeeee;
66+
}
67+
68+
.light-mode-selector:hover {
69+
transform: scale(1.2);
70+
cursor: pointer;
71+
}
72+
73+
#name {
74+
font-size: 3em;
75+
}
76+
77+
.icon {
78+
width: 3em;
79+
height: 3em;
80+
margin-right: 0.5em;
81+
margin-left: 0.5em;
82+
transition: all 0.3s ease;
83+
}
84+
85+
.icon.light {
86+
fill: #272727;
87+
}
88+
89+
.icon.dark {
90+
fill: #eeeeee;
91+
}
92+
93+
.icon:hover {
94+
transform: scale(1.2);
95+
}
96+
97+
.icon-link {
98+
text-decoration: none;
99+
}

‎styles.css

-36
This file was deleted.

0 commit comments

Comments
 (0)