Skip to content
OverviewSolutions
21
Comments
26

collins-ai

@collins-ai440 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

View more solutions

Latest comments

  • calvinvin•760
    @calvinvinSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm so proud that I as a newbie finally got through this... .

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

    Since there are multiple pages with a same <header> component, and a data.json to fetch and render, I tried to use NextJS for the first time instead of plain HTML/CSS/Javascript as I previously did. The struggling are mostly from the framework and deployment.

    I learned about React, NextJs, Typescript, TailwindCSS.

    Some records of the tough journey I've been through:

    1. cannot get tailwindCSS work well, and I finally realized that's the version discrepancy. It is tailwind v3.x.x from 'npm install next@latest react@latest react-dom@latest', and I unrecognizely updated it to tailwind v4.x.x in order to add some theme style in the globals.css following the tailwind website's instruction (using latest version). The syntax of these two big versions were quite different: @layer, @theme, @tailwind, @import 'tailwindcss', @theme, @layer utility, new @tailwindcss/postcss package... . Also tried hard to dynamically change the background-image url in bg-[url()] with Object values, but it seems unfeasible and I gave up in the end.
    2. typing of typescript.
    3. static export of the NextJS. I used server component searchParams props to switch the different small tabs in the main page, which is a dynamic API and therefore cannot make static export. Alternatively, I shifted to use a client component using useSearchParams() and made static export work.
    4. deployment to GitHub pages. I need to rename the /out directories built from NextJS to /docs to match the GitHub page subbranch deployment. After that, there are still many small things to configure: set basePath to my GitHub repo name in next.config.ts, add /<my-github-repo-name> prefix to the <Image> and the background-image url, add .nojekyll file at the /docs/ directory to make GitHub page to provide files in /docs/_next directory.

    frontend_mentor_5-5_space-tourism-website-main

    1
    collins-ai•440
    @collins-aiPosted 23 days ago

    Hello @calvinvin, you did a wonder job regarding the interactivity and functionality of the website. However, the image within the website are a bit too large.

    1
  • collins-ai•440
    @collins-aiPosted about 1 month ago

    Hello @cassiopeia001, you did a wonderful job. The page is responsive on mobile devices, the javascript functionalities also work perfectly well. The only issue i found is the absence of a form validator. The form submits even when the email input feild is empty.

    0
  • collins-ai•440
    @collins-aiPosted about 2 months ago

    nice work! but the bottom images are breaking.

    0
  • Ejiro Frances•390
    @Ejiro-FrancesSubmitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    In the footer section, arranging the footer for the desktop and mobile view seemed difficult at first but I tackled it with grid display.

    Loop studio landing page

    1
    collins-ai•440
    @collins-aiPosted about 2 months ago

    Good job.

    0
  • collins-ai•440
    @collins-aiPosted about 2 months ago

    Hello AdamCygan! You did a good job in designing the card, but the hover effect for the image is responding.

    0
  • collins-ai•440
    @collins-aiPosted about 2 months ago

    You did a great job in making the site interactive, but you can improve the positioning of you elements. Also the images don't change the way they ought to change.

    1
View more comments