dev log #4 :DDD

I’m going to do my best to continue be more comprehensive here.

Homepage updates

• added a book preview element:
  • thanks to a youtube tutorial by hankthetank, I was able to create a small preview that shows some of the books pages
• what makes this element so cool (in my opinion) is the animation, which mimics a real turning page
  (you could say its a real page turner hahaha im so funny)
• huge credits to www.turnjs.com for the js code that made this possible!
• • removed iframes *: as much as the iframes on the home page were fun, i don’t think they really made it easy to go the website and purchase the book, especially since they were aligned on the page more decoratively then utility minded…
  • instead, i replaced them with simply embedding links into the text. this felt more straightforward and made more sense, even tho iframes are fun

art lesson page updates

• created form to sign up for art lessons
• finished small bio section/lesson info
• i am now working on finishing the needed materials section, which is so tedious because i want to link every product/material to make it easier to find them

anyways, thats all for now!

Dev Log (^w^)

It’s been… a while since my last update, so here’s a big catch-up! I’m trying to document everything properly from now on instead of relying on my goldfish memory.

Homepage Updates

Glassmorphism

• Added reusable glassmorphism cards.
• Replaced a plain gray border with a gradient pseudo-element for more depth.
• Credit to the Hype4 Glassmorphism Generator for the base effect.

Animations

• Added floating stars to make the homepage feel more alive.
• Implemented scroll reveal animations so sections appear as users scroll.
• Created a reusable .swing class using CSS keyframes for playful hover animations.

Hover Effects

Added several interactions to make the site feel less static:

• Growing navigation buttons
• Lifting image cards
• 3D tilt effects
• Wobbling hanging images
• Animated logos

Art Page

Created a dedicated Art page that serves as a navigation hub.

Current features:

• Navigation bar
• “Ela’s Art Emporium” logo
• AP Art portfolio showcase

Eventually I’d like to add preview sections for the other art pages.

Art Lessons Page

Started building the Art Lessons page.

Current features:

• About Me section
• Lesson preview cards
• Images and descriptions
• Consistent card styling
• Hover animations

Still a WIP, but I’m really happy with the direction it’s going.

Commission Page

This has become one of the biggest pages on the website.

Features include:

• Accordion timeline explaining the commission process
• Pricing section
• Interactive commission builder that generates price estimates
• FAQ accordion

The commission builder was definitely the hardest feature I’ve coded so far, but also one of my favorites.

Art Gallery

Created a gallery using polaroid-style flip cards.

Since every painting has different dimensions, I added a full image viewer so users can see artwork at its original size. I may replace the buttons with a click-to-expand feature later to reduce clutter.

Next Steps

• Finish the Art Lessons page
• Create the Current Projects page
• Finish the About page
• Finish the Store page
• Make the website fully mobile-friendly (task of doom and despair…)

Okay I cant lie I slacked off on updating my dev log for like way too long oops! but we made a lot of progress!!! First of all, I finished the home page!! Yay!! I added a nav bar to the other pages (which aren’t yet finished) interactive elements liek slideshows, and other fun little sections. I am honestly loving the progress that is happening its come a long way for sure. There was a pretty steep learning curve at the beginning but now like 200 video tutorial later I finally feel like I know what im doing. Lets gooooo

I am working on adjusting the layout and creating the basic structure for my website.