AprilEaton/Personal-Webpage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Moving /links and populating it with some basic content

Browse source
This commit is contained in:
April Eaton 2025-12-08 19:04:24 +01:00
parent f7c238ec38
commit 9fe3597c6f
11 changed files with 149 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

1
footer/footer.css
View file

@ -8,4 +8,5 @@ footer {
border-radius: 0.5rem;
border-width: 2px;
background: linear-gradient(15deg, #dc8a78, #f2d5cf);
width: calc(100% - 0.5rem - 10px);
}

7
global.css
View file

@ -15,12 +15,19 @@ body {
grid-template-columns: 100%;
min-height: 100svh;
min-width: 100%;
justify-items: center;
a {
color: #232634;
font-style: italic;
}
ul {
padding-left: 0px;
}
li {
img {
height: 1rem;

1
header.css
View file

@ -5,6 +5,7 @@ header {
border-radius: 0.5rem;
border-width: 2px;
background: linear-gradient(15deg, #f2d5cf, #dc8a78);
width: calc(100% - 0.5rem - 10px);
.logo {
height: 1rem;

17
links.css
View file

@ -1,17 +0,0 @@
body {
li {
/* list-style-type: none; */
display: flex;
align-items: center;
img {
height: 1rem;
margin: 0.2rem;
}
}
a {
font-style: normal;
text-decoration: none;
}
}

29
links.html
View file

@ -1,29 +0,0 @@
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Personal Links</title>
<meta name="description" content="My personal linktree" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!-- Place favicon.ico in the root directory -->
<link href="/global.css" rel="stylesheet" />
<link href="/links.css" rel="stylesheet" />
<link href="/header.css" rel="stylesheet" />
<script type="text/javascript" src="/loadin.js"></script>
<script type="text/javascript" src="/links.js"></script>
</head>
<body onload="loadDependencies()">
<header id="header"></header>
<ul id="linktree">
<li>
<img
src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Gitea_Logo.svg"
/><a href="https://git.aprileaton.net">Gitea instance</a>
</li>
</ul>
</body>
</html>

3
links.js
View file

@ -1,3 +0,0 @@
function loadDependencies() {
loadHTML("header", "/header.html");
}

40
links/index.html Normal file
View file

@ -0,0 +1,40 @@
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Personal Links</title>
<meta name="description" content="My personal linktree" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<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=Radio+Canada:ital,wght@0,300..700;1,300..700&display=swap"
rel="stylesheet"
/>
<link href="/global.css" rel="stylesheet" />
<link href="/links/links.css" rel="stylesheet" />
<link href="/header.css" rel="stylesheet" />
<script type="text/javascript" src="/loadin.js"></script>
<script type="text/javascript" src="/links/links.js"></script>
</head>
<body onload="loadDependencies()">
<header id="header"></header>
<article id="main">
<article id="find-me">
<h1>Find me at these places!</h1>
<ul id="linktree">
<li>
<img
src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Gitea_Logo.svg"
/><a href="https://git.aprileaton.net">Gitea instance</a>
</li>
</ul>
</article>
<article id="portfolio"></article>
</article>
<footer id="footer"></footer>
</body>
</html>

45
links/links.css Normal file
View file

@ -0,0 +1,45 @@
body {
article {
margin: 0.5rem;
padding: 0.5rem;
width: 40rem;
}
}
#find-me {
li {
list-style-type: none;
display: flex;
align-items: center;
img {
height: 1rem;
margin: 0.2rem;
}
}
a {
font-style: normal;
text-decoration: none;
}
}
#portfolio {
li {
display: flex;
flex-direction: column;
margin: 5px;
padding: 0.25rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
border-style: solid;
border-radius: 0.5rem;
border-width: 2px;
background: linear-gradient(15deg, #f2d5cf, #dc8a78);
}
a {
font-style: normal;
}
}

5
links/links.js Normal file
View file

@ -0,0 +1,5 @@
function loadDependencies() {
loadHTML("header", "/header.html");
loadHTML("footer", "/footer/footer.html");
loadHTML("portfolio", "/links/portfolio.html");
}

37
links/portfolio.html Normal file
View file

@ -0,0 +1,37 @@
<h1>Previous Work</h1>
<ul>
<li>
<div>
<h2>
<a href="https://git.aprileaton.net/April_Eaton/Personal-Webpage"
><img
src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Git_icon.svg"
alt="Git icon"
/></a>
<a href="https://kebabs.aprileaton.net">This webpage!</a>
</h2>
<p>
A living website that, hosting my personal porfolio, contact info, and
biography.
</p>
</div>
</li>
<li>
<div>
<h2>
<a href="https://github.com/neaton-lab/MRK-Webpage"
><img
src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Git_icon.svg"
alt="Git icon"
/></a>
<a href="https://kebabs.aprileaton.net">MKR Instanbul Webpage</a>
</h2>
<p>
Developed using jQuery and depolyed using GitHub Pages. Currently
awaiting credentials and photos from the client in order to migrate over
to the official domain.
</p>
<p></p>
</div>
</li>
</ul>

13
links/protfolio.html Normal file
View file

@ -0,0 +1,13 @@
<h1>Previous Work</h1>
<ul>
<li>
<div>
<a href="https://kebabs.aprileaton.net">MKR Instanbul Webpage</a>
<p>
Developed using jQuery and depolyed using GitHub Pages. Currently
awaiting credentials and photos from the client in order to migrate over
to the official domain
</p>
</div>
</li>
</ul>