Skip to content

Latest commit

 

History

History
229 lines (163 loc) · 7.63 KB

README.md

File metadata and controls

229 lines (163 loc) · 7.63 KB

logo

A Personal Portfolio Site

📗 Table of Contents

📖 A Personal Portfolio Site

A Personal Portfolio Site is a responsive, functional and very aesthetic website designed and developed to help a talent showcase his / her capabilities to recruiters, managers, work partners and mentees. This website comes with a vibrant and engaing UI. An excellent job was done on the User Experience of this website to make a talent's work very appealing to any recruiter. It contains all the necessary sections recruiters expect to see. The structure is a well organized. The style tone is professional. Both style and content can be tweaked to suit the talent's preferences.

🛠 Built With

Tech Stack

HTML
CSS
JavaScript

Key Features

  • Mobile Friendly : this website performs well on a mobile device like a phone or tablet.
  • Desktop Friendly: this website is responsive to desktop screen sizes.
  • Simple and Attractive Design : the UI / UX is engaging and appealing.
  • Functional : this website is accessible, easy to navigate, and helpful for users.
  • **Animations and transitions : This website has engaging transitions and animations that makes it easier to use, smoother and more natural.
  • ** PopUp windows **: this features add to see the project details about each project in popup windows.
  • ** Form validation **: this features validate the email should be lowercase for portfolio contact.

(back to top)

🚀 Live Demo

View the live demo of this project by clicking the text below.

(back to top)

💻 Getting Started

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

Clone the repository

git clone https://github.com/geekelo/a-personal-portfolio-site.git

And you are ready to begin your project

Setup

This project contains An HTML FILE (free to edit) - file that contains html codes to give structure to the main webpage A CSS FILE (free to edit) - file that contains css codes to style the webpage A GIT IGNORE FILE (free to edit) - to hide personal or private files HTML/CSS LINTER FILES (should not edit) - Do not make changes AN EMPTY JAVASCRIPT FILE (free to edit)

Prerequisites

You should have Node and Git Installed You should have basic knowledge on HTML / CSS You should have a code editor

Install

Download install VSCODE and Git To install linters, execute the following commands:

Initialize npm | ``` npminit -y ```
HTML | ``` npm install --save-dev hint@7.x ```
CSS | ```npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x  ```

Usage

To run the linters, execute the following command and fix linter errors:

HTML | ``` npx hint . ```
CSS | ```npx stylelint "**/*.{css,scss}" ```
If you get a flood of errors keep in mind that linters guide you in writing a clean code!

Run Tests

You can run this program on your browser

Deployment

You can deploy this project using the following procedure:

  • Pick the right hosting provider.
  • Choose the tool and method to upload your website.
  • Upload files to your website.
  • Move the website files to the main root folder.
  • Import your database.
  • Check if your website works worldwide.

(back to top)

👥 Authors

(back to top)

👤 Eloghene Otiede

👤 Uwimbabazi Dorcas (Contributor)

👤 Melkamu Alemawu (Contributor)

(back to top)

🤝 Contributing

You can offer Contributions, submit an issue, and make a feature request.

Future Features

  • Add the pop up modal
  • Add the accessiblity
  • Add functionality using Javascript and Bootstrap.

⭐️ Show your support

Please give a ⭐️ to support this project

(back to top)

🙏 Acknowledgments

I would like to thank Microverse for inspiring this project

(back to top)

📝 License

This project is MIT licensed.

(back to top)