Style Design With AI

Style Design With AI

Today I've been playing around with some of the style choices for my blog. You know? Things like the background image, hover animations, and so on. Youtube videos and Cursor have been immensely helpful resources for me. I've spent hours experimenting with different color palettes, typography choices, and subtle animations that make the user experience more engaging without being distracting. One of my favorite additions has been the smooth hover effects on navigation elements – they provide just enough feedback to feel responsive while maintaining a clean, professional look.

YouTube has been an oasis of various CSS tips and tricks, including the hover effect I mentioned. While watching various tutorials, I've discovered several modern design techniques that I hadn't considered before, like using CSS grid for responsive layouts and implementing custom properties for easier theme management. Cursor, as well, has been particularly helpful in suggesting CSS improvements and catching potential issues before they become problems. It's amazing how these small design choices can come together to create a more polished and professional-looking website.

Where Things Went Wrong

Unfortunately, AI isn't a magic bullet for everything. Mermaid was unfortunately not able to be used. I think it may be something to do with using the package in addition to relying on Nuxt for static page generation. That will be have to be a future post of its own.

What I've Learned

CSS can be very interesting! I look forward to implementing all the neat little tricks I find. One that may be on its way soon is the parallax effects for scrolling. I'm not sure how I would use it, and there may be some compatability considerations, but I'm excited to see what I can do.

Here's a peek at how the hover action for the Home button was handled:

.nav-link {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.4rem;
  transition: color 0.2s linear;
}

.nav-link:hover {
  color: #3b6991;
  transition: color 0.2s linear;
}

New Feature: PWA Support

I've added Progressive Web App (PWA) support to the blog! This means you can now install this website as an app on your mobile device or desktop computer. When you visit the site, you should see an "Add to Home Screen" prompt on supported devices. This will allow you to access the blog even when you're offline! At least, it will cache existing blog posts. You may need to go online to get the latest content, but that's a small price to pay for the convenience of having the blog available offline.

• Dakota Lewis