📗 Table of Contents

• 📖 About the Project
  • 🛠️ Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Prerequisites
  • Setup
  • Install
  • Usage
  • Run tests
  • Deployment
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• ❓ FAQ
• 📝 License

📖 Portfolio

Welcome to my interactive web portfolio! This project showcases my skills in front-end web development using HTML, CSS, JavaScript, and a linter for code quality assurance. Through this portfolio, I aim to demonstrate my proficiency in creating visually appealing and functional websites.

Description

For this milestone of my portfolio website, I will implement a popup window that includes the project details in both desktop and mobile. In order to do that, I will need to store the information about my projects in a JavaScript object.

Learning objectives

• Use basic JavaScript syntax.
• Use JavaScript to manipulate DOM elements.
• Use JavaScript events.
• Understand how to parse a Figma design to create a UI.
• Use objects to store and access data.

🛠 Built With

Tech Stack

Client

• HTML
• CSS
• CSS
• FlexBox
• Linters

Key Features

• JS.
• HTML.
• CSS.
• Linters.
• Flexbox.
• CSS Grid
• Transitions and Animations

(back to top)

🚀 Live Demo

• Live Demo link

(back to top)

💻 Getting Started

To get a local copy up and running, follow these steps.

Prerequisites

In order to run this project you need:

• A web browser to view output e.g Google Chrome.
• An IDE e.g Visual studio code.
• A terminal.

Setup

Clone this repository to your desired folder or download the Zip folder:

    "git clone https://github.com/JansueT/Portfolio.git"

• Navigate to the location of the folder in your machine:

    cd ./desired_folder/

Install all dependencies:

    "npm install"

Usage

To run the project, follow these instructions:

• You have to clone this repo to your local machine.
• If you want to run it on your preferred browser, run:

     " Open the index.html in the project directory with your preferred browser"

Run tests

To run tests, run the following command:

• HTML linter errors run:

npx hint .

• CSS linter errors run:

npx stylelint "**/*.{css,scss}"

• For unit testing, run:

npm test

Deployment

You can deploy this project using: GitHub Pages,

• I used GitHub Pages to deploy my website.
• To learn about github page information about publishing sources, see "About GitHub pages".
• or You can go through W3Schools, "W3schools github pages".

(back to top)

👥 Authors

👤 JansueT

• GitHub: @githubhandle
• instagram: @cansuetas
• twitter: @cansu8tas
• linkedIn: @LinkedIn

👥 Collabrations

👤 Abbas-Aljuaifari

• GitHub: @Abbas-Aljuaifari
• LinkedIn: Abbas(fares)Aljuaifari

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

🔭 Future Features

• Make the site dynamic
• Add DOM
• Add CSS preprocessors
• Add Bootstrap.

(back to top)

⭐️ Show your support

Give a ⭐️ if you like this project and how I managed to build it!

(back to top)

🙏 Acknowledgments

• Thanks to the Microverse team for the opportunity to make this project.
• A huge appreciation to my coding partner(s), morning session team, and standup team for their motivational support.

(back to top)

📝 License

This project is MIT licensed.

(back to top)