Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Oops! You need to be logged in to do that
Not Found
Not Found
Not Found
Not Found
Not Found
Oops! You need to be logged in to do that
Oops! You need to be logged in to do that
Not Found
Not Found
P

Remus D. Buhaianu

@Remus432
Groß-Bieberau / Remote
3,125Points

Frontend Developer | Building UIs one component at a time

Latest Solutions

  • Desktop design screenshot for the Officelite coming soon site coding challenge

    Officelite Coming Soon - Svelte + Routing | TS | SCSS | GSAP

    #gsap#sass/scss#svelte#typescript#accessibility
    • HTML
    • CSS
    • JS
    5
    Submitted

    Hey guys!

    Hope you're having a great time working on Frontend Mentor challenges :)

    I'm finally back with another lovely challenge that I had a blast working on, though it took me quite a while to finish it for reasons that you'll discover once you see the website and its Github repo :D

    Frankly, I still wanted to try out a few more ideas, but at the same time, I had pretty much implemented all the features/customizations I wanted for this project.

    Feel free to check it out and let me know what you think works / doesn't work for this project and where I could make further improvements/tweaks! :)

    P.S: Thank you, to each one of you who checked out my previous challenge (QR Code Generator) and supported me. I appreciate it a lot and I hope these kinds of projects will also inspire you to try out your own unique and creative ideas! :D

    See you in the next challenge - happy coding, y'all! :)

  • Desktop design screenshot for the QR code component coding challenge

    Fullstack QR Code Generator - Svelte-TS | Express | MongoDB | and more

    #accessibility#express#svelte#typescript#mongodb
    • HTML
    • CSS
    19
    Submitted

    Hey guys!

    This is one of the craziest projects I've worked on! :) Nothing prepared me for what was about to unfold with this seemingly simple project :D

    Initially, this was supposed to be a straightforward Newbie-level challenge from Frontend Mentor. As far as I can tell, this must've been the simplest and easiest design for a Frontend Mentor challenge. Including the project setup (files, folders, etc), finishing this project required less than 30 minutes.

    From what started off as ~25 minutes project, it ended up into a min full-stack project that spanned across hours and used multiple technologies (some of which I was either completely unfamiliar with or was still learning)

    There's still some tweaking I'd like to make to it, but for the time being, I think the project is good enough to be reviewed by you guys!

    Here are the technologies / tools I've used for it:

    • Svelte
    • Typescript
    • SCSS
    • QR API
    • GSAP
    • VanillaTilt
    • Express
    • MongoDB
    • Mongoose
    • Puppeteer
    • Heroku
    • Vite

    Special thanks to @ApplePieGiraffe, @darryncodes, and @skyv26 whose works have really inspired me to keep growing as a developer!

    Thanks a lot for checking out my project and see you in the next challenge!

  • Desktop design screenshot for the Project tracking intro component coding challenge

    Project Tracking Intro - Svelte + Typescript + SCSS + GSAP || Vite

    #bem#gsap#svelte#typescript#sass/scss
    • HTML
    • CSS
    • JS
    2
    Submitted

    Hey guys! Hope you're having a great time here on Frontend Mentor!

    I'm back with another awesome Frontend Mentor challenge - the Project Tracking Intro Component.

    I always enjoy building these projects, but I enjoyed building this one even more because it was the first project in which I've used Svelte, Typescript, SCSS, GSAP, and Vite all in one place. All I can say is that I'm in awe at how fast the development has become thanks to Vite and it's really a powerful match coupled with Svelte.

    Since most of the project was mainly focused on the design and not any heavy data structures/logic, I'm naturally interested in the feedback regarding the SCSS I wrote for this project and what improvements I could make for the responsive design. I struggled in those regards mainly because of the background shape and devices illustration.

    Let me know what you guys think about the project.

    Thanks for taking the time to check out my project and see you in the next challenge! :)

  • Desktop design screenshot for the Easybank landing page coding challenge

    Easybank Landing Page || HTML - SASS - BEM - Responsive Design

    #bem#sass/scss#accessibility
    • HTML
    • CSS
    • JS
    1
    Submitted
  • Desktop design screenshot for the Testimonials grid section coding challenge

    Responsive Testimonial Grid || Svelte + Typescript - SCSS - GSAP

    #gsap#svelte#typescript#sass/scss
    • HTML
    • CSS
    5
    Submitted

    Hey guys!

    I decided I should work on my CSS Grid skills a bit more and this challenge was the perfect use-case for it.

    This project has a lot of technologies in it:

    • Svelte
    • Typescript
    • AJV
    • GSAP
    • VanillaTilt.js
    • SCSS

    The AJV and Typescript weren't required for such a project, but I decided I should finally work with Typescript and learn how to implement it in an actual project. I only started learning it two days ago, so I'm definitely eager to hear more about the best practices for this.

    Also, there's an issue caused probably by the clip-path property that I'm using with GSAP. The two box shadows I used on the third and last card don't show anymore. If you know a fix to this issue, please let me know.

    Hope to hear your feedback soon - thanks a lot! ;)

  • Desktop design screenshot for the Meet landing page coding challenge

    Meet Landing Page | Svelte + SCSS + GSAP - Animation Powerhouse

    #bem#sass/scss#svelte#gsap
    • HTML
    • CSS
    2
    Submitted

    Hey guys!

    I'm back with another lovely Frontend Mentor challenge. This is the last Newbiew challenge on my list and I decided to give it my best shot in building it.

    If you're checking out the solution on a laptop / desktop screen, you'll get to see the scroll-based animation that I've implemented. I got the idea for the animations after seeing @ApplePieGiraffe's solution for this challenge. (obviously his solution is much better than mine :D) He's truly an incredible developer and his work has inspired me a lot. If you haven't checked out his work yet, I highly recommend you do.

    I had a lot of fun building this project using Svelte and GSAP, even though it was quite difficult at times because it was my first time using GSAP on such a scale and also, it was my first using the ScrollTrigger plugin. You can imagine how many hours I've spent going through the documentation and watching tutorials ;)

    The animations aren't yet available on the smaller screen sizes because the layout becomes quite messy. I'll need to see how to fix that. On top of that, I think the code for the GSAP animations can be improved, but since I'm still a beginner with this technology, I'm not quite sure how to approach it.

    Any feedback about this or any other aspects of my project would be much appreciated.

    Thanks for checking out my solution. See you in the next challenge! :)

Latest Comments

  • Solution screenshot
    • HTML
    • CSS

    Profile card component

    3
    P
    Remus D. Buhaianu3,125 | Posted 4 months agocommented on Mo'men Kamal's "Profile card component" solution

    Hey @momenkamal221, congrats on completing the challenge!

    I had a look at your final solution and I have a few suggestions for you that I hope will be useful:

    • You don't need to set a height property on your .card - your layout should be created in such a way to naturally adjust to the available content. When you set fixed values for your height, or even width, it becomes more difficult to create a robust responsive design.

    • You can vertically and horizontally center your design by using flex display on your body element. Also, add min-height: 100vh to your body element https://alligator.io/css/viewport-units/

    • Your .card is also missing a box-shadow -> refer to the original design

    • Change styling for the .unit elements. Currently, they're a bit different from the original design

    • You don't need an hr element. You can simply set a border-top property on your .flip-scores element and then also add padding-top as to push the line further above

    Hope this helps. Keep up the good work!

    0
  • Solution screenshot
    • HTML
    • CSS

    NFT PREVIEW CARD COMPONENT

    5
    P
    Remus D. Buhaianu3,125 | Posted 4 months agocommented on wisdom's "NFT preview card component" solution

    Hey @wisdompython , good job on completing this challenge!

    I had a look at your final solution and I have a few suggestions that I hope will be useful to you:

    • Don't use a fixed height on your card element, especially not with an absolute unit such as px. Your layout should be built around the available content.

    • Set min-height: 100vh on your body element if you want to center vertically and horizontally everything inside it.

    • Wrap your card inside a <main></main> element to remove some of the errors from your report

    • Add the alt attribute to your img element - if the img is just for decorative purposes, then you can simply write alt=""

    • The 2 text hover effects and the image overlay hover effect are missing from your solution. Consider implementing them using the :hover pseudo-class https://www.w3schools.com/cssref/sel_hover.asp

    • You don't need an hr to create that line. You can set a border-top property on your footer and then also add a padding-top to push the line away from the content

    Hope my suggestions will be useful to you. Keep up the good work!

    1
  • Solution screenshot
    • HTML
    • CSS

    NFT preview card component

    2
    P
    Remus D. Buhaianu3,125 | Posted 4 months agocommented on Tejaswini Labade's "NFT preview card component" solution

    Hey @TejaswiniLabade, good job on completing this challenge!

    I'm impressed with how similar to the original design your final solution looks - well done!

    As @denielden already suggested, you can consider adding the transition property for your hover effects, mainly the image hover effect as it can give it that extra nice detail ;)

    Had a look at your Github repo and you should definitely consider looking into BEM methodology. Also, some parts of your code require a bit of formatting so they can be more readable.

    Overall, well done. Keep up the good work!

    1
  • Solution screenshot
    • HTML
    • CSS

    NFT preview card with HTML/CSS flex

    3
    P
    Remus D. Buhaianu3,125 | Posted 4 months agocommented on jdev's "NFT preview card component" solution

    Hey @jdevelops, congrats on completing this challenge!

    I had a look at your final solution and I have a few suggestions that I hope will be useful to you:

    • You can vertically and horizontally center your .main-box by using flex display on your body element

    • There's an issue with the responsive design when scaling down to smaller screen sizes. I suggest not using fixed px values for your width as it can make it more difficult when building a responsive design. Have a look through your media queries code and see what improvements you can make

    • Adding a little transition on the image hover effect would be a nice bonus ;)

    Overall, you did quite a nice job. Keep up the good work!

    2
  • Solution screenshot
    • HTML
    • CSS

    Stats preview card component using flexbox

    13
    P
    Remus D. Buhaianu3,125 | Posted 4 months agocommented on Abhishek Waghmare's "Stats preview card component" solution

    Hey @abhishekdwaghmare2000, good job on completing the Stats Preview Card challenge!

    I had a look at your final solutions and here are a few suggestions I have for you:

    • Consider implementing the responsive media query breakpoint sooner (i.e at a larger size)

    • The top right and bottom right edges of the image should be rounded (same value for the card's left side)

    • Increase line-height and font-size of the p element inside .content-left

    • Use the values 100, 400, and 700 for your font-weight property

    • Use actual values (or variables) for your font-size property. Don't use small, medium` or other such keywords

    • Setting a background-color property on your img element and using it with mix-blend-mode won't work because mix-blend-mode is actually blending the img element with the card's background color. A possible solution is to remove the img element and just add a background image on the .content-right div and then you can use background-blend-mode to create the desired effect

    Hope these suggestions will prove useful. Keep up the good work!

    1