Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/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.
https://github.com/bestbynature/portfolio

css html javascript

Last synced: 24 days ago
JSON representation

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.

Awesome Lists containing this project

README 

        





  

  



  
Portfolio - Mobile first Project






# 📗 Table of Contents



- [📖 About the Project](#about-project)

  - [🛠 Built With](#built-with)

    - [Tech Stack](#tech-stack)

    - [Key Features](#key-features)

  - [🚀 Live Demo](#live-demo)

- [💻 Getting Started](#getting-started)

  - [Setup](#setup)

  - [Prerequisites](#prerequisites)

  - [Install](#install)

  - [Usage](#usage)

  - [Run tests](#run-tests)

  - [Deployment](#triangular_flag_on_post-deployment)

- [👥 Authors](#authors)

- [🔭 Future Features](#future-features)

- [🤝 Contributing](#contributing)

- [⭐️ Show your support](#support)

- [🙏 Acknowledgements](#acknowledgements)

- [📝 License](#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](https://bestbynature.github.io/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 "[email protected]""
    • 

        
  • 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 [email protected]'
    • 

        
  • 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 [email protected] [email protected] [email protected] [email protected]'
    • 

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



```sh

  use git bash to open in Vs code

```



### Run tests



To run tests, run the following command:



Example command:



```sh

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](https://github.com/Bestbynature)

- Twitter: [@twitterhandle](https://twitter.com/Dammybest)

- LinkedIn: [LinkedIn](https://www.linkedin.com/in/damilare-ismaila-4a5a8b30/)



(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](../../issues/).



(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](./LICENSE) licensed.



(back to top)