Did the frontend for this a while ago but never got round to publishing because I couldn't work out how to get the front end to communicate properly with the back end. Went back to this after getting my first full stack app working earlier!
Backend in separate repo here: https://github.com/fraserwat/vuengo-todo-list-backend
Any ways I could have improved this v much appreciated!!
First project I've used D3 for. Kinda had to hack together proper styled tooltips with some javascript and as a result they don't really react well to changing width, is there an easier way to do this?
Been working on this one on and off for ages. As a result the code is a bit messier than it usually would be. But I finally got the animation working! (in the end I just decided to look for a tutorial, but even then it probably took a couple hours)
My pseudoelements still aren't working right, they disappear under the animated divs (even though they have a higher z-index?)
Anyway, any suggestions on how to fix that (or improve generally) v much appreciated!
Tried out a new methodology for this, CUBE CSS (there's a good walkthrough of the rationale and a sample web page here). Really really liked this, it's quite utility focused but you don't end up with having to remember 1,000 utilities and make your HTML look incomprehensible like you do with Tailwind (but maybe I'm just using Tailwind wrong!). I feel like my CSS is less repetitive and I feel like I wrote less of it than usual (although that might be due to the relative lack of complexity in the project, and would be difficult to measure given the amt of auto generated classes in the config).
Still going to take a bit of getting used to but I think I'm going to bring this more into my CSS more generally (it works really nicely with SASS).
Towards the end I think I got a bit hacky and there's probably a better way I could have done the layout for Desktop than making the hero image and the stats list position: absolute... Any ideas here?
This had a few tricky bits in this. I guess what I'm interested in here is if there's a way I should have gone about this more in line with best practices. Felt a bit hacky in places...
This was good practice with using images, which is something I often struggle with. There are probably more elegant ways I could have done the hero (background) image and its responsiveness but got there in the end. Is there a better way I could have done this?
mix-blend-mode is quite a cool function!! 😀 Any other feedback v much appreciated!
Had this lying around half-finished for a while but been learning state management (VueX) recently so seemed like the perfect opportunity to use that for the user data handling. Getting it working asynchronously was hard!!
Liked this one. Took a while to get the hang of state management, but you can quickly see how it comes in handy even for simpler projects (in terms of data needs) like this.
I'm sure there's a more elegant way I could have done the hero image, couldn't get it to play nice without shrinking the hero content or messing with the screen widths. Got there in the end, but is there a better way of doing this?
After a nice break over Christmas, thought I'd ease myself back in with a single-page app.
Quite pleased with this one, there are a few things I think turned out quite well (none of the animations on the FAQ/feature images/form use javascript!), a few things I think turned out less well (the pseudoelements don't seem right). Seems a bit messed up on the preview but can't replicate in-browser so assume its a rendering thing
Was good to get a bit of practice using CSS Keyframes, and I think I'm going to start thinking about workflow going forward and taking a more modular approach (form validation was essentially stripped off an earlier project I did). Instead of writing my 100th hamburger menu in a few days, I now have a nice Vue component I can plug in and basically just adjust the list items and CSS accordingly.
But yes, any tips on how to get that kind of pseudo-element behind the hero image and the features image scaling properly at different screen sizes v much appreciated!
Extended the challenge to add a search functionality for the different filters! Quite pleased with how already active filters appear when they come up in search - proud of that one!
Lots of tricky stuff here around comparing objects with objects, there's a few best practice things I'd do differently next time around, learnt a lot doing this one.
Only bit I couldn't get right in the end is I want my search bar to keep its inline-block placement giving it that element of flexibility, but for the size of the <input> element to equal the remainder of the line. How it is now you can click within what visually makes sense as the input, but it's beyond the rightward boundary of the <input> element. Tricky... 🤔
Any suggestions on how I could improve this one v much appreciated!! 👍
Tricky parts were getting the borders working at different page widths, and getting the Vue CLI to properly access the correct images in the public directory for the portfolio/inner pages. As the project pages are the same page with data and images populated with a query, I was trying to autogenerate the img urls with a method. This worked locally but caused havoc when deployed into production 😫
In the end I put the image paths in the JSON file alongside the rest of the info on the page and it worked fine.
This project was good to get the hang of more complex routing. As ever, any way I could have improved on this v much appreciated 👍😎
says there's an accessibility issue on one of the buttons, but ive got it aria-labelled with a title how the documentation says it should be so should be fine 🤷♂️
Still finding these background images really tricky - not sure I've got them quite right. Any suggestions on how you would have approached this very helpful!!
Issue I had here was with the testimonial on desktop view. Not sure how I'd approach having an animated slide in for the carousel. In the end its still functional, but I think that would be a cool way to expand it...
This was an interesting one to do. Was able to work on my Javascript / Vuejs with the live countdown, and then learnt how to do Routing by making it a multi-page app. Also had some fiddly z-index stuff in and some slightly more complex form validation than I'm used to! 🚀🥳
I'm sure there's bits I could have done better - any suggestions very much appreciated!!!! 👍
Accessibility something I've had a bit of trouble getting right, so anything I could have done better around aria attributes, semantic HTML etc would be great (do I really need the logo wrapped in something else? Seems like a screen reader would pick it up as an image without any added content needed?).
Nice and straightforward, but I couldn't quite get the orange filter on the image after the hero section to match the figma files on this. The darker parts are much more defined on the original. Any suggestions on how to get there v much appreciated!
Also on forcing line breaks on titles in a few places is there a simpler way of doing this than with <span> tags?
Aside from those questions, any tweaks that could have been made v much appreciated!! 😎