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).