About Me (AtHeartEngineer)
Everything is a work in progress
Contact
AtHeartEngineer pretty much everywhere on the internet.
The Name
I chose the username "AtHeartEngineer" not because I consider myself an authority on the subject, or that I have any title of "engineer", I'm self taught and don't proclaim to know the right way to do a lot of things. I chose my psuedonym because it is how I think. I've always been curious of how things work, how they are built, and how they are designed.
This site
This is a mdbook site that I've themed. I started out with gatsby, but it was just a mess, the code wasn't clean, the process wasn't clean, and it was too much for just getting words out into the world.
It is a staticly generated, which autobuilds using github's actions and then deploys to google cloud hosting.
Plan
(In no particular order)
- Use this site as a homebase for my adventures on the internet
- Pursue my 1000 hobbies even more
- Software Development
- Fullstack
- Decentralized
- ML
- Embedded
- Design
- Graphic Design (particularly video and/or 3D)
- Circuit Board Design
- Audio (background music for youtube videos?)
- Manufacturing
- 3D Printing (FDM & SLA)
- CNC (3-axis router)
- Circuit Board Manufacturing
- Software Development
- Create youtube videos
- about hobbies
- teaching stuff I'm interested in
- for fun
- an excuse to play with software like after effects & blender
- Profit?
Streaming Info
https://www.twitch.tv/atheartengineer
Streaming Schedule
Tuesday's and Thursday's evenings EST...ish, life gets busy.
Who I'm usually streaming with
Coding
function test(params) {
// Test Code for syntax highlighting theming
if (params.length === 0) {
return 'no params';
}
return params.join(' ');
}
Background Generation
This is fun
const DENSITY = 100; // lower = more dense
const HUE_START = 120;
const HUE_END = 230;
const MAX_SIZE = 3;
const MIN_LIGHT = 33;
const MAX_LIGHT = 67;
const MIN_TRANSPARENCY = 10;
const MAX_TRANSPARENCY = 60;
const SATURATION = 100;
const START_ANGLE = 240;
const END_ANGLE = 300;
const MAX_SPEED = 20;
let bg_canvas = document.getElementById('bg-canvas');
let bg_ctx = bg_canvas.getContext('2d');
let width = bg_canvas.width;
let height = bg_canvas.height;
let num_bits;
let bits = [];
class Bit {
constructor() {
this.x = randomRange(0, width);
this.y = randomRange(0, height);
this.size = randomRange(1, randomRange(1, MAX_SIZE));
let hue = randomRange(HUE_START, HUE_END)
let light = randomRange(MIN_LIGHT, MAX_LIGHT);
let sat = SATURATION;
let trans = randomRange(MIN_TRANSPARENCY, MAX_TRANSPARENCY);
this.color = "hsla(" + hue + ", " + sat + "%, " + light + "%, " + trans + "%)";
// We want to generate a random angle between 180 and 360
// to make most of the bits go up
this.angle = randomRange(START_ANGLE, END_ANGLE)
this.speed = randomRange(1, MAX_SPEED) * 0.025;
}
move() {
this.x = this.x + (this.speed * Math.cos(this.angle * Math.PI / 180));
this.y = this.y + (this.speed * Math.sin(this.angle * Math.PI / 180));
if (this.x < 0) {
this.x = width;
}
if (this.x > width) {
this.x = 0;
}
if (this.y < 0) {
this.y = height;
}
if (this.y > height) {
this.y = 0;
}
}
}
function generateBits() {
for (let i = 0; i < num_bits; i++) {
bits.push(new Bit());
}
}
function randomRange(min = 0, max = 360) {
return Math.floor(Math.random() * (max - min) + min);
}
function draw() {
bg_ctx.clearRect(0, 0, bg_canvas.width, bg_canvas.height);
for (let i = 0; i < bits.length; i++) {
let bit = bits[i];
bg_ctx.fillStyle = bit.color;
bg_ctx.beginPath();
bg_ctx.arc(bit.x, bit.y, bit.size, 0, 2 * Math.PI);
bg_ctx.fill();
bit.move();
}
}
function resizeCanvas() {
bg_canvas.width = window.innerWidth;
bg_canvas.height = window.innerHeight;
width = bg_canvas.width;
height = bg_canvas.height;
num_bits = Math.floor(width * height / DENSITY / DENSITY);
bits = [];
generateBits();
}
// Event handler to resize the canvas when the document view is changed
window.addEventListener('resize', resizeCanvas, false);
resizeCanvas();
setInterval(draw, 20);
CSS Colors
These are some common colors I use in CSS, this is mostly a quick reference for myself. I imagine this list will grow with time.
:root {
--blackish: rgba(0, 0, 0, 0.98);
--gray-light: rgba(242, 242, 242, 0.6);
--white: rgba(255, 255, 255, 1);
--whitish: rgb(225, 225, 225);
--steel: rgb(108, 149, 153);
--neon-green: #59f02b;
--green: #19d457;
--green-light: #61f291;
--jade: #45a164;
--hunter-green: #405c37;
--dark-blue: #315db5;
--blue: #477eed;
--blue-light: #53d3e0;
--blue-very-light: #a7f6ff;
--violet: #9198e5;
--violet-light: #b4bbff;
--mauve: #cc71c2;
--pink: #bf2c7f;
--purple: #b638f5;
--sunset: #ff7575;
--sunset-light: #ffb585;
--orangered: #fa5f5f;
--max-red: #de1a1a;
--yellow: #fad14b;
}
Blocks
My Thoughts On Things
Deep down, I'm mad at the world.
I'm mad that the world isn't better than it is. This is what gives me my fire, my drive. I'm not sure if it's because I'm Irish, or it was how I was raised, or this is just common in some people.
That thought has popped in my head a few times recently so I thought I would write it down. It's not like I'm angry at anyone, or that I'm in a bad mood, I'm just... Unsatisfied with how things are, knowing what they could be.
Todo List
Site rework
- Hide all buttons on mobile view
- TOC autogeneration per section and on first page
- Tagging / date handling/display
- Theme rework, si\mplify further, less flashy
Content Ideas
I've never made a game before, and I've always wanted to, so here we go.
I am going to start out messing around with a side scroller, or maybe a tower defense game. Eventually I would like to make it multiplayer using libp2p (decentralized/serverless) and possibly gundb (saves state for everyone, where the game would be persistent).