Bestbynature/portfolio

This is a portfolio website that makes use of figma design and mobile first approaches. It was built with html, CSS, and JavaScript. It portrays the usage of flexbox and grid and dynamic DOM manipulations with JavaScript.

Portfolio - Mobile first Project

📗 Table of Contents

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

📖 [Portfiolio - Mobile first Project]

[Portfiolio - Mobile first Project] is my first project to show that I can use industry best-practices to design a responsive, mobile first website. It also checks to see if i can translate figma designs to actual web pages. I did use Figma and Behance for my design inspirations these days.

🛠 Built With

Tech Stack

Client

• HTML
• CSS
• JAVASCRIPT

Key Features

• [Figma design to web pages]
• [Hyperlinks joining the pages]
• [professional commit messages]

(back to top)

🚀 Live Demo

Add a link to your deployed project.

• My Portfolio

(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:

• The current version of node
• To have Git installed on your local machine
• Node Package manager (npm)
• An editor such as Visual Studio Code

Setup

Clone this repository to your desired folder:

• Create your classic access token from github.com
• run "git clone https://{access_token}@github.com/username/{repo_name}.git"
• Update your git identity by running "git config --global user.email "your_email@gmail.com""
• Update your name on git by running "git config --global user.name "your_name""

Install

Install this project with:

• In the first commit of your feature branch create a .github/workflows folder and add a copy of [.github/workflows/linters.yml](https://github.com/microverseinc/linters-config/blob/master/html-css/.github/workflows/linters.yml) to that folder.
• create a .gitignore file and add node_modules to it
• run 'npm init -y'
• run 'npm install --save-dev hint@7.x'
• Copy [.hintrc](https://github.com/microverseinc/linters-config/blob/master/html-css/.hintrc) to the root directory of your project.
• run 'npx hint .'
• Fix validation errors.
• run 'npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x'
• Copy [.stylelintrc.json](https://github.com/microverseinc/linters-config/blob/master/html-css/.stylelintrc.json) to the root directory of your project.
• run 'npx stylelint "**/*.{css,scss}"'

Usage

To run the project, execute the following command:

Example command:

  use git bash to open in Vs code

Run tests

To run tests, run the following command:

Example command:

Run "npx stylelint "**/*.{css,scss}" --fix " to fix linters

Deployment

You can deploy this project using:

• github pages

(back to top)

👥 Authors

Mention all of the collaborators of this project.

👤 Author1

• GitHub: @githubhandle
• Twitter: @twitterhandle
• LinkedIn: LinkedIn

(back to top)

🔭 Future Features

• [contact form page]
• [About page]
• [links to portfolio items]

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

Write a message to encourage readers to support your project

If you like this project...

(back to top)

🙏 Acknowledgments

Give credit to everyone who inspired your codebase.

I would like to thank members of my stand up team for their input while making this project.

(back to top)

📝 License

This project is MIT licensed.

(back to top)