AHHHHHHHHHHHHHHHHHHHHHH

Sorting algorithm was made today. I decided on the most basic bubble sort. It is basically just 2 nested for-loops. This wikipedia article (https://en.wikipedia.org/wiki/Bubble_sort) has a great code example for it. It was relative easy. But the hard part was to get the animation going. The second part of the vid shows how it was without the fix for the animation. Finding out what the error was, was the first major problem. Fixing it was also hard, because I needed to save the target position after the box was created. This doesnt work, because you cannot call things after a return. Then after a good half hour of struggling and no progress, I asked my father for help. He is a full time developer aaand I hoped, that we could fix this together. He did gave some good calls, but the coding is still done by myself. After some together struggling, that lasted around 30 to 40 min, he proposed something genius. Save a version of the array of numbers, before every sorting step. That meant we need to compare the 2 arrays to get the difference and how the numbers got moved. I then said we could use some complicated for loops and then comparing stuff. He smiled and let me do. After some programming it was finally done and worked. But it wasnt optimized at all and was a bit laggy. Then he couldnt hold on anymore, laughed and told me that there is a dedicated js function just for that. I almost crashed out . Ya, that was todays session. I only implemented the dedicated js function instead of that. Ahh and before asking my father I also found out that js async is weird and that we need to use useEffect, kinda an event listener to see when the useState value changes. Ya, now that was it. See u later or tmrw.

Shuffle mechanism

Today was very successful day. The two major breakthroughs are creating the boxes dynamically and shuffle the height by math.random. I am happy that I remembered, that I could use useState to make an array and use the Array.prototype.map() function to simultaneously create the different boxes. And I can change the order of the boxes with changing the order of the components in the array, sooooo, that should be quite easy to archive. The random shuffle thingi was also quite successful. I just Math.random’ed some value and floor it to 2 decimals. Then I do that for every place of the numbers array and set it as new numbers array. This will update the numbers array, because of useState and let React-Three-Fiber rerender the boxes, resulting in a shuffling. The sorting will need an async function though, or else it will be instant sorting, which isnt the goal of this sorting thing. Enough yap, back to coding, eventually, maybe.

After messing around abit and finding out that it is possible to have multiple meshes, I finally started with the actual project and made a Box func. While making it I decided on doing it with an Interface to be able to learn that (the whole point of this proj was to learn ThreeJS and NextJS). This Box func can be reused and the properties of this box can also be parsed inside. Soo every Box is the same and makes animating easier. I also added a simple moving animation. Then the quest was to level the boxes on the bottom. After a whole 5 min of struggling, I found a random post saying I could do scale / 2, which also worked. The moving the box was the hard part, because NextJS requires me to use useState, or else it wont get updated. This took me very long, very very very long to get right. The moving seems abit laggy in the vid, but in real life its smooth, i dunno why, but ya. The last part, was centering this whole thing, because the camera always points to [0, 0, 0] which is strange, but whatever, so i needed to move the boxes collectively somewhere else. So I tried alot of stuff, but finally found out that groups have props too, so I can group them and move them to the left and down. This was great !! Later I need to find out how to do this automatically, but thats not present-me problem, its a future-me problem.

First devlog

My friend @Leon gave me this idea to work with ThreeJS in NextJS, so I can get familiar with both at the same time. And I said, fine whatever. I had the idea to do a sorting algorithm showcaser with pillars of different heights. And code different sorting methods to sort these pillars. Soo I created a Next instance like my personal site aaaand messed up. So I had to delete it and install again, WITHOUT TailwindCSS. Finally having a working NextJS instance I installed ThreeJS, but then I ran into the problem that ThreeJS didnt like pnpm, soo I reinstalled the whole shit with npm, which obviously didnt work. So I debugged the whole shit and every reddit post and stackoverflow post said to reinstall it again, so the installer cleanly installs the JSX module that was missing, which it didnt. So I decided to just paste the whole error message into google and there it was. The holy stackoverflow post that gave me a command to reinstall the dependencies and advised me to reload my vscode window to prevent cache. THIS WORKED!!! My next task was to read and follow the React Three Fiber docs, which is threejs but in better for react, so also for nextjs. I followed it (which was very hard, since its written unclearly, but I think when you know the normal threejs it should be fine, which I obviously am not familiar with) and after some time got an overall idea how this thing works. Then I found a task in this doc and it is to create a spinning cube. I took it seriously and made it todays goal. And here we are. To be fair, it was okay to finish, since there was already a sample code written in vite or whatever it was. I just needed to rewrite that for my nextjs instance. Ya that was todays progress. I think when I got the motivation to continue later, it will be waay easier to do, since I know the basics now.

Holy yap, bye, see u later, maybe, well, bye

readme

typed a readme word by word, I think it explains everything pretty well.

Improved the welcome screen to be more noticeable and fancier. It was quite a struggle and I tried alot of stuff. First my idea was to translate (move) it to the middle then zoom up and then do the same backwards, but uhh, CSS didnt like my idea and refused to work. Then I wanted to do the whole thing with scale. This worked a bit better, but not optimal. At the end I decided on just move it to the middle with some tinted blur and let it typewrite and then just clear. The most boring solution ever, but hey, here we are. I think we can get it to smooth move back down, but thats a problem for later me.

Edit: Ahh and CSS animations doesnt like me anymore, CSS overall is still okay, but I now hate to animate stuff in general, it is just AHHH annoying and confusing and I also played around a lille bit (the button that got commented)

not did much today, just added 2 commands, one linking my github and one my slack, the other command is just featuring github, that took longer, because I needed to write a whole paragraph, but uhh, todays mission was to keep the streak alive, soooo, ya

adding a welcome

I tried to add a welcome today, cause without it, my website felt strange, we always need an ASCII-art welcome screen thingi. In my terminal (pc) it is sth showing my stats and pokimons, and I needed sth like that for my website too. First I used this to generate a nice welcome ASCII-art and then saved it inside a JSON just like orphie. Then I added a specific command for it returning Welcome and implemented some handling in the constructOutput() function. After it was working with ASCIITextFrame being .join, just like any other json thingi, I wanted to have a typewriter effect and I just wrapped it inside. At first it went quite well, but then I realized, that white spaces takes time to being typed out too and tried to modify my typewriter function to just simply skip the timeout for it, it was quite confusing, but I managed to make it async and create a delay using await. There was a problem though, I didnt want to delete my old function, soo I created a try catch block to keep it as backup. After doing all that I realized I could break each line apart and typewrite then simultaneously. I wrapped another .map inside a .map and wrapped the lines in a span and then joined the construction with a line break. This went perfectly, but now I need to do animateWelcome() differently. I decided on querySelectorAll and a forEach loop. Figuring out how to get the spans where uhh, alot of guessing. At some point I even wanted to give the spans inside the .welcome container a class, but then I found out how it functioned. Using for each was also fun, I wasnt quite sure about the syntax, but google helped very quickly. But because of the white space skipping, they werent all in sync, because the number of white space isnt the same. The effect created was beautiful though and I left it. While writing this devlog I also modified the typewriter function a lille so I can choose if I skip white space or not.

Anyways, enough yap, bye.

AUTOSCROLLING

what the heck firefox, why, WHY, just simply WHY. okay, okay, i know that the scroll thingi should have been strapped to the body tag, but ey, I copied it from Leons terminal (mine is obviously better /j). But there is absolutely no reason you return 0 every time. AND WHY did you return a specific value, I think it was 3218 when I set ur height to 0? This doesnt make any sense at all. This was the weirdest bug in this entire project. My solution didnt work at first, but then it worked, but then it did not again and then I quitted and came back and then it worked again?? Like wth. I hope it stays now intact and I dont wanna debug that ever again, holy stressful 1 and an half hour.

Edit: ahh and I also filled the skills output command and added the interests command, both not placeholders anymore

MORE ORPHIE!!!!!

I added the other 2 animations, the time was mainly spend formatting the JSON and matching the height of every animation, so that the lowest bar doesnt jump, ya, thats about it, it was very exhausting, the sleep animation should have been longer, but I’ve cut corners. Enjoy this easteregg

Today was a very productive day, I implemented the arrow up and arrow down for history, added the age counter (idea yoinked from @Leon), but I made it cleaner, because his version had leap year handing and mine just simply use milliseconds to be accurate, only one line, instead of a whole function, I think this is progress, even faster now. I animated the age counter, but just before writing this devlog, i realized that it wont work that well and improved it. However the best thing was orphie. @Leon gave me some gifs and I first extracted them into individual frames and HOLY, Leon, what did u do in orphie sleep, 40 FRAMES!! DO U WANT TO KILL ME?? Anyway, I chose the one with the least frames and converted it into ASCII-art using this. Then I slapped the 2 frames into a JSON file and put every line in “”, and then joined them back together in the code. It was quite fun to animate him, go check it out by typing orphie https://lumethra-personal-site.vercel.app/

The idea was already very clear in the beginning. After executing every
command, save it to local storage in a JSON. First I played around with
local storage and after I understood how it worked I started with the
task. But I ran into a major problem. Local storage only accepts
strings, so it is kinda impossible to store the history in JSON / array.
I first tried to slice the strings where the separator was, but this
solution wasnt elegant and will cause problems when I wanna implement
the arrow up to the last used command, simply just the command history
thing from kitty terminal. After wasting some time on the separator
solution, I came back to JSON and after looking through what I did in
other projects, I realized that there is a build in function to turn a
JSON into a string and back, called JSON stringify, it used to be my
favorite build in function, because it is sooooooo handy. After this
thing was solved, it was time to implement clear history and clear.
clear history was easy, its just simply delete the local storage entry
and I solved it with an if statement, ik its not great, cause hardcode n
stuff, but who care, not my problem currently, future Maximilian
problem. The clear command was something else. My final approach was to
simply clear the history container with .innerHTML = “” and run it as a
function. Enough yap, bye

well, ima need to write this again ig, stardance had a bad gateway. I added a typewriter effect. First I tried to do it with only CSS, but then I found out that uhh, it doesnt work on <input></input>, what a bummer. Well, then I tried to make it with a function and a fancy for loop, well no, I first tried with a forEach, but it somehow didnt worked, it said, that there is no forEach function. Then I tried with a for loop. I also found out that JS/TS are async programming languages. The for loop simply doesnt care if the setTimeout finished or not . So I needed to find another approach so the typewriters (when I call the func multiple times) dont interfere. The only reasonable solution I found was using an async function and await. Await also cause some serious problems, cause it just didnt wanted to work. VS Code then suggested me to return a new promise. IT WORKED. Ahh, and the CSS approach was from here.

To any vibecoder out there: Try coding without AI once, its fun, but I need to admit, its also slow, but its fun and that is what counts right, right?

today I added a artificial delay, so the terminal feels more natural. I also added an indicator (the one with the X in the image) which toook waaaaaay too long. It was very hard to get it to show the X or tick corresponding to the response, because I tried to do it with ifs, so I needed to match every case, but then I realized, that I can use the bool ? true : false method, which made it alot easier. I also struggled to bring it to the right, because I tried to use flex and justify-content: space-between. Normally this will work very well, but I had more than 2 divs, or in my case spans inside the container, so it stretched the whole thing out and that wasnt great. In the end I decided to hard code that with position absolute and right 20px (body has 20px padding). Another funny error was the inline style. In NextJS u handle style like this <span style={{ position: "absolute", right: "20px" }}>, but u need to change to normal html when using the .innerHTML function, so <span style="position: absolute, right: 20px">. This confused me quite a while. But ya, here we are.

I implemented the command functionality. It is great to actually code again. I have mixed feelings about NextJS. On the one hand, I love how it simplifies things, for example with .find or useRef (Stackoverflow my goat for finding them, but WHAT THE HECK IS TYPE DEFINITION, I WILL GIVE IT TYPE ANY ANYWAYS. The “JS injection” from JSON is also a lille bit janky, but we luve JSON, JSON is great. I also rewrote some things to let it be smaller, (u can see it, the big comment block). The if in a const is also GREAT, how do so less ppl use it.

Next step: adding command history, easter eggs, fancy tui stuff and some more stuff

I started my proj and tried to recreate my terminal setup (2nd image, not the green one). I also decided on trying out NextJS legit this time, sooo uhh progress is a lille small, but its coming together. I also decided on this greenish style. I also implemented an auto focusing input (stole from some random stackoverflow xD). Ya, thats about it, the cleaning up of the files after creating took very long, ahh and the JetBrainsMono Nerd Font was also quite a hassle (it was just the “” missing lol).