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

Emmanuel Akwaboah

@Cyrus-Akwaboah-EmmanuelGhana220 points

I'm a self-taught frontend developer looking to be an expert in my field

I’m currently learning...

Javascript and Python

Latest solutions

  • Ping coming soon page

    #accessibility

    Emmanuel Akwaboah•220
    Submitted over 2 years ago

    0 comments
  • Order summary card

    #accessibility

    Emmanuel Akwaboah•220
    Submitted over 2 years ago

    0 comments
  • Fylo landing page

    #accessibility

    Emmanuel Akwaboah•220
    Submitted over 2 years ago

    0 comments
  • Social Media Dashboard

    #accessibility#animation

    Emmanuel Akwaboah•220
    Submitted over 2 years ago

    0 comments
  • Four Card Feature Section

    #accessibility

    Emmanuel Akwaboah•220
    Submitted almost 3 years ago

    0 comments
  • Hubble Landing Page

    #accessibility

    Emmanuel Akwaboah•220
    Submitted almost 3 years ago

    0 comments
View more solutions

Latest comments

  • tediko•6,700
    @tediko
    Submitted about 1 year ago
    What challenges did you encounter, and how did you overcome them?

    Hello! 👋

    That was another entertaining challenge in which I learned a lot of new things! Right from the start I decided it would be a great idea to use GSAP library to create a parallax effect for sections, rather than creating subpages. Each section has tabs through which user can display new content. New content is dynamically added in JavaScript so I needed find a way to prevent images from loading each time tab has changed. For this purpose I used the Intersection Observer API which helps me detect visibility of a section that appears in the user's viewport. When this happens the preloadImages() function is called and creates new HTMLImageElement instance with Image() constructor to which I attach the src of each image from the section. In the "crew" and "technology" sections, the user can change tabs and content by moving the mouse/touch horizontally. Since the page has a lot of animations ScrollTrigger animations using GSAP are disabled for users who have set prefers-reduced-motion. Learned how to share variables between JavaScript and Sass since I needed to use media query breakpoint variable value for matchMedia but I didn't want to do it with copy and paste. I found a way to synchronize my css and js so that my CSS is the source of truth and share values with JavaScript. I used CSS Modules for this purpose. CSS Modules with ICSS specification introduces the :export directive to act as a way to export defined values. Coupled with Sass variables, it allows you to export them.

    🐞Bugs:

    • Unfortunately, when creating the effect of moving sections using position: sticky and GSAP, there are several bugs that I cannot eliminate at the moment. When a user uses the keyboard to navigate a page, the viewport often does not show the active element. The second mistake is responsiveness. On some small screens (in terms of height), sections are cropped and navigation does not lead to the appropriate section. If I find a way to eliminate these bugs and maintain the animations, I will update the project but for now I'm satisfied with how it looks and what I achieve creating this.

    💡Here's some new things I used or learned:

    • Share variables between JS and Sass - A way to synchronize CSS and JavaScript so that CSS is the source of truth and share values/variables with JavaScript.
    • Intersection Observer API - Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
    • preload images in JS - Preload lets you tell the browser about critical resources that you want to load.
    • prefers-reduced-motion - The prefers-reduced-motion is used to detect if a user has enabled a setting on their device to minimize the amount of non-essential motion. The setting is used to convey to the browser on the device that the user prefers an interface that removes, reduces, or replaces motion-based animations.

    🛠️Build with: (can be found also in my others projects)

    • GSAP library - GSAP is a JavaScript library for building high-performance animations that work in every major browser.
    • Vite - Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts: a dev server, and build command that bundles your code with Rollup.
    • Sass CSS pre-processor. Sass is a stylesheet language that’s compiled to CSS. It allows to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.
    • BEM - Block, Element, Modifier methodology, which is a popular naming convention for classes in HTML and CSS. BEM is useful when it comes to larger, more complex projects when code organization becomes crucial. The idea behind it is to speed up the development process, and ease the teamwork of developers by arranging CSS classes into independent modules.

    ❓Questions:

    • Any suggestions on how I can improve are welcome!

    Space tourism website with parallax effect using GSAP, Vite, Sass, BEM

    #bem#gsap#sass/scss#vite
    8
    Emmanuel Akwaboah•220
    @Cyrus-Akwaboah-Emmanuel
    Posted about 1 year ago

    This is amazing! The transitions are impressive.

  • Jamil Aliyev•240
    @LieutenantCobretti1998
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Mostly, I am proud with the complexity of animation and in js logic consistency. I tried to make my pages as much dynamically as possible. For instance, I combined html files according to topic (like destinations, crew and technologies) on one html and just pulling my data from the local.json file

    I also use anime.js for creating beatiful animations and for destinations.js I made my own animation, just to be sure that I am understand animations :3. Next time I will make differently , maybe, the usage of react instead of vanilla.js :3

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

    Only with responsive design on IOS devices. Dont know where can I check the proper way of writing media queries for IOS devices

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

    Responsive design o IOS. Should I add every iphone model on media queries or maybe I am doing something wrong in my code:3

    JS/SCSS/HTML/CSS

    #animation#vite#sass/scss
    1
    Emmanuel Akwaboah•220
    @Cyrus-Akwaboah-Emmanuel
    Posted about 1 year ago

    You might wanna take a look at the transitions. They take too much time to load. They're too slow!

    Marked as helpful
  • shikoto•1,010
    @shikot0
    Submitted over 2 years ago

    Country list using react

    #accessibility#fetch#react#react-router
    2
    Emmanuel Akwaboah•220
    @Cyrus-Akwaboah-Emmanuel
    Posted over 2 years ago

    I haven't reached this level yet but this is really good. The smooth transition of the background theme is cool. I jus had a problem searching a country. I hope you fix it.

    Overall, 💖👌

  • Geovany Gonzalez•20
    @Tigre315
    Submitted over 2 years ago

    I very happy to have finished this challenge, I worked with HTML, CSS

    1
    Emmanuel Akwaboah•220
    @Cyrus-Akwaboah-Emmanuel
    Posted over 2 years ago

    The cards color must be white. .cards p{ color: white; }.

    Overall, well done.

  • victory•30
    @Victoryruro
    Submitted over 2 years ago

    Responsive layout

    1
    Emmanuel Akwaboah•220
    @Cyrus-Akwaboah-Emmanuel
    Posted over 2 years ago

    Congrats on finishing the project but it has an issue. It looks good on desktop but not on mobile. It's not responsive. To make it responsive, you can use display: flex; on desktop mode and use flex-direction: column; on responsive mode. You could also use display: grid; grid-template-colums: repeat(2, 1fr); to make it responsive on mobile.

    And in your HTML, the <strike> element is obsolete. You should use text-decoration: line-through; in css to strike a word.

  • Rynex Akil•100
    @rynex-zv
    Submitted almost 3 years ago

    Hover and click animation Try it out

    2
    Emmanuel Akwaboah•220
    @Cyrus-Akwaboah-Emmanuel
    Posted almost 3 years ago

    Nice!!!

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