Compare commits

...

10 Commits

Author SHA1 Message Date
7d7afcc1e2 Finish adding Aboutme, projects, and socials pages 2026-05-27 21:57:57 -05:00
2077195d2d create base page with card 2026-05-26 22:50:15 -05:00
878722ddd1 reset for v2 2026-05-25 22:22:07 -05:00
e292a0352d add icons functionality 2025-12-03 10:56:56 -06:00
6a2b7d7743 move html into assets 2025-12-03 10:08:21 -06:00
478d84b0be adjust file structure 2025-12-03 09:59:01 -06:00
70806b80ee bottom navigation functionality 2025-12-02 11:46:59 -06:00
8af6ee7cd5 load bottomnav from js 2025-12-02 10:22:42 -06:00
2d391dab21 create base page 2025-12-02 08:01:09 -06:00
240c4ba875 Add JetBrainsMono font 2025-12-02 08:01:03 -06:00
9 changed files with 226 additions and 0 deletions

31
aboutme.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me - Lucielle's Page</title>
<link rel="stylesheet" href="assets/css/global.css">
<link rel="stylesheet" href="assets/css/index.css">
<link rel="stylesheet" href="assets/css/links.css">
</head>
<body>
<main>
<span>Lucielle</span>
<p>I don't like to sugar coat things so I'm going to give it to you straight</p>
<p>
I'm Lucielle, I enjoy:
<ul>
<li>Software Development</li>
<li>Working with Embedded Systems</li>
<li>FPS Shooter games like CS:GO and Valorant</li>
</ul>
</p>
<p>I work well in groups and I love participating in challenges.</p>
</main>
<div id="links">
<a class="link" href="/">Home</a>
<a class="link" href="/projects.html">Projects</a>
<a class="link" href="/socials.html">Socials</a>
</div>
</body>
</html>

21
assets/css/global.css Normal file
View File

@@ -0,0 +1,21 @@
:root {
--bg-color: #302050;
--bg-highlight-color: #453075;
--outline: 4px #6040A0 solid;
--text-color: white;
--font: sans-serif;
color: var(--text-color);
background-color: var(--bg-color);
}
body {
margin: 0;
padding: 0;
display: flex;
gap: 16px;
height: 100dvh;
width: 100dvw;
align-items: center;
justify-content: center;
flex-direction: column;
}

25
assets/css/index.css Normal file
View File

@@ -0,0 +1,25 @@
main {
font-family: var(--font);
background: var(--bg-highlight-color);
display: flex;
padding: 16px;
margin-inline: 32px;
gap: 8px;
outline: var(--outline);
flex-direction: column;
}
main > span {
font-size: 32px;
text-align: center;
}
main > p {
margin: 0;
margin-top: 8px;
padding: 0;
}
main > ul {
margin: 0;
}

19
assets/css/links.css Normal file
View File

@@ -0,0 +1,19 @@
#links {
display: flex;
width: 288px;
gap: 16px;
}
#links > .link {
flex: 1;
font-family: var(--font);
text-decoration: none;
color: var(--text-color);
outline: var(--outline);
padding: 8px;
text-align: center;
}
#links > .link:hover {
background: var(--bg-highlight-color);
}

38
assets/css/projects.css Normal file
View File

@@ -0,0 +1,38 @@
main {
margin-inline: 32px;
display: flex;
justify-content: space-between;
gap: 32px;
padding: 32px;
outline: var(--outline);
flex-wrap: wrap;
background: var(--bg-highlight-color);
}
a.container {
background: var(--bg-color);
font-family: var(--font);
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
outline: var(--outline);
color: var(--text-color);
text-decoration: none;
}
a.container > .title {
font-size: 28px;
font-weight: 700;
}
a.container:hover > .title {
text-decoration: underline;
}
a.container > .description {
font-size: 18px;
}

BIN
favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 200 KiB

22
index.html Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main - Lucielle's Page</title>
<link rel="stylesheet" href="assets/css/global.css">
<link rel="stylesheet" href="assets/css/index.css">
<link rel="stylesheet" href="assets/css/links.css">
</head>
<body>
<main>
<img src="favicon.ico" alt="Website Logo" width="256px" height="256px">
<span>Lucielle</span>
</main>
<div id="links">
<a class="link" href="/aboutme.html">About Me</a>
<a class="link" href="/projects.html">Projects</a>
<a class="link" href="/socials.html">Socials</a>
</div>
</body>
</html>

35
projects.html Normal file
View File

@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects - Lucielle's Page</title>
<link rel="stylesheet" href="assets/css/global.css">
<link rel="stylesheet" href="assets/css/projects.css">
<link rel="stylesheet" href="assets/css/links.css">
</head>
<body>
<main>
<a href="https://git.lunarware.tech/lucielle/website" target="_blank" class="container">
<span class="title">Website</span>
<span class="description">This website is open source!</span>
</a>
<a href="https://git.lunarware.tech/lucielle/LLog" target="_blank" class="container">
<span class="title">LLog</span>
<span class="description">My implementation of logging in C.</span>
</a>
<a href="https://git.lunarware.tech/lucielle/lsort" target="_blank" class="container">
<span class="title">LSort</span>
<span class="description">My implementation of common sorting algorithms.</span>
</a>
</main>
<div id="links">
<a class="link" href="/">Home</a>
<a class="link" href="/aboutme.html">About Me</a>
<a class="link" href="/socials.html">Socials</a>
</div>
</body>
</html>

35
socials.html Normal file
View File

@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects - Lucielle's Page</title>
<link rel="stylesheet" href="assets/css/global.css">
<link rel="stylesheet" href="assets/css/projects.css">
<link rel="stylesheet" href="assets/css/links.css">
</head>
<body>
<main>
<a href="https://discord.gg/JVNr5UFCWC" target="_blank" class="container">
<span class="title">Discord Server</span>
<span class="description">Community Discord Server</span>
</a>
<a href="https://git.lunarware.tech/lucielle/" target="_blank" class="container">
<span class="title">Git</span>
<span class="description">Git Repositories Page</span>
</a>
<a href="mailto:luci@git.lunarware.tech" target="_blank" class="container">
<span class="title">Email</span>
<span class="description">You can contact me via my email</span>
</a>
</main>
<div id="links">
<a class="link" href="/">Home</a>
<a class="link" href="/aboutme.html">About Me</a>
<a class="link" href="/projects.html">Projects</a>
</div>
</body>
</html>