Kira Iovenko

Hey guys, added a couple of things today. First, I finally added a README, which I probably should’ve h done a while ago lol. And also, I updated the banner generator tool. I realized that having only one color background was pretty boring and limiting, so I decided to let the user have some more freedom by enabling YOU to upload a custom background! Yup, now there’s an option to upload your own image to serve as the background for your epic bannersss.
You can adjust the size and placements via the controls I added, which are the x-axis, y-axis transforms, and a zoom to scale the image. They’re sliders that appear ONLY IF you have added a file.
Oh and obviously I had to update the reset banner button to remove it :b
Also now there’s a remove image button to get rid of it altogether. It also hides/shows depending on if you have uploaded anything or not.
That’s it! Pretty much I think the site’s looking pretty finished!

In these past days Ive learned about adding tables to html. So, i decided to make a todo list tool!
I added full function UI for it where you can input the task descirpiton, date, and time. This is basically for the due date column and time columns. Besides that there’s an add button that pushes your info into the list table.
The table’s divided into rows and columns, and you can see border outlines like in spreadsheets. It will show your task, the date, and time in corresponding columns and rows.Also I added a delete button that you can use to…delete the task obviously.
BUT if you get motivated by seeing your tasks CROSSED OUT, i added an option for that too with a checkbox to the left. You can check it to get the “crossed-out” effect on text and it also turns opacity down a bit. I decided to center it all in a widget so it doesn’t look awkward when the to do list is on the left and there’s a bunch of empty space on the right..

And finally I added some styles to handle dark mode as well so that the UI is readable and easy to navigate!
Then I integrated the link to it in all other tool pages!
Plus I extend Queenie’s dialogue system with Todo List-specific messages, so make sure to check them out too~
That’s all, have fun and good luck getting your tasks done!

So today I returned to improve Queenie’s toggle system as promised! I added a new state to her with opacity/transform transitions for smoother show/hide animations. Plus she’s got a bounce now too, whenever she shows up that is. I spent a LONG time debugging though, struggling to get the animations to show up. You know why? Because I forgot about a hide class already in css that was overwriting all my queenie-specific code… i feel dumb. But I’m glad it’s resolved now… at least it made me add some extra lines of protection against program crashes, along the way :b
O and while at it I had to tweak some Queenie toggle logic to use class-based visibility instead of direct style manipulation, and updated button text dynamically (Hide/Show Queenie) b/c it was glitching after I made some change sto the css.
And while at THAt I added some space between the dark mode button and the toggle queenie button. To make it easier for future use I just grouped them into the same container of settings-btns. now the stretch full length of the sidebar also!
That’s it byee

Long time no coding..! I came back to work on improving Queenie now that the tests are over. So in short what I did was add toggle visibility system w/ persistence and dialogue flow updates, but here’s in more detail for anyone curious:
I added a “Hide Queenie” toggle button on all the pages so that now you can actually make her GO AWAY if you don’t ant her there.. :) but you can also bring her back upon clicking the button again. For this part i also used localStorage-based visibility state. I still wanna improve on it though, its not final version. I want to make the animation nicer but i’ll likely do this tomrrow.
Next uh yeah I added a modified dialogue system where i control progression behavior based on if it only allows one dialogue or several dialogues per page load. Basically i added fucntions for repeat visits (non-progressive random dialogue) and some prevention from clicks from advancing dialogue when in single-dialogue mode. I alos made it so the program auto-hides her textbox after delay when text finishes typing, so the textbox doesnt linger there forever.
Oh and the dialogues are randomized in a way that u don’t get the same one twice :) Hope yall enjoy! more updates soon…

I did something reeeally fun today… worked on making oe of my own office-format desktop pets! Well, right now it’s a bit of a stretch to call this a “web-pet”, but now the dog follows you from tool to tool!! Hopefully it’s not an annoying change lol..
In some more details:
I moved Queenie HTML creation from static index.html into JS (createQueenie function) and essentially initialized Queenie on DOMContentLoaded for all tool pages. Also hence why she’s not really “moving” but instead appears on teh same spot. But I’ll fix that later.
I used a path-aware asset loading for tools subdirectory to like get that modular setup functions ( like dialogueSetup and clickSetup)
AND added contextual dialogues based on what current tool youre on. While at it i altered mytyping/talking logic.

And i finally fixed a css bug!
I realized why my links on the sidebar had a wonky jumping effect… i forgot to add padding to anything with a class “active”. Now all the links have equal, balanced spacing between them. Beauty!
Well, lemme know what you think about the Queenie update, I’m for sure gonna work on enhancing it more! :)

Added a new tool to KITools today, a JSON formatter and validator!
Ik this one’s pretty straightforward but actually super useful b/c you can now paste in any JSON and either format it nicely (with proper indentation) or validate it to check for any errors. I used try/catch for that. Basically if it’s valid, it gives a clean success message, and if not, it shows the error so you know what went wrong.
And ofc I styled it properly :)
Hopefully now someone can find use of it and make debugging json less tedious :b
Also added a lil output box to display the formatted JSON or errors.
AND updated all the relevant pages and fixed the HTML Preview link path on the homepage since it was pointing to the wrong place before loll, surpirsed it still worked.
Anwyay, might expand it later with things like minifying JSON or maybe even file upload support… we’ll see :)

Two changes made to my generators! So I added a reset button to the banner geenrator and also improved the UI and layout for my qr code generator. To be more specific, I improved QR code and banner tool UI and layout changing the the banner-info-group and banner-info-row classes to be more global, by changing it to tool-info group/row so that QR code tool can share that oragnized layout too! Plus I updated the wifi info selection so that now it collapses into view via show transition. I know it’s not the smoothest thing, but to me it looks neat enough. If there’s a more efficient/better wya to do a showing effect plz let me know lol…
And now for the button, uh, it’s straight forward. I added a reset button plus the functionlity to make it work. Now when u click it on the banner it will reset all: the titles, colors, and positions.
I’m thinking about adding a local storage for the banner too, but idk if that’s really necessary… so i might add it when i run out of other ideas :)

Ha! Didn’t notice you could move the title and subtitle outside the banner area… I fixed that. Now the texts are bound to the max width and height of the banner.
Also I refactored the UI :) I deicded to reorganize inputs into grouped sections for text, colors, and sizes and added what you call a grid based layout for the control panel. Did that by adding banner-info-group and row styling. Now it should be more orgnized and clean (or so I hope)

Holy, I legit spent around an hour trying to figure out why my thing’s not working.. anyway, so I tried to make the banner title and subtitle draggable, so it’s not just closed in place in center, right? I used .getBoundingClientRect() to get the size of banner title and its position and then adjust it’s position based on your mouse movement. I kept reriting it until I eventually realizes that the css bannner-display class was overriding the new positions…hence why the title didnt seem to move… well and then i moved on to make the subtitle movable too! but turns out so far I’ve been HARDCODING the title to be movable…. so I had to rewrite it all as a function instead that will take it either the title or subtitle as parameter and adjust it accordingly…
Turns out that’s a very efficient way to write code like that, so yipee :D i was smart and got it working!

Ha, so that was quick actually :) I’ll devlog anyway
So I add inputs for title color and subtitle color customization so now there’s an added range input for adjusting subtitle font size!
Of course I also updated the banner.js to handle new inputs apply your text colors and subtitle size to the css.
Should I make the labels and color/range selections be in the horizontal direction? Or is it good as it is right now (vertical)?

So, since yesterday I did a QR code geenrator, I got inspired to make a Github banner generator too! So that’s the tool I made today. Yeah, right now I chose not to focus on styling the QR code generator and instead make another tool… that’s because I plan to style that page later… yu need to act when you get the motivation/ ideas, right?
So like I said I added a GitHub (to be specific) Banner Generator tool with live preview and UI updates like bg color and text size. As well as title and subtitle inputs.
Another little thing I chnaged tho is I decided to introduce new “Design” category in navigation tab and include Banner Generator link and QR Code Generator link there. I just thnk it looks much cooler having more categories for tools… PLUS banner generator and qr code geenrators are both GENERATORS so hey, that works, they get their own special category!
Anyway, I’m still working on the banner stuff as I plan to add an option to customize text color as well as change the size of subtitle. And then an option to download the banner. AND onl after that I’ll maybe try to add some cool features like dragging text around, but I’ll have to look that up …

That’s it for now!

Okay! I added support for multiple QR code types now, which includes WiFi, phone, and URL plus the text.
For the wifi I added WiFi input fields (SSID, password, encryption) with conditional display and updated JS to generate QR codes accordingly! Btw, I made it so that the qr code generates anyway even if you only enter a wifi name (no password), but I don’t think that’s a problem… it might actually be good b/c I was initially going for that “live updating” look anyway. But you guys let me know if I should change it in any way!
Also made some small adjustments to CSS for QR code container and labels.

We’re almost halfway through March.. if there’s any ideas for tools anyone would like to see added here, don’t be shy to about writing your opinion here, ok?

Hey all! Today I further improved the customizability of the QR code by adding option to choose the foreground and the background colors. Although as I was testing it I realized that if both colors match the QR code won’t really be useful… so i made it so you can’t do that (do them both of the same color I mean) >:)
Also moved the download button below the QR code for aesthetic purposes.
Next step? Gonna be working on adding QR types (URL / Phone / WiFi / Text) so that yu don’t hav eto manually chnage the beginning part fo the link!

Hey all, so today I worked on a new tool for the Utility section. It’s a QR code maker! The goal was to make a QR code generator where users can create, customize and download QR codes. And right now it’s got all the basic features of you, the user, being able to enter website link, text, phone number, WiFi info, etc.
Then you click Generate and it will display the QR code instantly. I used the QRCodejs library btw!
Right now you see the input box on the left part of the screen, and the download button underneath it. Oh yeah, and there’s aso an option to download the QR code as a png. Anyway, to the right I added a widget where the qr code will display when you type something into the input box.
I’m gonna work on adding the color selection options now, so it’ll be like choosing background or the qr code line color or something else maybe!
I’m looking for inspo on other sites too, so if anyone’s got feedback or ideas please lmk, I appreciate all input :)

Hey, yesterdsay I didn’t devlog but I essentially added a blinking animation to the dog sprite in the main page. Now she’s blinks randomly every 3.5-7 seconds or so. Today I added a HTML preview tool with live iframe preview. I wanted to make a mock-code-editor but simpler. Right now it doesn’t catch errors tho, so if you write Hi it still outputs it even if there’s no backslash. I might fix that or just move on for now.
But yeah, I think most of the time went into learning what’s more popular in modern sites for doing basically the same thing (like CodePen).
I was rewriting the same code again and again, experimenting with style and output result. Perhaps next I’ll try to make the preview update live while you type!
It’s also probably the quickest tool I’ve done so far lol.

Today I updated timer tool’s progress circle to adjust to the changing dark/light modes, as well as the display text. A big improvement was that I added an actual alarm sound instead of a alarm in the browser; i tried to choose a calm sound :). That led to me refining the screen to be flashing and the display time changing to text.
I did the same thing wiht the alarm for Pomodoro btw!
Anyway, I also worked on the pet~
Now her dialogue system’s with typewriter effect and multiple messages. And she now greets you differently based on if it’s a first or return visit! I also added click handling on textbox like in real RPGs to advance/skip dialogues.
And that’s it, the rest are minor css tweaks but I won’t list all the neat picky stuff lol

Small update but hella cute (in my opinion)! I added a dog “guide” character with animated dialogue to the main page so it doesn’t look as bland! She’s in the bottom-right corner and has a typing animation and talking sprite toggle. I did it with 2 png’s that change quickly to make a talking effect. The sprite is also my original work, so I’m not using someone else’s sprites!
Well and of course I adjusted the dark mode to fit it as well. Honestly, the longest time was figuring out how to do the animation and find the best placement for the textbox and Queenie.
I hope to make the textbox actually look like a textbubble like you see in RPGs!
And hopefully make her an intercative pet :)

Today I finally started on the pomodoro tool. Honestly, idk why I’ve been procrastinating on it. After reading about the logic I realized I overcomplicated it in my head lol. So basically today I implement ed a BASIC Pomodoro timer UI + functionality. It’s got the the tsrat, pause, reset buttons and 2 modes to choose from. It’s the classic 25/5 split right now. Later I wanna make it customizable.
Also I plan on doing the circle timer effect I did on the “timer” tool, should I do that? Or would they be too similar? I can make the line be thinner and more “aesthetic” if you know what i mean.
Also right now its got an alert message at the end of the timer, but I’m thinking of adding another type of visual for that….
;)) I’m already thinking of something fun that’s gonna be added later… a lil pet perhaps… wait and see lol

I did another quick round of improving deck card layout and button styling. Basically, I moved the “Study” and “X” buttons to be below the deck title, and I switched the circular format of the dleete button to be rectangular like the rest of the buttons. And since it’s got color, I chose to make the study button green/ olive.
I also touched up a lil on the coin background. So yeah, the flashcrads are pretty much good to go i think. I’ll either start on the pomodoro or do another quick tool for the “text section.

BRUHHH I just exited out of my devlog ;-; Gotta rewrite it again so I’ll be brief
I refined the CSS for dark mode today, mainly to make the text for user-friendly with actual readability. Also I worked on adding functionality to my flashcards tool.
Sepcifically, I created. astudy mode option where you will see your cards dsplay one by one. You can press “exit” to exit the study mode and regular deck view will be back up. Next I also added logic to the search bars so that you can search for decks/cards and they will display in the corresponding grid. It searches for the closest match and hides the other decks/cards.
Right now tho i didn’t yet touch on stylying the study button properly, whoch is why it looks pretty squished imo to the text. I’ll work on fixing that.

Not much time to code this weekend and following week tho b/c there’s SAT coming up… good luck to any of y’all planning on taking it!

I updated my README file

Finally got around to try implementing a dark mode feature! Although I just picked out the colors and wrote the switching logic… it looks pretty rough to be honest in some pages. But overall. so far, it looks good I think. If anyone has feedback for it or suggestions, please share, I’m always happy to hear ways to improve my work :)
Ahem, it more details, I added a PERSISTANT theme toggle for dark mode. So I had to go back and refactor some existing colors in CSS to use custom properties. I replaced many standard # colors with vars in :root. And started on updating my pages accordingly. I don’t like how the flashcards look still, but again that’s what I’m gonna focus on for now.

I did a quick session today, polishing the timer setup screen. Since, yesterday, the button inputs were vertical and gray, I adjusted that. Also I replaced the hor/minute/second fields with custom arrow controls that can change the time by 1’s. Sadly, the user can’t manually type in the time yet, BUT that’s what I plan to fix tomorrow (if have time… no pun intended).

Uhh whoops I should’ve devlogged earlier, I had this moment of “ok i got the basic logic written” but when I went in to try and make it more functional I got hit with bugs…many bugs. Got it resolved tho!
Anyway yeah, today I decided to add a new (kinda basic )tool, a countdown timer. I saw someone use svg to make an animated circle timer so I decided to remake that! Basically you can select the timer duration in the first screen, then you hit “continue” and get faced with a full circlewith numbers inside of it. When you click start the timer start counting down, and the circle moves too. I barely got it the logic working today so i decided not to risk making the first screen “fancy” today.
So please don’t mind the boring first screen time-inputs! I’ll make them prettier :)

Didn’t have much time ot code today. I still wanna code at least an hour daily tho.
Anyway, I added versioned localStorage persistence with load/save handling, fixed some important typos, made it so edited cards stay reflect in stated-earlier-storage, AND added an animated divider! Also centered the delete/edit buttons for cards, but yeah that’s it for today

Made the site cuter :D So far I made the UI more pastel and added CSS custom properties by adding :root for common color palette, then applied it throughout the site like on the sidebar (w/ hover accents and borders) and learned to add a radial background (in the main view). Rounded more buttons’ corners, cleanened shadows, smoothd transitions, etc.
Oh yeah and also went back to the coin. The coin now got gradient faces w/ inset borders, a cubic-bezier spin, better transition handling instead of timeout(). I also did a little bounce effect on landing. Plus for flashcards I changed the card and deck widgets w/ gradients, hover lifts, restyled the delete button,
BASICALLY applied the new css everywhere, but looks cute does it not?

Bugs fixed! I added nice slide animations for next/previous navigation buttons so cards now move left and right smoothly instead of just snapping. I created an animateCardChange() helper to handle transitions cleanly and wired up click-to-flip so the whole card flips instead of just the text. I also added full editing support using an editingIndex state, refactored the save logic so it handles both new and existing cards, and made sure cancel properly resets edit mode. Cleaned up event listeners to consistently use the cardList container (instead of mixing with cardGrid), fixed rendering issues, and did some small CSS/HTML cleanup. There’s some stylistic changes I plan to play around with still, like button position and more interesting color palatte

I know I said I was gonna work on the save buttons, but change of mind. So I refactored the flashcards interface. I tried to improve both usability and structure by replacing the old list-based card view with a responsive grid layout built around reusable card widgets. Each card includes inline edit and delete actions. But I must’ve accidentally deleted or changed the buttons somehwere because neither the flip, next, or previous buttons work :( Tomorrow I’ll have to debug that
I also improved event delegation to properly handle grid-based interactions and ensured active card state remains consistent after edits or deletions. On the performance side, I optimized the flashcard flip animation by adding a will-change hint for smoother transforms. So hopefuly this makes UI cleaner, more scalable, and significantly more UX friendly.

Did some redesigning of the flashcards layout to separate deck and card views, replacing the old sidebar list with a responsive grid of deck widgets. I implemented a modal-based deck creation flow instead of using prompt, added deck deletion support, and introduced an empty state message when no decks exist. The deck widgets now include hover effects and a styled delete button, with updated CSS for the new grid layout and UI polish. On the JS side, I refactored rendering logic to support view switching, added back navigation from card view to deck view, simplified the card list to show only front text, and ensured the app initializes cleanly with renderDecks() on load.
Only issue is the save card button doesn’t work right now…WHICH IS THE MAIN PURPOSE OF FLASH CARDS! :( I’ll work on debugging that. This day’s focus was getting the deck to style the way I want it to. Lemme know guys if you have nay feedback or ideas for more tools!

Hiya, this time I replaced the prompt-based card creation with a proper modal form thats got question and answer inputs, and with a save and cancel actions. I added the necessary modal styles and a reusable .hidden utility class in CSS. Also refactored the card list to use event delegation with data-index attributes instead of attaching individual click listeners, and made sure the active card state updates correctly when navigating with the next and previous buttons. I also removed the CSS counter-based numbering from the card list, cleaned up the related rendering logic, and added the lang=“en” attribute to the flashcards HTML document.

Okay, so, I finally finished debugging the whole bugs out the flashcards feature. BUT rigght now I managed to make it so you write the question and answer in an alert that pops up, I wanna change it tho. I want it to be functioning in the small “add card” section at the bottom so that what i’ll probably do next. There’s now a dedicated flashcards deck and card management, navigation between cards, and a list view so you can see everything in your deck. I also updated the sidebar to include flashcards (forgot first time WHOOPS) and cleaned up some letter consistency across pages (titles and headings now have same capitalization). Also CSS changes for better layout and interaction styling like rounded corners, shadows, and improved spacing, and changes to flashcard flip and list states so interaction is smoother. Also likely I’ll keep refining the UI and logic so deck management and card viewing are more intuitive.

Im begun working on a flashcards page setup, so I created separate HTML file and JavaScript file for that. I added the css for it too with dark, clean buttons, an area to view your deck with rounded corners and subtle shadows. I also centered the layout. Also styled the card with a 3D flip effect when flipped. I’ll keep working on polishing up both the UI and logic so you can actually interact with the cards

Im back: I refactored the app from dynamic single-page loading to a multi-page setup, so each tool now has its own standalone HTML file instead of being injected into the main view with JavaScript. That let me delete main.js entirely and simplify the navigation to normal links.
I redesigned the UI a bit too: darker, cleaner sidebar with uppercase category labels, softer main background, updated button styles with hover lift + accent color, and improved textarea styling with rounded corners and subtle shadows. I also centered the coin flip layout and doubled the coin size to make it feel more impactful.
Each tool page now includes the full layout (sidebar + main view) so navigation is consistent across pages, and I added proper active states in the sidebar instead of relying on JS.

Back again, school’s been busy so I didn’t have much time to update :/
I finally added an About page to the website. Its got a short biography and a portrait photo, and ofc I spent some time to make the layout stay clean and responsive on different screen sizes. I updated the navigation on all pages so the About section is accesable and added a new painting (“Moonlight”) to the Art III gallery. Mostly small but meaningful updates, but I’m really liking that the site is coming together and looking like a pro’s art portfolio :D

GUYS, CLEAR CACHE ON WEBSITE IF CHANGES DON’T SHOW
Anyway, I did a BIG cleanup and consistency pass across the site. I updated the navbar so the current page is clearly highlighted instead of being a clickable link, which makes navigation feel more intentional and less confusing. I also restructured all the gallery sections by wrapping them in a container that lets me add a soft fade at the bottom, insteas of the scroll-fade effect I had going on in css (it overlapped the footer).
Also switched all of my image to webp format so that the png versions don’t take a time to load after opening the modal.
I also introduced CSS variables for colors, fonts, and border radii, so the design is more cohesive and easier to tweak without hunting down random values. This also helped fix a weird divider issue where it technically existed but wouldn’t show up (flexbox was being sneaky again). The divider now animates correctly and actually shows up like it’s supposed to.
Plus I dded a the footer to ALL the subpages, updated the copyright year, and fixed some wording. Oh, and I slightly slowed down the carousel animation because it felt a little too fast before.

I fixed a few things with the modal images. Now, when you click “expand” to zoom in, the image properly centers and the caption disappears so it takes up the full space without cutting anything off. I also made sure that when you close the modal, it resets back to normal size for the next image, so no more lingering expanded views. And, the close and expand buttons now stay visible and in the same spot even on really big or tall images. The expand button got a nice semi-transparent pink highlight too. I hope you guys feel like it became more reliable and user-friendly, y’know? Gotta ensure the gallery the pleasant :)

It’s been a few days of no coding… but today I’m back, and I’ve added new artwork to Art-2D page.
Also, I was experimenting with the color palatte for the webiste - specifically, changing the vibrant pink I use for text + hover buttons. What if it were lavender or some other purple-ish color instead, to match the blues? —If anyone wants to share their feedback, I’d be happy and grateful!! :)) —Keep in mind tho that the titles in big letters are images, so they can either stay the vibrant pink or get recolored too.

Omg finally…. I struggled to get the logic working buuuuut I added a new Coin Flip tool with its own HTML, CSS, and JavaScript, a 3D flipping coin, a flip button, and a result display. I wired it into the sidebar so it loads dynamically like the other tools, updated the main CSS for coin styling and animations, cleaned up some button and text formatting, and removed the old unused whitespace CSS file. I thought it’d be easier lol

I wired up dynamic tool loading from the sidebar into the main view, added the first actual tool (a whitespace remover) with its own HTML and JavaScript, and updated the CSS to support textareas, buttons, and an active state for the selected tool, along with some minor formatting cleanup and giving the main view an ID so it can be targeted by JavaScript.

I set up the initial HTML structure with a sidebar and main content area, added a main CSS file for global resets and layout styling, and moved the JavaScript into a js folder, and removed the old unused stylesheet.

Today I added a little “expand” button to the modal images on all the gallery pages so you can click to zoom in. Also I updated the CSS and JS so the modal scales properly when expanded and shrinks back when you click again. I also finally uploaded a few new 2D pieces so feel free to CHECK IT OUT :D The HTML got a tiny restructure to wrap images in the new modal wrapper, but overall everything still hooks up to the modal like before. Feels nice to finally have a proper zoom feature working across all the galleries! But I’m gonna see if I can make it more “pretty”

Today I fixed some HTML structure issues by moving the modal inside the body on all the gallery pages so everything’s more consistent and less fragile. And while on that, I finally started setting up the Art II 2D page properly by adding the gallery section and hooking it up to the modal like the other pages. I also spent an embarrassingly long time tracking down a bug where the Nightingale piece wasn’t showing in the modal (turned out the image was a JPG, not a PNG 🙃), so that’s fixed now too. I dug up some more drawings from previous year(s) so tomorrow I’ll take good lighting photos and upload them.

Today was also a cleanup and polish pass across the art pages, b/c I tidied up the HTML formatting on all the galleries so things are more consistent and readable, and while I was at it I added a new painting, “Unchained Reverie,” to the Art III Painting gallery! Also the modal got a small but nice improvement, it can now close with the Escape key. I also added a proper footer on the main page with copyright info and a little site credit, and did some minor CSS fixes like adjusting spacing, updating font families, and cleaning up modal styling. Again, hopefully stuff looks more polished and cohesive to the viewer now.

I did a pretty nice cleanup pass on the art pages this update. I switched the gallery images over to WebP for better performance, which was actually an idea suggested by a commenter, so big thanks for that! 🙏 The galleries now load lighter images, but the modal still pulls up the original PNG/JPEG versions so nothing is lost quality-wise. Also fixed some HTML structure issues on the Art III Painting page (including an embarrassing body tag typo i didn’t even notice), cleaned up the layout, and improved the modal behavior so it locks scrolling properly and closes more reliably. Overall things should feel smoother now.

I decided to update and improve the modal animations so that the images and captions now fade and slide in smoothly, and the close button appears more naturally. Now the modal layout adapts better to different screen sizes, so the artwork feels more centered. Next, I might adjust the module to look bigger and maybe some other stuff.

I added a clickable modal viewer to the Art III Drawing and Painting pages, so now you can click on an artwork to see it bigger, along with its title, year, and medium. This was my first time making an image modal, so it kinda took a while to figure out how everything should work and to debug some weird issues. Basically, a lot of trial and error, but I got it working in the end, which feels tbh feels rewarding enough.

Right now the images fit a little differently depending on their size, so some look bigger than others in the modal. Next up, I’m planning to focus on fixing the sizing and layout so everything feels more consistent and actually fits the screen.

Yay! I’ve added a subtle particle background to the main panels on the homepage and the Art II/III pages! Now they’ve got a bit more “life” and visual depth. Each panel now has a dedicated for the particles, which respond to mouse movement and adjust dynamically when the window is resized. The effect is lightweight and interactive, so it doesn’t distract from the artwork but adds a nice ambient feel. Also I updated the CSS to layer the canvas correctly behind the content and ensure the panels and text remain fully readable.

I’ve refined the Art II section with a new overlay header that’s got a dedicated logo and short description, so now the 2D page has a clearer identity right from the top :) Also fun addition: I added animated divider elements beneath the headers on both the Art II and Art III pages, helping separate sections while keeping the layout feeling cohesive.
In more behind-the-scenes specifics, I had to add a Art II–specific body class to allow more targeted styling and cleaner overrides because the short logo didn’t style like the others. I also reorganized the social icon assets into a dedicated images/socials directory and updated their paths, making the asset structure more consistent and easier to maintain.
On the presentation side, I added new Art II logo assets, centered and resized logos across subpages for a more unified look, and refined panel spacing so the subpage layouts breathe a bit more. Divider animations were also tweaked to feel subtler and more intentional.
Next I’m really fixated on figuring out how to make the panel more engaging by adding some moving dots on it!

I’ve updated the Art II and III pages to use a subpage layout for better spacing and readability. On the Art III Drawing and Painting pages, I added logos and overlay headers to give each section more personality and context. I also reorganized the artwork into separate folders for drawings and paintings, added new pieces like pencil vases and acrylic portraits, and redesigned the galleries with a masonry-style column layout. Also, to make these more, say, “alive”, I added scroll-fade overlays and fade-in animations for images as they appear on screen. The social carousel and other scripts now run safely across all pages, and hover effects on images have been refined for smoother interactivity. Next I’ll keep adding more pieces once I take better images of them, rn the lighting’s not top quality lol

Big news! I created a logo and an interactive social carousel. I always wanted to learn how to make a carousel, and I’m super happy I managed to create one :)
The site logo has a fade-up animation and hover scaling effect. The horizontal social media carousel has GitHub, Instagram, and email links. I also added smooth pause-on-hover functionality for carousel via script.js. And I styled it with fade edges, hover scaling, and opacity effects.

I’ve expanded the Art III Drawing page by adding an overlay header section and a full gallery layout to better showcase my artwork. I also uploaded new drawing pieces, like a sunflower, a De’VIA-inspired owl sign, and a charcoal portrait. I also implemented a responsive grid-based gallery and added hover animations to the artwork images for more interactivity and visual beauty. And I refined the navbar hover effects by adding subtle scaling and text shadows to create a more polished interface overall. I really wanna fix the image layout so it looks like professional art portfolios so that’s what I’m likely going to work on next. And also adding more drawing!

So far I’ve added new Art II and III pages to the site, including art2-2D.html, art3-painting.html, and art3-drawing.html, all of which now share a consistent navbar for easier navigation. I updated the style.css file to improve layout and color scheme, and responsive design. Also added script.js for future interactivity. New CSS enhancements include hover effects on navbar links that slightly scale up on hover, as well as interactive art image that scales up and lifts with a subtle shadow when hovered over. Basically I’m going for a more dynamic and engaging user experience :)

I’ve added an actual painting (Altanka) to replace the placeholder and updated the homepage layout to showcase it. Also the left panel now has my personalized artist statement where I introduce myself, talk about my approach to color, detail, and exploration of new techniques. After tedious minutes spent adjusting CSS to get the right layout, responsiveness, and visual balance, the overlay now spans the full viewport width, the panel uses flexible wrapping, and the image scales appropriately on smaller screens.

I’ve decided to create a website to store my artworks throughout the years. It took some time to plan out how each page will look like, but now I’ve begun to put everything into code. So far I’ve built a basic HTML/CSS layout with a full-width floating panel that has top and bottom margins, split into two columns: the left side has a centered title and placeholder artist statement (with a color pallate that I probably spent too long experimenting with), and the right side has a dashed image placeholder. Also I’ve added a subtle box shadow to give the panel a floating effect. My next step’s gonna be either making the layout responsive or adding actual artwork, I haven’t decided yet.