Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/geekelo/a-personal-portfolio-site
A portfolio website is one of the most powerful tools in a talent's toolbox; it’s the easiest way of showing what a talent is truly capable of, and is a quick and simple way for recruiters and hiring managers to get an idea of what a talent can bring to their teams.
https://github.com/geekelo/a-personal-portfolio-site
css csstransition forms html
Last synced: about 1 month ago
JSON representation
A portfolio website is one of the most powerful tools in a talent's toolbox; it’s the easiest way of showing what a talent is truly capable of, and is a quick and simple way for recruiters and hiring managers to get an idea of what a talent can bring to their teams.
- Host: GitHub
- URL: https://github.com/geekelo/a-personal-portfolio-site
- Owner: geekelo
- Created: 2023-04-28T09:44:16.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-12-03T18:22:43.000Z (about 1 year ago)
- Last Synced: 2024-10-19T12:03:46.491Z (3 months ago)
- Topics: css, csstransition, forms, html
- Language: HTML
- Homepage:
- Size: 1.17 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A Personal Portfolio Site
# 📗 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](#deployment)
- [👥 Authors](#authors)
- [🔭 Future Features](#future-features)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [📝 License](#license)
**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.
HTML
CSS
JavaScript
- **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.
> View the live demo of this project by clicking the text below.
- [See Live Demo](https://geekelo.github.io/a-personal-portfolio-site/)
- [First Presenation Video](https://www.loom.com/share/719c333faa524c5db6930878f33b809b)
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
> Download install [VSCODE](https://code.visualstudio.com/) and [Git](https://git-scm.com/)
> To install linters, execute the following commands:
```
Initialize npm | ``` npminit -y ```
HTML | ``` npm install --save-dev [email protected] ```
CSS | ```npm install --save-dev [email protected] [email protected] [email protected] [email protected] ```
```
### 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
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.
👤 **Eloghene Otiede**
- GitHub: [@geekelo](https://github.com/geekelo)
- Twitter: [@Geekelo_xyz](https://twitter.com/Geekelo_xyz)
- LinkedIn: [LinkedIn](https://linkedin.com/in/eloghene-otiede)
👤 **Uwimbabazi Dorcas (Contributor)**
- GitHub: [@Dorcas126](https://github.com/Dorcas126)
- Twitter: [Dorcasuwi](https://twitter.com/Dorcasuwi)
- LinkedIn: [uwimbabazi Dorcas](https://www.linkedin.com/in/uwimbabazi-dorcas-956a5a226/)
👤 **Melkamu Alemawu (Contributor)**
- GitHub: [@melkamu12](https://github.com/melkamu12)
- LinkedIn: [melkamu-almawu](https://www.linkedin.com/in/melkamu-almawu/)
You can offer Contributions, submit an [issue](../../issues/), and make a feature request.
- Add the pop up modal
- Add the accessiblity
- Add functionality using Javascript and Bootstrap.
> Please give a ⭐️ to support this project
> I would like to thank Microverse for inspiring this project
This project is [MIT](./MIT.md) licensed.