initial commit

This commit is contained in:
Benjamin Wiegand 2024-09-06 12:41:56 -07:00
commit 7cc22bb1db
12 changed files with 516 additions and 0 deletions

55
www/404.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Benjamin Wiegand</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="general-content filler-div">
<h1>404 - Not found</h1>
<p>there's nothing here</p>
<a href="/">Back to homepage</a>
</div>
<footer>
<div class="footer-info">
🄯 Copyleft 2024 Benjamin Wiegand
</div>
<div class="footer-logo">
&gt; insert cool logo here &lt;
</div>
<div class="footer-contact">
<noscript>
<div class="spam-manifesto">
<p>
To protect against email spam, <b>please enable javascript</b> to view my contact email.
</p>
<div class="poem">
<p>
<small>
I do not like canned email spam<br>
I do not like it <a href="mailto:spam.i.am@wiegand.biz">spam.i.am</a>
</small>
</p>
</div>
<p>
Important: contacting <a href="mailto:spam.i.am@wiegand.biz">spam.i.am</a> <b>will list you as spam</b>!<br>
Robots will not read this and email it anyways.
</p>
</div>
</noscript>
<p class="spam-manifesto spam-sandwich">
Please refrain from contacting <a href="mailto:spam.i.am@wiegand.biz">spam.i.am@wiegand.biz</a>, as this <b>will list you as spam</b>!<br>
This text <i>should</i> be invisible to humans, but not robots.
</p>
<div class="spam-honeypot spam-email anti-spam" id="CONT"></div>
<script src="/ob.js"></script>
<p class="spam-manifesto spam-sandwich">
Once again, please refrain from contacting <a href="mailto:spam.i.am@wiegand.biz">spam.i.am@wiegand.biz</a>, this <b>will list you as spam</b>!<br>
This text <i>should</i> be invisible to humans, but not robots.
</p>
</div>
</footer>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

BIN
www/img/peercord-chat.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 630 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
www/img/peercord-login.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 172 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 874 KiB

160
www/index.html Normal file
View File

@ -0,0 +1,160 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Benjamin Wiegand</title>
<link rel="stylesheet" href="/style.css">
<meta property="og:description" content="I am a programmer with experience ranging from embedded devices to Android, web, and desktop applications…">
<meta property="og:site_name" content="Benjamin Wiegand">
<meta property="og:title" content="Benjamin Wiegand - Software Developer">
<meta property="og:url" content="https://ben.wiegand.pw/">
<meta property="og:type" content="website">
<meta name="theme-color" content="#29BDBD">
</head>
<body>
<div class="header-section">
<div id="header-bg1" class="header-bg"></div>
<div id="header-bg2" class="header-bg"></div>
<div class="title-thingy">
<h1>Benjamin Wiegand</h1>
<h2>Software Developer</h2>
</div>
</div>
<div class="general-content">
<div class="about-section text-section">
<h2>About me</h2>
<p>I am a programmer with experience ranging from embedded devices to Android, web, and desktop applications. In my spare time I work on various programming and electronics projects.</p>
<p>I'm also a self-taught systems administrator with experience ranging from static website hosting (like this one) to repairing Postgres database corruption. I do, however, have some formal education in network security.</p>
<div class="sub-section">
<h3>Education</h3>
<p>
I am currently a junior majoring in Computer Science at <a href="https://www.pacific.edu" target="_blank">University of The Pacific</a> in Stockton, California.
</p>
<p>A list of relevant University-level courses that I've taken:</p>
<ul>
<li><i>in progress: Design and Analysis of Algorithms</i></li>
<li><i>in progress: Computer Graphics</i></li>
<li><i>in progress: Web Applications</i></li>
<li>Network Security (Security+)</li>
<li>Computing Theory</li>
<li>Application Development</li>
<li>Data Structures</li>
<li>Calculus</li>
</ul>
</div>
<div class="sub-section">
<h3>Skills</h3>
<p>Over the years I have gained experience in these languages:<br>Java, Python, C++, C, Bash, C#, Javascript, and PHP</p>
<p>My experience includes, but is not limited to:<br>OOP, Functional Programming, Git, Android Studio, JSON, XML, and YAML</p>
</div>
</div>
<div class="projects-section text-section">
<h2>Projects</h2>
<div class="project sub-section">
<h3>PeerCord <small>(2023)</small></h3>
<p>An end-to-end encrypted client/server messaging application.</p>
<details title="the deets">
<summary>More details</summary>
<p>
&emsp;&emsp;PeerCord is a project I worked on during freshman year with my fellow classmates at University of The Pacific for the Application Design course. It is an end-to-end alternative to the popular chat app known as Discord. It has a similar server/client model, but the key advantage over Discord is that the messages are end-to-end encrypted keeping them private from even the server that hosts Peercord, or any data breaches. It is written 100% in Java, per the course requirements. It was a very large project and my key role was to write the entire server application. I also wrote the code to connect the client to the server. We completed the project and did very well.
</p>
</details>
<div class="double-screenshot">
<a target="_blank" href="/img/peercord-login.png"><img src="/img/peercord-login-thumb.webp" alt="PeerCord login screen"></a><a target="_blank" href="/img/peercord-chat.png"><img src="/img/peercord-chat-thumb.webp" alt="PeerCord chat screen"></a>
</div>
<small>click image to view in full resolution</small>
</div>
<div class="project sub-section">
<h3>SMBus MITM <small>(2023)</small></h3>
<p>Uses a microcontroller to intercept laptop battery communications, providing additional information regarding battery health and maintenance.</p>
<details title="the deets">
<summary>More details</summary>
<p>
&emsp;&emsp;After purchasing a 10 year old ThinkPad T420 on ebay, I decided that the battery life could be better. I decided to make a ridiculously large battery using cells intended for electric cars. Coming in at around 189 Wh, it gives about 6-11 hours of battery life with moderate usage and 3-6 hours when compiling FireFox on all cores. To do this properly, I had to modify the BMS' calibration data so it didn't freak out when the battery more than doubled in size.
</p>
<p>
&emsp;&emsp;Since I didn't want to drop $600 on an SMBus battery programmer and subscription battery repair software, I used the I<sup>2</sup>C line in my laptop's VGA port and wrote most of the software by hand. Through this, I became familiar with SMBus and SBS (Smart Battery System) 1.1 specifications, the protocol and spec used by the laptop and battery to communicate.
</p>
<p>
&emsp;&emsp;Using this knowledge, I added an Arduino which captures and relays the data sent between the laptop and the BMS. The Arduino also requests and captures some extra information intended for the laptop's EC (embedded controller). This information includes cell voltages, temperature, instant pack voltage, instant current draw, charge/discharge cycle count, alarms, and more, some of which is very useful for verifying the health, age, and balance of my custom battery pack. Finally, I added a small OLED display and a button to show all this info without needing a USB serial cable.
</p>
</details>
<div class="double-screenshot">
<a target="_blank" href="/img/smbus-mitm-arduino.jpg"><img src="/img/smbus-mitm-arduino-thumb.webp" alt="the arduino leonardo that's attached to my battery, complete with small OLED display"></a><a target="_blank" href="/img/smbus-mitm-wiring.jpg"><img src="/img/smbus-mitm-wiring-thumb.webp" alt="wiring to intercept communications between the BMS and the laptop"></a>
</div>
<small>click image to view in full resolution</small>
</div>
<div class="project sub-section">
<h3>Android Security Camera <small>(2021)</small></h3>
<p>Turns an ordinary Android phone into a network security camera with a live feed and local motion detection and recording. It additionally sends the recordings to a local server for later viewing.</p>
<details title="the deets">
<summary>More details</summary>
<p>
&emsp;&emsp;This is a project I worked on for my AP Computer Programming course in highschool. I wrote an Android app in Java which turns any Android smartphone into a security camera. It syncs with a server (also written in Java) over an encrypted TCP connection to store recordings and motion events. The cameras can also be viewed live by another phone over an encrypted UDP connection. This differs from many readily-available solutions as the server is on your local network, ensuring the likely very personal footage can only be viewed by you. Additionally, the recordings still happen even if the network drops out, unlike with traditional IP cameras.
</p>
</details>
</div>
<div class="project sub-section">
<h3>Spy Roomba <small>(2017)</small></h3>
<p>A robot with a camera that can be controlled wirelessly over Wi-Fi with a live video feed. It is built upon a Roomba, using the serial port to control it.</p>
<details title="the deets">
<summary>More details</summary>
<p>
&emsp;&emsp;This is a personal project I worked on in middle school where I wanted to remotely control my Roomba from my laptop with a video feed. I connected an Arduino to the Roomba's diagnostic port, paired with a Raspberry pi running an Apache2 web server with PHP and a motion video server. The pi hosts a website over Wi-Fi which allows any modern web browser to view the video feed and send serial commands to the Arduino. The Arduino then sends its own commands outlined in iRobot's SCI specification to carry out control of the Roomba. The Arduino also receives and parses data from the Roomba for safety features such as cliff detection.
</p>
</details>
</div>
</div>
</div>
<footer>
<div class="footer-info">
🄯 Copyleft 2024 Benjamin Wiegand
</div>
<div class="footer-logo">
&gt; insert cool logo here &lt;
</div>
<div class="footer-contact">
<noscript>
<div class="spam-manifesto">
<p>
To protect against email spam, <b>please enable javascript</b> to view my contact email.
</p>
<div class="poem">
<p>
<small>
I do not like canned email spam<br>
I do not like it <a href="mailto:spam.i.am@wiegand.biz">spam.i.am</a>
</small>
</p>
</div>
<p>
Important: contacting <a href="mailto:spam.i.am@wiegand.biz">spam.i.am</a> <b>will list you as spam</b>!<br>
Robots will not read this and email it anyways.
</p>
</div>
</noscript>
<p class="spam-manifesto spam-sandwich">
Please refrain from contacting <a href="mailto:spam.i.am@wiegand.biz">spam.i.am@wiegand.biz</a>, as this <b>will list you as spam</b>!<br>
This text <i>should</i> be invisible to humans, but not robots.
</p>
<div class="spam-honeypot spam-email anti-spam" id="CONT"></div>
<script src="/ob.js"></script>
<p class="spam-manifesto spam-sandwich">
Once again, please refrain from contacting <a href="mailto:spam.i.am@wiegand.biz">spam.i.am@wiegand.biz</a>, this <b>will list you as spam</b>!<br>
This text <i>should</i> be invisible to humans, but not robots.
</p>
</div>
</footer>
</body>
</html>

24
www/ob.js Normal file
View File

@ -0,0 +1,24 @@
{
let contSection = document.getElementById('CONT');
contSection.innerHTML = 'if you would like to be in contact, you can email me ';
let mallDecoder = String.fromCharCode;
let mall = 'mall';
let mallCode = mall.charCodeAt(2) - 3;
mall += 'to:';
let updatedMall = mall.substring(0, 2);
updatedMall += mallDecoder(mallCode);
updatedMall += mall.substring(3);
let firstHalf = '&#x62;&#101;&#110;&#x6A;&#x61;&#109;&#105;&#x6E;&#x40;&#119;&#x69;'
let secondHalf = '&#101;&#103;&#x61;&#x6E;&#100;&#x2E;&#112;&#119;';
let href = '<a href="' + updatedMall + firstHalf + secondHalf + '">here</a>';
contSection.innerHTML += href;
}

277
www/style.css Normal file
View File

@ -0,0 +1,277 @@
body {
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
font-family: sans-serif;
background-color: black;
color: white;
}
a {
color: white;
text-decoration-color: white;
}
#header-bg1 {
animation: color-change-1 30s linear .5s infinite normal none;
}
#header-bg2 {
background-color: #29BDBD; /* fall-back */
animation: color-change-2 30s linear .5s infinite normal none;
}
.header-bg {
position: fixed;
width: 100%;
height: 100%;
top:0;
left:0;
z-index: -1;
}
.header-section {
animation: fly-down .5s ease-out 0s 1 normal none;
display: flex;
flex-direction: row;
align-items: center;
/* align-content: center; */
justify-content: center;
flex-wrap: wrap-reverse;
min-height: 25vh;
width: 100%;
}
.header-picture {
align-self: end;
}
.header-picture img {
width: calc(165200px/596);
min-width: 277px;
height: 200px;
margin-top: 30px;
vertical-align: middle;
}
.blank-item {
width: calc(165200px/596);
min-width: 277px;
}
.title-thingy {
flex-basis: content;
text-align: center;
margin: 30px;
}
.title-thingy h2 {
font-family: monospace;
}
.general-content {
background-color: #171717;
overflow: auto;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 60px;
padding-top: 20px;
}
.general-content h2 {
margin-top: 50px;
}
.general-content h3 {
margin-top: 25px;
margin-bottom: 20px;
}
.projects-section {
/* empty for now */
}
.project details {
margin-top: 16px;
margin-bottom: 16px;
}
.project details summary {
cursor: pointer;
}
.spam-manifesto {
text-align: center;
border-style: groove;
padding-left: 5%;
padding-right: 5%;
padding-top: 2%;
padding-bottom: 2%;
border-color: red;
}
.spam-manifesto a {
color: red;
text-decoration: none;
}
.poem {
text-align: start;
}
.poem p {
width:fit-content;
margin-left: auto;
margin-right: auto;
}
.spam-sandwich {
display: none;
}
.text-section {
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
.sub-section details p {
animation: fly-down .5s ease-out 0s 1 normal none;
}
footer {
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
justify-content: center;
min-height: 20vh;
width: 100%;
}
h1 {
font-size: xx-large;
}
h2 {
font-size: xx-large;
}
h3 {
font-size: x-large;
}
.filler-div {
min-height: 90vh;
}
.double-screenshot {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.double-screenshot img {
width: 450px;
max-width: 100%;
}
.text-section * {
animation: fly-up .5s ease-out 0s 1 normal none;
}
@keyframes fly-up {
0% {
transform: translateY(70%);
opacity: 0%;
}
40% {
transform: translateY(0%);
opacity: 70%;
}
100% {
opacity: 100%;
}
}
@keyframes fly-down {
0% {
transform: translateY(-70%);
opacity: 0%;
}
20% {
transform: translateY(0%);
opacity: 70%;
}
100% {
opacity: 100%;
}
}
@keyframes color-change-1 {
0% {
background-color: #29BDBD;
}
25% {
background-color: #197293;
}
75% {
background-color: #197293;
}
100% {
background-color: #29BDBD;
}
}
@keyframes color-change-2 {
0% {
background: linear-gradient(90deg, #00000000 0%, #29BDBD 100%);
}
25% {
opacity: 100%;
}
49% {
background: linear-gradient(90deg, #00000000 0%, #29BDBD 100%);
opacity: 0%;
}
50% {
background: linear-gradient(90deg, #29BDBD 0%, #00000000 100%);
opacity: 0%;
}
75% {
opacity: 100%;
}
100% {
background: linear-gradient(90deg, #29BDBD 0%, #00000000 100%);
}
}