delete old assets
BIN
assets/crt.gif
Before Width: | Height: | Size: 449 KiB |
BIN
assets/crt2.gif
Before Width: | Height: | Size: 444 KiB |
Before Width: | Height: | Size: 6 KiB |
BIN
assets/dvd.png
Before Width: | Height: | Size: 23 KiB |
BIN
assets/hi.png
Before Width: | Height: | Size: 71 KiB |
Before Width: | Height: | Size: 3.8 MiB |
1
assets/planet-outline.svg
Normal file
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Planet</title><path d="M413.48 284.46c58.87 47.24 91.61 89 80.31 108.55-17.85 30.85-138.78-5.48-270.1-81.15S.37 149.84 18.21 119c11.16-19.28 62.58-12.32 131.64 14.09" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/><circle cx="256" cy="256" r="160" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/></svg>
|
After Width: | Height: | Size: 444 B |
Before Width: | Height: | Size: 19 MiB |
|
@ -1 +0,0 @@
|
||||||
<svg id="visual" viewBox="0 0 960 540" width="960" height="540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect width="960" height="540" fill="#464044"></rect><g><g transform="translate(107 152)"><path d="M0 -106.9L75.6 -75.6L106.9 0L75.6 75.6L0 106.9L-75.6 75.6L-106.9 0L-75.6 -75.6Z" fill="#00ffe8"></path></g><g transform="translate(616 20)"><path d="M0 -58L41 -41L58 0L41 41L0 58L-41 41L-58 0L-41 -41Z" fill="#00ffe8"></path></g><g transform="translate(386 136)"><path d="M0 -54L38.2 -38.2L54 0L38.2 38.2L0 54L-38.2 38.2L-54 0L-38.2 -38.2Z" fill="#00ffe8"></path></g><g transform="translate(264 436)"><path d="M0 -55L38.9 -38.9L55 0L38.9 38.9L0 55L-38.9 38.9L-55 0L-38.9 -38.9Z" fill="#00ffe8"></path></g><g transform="translate(648 316)"><path d="M0 -90L63.6 -63.6L90 0L63.6 63.6L0 90L-63.6 63.6L-90 0L-63.6 -63.6Z" fill="#00ffe8"></path></g><g transform="translate(803 138)"><path d="M0 -68L48.1 -48.1L68 0L48.1 48.1L0 68L-48.1 48.1L-68 0L-48.1 -48.1Z" fill="#00ffe8"></path></g><g transform="translate(880 509)"><path d="M0 -95L67.2 -67.2L95 0L67.2 67.2L0 95L-67.2 67.2L-95 0L-67.2 -67.2Z" fill="#00ffe8"></path></g><g transform="translate(21 391)"><path d="M0 -63L44.5 -44.5L63 0L44.5 44.5L0 63L-44.5 44.5L-63 0L-44.5 -44.5Z" fill="#00ffe8"></path></g><g transform="translate(662 534)"><path d="M0 -86L60.8 -60.8L86 0L60.8 60.8L0 86L-60.8 60.8L-86 0L-60.8 -60.8Z" fill="#00ffe8"></path></g></g></svg>
|
|
Before Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 836 KiB |
Before Width: | Height: | Size: 84 KiB |
Before Width: | Height: | Size: 82 KiB |
BIN
assets/smug.gif
Before Width: | Height: | Size: 952 KiB |
Before Width: | Height: | Size: 153 KiB |
62
index.html
|
@ -5,13 +5,61 @@
|
||||||
<title>
|
<title>
|
||||||
Home
|
Home
|
||||||
</title>
|
</title>
|
||||||
|
|
||||||
<!-- add icon link -->
|
<!-- add icon link -->
|
||||||
<link rel = "icon" href = "assets/obo-icon.png"
|
<link rel = "icon" href = "assets/obo-icon.png"
|
||||||
type = "image/x-icon">
|
type = "image/x-icon">
|
||||||
<style>
|
<link rel="stylesheet" type="text/css" href="style.css">
|
||||||
body {
|
</head>
|
||||||
background-color:#111111;
|
<body>
|
||||||
}
|
<div class="navigation">
|
||||||
</style>
|
<div class="menuToggle"></div>
|
||||||
</head>
|
<ul>
|
||||||
|
<li class="list">
|
||||||
|
<a href="#">
|
||||||
|
<span class="icon"><script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
|
||||||
|
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script></span>
|
||||||
|
<span class="text">Home</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="list">
|
||||||
|
<a href="#">
|
||||||
|
<span class="icon"></span>
|
||||||
|
<span class="text">About</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="list">
|
||||||
|
<a href="#">
|
||||||
|
<span class="icon"></span>
|
||||||
|
<span class="text">Projects</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="list">
|
||||||
|
<a href="#">
|
||||||
|
<span class="icon"></span>
|
||||||
|
<span class="text">Photography</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="list">
|
||||||
|
<a href="#">
|
||||||
|
<span class="icon"></span>
|
||||||
|
<span class="text">Videography</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const menuToggle = document.querySelector('.menuToggle');
|
||||||
|
const navigation = document.querySelector('.navigation');
|
||||||
|
menuToggle.onclick = function(){
|
||||||
|
navigation.classList.toggle('open')
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
|
||||||
|
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
71
style.css
Normal file
|
@ -0,0 +1,71 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Martian+Mono&display=swap');
|
||||||
|
*
|
||||||
|
{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Martian', monospace;
|
||||||
|
}
|
||||||
|
body
|
||||||
|
{
|
||||||
|
background:#2b272b;
|
||||||
|
}
|
||||||
|
.navigation
|
||||||
|
{
|
||||||
|
position: fixed;
|
||||||
|
inset: 20px 0 20px 20px;
|
||||||
|
width: 105px;
|
||||||
|
background: #332e33;
|
||||||
|
transition: 0.5s;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.navigation.open
|
||||||
|
{
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
.navigation .menuToggle
|
||||||
|
{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
border-bottom: 1px solid rgba(0,0,0,0.25);
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 0 23px;
|
||||||
|
}
|
||||||
|
.navigation .menuToggle::before
|
||||||
|
{
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 30px;
|
||||||
|
height: 2px;
|
||||||
|
background: #413b41;
|
||||||
|
transform: translateY(-8px);
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
.navigation.open .menuToggle::before
|
||||||
|
{
|
||||||
|
transform: translateY(0px) rotate(45deg);
|
||||||
|
}
|
||||||
|
.navigation .menuToggle::after
|
||||||
|
{
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 30px;
|
||||||
|
height: 2px;
|
||||||
|
background: #413b41;
|
||||||
|
transform: translateY(8px);
|
||||||
|
transition: 0.5s;
|
||||||
|
box-shadow: 0 -8px 0 #413b41;
|
||||||
|
}
|
||||||
|
.navigation.open .menuToggle::after
|
||||||
|
{
|
||||||
|
transform: translateY(0px) rotate(-45deg);
|
||||||
|
box-shadow: 0 0 0 #413b41;
|
||||||
|
}
|