Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
12
Comments
13
P

BlonoBuccellati

@BlonoBuccellati270 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Password generator app using tailwindcss, react, Next.js 15

    #framer-motion#next#shadcn#tailwind-css#react

    P
    BlonoBuccellati•270
    Submitted 5 days ago
    • Please share any feedback or improvement suggestions regarding overall component design.

    • I would appreciate feedback on state management approaches (including local state, Zustand, Context, etc.).


    1 comment
  • Tip calculator using tailwindcss, react, Next.js 15

    #next#react#tailwind-css#zod#shadcn

    P
    BlonoBuccellati•270
    Submitted 8 days ago
    • Please share any feedback or improvement suggestions regarding overall component design.

    • I would appreciate feedback on state management approaches (including local state, Zustand, Context, etc.).


    1 comment
  • Time tracking dashboard using tailwindcss, react, Next.js 15


    P
    BlonoBuccellati•270
    Submitted 15 days ago
    • Please share any feedback or improvement suggestions regarding overall component design.

    • I would appreciate feedback on state management approaches (including local state, Zustand, Context, etc.).


    2 comments
  • news letter sing-up form using Next.js tailwindcss

    #next#tailwind-css#react

    P
    BlonoBuccellati•270
    Submitted 18 days ago

    1 comment
  • Meet landing page using tailwindcss, next.js

    #next#react#tailwind-css

    P
    BlonoBuccellati•270
    Submitted 29 days ago

    Could you please check if the component structure is appropriately divided? If there’s a better way to structure the components, I’d appreciate your feedback.


    1 comment
  • Testimonials grid section using tailwindcss, next.js


    P
    BlonoBuccellati•270
    Submitted about 2 months ago
    • Are there any parts of the current code that could be made more semantic?
    • Are there any unnecessary CSS styles that could be removed?
    • Is there a way to write the CSS in a cleaner or more maintainable way?

    If you notice anything else that could be improved, feel free to let me know.


    1 comment
View more solutions

Latest comments

  • Mriganka Mousum Gogoi•260
    @Mriganka5137
    Submitted over 1 year ago

    Password Generator

    #next#react#tailwind-css
    1
    P
    BlonoBuccellati•270
    @BlonoBuccellati
    Posted about 17 hours ago

    great job!

  • Fikerte Tesfaye•280
    @Fikerte-T
    Submitted 28 days ago

    tip calculator app

    #tailwind-css
    1
    P
    BlonoBuccellati•270
    @BlonoBuccellati
    Posted 8 days ago

    I’d like to share a few thoughts.

    • When the <input> receives focus, the UI’s height increases—likely because a border is being added on focus. To prevent that, use an outline instead to avoid this layout shift. An outline is not included in the element’s box size.
    • The reset button isn’t being disabled based on conditions; consider adding the disabled attribute to the <button> to prevent it from being clickable when it shouldn’t be.

    Hope this helps!

  • P
    Mehmet Çağrı Ekici•280
    @mehmetcagriekici
    Submitted 15 days ago

    Vanilla HTML, CSS, JavaScript Solution

    1
    P
    BlonoBuccellati•270
    @BlonoBuccellati
    Posted 15 days ago

    nice

  • Mori•150
    @MoriNo23
    Submitted 20 days ago
    What are you most proud of, and what would you do differently next time?
    1. Proper Use of min-height in Layouts

    "How can I use min-height effectively to prevent layout issues? I learned it’s useful for ensuring a container doesn’t shrink too much, but I’m unsure how to balance it with other properties (like height or flex-grow) to avoid unexpected expansion."

    Key points:

    You recognize its importance for responsive containers.
    
    You want to avoid conflicts with other layout rules.
    
    You’re seeking practical examples (e.g., min-height in Flexbox/Grid).
    
    What challenges did you encounter, and how did you overcome them?

    Optional: Code Structure Feedback

    "Are there ways to simplify my form validation logic or CSS structure? I’d appreciate feedback on making my code more maintainable."

    Key points:

    Open-ended request for optimization.
    
    Targets readability/scalability.
    

    Reponsive layout using grid, tailwind md

    #react#tailwind-css
    1
    P
    BlonoBuccellati•270
    @BlonoBuccellati
    Posted 18 days ago

    I’d like to share a few thoughts.

    About height and min-height

    I generally avoid using height in layouts, and instead rely on max-width, padding, and flow-based layouts. Setting a fixed height can easily cause content to overflow or become clipped, especially on smaller screen sizes.

    As you mentioned, min-height is useful when you want to ensure a container keeps a minimum size — such as for modals. In this specific UI, I would use min-height for the modal buttons on mobile view, to ensure they are always placed near the bottom of the viewport. For that, I use min-h-screen in Tailwind CSS, which is equivalent to min-height: 100vh.


    About the structure

    It seems the GitHub repository only includes the compiled source code, so unfortunately I wasn’t able to review the layout structure itself.


    On form validation logic

    I recommend using custom hooks to isolate form logic, such as validation, input state, and submission handling. This improves readability and reusability — especially as your forms become more complex.


    On simplifying CSS

    There are a few key principles I follow to keep CSS maintainable:

    1. Mobile-first design: Start by designing for the smallest screen first. It often leads to simpler layout logic. I recommend this article:
      How to Take the Right Approach to Responsive Web Design

    2. Typography tokens: I like managing typography using tokens or utilities. Here's an example using Tailwind v4:

      @utility typo-header {
        font-family: var(--font-roboto);
        font-weight: var(--font-weight-bold);
        font-size: clamp(2.5rem, 1.556rem + 4.05vw, 3.5rem);
        line-height: 100%;
        letter-spacing: 0;
      }
      

    Hope this helps!

    Marked as helpful
  • ban-tit•170
    @ban-tit
    Submitted 23 days ago

    article preview

    1
    P
    BlonoBuccellati•270
    @BlonoBuccellati
    Posted 23 days ago

    great job!

    Marked as helpful
  • P
    devmd1997•190
    @devmd1997
    Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    Learning how to properly use the positioning elements really helped out when my components kept resizing.

    What challenges did you encounter, and how did you overcome them?

    The toughest part was trying to get the background overlay to look similar to the design. I tried my best with the background overlay styles but it didn't look exactly like the design.

    What specific areas of your project would you like help with?

    I would like to learn more about how to overlay a color over a background image. It was tough to do with the z indexes.

    Responsive Landing Page

    #tailwind-css
    1
    P
    BlonoBuccellati•270
    @BlonoBuccellati
    Posted 29 days ago

    Great job! I noticed a couple of things that might be worth considering:

    • It looks like the buttons don’t have any hover styles applied.
    • Using clamp() for font sizing might help make the typography more fluid and responsive across different screen sizes.

    Just sharing some thoughts — hope this helps!

View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub