Art Portfolio

I updated my README file

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.

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.