Kira Iovenko

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.