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

81
assets/style/style.css
View File

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

39
index.html
View File

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