baresi687 / industry-knowledge-ca

Frontend Mentor - Single-page design portfolio solution

This is a solution to the Single-page design portfolio challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Run commands
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Navigate the slider using either their mouse/trackpad or keyboard

Screenshot

Links

• Live Site URL: Live site URL

My process

Built with

• Tailwind-css
• HTML
• Javascript
• Prettier
• Vite
• Husky

What I learned

Easier way to write in tailwind elements, without writing the same long code many times in the HTML.

@layer components {
  .inner {
    /*Put me on every section except for .my-work*/
    @apply mx-auto max-w[1100px];
  }
}

Run commands

• 1. installing node modules: [npm i]
• 2. create a build directory: [npm run build]
• 3. run the script inside package.json: [npm run dev]
• 4. preview the build locally: [npm run preview]

Useful resources

• www.frontendmentor.io -

Authors

• Eskil Hagen (Project Manager)
• Mats Fjeldstad (Scrum Master)
• Carl Linus Hedlund & Christina Fugelsnes (qa Engineers)
• (Developers) ↓↓
• Snorre Kolnes Røgenes,
• Fariad Yousef,
• Hreinn Gylfason,
• Ilona Raugalaite,
• Jonas Aarhaug ,
• Uzochukwu Cecilia Oloh
• 
• I worked on the the about section with the help of Carl Linus Hedlund ↓↓
• 

Acknowledgments

• Hesham El Masry, for great guidance.

• Jonas Aarhaug, for making css components for tailwind elements.