xbazzi/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stable version

Browse Source
This commit is contained in:
Xander Bazzi 2024-01-17 04:28:22 -07:00
parent a1724f3185
commit bbdd101952
2 changed files with 67 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
assets/style/style.css
View File

@ -1,29 +1,27 @@
@font-face { @font-face {
font-family: "Monocraft"; font-family: "Monocraft";
src: local("Monocraft"); src: local("Monocraft");
/* src: url("https://github.com/IdreesInc/Monocraft/releases/download/v3.0/Monocraft.ttf") format("truetype"); */ src: url("https://www.xbazzi.com/Monocraft.ttf") format("truetype");
/* src: url("https://sadhost.neocities.org/fonts/FreePixel.ttf") format("truetype"); */
} }
:root { :root {
/*background-image: url('../../assets/img/bg.jpg');*/ --background: rgba(150, 150, 150, 0.95);
--main-color:#bf00ff;
--background: #0E191A;
--main-color:#7107AF;
--main-color-dk:#441261; --main-color-dk:#441261;
--accent-1:#B5E61D; --accent-1: #0000ff;
--accent-2:#EB53D3; --accent-2:#00FFFF;
--content-spacing:5px; --content-spacing:5px;
--background-img:url('../img/bg-code.png'); --background-img:url('../img/bg-beach4.png');
--banner:url('../img/bg_ascii2.png'); --banner:url('../img/xbazzi_logo2.png');
--banner-footer: url('../img/tiny-bar-green.png'); --banner-footer: url('../img/tiny-bar-cyan.png');
--titleBars:url('../img/tiny-bar-green.png'); --titleBars:url('../img/title-bars-win95.png');
--text-color: white; --text-color: black;
--text-bg: #00FFFF;
--title-text-color: white;
--text-shadow-custom: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; --text-shadow-custom: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
--link-color:var(--accent-1); --link-color:var(--accent-1);
--border:2px solid black; --border:2px solid black;
--arrows:url('../assets/images/arrow.png'); --arrows:url('../assets/images/arrow.png');
} }
html, html,
@ -45,9 +43,15 @@ body {
background-size: 100% 100%; background-size: 100% 100%;
height:150px; height:150px;
margin-bottom:var(--content-spacing); margin-bottom:var(--content-spacing);
border:var(--border); /* border:var(--border); */
} }
p.blog {
font-weight: bold;
padding: 5px; /* Add some space around the text */
display: inline-block; /* Ensure the background only covers the text */
}
#container, #container,
.topbar img { .topbar img {
max-width: 850px; max-width: 850px;
@ -80,7 +84,7 @@ body::before {
bottom: 0; bottom: 0;
content: ''; content: '';
background-image: var(--background-img); background-image: var(--background-img);
background-size: cover; /* Ensure the image covers the entire element */ background-size: 100% 100%; /* Ensure the image covers the entire element */
background-repeat: no-repeat; /* Prevent the image from repeating */ background-repeat: no-repeat; /* Prevent the image from repeating */
opacity: 0.8; /* Adjust the transparency */ opacity: 0.8; /* Adjust the transparency */
z-index: -1; z-index: -1;
@ -92,19 +96,30 @@ body::before {
} }
aside { aside {
width: 30%; font-weight: bold;
width: 25%;
margin: 5px; /* Add some space around the text */
margin-left:var(--content-spacing); margin-left:var(--content-spacing);
border-left:var(--border); border-left:var(--border);
background-color: var(--background); background-color: var(--background);
opacity: 0.9;
} }
.sidebar-title {
.title, .sidebar-title {
background-image:var(--titleBars); background-image:var(--titleBars);
font-weight:bold; font-weight:bold;
font-size: 25px;
border:var(--border); border:var(--border);
font-size:20px; color: var(--title-text-color);
color: var(--text-color); text-shadow: var(--text-shadow-custom);
}
.title {
background-image:var(--titleBars);
background-size: 100% 100%;
padding: 5px;
font-weight:bold;
font-size: 25px;
border:var(--border);
color: var(--title-text-color);
text-shadow: var(--text-shadow-custom); text-shadow: var(--text-shadow-custom);
/*position: sticky;*/ /*position: sticky;*/
} }
@ -119,7 +134,6 @@ aside {
main { main {
width: 74%; width: 74%;
background-color: var(--background);
} }
nav { nav {
@ -139,17 +153,19 @@ nav ul li a {
.content { .content {
padding:25px; padding:25px;
opacity: 1;
background-color: var(--background);
font-size: 20px;
} }
footer { footer {
/*border:var(--border);*/
background-image: var(--banner-footer); background-image: var(--banner-footer);
/*background-size: 100% 100%;*/
height:30px; height:30px;
margin-bottom:var(--content-spacing); margin-bottom:var(--content-spacing);
margin-top:var(--content-spacing); margin-top:var(--content-spacing);
text-align:center; text-align:center;
} }
/* button styles */ /* button styles */
button { button {
background-image:var(--titleBars); background-image:var(--titleBars);
@ -190,7 +206,7 @@ top: 550px;
} }
aside { aside {
display:block; display:block;
width:100%; width:50%;
order:1; order:1;
margin-left:0; margin-left:0;
} }
@ -205,6 +221,7 @@ top: 550px;
display:none; display:none;
} }
} }
@media only screen and (max-height: 640px) { @media only screen and (max-height: 640px) {
nav ul > ul { nav ul > ul {
display:none; display:none;

35
index.html
View File

@ -9,7 +9,7 @@
<link rel="stylesheet" href="assets/style/style.css"> <link rel="stylesheet" href="assets/style/style.css">
<!-- <script src="assets/scripts/load.js"></script> --> <!-- <script src="assets/scripts/load.js"></script> -->
<!-- <script src="//gc.zgo.at/count.js" data-goatcounter="https://sadgrl.goatcounter.com/count" async=""></script> --> <!-- <script src="//gc.zgo.at/count.js" data-goatcounter="https://sadgrl.goatcounter.com/count" async=""></script> -->
<link rel="icon" href="/assets/images/fav.gif" type="image/gif"> <script src="https://kit.fontawesome.com/e6a86da546.js" crossorigin="anonymous"></script> <link rel="icon" href="/assets/images/fav.gif" type="image/gif">
</head> </head>
<body> <body>
@ -19,39 +19,36 @@
<main> <main>
<div class="wrapper"> <div class="wrapper">
<div class="title">&nbsp; About</div> <div class="title">&nbsp;<span class="fa-solid fa-user"></span> whoami</div>
<div class="contentDaddy">
<div class="content"> <div class="content">
<p> This is my piece of real estate in the public <p> Started off in aerospace
internet. engineering and eventually found myself drawn to the world of
My name's Xander, and I've worked as a SysAdmin, cybersecurity. Along the way, I've tackled
rocket engineer, network engineer, scientific roles as a SysAdmin, rocket engineer, and software engineer
programmer, . These days, I find myself exploring
freelancer, and software engineer. Nowadays, I serverless architectures, software-defined networking, and
dedicate my the applications of AI in offensive security.
time to help further
the modernization of our current cyberspace
--specifically in the areas
of cybersecurity, cloud architecture, and
software-defined networking.
</p> </p>
</div> </div>
</div>
<div class="title">&nbsp; What's new? <div class="title">&nbsp; <span class="fa-solid fa-wrench"></span> updates
</div> </div>
<div class="content"> <div class="content">
<p class="update">01/10/2024: Generated the cool bg image with DALL-E.</p>
<p class="update">12/26/2023: This site is <p class="update">12/26/2023: This site is
officially online.</p> officially online.</p>
<p class="update">12/05/2023: Finished the home <p class="update">12/05/2023: Finished the home
datacenter project.</p> datacenter project.</p>
</div> </div>
<div class="title">&nbsp; Blog posts</div> <div class="title">&nbsp; <span class="fa-solid fa-commenting"></span> blog </div>
<div class="content"> <div class="content">
<p><a href='./homenetwork.html'> <p class="blog"><a href='./homenetwork.html'>
Home "datacenter" is what Americans needed, Home "datacenter" is what Americans needed,
but didn't deserve. but didn't deserve.
</a></p> </a></p>
<p><a href='./juniperfanmod.html'> <p class="blog"><a href='./juniperfanmod.html'>
Bribing a loud enterprise switch with Noctua fans. Bribing a loud enterprise switch with Noctua fans.
</a></p> </a></p>
</div> </div>