Skip to content

Commit d6bad92

Browse files
crossflame22crossflame22
committed
Complete Revamp
1 parent 41df33e commit d6bad92

5 files changed

+250
-6
lines changed

‎UbuntuMono-Regular.woff

104 KB
Binary file not shown.

‎crossflame20_logo_final_3.gif

8.68 MB
Loading

‎index.html

+121-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,125 @@
11
<!doctype html>
2+
<!-- this is a website -->
23
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<title>Home</title>
6-
</head>
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Home</title>
7+
<link href="main.css" rel="stylesheet">
8+
<script type="text/javascript" src="script.js" defer></script>
9+
</head>
10+
<body>
11+
<div class="box">
12+
<span id="main-page" class="loaded-menu-page">
13+
<div class="heading">
14+
<h1>Owen Pastor</h1>
15+
<h3>Software/game dev,<br>Amateur photographer.</h3>
16+
</div>
17+
<div class="divider divider-bottom"></div>
18+
<div>
19+
<div class="buton">
20+
<button class="front-page-button" data-target="#about-me">About Me</button>
21+
<button class="front-page-button" data-target="#mrok">Work</button>
22+
<button class="front-page-button" data-target="#contact-me">Contact Me</button>
23+
</div>
24+
</div>
25+
</span>
26+
<span id="about-me" class="hidden">
27+
<h1>Hello!</h1>
28+
<div class="about-me-body">
29+
<h2>My name is Owen. (also known as crossflame20, but I lost my crossflame20 GitHub account, so I made a "crossflame22" account.)</h2>
30+
<p id="birthday paragraph"></p>
31+
<script>
32+
// establishing today's date
33+
let currentTime = new Date();
34+
let month = currentTime.getMonth() + 1;
35+
let day = currentTime.getDate();
36+
let year = currentTime.getFullYear();
737

8-
<body>
9-
</body>
38+
// function to get days of any month
39+
function daysInMonth (_month, _year) {
40+
return new Date(_year, _month, 0).getDate();
41+
}
42+
43+
// get days after the 24th of last month
44+
if (month >= 2) {
45+
daysAfter = daysInMonth(month - 1, year) - 24;
46+
} else {
47+
daysAfter = daysInMonth(12, year - 1);
48+
}
49+
50+
// my birthdate
51+
const birthMonth = 7;
52+
const birthDay = 24;
53+
const birthYear = 2004;
54+
55+
// comparing the two dates
56+
let yearDifference = year - birthYear;
57+
let monthDifference;
58+
let dayDifference;
59+
60+
if (month >= birthMonth) {
61+
monthDifference = month - birthMonth;
62+
} else {
63+
monthDifference = month + 5;
64+
yearDifference -= 1
65+
}
66+
if (day >= birthDay) {
67+
dayDifference = day - birthDay;
68+
} else {
69+
dayDifference = daysAfter + day;
70+
monthDifference -= 1;
71+
} // thanks ms c for helping get this figured out!
72+
73+
// save and return the difference in a readable format
74+
let comparison;
75+
if (dayDifference === 0) {
76+
comparison = `${yearDifference} year, \
77+
${monthDifference} month`;
78+
} else if (monthDifference === 0) {
79+
comparison = `${yearDifference} year, \
80+
${dayDifference} day`;
81+
} else if (dayDifference === 0 && monthDifference === 0) {
82+
comparison = `${yearDifference} year`;
83+
} else {
84+
comparison = `${yearDifference} year, \
85+
${monthDifference} month, ${dayDifference} day`;
86+
}
87+
document.getElementById("birthday paragraph").innerText = `I \
88+
am a ${comparison} old programmer from Concord, Ohio.`;
89+
</script>
90+
<p>I will be updating this website as I improve at programming, and as I finish/start projects.</p>
91+
</div>
92+
<div class="divider"></div>
93+
<button class="front-page-button" data-target="#main-page">Back</button>
94+
</span>
95+
<span id="mrok" class="hidden">
96+
<div class="projects-list">
97+
<h3>Projects</h3>
98+
<div class="divider-sm"></div>
99+
<h2>Current</h2>
100+
<h3>This Website</h3>
101+
<p>I'm going to try to always be working on this website, as I improve at programming.</p>
102+
<div class="divider-sm"></div>
103+
<h3>Gamer Code (might change title)</h3>
104+
<p>This is a program a friend wrote with a bit of my help, that I'm going to try to rewrite in order to add more support for users outside our school.</p>
105+
<div class="divider-sm"></div>
106+
<h2>Finished</h2>
107+
<p>None so far!</p>
108+
<div class="divider"></div>
109+
<button class="front-page-button" data-target="#main-page">Back</button>
110+
</div>
111+
</span>
112+
<span id="contact-me" class="hidden">
113+
<div class="contact-items">
114+
<h1>Contact Me</h1>
115+
<h2>Discord</h2>
116+
<p>The easiest way to get in touch with me; just friend me on discord (crossflame20#0001), and if you don't look like a bot, I'll accept.</p>
117+
<h2>Email</h2>
118+
<p>Additionally, you can reach me at owen@crossfla.me.</p>
119+
<div class="divider"></div>
120+
<button class="front-page-button" data-target="#main-page">Back</button>
121+
</div>
122+
</span>
123+
</div>
124+
</body>
10125
</html>

‎main.css

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
@font-face {
2+
font-family: "Ubuntu Mono";
3+
src: url("UbuntuMono-Regular.woff") format('woff');
4+
}
5+
6+
.hidden {
7+
display: none;
8+
}
9+
10+
body {
11+
background-color: black;
12+
background-image: url("crossflame20_logo_final_3.gif");
13+
background-size: auto 100vh;
14+
background-position: center;
15+
background-repeat: no-repeat;
16+
}
17+
18+
html,body {
19+
width: 100vw; height: 100vh; margin: 0; padding: 0;
20+
backdrop-filter: blur(10px);
21+
display: flex;
22+
align-items: center;
23+
justify-content: center;
24+
}
25+
26+
.box {
27+
width: 50vw; height: auto;
28+
29+
padding: 10vh;
30+
gap: 2vh;
31+
32+
display: flex;
33+
align-items: center;
34+
justify-content: space-between;
35+
flex-direction: column;
36+
37+
background-color: rgba(0,0,0,0.35);
38+
border: 0.4vh solid rgba(67,67,67,0.5);
39+
border-radius: 0.5vh;
40+
}
41+
42+
h1,h2,h3,p,button {
43+
color: white;
44+
margin: 0;
45+
font-family: "Ubuntu Mono";
46+
font-weight: bold;
47+
}
48+
49+
h1 {
50+
font-size: 10vh;
51+
padding-bottom: 3vh;
52+
}
53+
h3 {
54+
font-size: 4vh;
55+
}
56+
button {
57+
font-size: 2vh;
58+
}
59+
.buton {
60+
display: flex;
61+
flex-direction: column;
62+
align-items: center;
63+
gap: 3vh;
64+
}
65+
66+
button {
67+
border: 0.5vh white solid;
68+
border-radius: 0.5vh;
69+
padding: 1.5vh;
70+
71+
transition: background-color 0.25s;
72+
background-color: rgba(0,0,0,0.0);
73+
}
74+
75+
button:hover {
76+
transition: background-color 0.25s;
77+
background-color: rgba(0,0,0,0.5);
78+
}
79+
80+
.divider,.divider-sm {
81+
background-color: white;
82+
width: 100%;
83+
height: 0.65vh;
84+
margin-bottom: 5vh;
85+
}
86+
.divider {
87+
margin-top: 5vh;
88+
}
89+
.divider-sm {
90+
margin-top: 1vh;
91+
margin-bottom: 1vh;
92+
justify-content: flex-start;
93+
height: 1vh;
94+
width: 25%;
95+
}
96+
97+
.about-me-body,.projects-list,.contact-items {
98+
display: flex;
99+
flex-direction: column;
100+
align-items: flex-start;
101+
justify-content: space-between;
102+
gap: 2vh;
103+
}

‎script.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const $ = document.querySelector.bind(document);
2+
const $all = document.querySelectorAll.bind(document);
3+
const addClass = (elem, className) => {elem.classList.add(className)};
4+
const removeClass = (elem, className) => {elem.classList.remove(className)};
5+
const hide = (elem) => {addClass(elem, "hidden")};
6+
const unhide = (elem) => {removeClass(elem, "hidden")};
7+
8+
// hi :) feel free to drop a line!
9+
10+
11+
// console.log("%cTHIS CODE CPRYRIGHT 2022 BIG BALLS PRODUCTIONS", "color: #FF00FF; font-family: \"Comic Sans MS\"; font-size: 36px;");
12+
Array.from($all(".front-page-button")).forEach(button => {
13+
button.addEventListener("click", clickEvent => {
14+
const theButton = clickEvent.target;
15+
console.error(theButton);
16+
17+
const target = $(theButton.dataset.target);
18+
19+
const prev = $(".loaded-menu-page")
20+
hide(prev);
21+
removeClass(prev, "loaded-menu-page");
22+
23+
unhide(target);
24+
addClass(target, "loaded-menu-page");
25+
});
26+
});

0 commit comments

Comments
 (0)