simon/old-personal-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adding site files

Browse Source
This commit is contained in:
osheas1atwit
2022-12-15 17:37:04 -05:00
parent a5d489a5f7
commit 3ed9555370
31 changed files with 1752 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/projects/cigarbox/Cigar Box Guitar.pdf
BIN
View File
Binary file not shown.
site/projects/fingerboards/fb.html
+45
View File
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<style>
div.main { top: 5%; left: 0; width: 99%; height: 95%; position: absolute; display: table-column; }
p { display: table-rows; vertical-align: middle; text-align: center; }
a { color: black; }
div.sticky { position: fixed; top: 0; z-index: 1; }
</style>
</head>
<body>
<div class="sticky">
<a href="../../index.html" style="font-size: 12px; text-decoration: none;">HOME</a>
-
<a href="../../projects.html" style="font-size: 12px; text-decoration: none;">back</a>
</div>
<div class="main">
<p>
<br><br><br>- boards i've made in their various states -<br><br><br>
<img src="photos/firstboard.jpg" width="30%" /><br><br>
<img src="photos/firstboard2.png" width="30%" /><br><br>
<img src="photos/firstboard3.jpg" width="30%" /><br><br>
<img src="photos/gunny1back.jpg" width="30%" /><br><br>
<img src="photos/anthony.png" width="30%" /><br><br>
<img src="photos/duncan.png" width="70%" /><br><br>
<img src="photos/gunny2.jpg" width="70%" /><br><br>
<img src="photos/harrison.png" width="70%" /><br><br>
<br><br><br>- obstacles i've made -<br><br><br><br><br>
<img src="photos/pad w rail.jpg" width="60%" /><br>
manny pad + rail<br><br>
<img src="photos/halfpipe half.png" width="40%" /><br><br>
<img src="photos/halfpipe.png" width="60%" /><br><br>
quarterpipe<br><br>
</p>
</div>
</body>
</html>
site/projects/fingerboards/photos/anthony.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 769 KiB

site/projects/fingerboards/photos/duncan.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 236 KiB

site/projects/fingerboards/photos/duncan.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 518 KiB

site/projects/fingerboards/photos/firstboard.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 330 KiB

site/projects/fingerboards/photos/firstboard2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 804 KiB

site/projects/fingerboards/photos/firstboard3.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 630 KiB

site/projects/fingerboards/photos/gunny1back.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 935 KiB

site/projects/fingerboards/photos/gunny2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 240 KiB

site/projects/fingerboards/photos/halfpipe half.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

site/projects/fingerboards/photos/halfpipe.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 MiB

site/projects/fingerboards/photos/harrison.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 347 KiB

site/projects/fingerboards/photos/pad w rail.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 MiB

site/projects/homepage/bg.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

site/projects/homepage/homepage-css.css
+611
View File
@@ -0,0 +1,611 @@
/**
normal chrome dark theme color
@media(prefers-color-scheme:dark){body{background-color:rgb(50,54,57);}}
#ball-left
{
display: block;
position: relative;
top: 2.5rem;
left: 20%;
height: .5rem;
width: .5rem;
border-radius: 50%;
animation-name: left-ball;
animation-duration: 20s;
animation-iteration-count: infinite;
}
#ball-right
{
display: block;
position: relative;
bottom: 2.5rem;
height: .5rem;
width: .5rem;
border-radius: 50%;
animation-name: right-ball;
animation-duration: 20s;
animation-iteration-count: infinite;
}
@keyframes left-ball
{
0%
{
left: 25%;
background-color: white;
}
10%
{
left: 30%;
background-color: #fcd2d1;
}
20%
{
left: 25%;
background-color: #fcfad1;
}
30%
{
left: 30%;
background-color: #d4fcd1;
}
40%
{
left: 25%;
background-color: #d1f6fc;
}
50%
{
left: 30%;
background-color: #dfd1fc;
}
60%
{
left: 25%;
background-color: #d1eefc;
}
70%
{
left: 30%;
background-color: #eed1fc;
}
80%
{
left: 25%;
background-color: #f1d1fc;
}
90%
{
left: 30%;
background-color: #fcdcd1;
}
100%
{
left: 25%;
background-color: white;
}
}
@keyframes right-ball
{
0%
{
left: 72.25%;;
background-color: white;
}
10%
{
left: 67.25%;;
background-color: #fcd2d1;
}
20%
{
left: 72.25%;;
background-color: #fcfad1;
}
30%
{
left: 67.25%;;
background-color: #d4fcd1;
}
40%
{
left: 72.25%;;
background-color: #d1f6fc;
}
50%
{
left: 67.25%;;
background-color: #dfd1fc;
}
60%
{
left: 72.25%;;
background-color: #d1eefc;
}
70%
{
left: 67.25%;;
background-color: #eed1fc;
}
80%
{
left: 72.25%;;
background-color: #f1d1fc;
}
90%
{
left: 67.25%;;
background-color: #fcdcd1;
}
100%
{
left: 72.25%;;
background-color: white;
}
}**/
@media(prefers-color-scheme:dark){body{background-color:rgb(23,38,38);}}
@keyframes border-color
{
0%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: white;
border-left-color: white;
}
10%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #fcd2d1;
border-left-color: #fcd2d1;
}
20%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #fcfad1;
border-left-color: #fcfad1;
}
30%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #d4fcd1;
border-left-color: #d4fcd1;
}
40%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #d1f6fc;
border-left-color: #d1f6fc;
}
50%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #dfd1fc;
border-left-color: #dfd1fc;
}
60%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #d1eefc;
border-left-color: #d1eefc;
}
70%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #eed1fc ;
border-left-color: #eed1fc;
}
80%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #f1d1fc;
border-left-color: #f1d1fc;
}
90%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #fcdcd1;
border-left-color: #fcdcd1;
}
100%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: white;
border-left-color: white;
}
}
@keyframes color
{
0%
{
color: white;
}
10%
{
color: #fcd2d1; /*light pink*/
}
20%
{
color: #fcfad1;
}
30%
{
color: #d4fcd1;
}
40%
{
color: #d1f6fc;
}
50%
{
color: #dfd1fc;
}
60%
{
color: #d1eefc;
}
70%
{
color: #eed1fc;
}
80%
{
color: #f1d1fc;
}
90%
{
color: #fcdcd1;
}
100%
{
color: white;
}
}
@keyframes hover
{
0%
{
color: #f45a5a;
font-size: 1rem;
}
25%
{
color: #84E0D5;
}
50%
{
color: #f4a75a;
font-size: 1.2rem;
}
75%
{
color: #b0e084;
}
100%
{
color: #FCB283;
font-size: 1rem;
}
}
@keyframes right-arrow
{
0%
{
transform: translateX(0%);
}
10%
{
transform: translateX(15%);
}
20%
{
transform: translateX(0%);
}
30%
{
transform: translateX(15%);
}
40%
{
transform: translateX(0%);
}
50%
{
transform: translateX(15%);
}
60%
{
transform: translateX(0%);
}
70%
{
transform: translateX(15%);
}
80%
{
transform: translateX(0%);
}
90%
{
transform: translateX(15%);
}
100%
{
transform: translateX(0%);
}
}
@keyframes left-arrow
{
0%
{
transform: translateX(0%);
}
10%
{
transform: translateX(-15%);
}
20%
{
transform: translateX(0%);
}
30%
{
transform: translateX(-15%);
}
40%
{
transform: translateX(0%);
}
50%
{
transform: translateX(-15%);
}
60%
{
transform: translateX(0%);
}
70%
{
transform: translateX(-15%);
}
80%
{
transform: translateX(0%);
}
90%
{
transform: translateX(-15%);
}
100%
{
transform: translateX(0%);
}
}
html, body
{
line-height: 15pt;
min-height: 100%;
min-width: 100%;
max-height: 100%;
max-width: 100%;
overflow: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
}
body
{
padding: 0px;
margin: 0px;
height: 100vh;
width: 100vw;
background-image: url("bg.png");
background-size: 100% 100%;
overflow: hidden;
scrollbar-width: none;
}
h1
{
color: white;
font-family: monospace;
font-size: 1.4rem;
animation-name: color;
animation-duration: 20s;
animation-iteration-count: infinite;
}
a, section
{
display: inline-block;
height: 1rem;
text-decoration: none;
text-align: center;
color: white;
font-family: monospace;
font-size: .8rem;
scrollbar-width: none;
animation-name: color;
animation-duration: 20s;
animation-iteration-count: infinite;
}
a:hover
{
animation-name: hover;
animation-duration: 1s;
animation-iteration-count: infinite;
}
hr
{
color: white;
border: .5px solid;
border-radius: 25px;
animation-name: color;
animation-duration: 20s;
animation-iteration-count: infinite;
}
audio
{
display: inline;
position: absolute;
right: 0%;
bottom: 0%;
width: 1.25rem;
}
#line-top
{
margin-top: 1rem;
margin-bottom: -.2rem;
}
#line-bottom
{
margin-top: -.2rem;
margin-bottom: 1rem;
}
#right-arrow
{
display: inline-block;
font-family: monospace;
font-size: 1.4rem;
position: relative;
margin-top: 0;
margin-bottom: 0;
animation: right-arrow 10s infinite, color 20s infinite;
}
#left-arrow
{
display: inline-block;
font-family: monospace;
font-size: 1.4rem;
position: relative;
margin-top:0;
margin-bottom: 0;
animation: left-arrow 10s infinite, color 20s infinite;
}
#black-box
{
width: 20rem;
height: 100%;
background-color: rgba(0, 0, 0, .6);
border-right-width: 4px;
border-left-width: 4px;
padding-top: 0%;
margin-left: 10rem;
text-align: center;
overflow: scroll;
scrollbar-width: none;
animation-name: border-color;
animation-duration: 20s;
animation-iteration-count: infinite;
}
html::-webkit-scrollbar
{
display: none;
}
}
site/projects/homepage/homepage-css.css.save
+611
View File
@@ -0,0 +1,611 @@
/**
normal chrome dark theme color
@media(prefers-color-scheme:dark){body{background-color:rgb(50,54,57);}}
#ball-left
{
display: block;
position: relative;
top: 2.5rem;
left: 20%;
height: .5rem;
width: .5rem;
border-radius: 50%;
animation-name: left-ball;
animation-duration: 20s;
animation-iteration-count: infinite;
}
#ball-right
{
display: block;
position: relative;
bottom: 2.5rem;
height: .5rem;
width: .5rem;
border-radius: 50%;
animation-name: right-ball;
animation-duration: 20s;
animation-iteration-count: infinite;
}
@keyframes left-ball
{
0%
{
left: 25%;
background-color: white;
}
10%
{
left: 30%;
background-color: #fcd2d1;
}
20%
{
left: 25%;
background-color: #fcfad1;
}
30%
{
left: 30%;
background-color: #d4fcd1;
}
40%
{
left: 25%;
background-color: #d1f6fc;
}
50%
{
left: 30%;
background-color: #dfd1fc;
}
60%
{
left: 25%;
background-color: #d1eefc;
}
70%
{
left: 30%;
background-color: #eed1fc;
}
80%
{
left: 25%;
background-color: #f1d1fc;
}
90%
{
left: 30%;
background-color: #fcdcd1;
}
100%
{
left: 25%;
background-color: white;
}
}
@keyframes right-ball
{
0%
{
left: 72.25%;;
background-color: white;
}
10%
{
left: 67.25%;;
background-color: #fcd2d1;
}
20%
{
left: 72.25%;;
background-color: #fcfad1;
}
30%
{
left: 67.25%;;
background-color: #d4fcd1;
}
40%
{
left: 72.25%;;
background-color: #d1f6fc;
}
50%
{
left: 67.25%;;
background-color: #dfd1fc;
}
60%
{
left: 72.25%;;
background-color: #d1eefc;
}
70%
{
left: 67.25%;;
background-color: #eed1fc;
}
80%
{
left: 72.25%;;
background-color: #f1d1fc;
}
90%
{
left: 67.25%;;
background-color: #fcdcd1;
}
100%
{
left: 72.25%;;
background-color: white;
}
}**/
@media(prefers-color-scheme:dark){body{background-color:rgb(23,38,38);}}
@keyframes border-color
{
0%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: white;
border-left-color: white;
}
10%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #fcd2d1;
border-left-color: #fcd2d1;
}
20%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #fcfad1;
border-left-color: #fcfad1;
}
30%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #d4fcd1;
border-left-color: #d4fcd1;
}
40%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #d1f6fc;
border-left-color: #d1f6fc;
}
50%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #dfd1fc;
border-left-color: #dfd1fc;
}
60%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #d1eefc;
border-left-color: #d1eefc;
}
70%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #eed1fc ;
border-left-color: #eed1fc;
}
80%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #f1d1fc;
border-left-color: #f1d1fc;
}
90%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #fcdcd1;
border-left-color: #fcdcd1;
}
100%
{
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: white;
border-left-color: white;
}
}
@keyframes color
{
0%
{
color: white;
}
10%
{
color: #fcd2d1; /*light pink*/
}
20%
{
color: #fcfad1;
}
30%
{
color: #d4fcd1;
}
40%
{
color: #d1f6fc;
}
50%
{
color: #dfd1fc;
}
60%
{
color: #d1eefc;
}
70%
{
color: #eed1fc;
}
80%
{
color: #f1d1fc;
}
90%
{
color: #fcdcd1;
}
100%
{
color: white;
}
}
@keyframes hover
{
0%
{
color: #f45a5a;
font-size: 1rem;
}
25%
{
color: #84E0D5;
}
50%
{
color: #f4a75a;
font-size: 1.2rem;
}
75%
{
color: #b0e084;
}
100%
{
color: #FCB283;
font-size: 1rem;
}
}
@keyframes right-arrow
{
0%
{
transform: translateX(0%);
}
10%
{
transform: translateX(15%);
}
20%
{
transform: translateX(0%);
}
30%
{
transform: translateX(15%);
}
40%
{
transform: translateX(0%);
}
50%
{
transform: translateX(15%);
}
60%
{
transform: translateX(0%);
}
70%
{
transform: translateX(15%);
}
80%
{
transform: translateX(0%);
}
90%
{
transform: translateX(15%);
}
100%
{
transform: translateX(0%);
}
}
@keyframes left-arrow
{
0%
{
transform: translateX(0%);
}
10%
{
transform: translateX(-15%);
}
20%
{
transform: translateX(0%);
}
30%
{
transform: translateX(-15%);
}
40%
{
transform: translateX(0%);
}
50%
{
transform: translateX(-15%);
}
60%
{
transform: translateX(0%);
}
70%
{
transform: translateX(-15%);
}
80%
{
transform: translateX(0%);
}
90%
{
transform: translateX(-15%);
}
100%
{
transform: translateX(0%);
}
}
html, body
{
line-height: 15pt;
min-height: 100%;
min-width: 100%;
max-height: 100%;
max-width: 100%;
overflow: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
}
body
{
padding: 0px;
margin: 0px;
height: 100vh;
width: 100vw;
background-image: url("bg.png");
background-size: 100% 100%;
overflow: hidden;
scrollbar-width: none;
}
h1
{
color: white;
font-family: monospace;
font-size: 1.4rem;
animation-name: color;
animation-duration: 20s;
animation-iteration-count: infinite;
}
a, section
{
display: inline-block;
height: rem;
text-decoration: none;
text-align: center;
color: white;
font-family: monospace;
font-size: .8rem;
scrollbar-width: none;
animation-name: color;
animation-duration: 20s;
animation-iteration-count: infinite;
}
a:hover
{
animation-name: hover;
animation-duration: 1s;
animation-iteration-count: infinite;
}
hr
{
color: white;
border: .5px solid;
border-radius: 25px;
animation-name: color;
animation-duration: 20s;
animation-iteration-count: infinite;
}
audio
{
display: inline;
position: absolute;
right: 0%;
bottom: 0%;
width: 1.25rem;
}
#line-top
{
margin-top: 1rem;
margin-bottom: -.2rem;
}
#line-bottom
{
margin-top: -.2rem;
margin-bottom: 1rem;
}
#right-arrow
{
display: inline-block;
font-family: monospace;
font-size: 1.4rem;
position: relative;
margin-top: 0;
margin-bottom: 0;
animation: right-arrow 10s infinite, color 20s infinite;
}
#left-arrow
{
display: inline-block;
font-family: monospace;
font-size: 1.4rem;
position: relative;
margin-top:0;
margin-bottom: 0;
animation: left-arrow 10s infinite, color 20s infinite;
}
#black-box
{
width: 20rem;
height: 100%;
background-color: rgba(0, 0, 0, .6);
border-right-width: 4px;
border-left-width: 4px;
padding-top: 0%;
margin-left: 10rem;
text-align: center;
overflow: scroll;
scrollbar-width: none;
animation-name: border-color;
animation-duration: 20s;
animation-iteration-count: infinite;
}
html::-webkit-scrollbar
{
display: none;
}
}
site/projects/homepage/homepage.html
+106
View File
@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="homepage-css.css">
<meta Content-Type: text/html/javascript; charset=utf-8/>
</head>
<title>~ welcome home</title>
<body>
<div id = "black-box">
<br>
<hr id = "top" style = "width: 13rem;">
<h1> <b> <h2 id = "left-arrow"><-</h2> example title <h2 id = "right-arrow">-></h2> </b> </h1>
<hr id = "bottom" style = "width: 13rem;">
<section id = "entertainment">
<a href = "https://trali.blue/projects/homepage.html">example link</a>
<br>
<a href = "https://trali.blue/projects/homepage.html">example link</a>
<br>
<a href = "https://trali.blue/projects/homepage.html">example link</a>
<br>
<a href = "https://trali.blue/projects/homepage.html">example link</a>
<br>
<a href = "https://trali.blue/projects/homepage.html">example link</a>
<br>
</section>
<hr id = "top" style = "width: 7.5rem;">
<h1> <b> <h2 id = "left-arrow"><-</h2> example title <h2 id = "right-arrow">-></h2> </b> </h1>
<hr id = "bottom" style = "width: 7.5rem;">
<section id = "work">
<a href = "https://trali.blue/projects/homepage.html">example link</a>
<br>
<a href = "https://trali.blue/projects/homepage.html">example link</a>
<br>
<a href = "https://trali.blue/projects/homepage.html">example link</a>
<br>
<a href = "https://trali.blue/projects/homepage.html">example link</a>
<br>
<a href = "https://trali.blue/projects/homepage.html">example link</a>
<br>
<a href = "https://trali.blue/projects/homepage.html">example link</a>
<br>
</section>
<hr id = "top" style = "width: 3.5rem;">
<h1> <b> <h2 id = "left-arrow"><-</h2> example title <h2 id = "right-arrow">-></h2> </b> </h1>
<hr id = "bottom" style = "width: 3.5rem;">
<section id = "forums">
<a href = "https://trali.blue/projects/homepage.html">example link</a>
<br>
<a href = "https://trali.blue/projects/homepage.html">example link</a>
<br>
<a href = "https://trali.blue/projects/homepage.html">example link</a>
<br>
<a href = "https://trali.blue/projects/homepage.html">example link</a>
<br>
<a href = "https://trali.blue/projects/homepage.html">example link</a>
<br>
<a href = "https://trali.blue/projects/homepage.html">example link</a>
<br>
</section>
</div>
<audio controls loop>
<source src = "koan sound + asa - fuego (sakuraburst remix).mp3" />
</audio>
</body>
<script src="script.js">
</script>
</hmtl>