Skip to content
OverviewSolutions
2
Comments
3
Allison Alencar Ribeiro
@ribeiroAllison

All comments

  • Roan Macmillan•820
    @RoanMacmillanSubmitted over 1 year ago

    Hello! 👋

    This ended up being a lot tougher than I expected, for a few reasons.

    • Because I pulled the data from the json file it kinda added an extra layer of complexity for me as I'm still getting to grips with React, and made styling the masonry layout a bit more confusing.

    • The masonry layout was pretty tough, decided to try and use grid as I'm inexperienced with it and need the practice. Originally tried to use a masonry library but it seemed a little buggy so didn't bother with it. Not sure what the best approach would be.

    Overall happy enough with what I came up with, but feel like my code and react components could have been way more structured. Any feedback is welcome! 🙂

    Galleria slideshow site

    1
    Allison Alencar Ribeiro•80
    @ribeiroAllisonPosted over 1 year ago

    Hey Roan, congrats on finishing this project. It looks really nice!

    Really liked the transition effect you designed, much better than hard cuts between pages. The name being hidden until hover was a nice touch too!

    Also, the progression bar looks cool. I sure couldn't pull that off in my solution :) .

    One thing I didn't quite get was the huge black bars around the page on bigger monitors. Was it a deliberate choice so you didn't distort the art on the detail page?

    As for the slideshow, I supposed it had to roll out all the art pages automatically, at least that is how I designed it.

    Anyway, nice work! I'll be sure to check your code on how to make these beautiful transitions.

    Cheers, Allison

    Marked as helpful
    2
  • Allison Alencar Ribeiro•80
    @ribeiroAllisonPosted over 1 year ago

    Hey, Robert.

    Thanks so much for the detailed review of my code. I made the changes you suggested and it really improved my dashboard design!

    I also checked your solution, really liked the way the changing of the planet sizes does not affect at all the position of the text and link. It gives the impression that all the planets have the same center, despises their different radii. Will be sure to dive into your code to figure out how you pulled it off.

    Only thing I noticed that can be improved is that for lower resolution screens (my laptop in 1366-by-768) there is no margin at the bottom of the planet details section.

    Also, this awesome project deserves a nice README :)

    Anyway, thanks again for taking the time to check out my work!

    Cheers, Allison

    0
  • Robert•170
    @waffleflopperSubmitted over 1 year ago

    edit: fixed live link (renamed the netlify url)

    Well this was quite the project! Before I elaborate on anything just a few todos I have left for this living repository:

    • improve accessibility (this is currently a weak point for me and now that I have the site essentially functionally complete I can go through and work on making the components and interactions perfect)
    • disable invalid routes (I'll probably fix this tonight but I forgot to use sveltekit hooks to ensure that people can only visit planet/[planet] routes since currently navigating to the base will just show a blank page and some undefined footers.
    • make planet size a little better. I want to base it on the radius of the actual planet but being an active duty soldier and dad has me pressed for time so I wanted to get a solution up to get feedback that was functionally complete and work on those little wants as I have the time.

    ##More For some reason I originally thought the way to go was going to be making the entire thing in html/css first (design that is). When I had almost everything done a friend pointed out that I wasn't componentizing things like I should, which caused me to go back and (still without sveltekit) use sass partials. After an hour or so my brain finally started working and I came to realize if I'm componentizing them anyways I may as well do it within the framework I planned on using. Wasting my own time is about the best learning experience I can get so just in this stumbling process alone I feel like I learned a lot I can take on to the next project.

    I've also come to the realization that I'm so excited to jump in to the code that I rush (or skip) a good planning phase to figure out what elements of html/css I'm going to need, how I should approach components, and ways to prevent overcomplicating the overall code flow of the project. On the next project I hope to slow way down and go with a functional first approach and do the styling after in an effort to keep styling away from components so they are more universal and reusable in the future. I may stick with SvelteKit but I'm leaning towards using React (likely with NextJS/13) and switching between the two in order to maintain different development skills as I attempt to move into the industry.

    I'm new to the world of web development. I've done the tutorials for Svelte and SvelteKit and following a tutorial for a todo app using Svelte a little while back. I've completed some free coding bootcamp stuff for typescript and javascript so I went that route.

    I definitely want to know if I'm doing things I shouldn't be doing - in any regard be it CSS, HTML, JS, Svelte, SvelteKit, etc.

    Planet SvelteKit!

    1
    Allison Alencar Ribeiro•80
    @ribeiroAllisonPosted over 1 year ago

    Really liked your hover effect on planet names in nav bar!

    The transitions between pictures of the planets are really smooth too. Mine got kinda of clunky, how did you do that? :)

    1