A repo for my personal website
Adding code and stuff for basic page changing, need to add page changing on hash change
+159
-1
+21
-1
.gitignore
+21
-1
.gitignore
+30
package-lock.json
+30
package-lock.json
···
1
+
{
2
+
"name": "cityboundforest-ui",
3
+
"version": "1.0.0",
4
+
"lockfileVersion": 3,
5
+
"requires": true,
6
+
"packages": {
7
+
"": {
8
+
"name": "cityboundforest-ui",
9
+
"version": "1.0.0",
10
+
"license": "MIT",
11
+
"devDependencies": {
12
+
"typescript": "^4.1.3"
13
+
}
14
+
},
15
+
"node_modules/typescript": {
16
+
"version": "4.9.5",
17
+
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
18
+
"integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
19
+
"dev": true,
20
+
"license": "Apache-2.0",
21
+
"bin": {
22
+
"tsc": "bin/tsc",
23
+
"tsserver": "bin/tsserver"
24
+
},
25
+
"engines": {
26
+
"node": ">=4.2.0"
27
+
}
28
+
}
29
+
}
30
+
}
+20
package.json
+20
package.json
···
1
+
{
2
+
"name": "cityboundforest-ui",
3
+
"version": "1.0.0",
4
+
"description": "CityboundForest's website",
5
+
"main": "src/index.ts",
6
+
"scripts": {
7
+
"build": "tsc && npm run build:cp-public",
8
+
"build:cp-public": "cp ./public/** ./dist",
9
+
"type": "tsc --noEmit"
10
+
},
11
+
"repository": {
12
+
"type": "git",
13
+
"url": "https://bitbucket.org/cityboundforest/cityboundforest.bitbucket.io"
14
+
},
15
+
"author": "Cass Unterholzner",
16
+
"license": "MIT",
17
+
"devDependencies": {
18
+
"typescript": "^4.1.3"
19
+
}
20
+
}
+28
public/index.html
+28
public/index.html
···
1
+
<!DOCTYPE html>
2
+
<html>
3
+
<head>
4
+
<link rel="stylesheet" href="/style.css" />
5
+
<script src="index.js" type="text/javascript"></script>
6
+
</head>
7
+
<body>
8
+
<div id="nav-links">
9
+
<span class="nav-link"><a href="#">Home</a></span>
10
+
<span class="nav-link"><a href="#about">About</a></span>
11
+
<span class="nav-link"><a href="#portfolio">Portfolio</a></span>
12
+
<span class="nav-link"><a href="#blog">Blog</a></span>
13
+
<span class="nav-link"><a href="#links">Links</a></span>
14
+
</div>
15
+
<div id="home-page" class="page">
16
+
<h3>CityboundForest / Cass Unterholzner</h3>
17
+
<p>Storyteller working in the media of film, theatre, video games, and music</p>
18
+
</div>
19
+
<div id="about-page" class="page">
20
+
</div>
21
+
<div id="portfolio-page" class="page">
22
+
</div>
23
+
<div id="blog-page" class="page">
24
+
</div>
25
+
<div id="links-page" class="page">
26
+
</div>
27
+
</body>
28
+
</html>
public/izayoimonospaced-nwoy-webfont.woff
public/izayoimonospaced-nwoy-webfont.woff
This is a binary file and will not be displayed.
public/izayoimonospaced-nwoy-webfont.woff2
public/izayoimonospaced-nwoy-webfont.woff2
This is a binary file and will not be displayed.
+34
public/style.css
+34
public/style.css
···
1
+
@font-face {
2
+
font-family: "Izayoi Monospace";
3
+
src: url('izayoimonospaced-nwoy-webfont.woff2') format('woff2'),
4
+
url('izayoimonospaced-nwoy-webfont.woff') format('woff');
5
+
font-weight: normal;
6
+
font-style: normal;
7
+
}
8
+
9
+
html {
10
+
font-family: "Izayoi Monospace";
11
+
}
12
+
13
+
.page, #nav-links {
14
+
width: 50%;
15
+
margin: 0 auto;
16
+
}
17
+
18
+
.page.active {
19
+
display: block;
20
+
}
21
+
22
+
.page {
23
+
display: none;
24
+
}
25
+
26
+
.nav-link {
27
+
display: block;
28
+
padding: 5px 0;
29
+
}
30
+
31
+
.nav-link:after {
32
+
content: "\a";
33
+
white-space: pre;
34
+
}
+13
src/index.ts
+13
src/index.ts
···
1
+
// do stuff
2
+
3
+
window.onload = () => {
4
+
const hash = window.location.hash.replace('#', '');
5
+
6
+
const el: HTMLElement | null = document.getElementById(hash + '-page');
7
+
8
+
if (el === null) {
9
+
document.getElementById('home-page')!.classList.add('active');
10
+
} else {
11
+
el.classList.add('active');
12
+
}
13
+
};