Skip to content

Commit c6028ac

Browse files
cd-bashcd-bash
committed
wip: refactor index
1 parent aa22fdb commit c6028ac

File tree

5 files changed

+40
-30
lines changed

5 files changed

+40
-30
lines changed

‎index.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@
33
<head id="main">
44
<title>cd-bash</title>
55
<script type="module" src="/src/heads/default.ts"></script>
6-
7-
86
</head>
9-
<body class="home-page">
7+
8+
<body>
109
<script type="module" src="/src/index.ts"></script>
1110
</body>
1211
</html>

‎src/index.ts‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
1-
import './views/home-view/styles.css'
1+
import './views/home-view/styles.css';
22
import { ProjectPage } from "./content/projects/tank";
33
import { VerticalNav } from "./components/vertical-nav";
4+
import {createContentBase, renderContent} from "./views/utils";
45

5-
const nav = VerticalNav();
66

77
function init() {
8-
document.querySelector<HTMLBodyElement>('.home-page')!.appendChild(ProjectPage());
9-
document.querySelector<HTMLBodyElement>('.home-page')!.appendChild(nav);
8+
createContentBase();
109

10+
const contentPage = document.getElementById('content-page')
11+
const verticalNav = VerticalNav();
12+
13+
contentPage?.appendChild(verticalNav);
14+
15+
renderContent(ProjectPage);
1116
}
1217

1318
init();

‎src/views/home-view/styles.css‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
.home-page {
1+
body {
22
background: #141518;
33
height: 100%;
44
margin: 0;
55
}
66

7-
.home-page .corner-triangle {
7+
.corner-triangle {
88
position: absolute;
99
top: 0;
1010
left: 0;
@@ -13,7 +13,7 @@
1313
border-top: 55vh solid #3BFFC5;
1414
}
1515

16-
.home-page .hero-visual {
16+
.hero-visual {
1717
position: absolute;
1818
top: 0;
1919
right: 0;
@@ -26,11 +26,11 @@
2626
z-index: -1;
2727
}
2828

29-
.home-page .main-title {
29+
.main-title {
3030
position: relative;
3131
}
3232

33-
.home-page .main-title h3 {
33+
.main-title h3 {
3434
font-size: 12vw;
3535
font-family: "Cabin", sans-serif;
3636
color: white;
@@ -40,55 +40,55 @@
4040
text-shadow: 0px 0px 22px black;
4141
}
4242

43-
.home-page .business-card {
43+
.business-card {
4444
position: absolute;
4545
bottom: 10vh;
4646
left: 5vw;
4747
width: 33vw;
4848
}
4949

50-
.home-page .business-card img {
50+
.business-card img {
5151
float: left;
5252
width: 10vw;
5353
image-rendering: pixelated;
5454
}
5555

56-
.home-page .business-card article {
56+
.business-card article {
5757
float: left;
5858
color: white;
5959
font-family: "Handjet", serif;
6060
margin: 1.2vw 0 0 2vw;
6161
}
6262

63-
.home-page .business-card article h2 {
63+
.business-card article h2 {
6464
font-size: 2vw;
6565
font-weight: 700;
6666
margin: 0px;
6767
}
6868

69-
.home-page .business-card article h1 {
69+
.business-card article h1 {
7070
font-size: 5vw;
7171
font-weight: 300;
7272
margin: 0vw 0 0 0;
7373
}
7474

7575

76-
.home-page footer {
76+
footer {
7777
position: fixed;
7878
bottom: 0;
7979
width: 100%;
8080
height: 40px;
8181
background: #000;
8282
}
8383

84-
.home-page footer .logs-title {
84+
footer .logs-title {
8585
float: left;
8686
background: white;
8787
height: 100%;
8888
text-transform: uppercase;
8989
}
9090

91-
.home-page footer .logs-title h6 {
91+
footer .logs-title h6 {
9292
color: #000;
9393
font-family: "Handjet", serif;
9494
font-size: 1em;

‎src/views/project-view/project-view.ts‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import {
2-
createContentPage,
32
writeTitle,
43
createVideoShowcase,
54
writeParagraph,
@@ -19,22 +18,22 @@ export type ProjectContent = {
1918

2019

2120
export function renderProjectPage(content: ProjectContent) {
22-
const projectPage = createContentPage()
21+
const wrapper = document.getElementById('wrapper');
2322
const projectTitle = writeTitle("h1", content.name);
2423
const projectShowcase = createVideoShowcase(content.heroVideo);
2524
const projectSubtitle = writeTitle("h2", content.tagline)
2625

27-
projectPage[1].appendChild(projectTitle);
28-
projectPage[1].appendChild(projectShowcase);
29-
projectPage[1].appendChild(projectSubtitle);
26+
wrapper?.appendChild(projectTitle);
27+
wrapper?.appendChild(projectShowcase);
28+
wrapper?.appendChild(projectSubtitle);
3029

3130
content.paragraphs.forEach(paragraph => {
3231
const text = writeParagraph(paragraph);
33-
projectPage[1].appendChild(text);
32+
wrapper?.appendChild(text);
3433
})
3534

3635
const projectGallery = createContentGallery(content.imageGallery);
37-
projectPage[1].appendChild(projectGallery);
36+
wrapper?.appendChild(projectGallery);
3837

39-
return projectPage[0];
38+
return wrapper;
4039
}

‎src/views/utils/view-utils.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,23 @@
44
They are mostly used when building templates.
55
*/
66

7-
export function createContentPage() {
7+
export function createContentBase() {
88
const page = document.createElement('div');
99
const wrapper = document.createElement('div');
1010
page.id = 'content-page';
1111
wrapper.id = 'wrapper';
1212

1313
page.appendChild(wrapper);
14-
return [page, wrapper];
1514
}
1615

16+
export function renderContent(contentFn: Function) {
17+
const wrapper = clearWrapper();
18+
const content = contentFn();
19+
20+
wrapper?.appendChild(content);
21+
}
22+
23+
1724
function clearWrapper() {
1825
const cleanWrapper = document.getElementById('wrapper');
1926
cleanWrapper?.childNodes.forEach((childNode) => {

0 commit comments

Comments
 (0)