https://github.com/akasharojee/portfolio
Build a portfolio as part of Microverse's projects
https://github.com/akasharojee/portfolio
css css3 flexbox html html5 microverse portfolio scss
Last synced: 2 months ago
JSON representation
Build a portfolio as part of Microverse's projects
- Host: GitHub
- URL: https://github.com/akasharojee/portfolio
- Owner: AkashaRojee
- Created: 2021-06-04T04:16:48.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-06-25T21:39:40.000Z (almost 4 years ago)
- Last Synced: 2025-02-02T10:44:52.950Z (4 months ago)
- Topics: css, css3, flexbox, html, html5, microverse, portfolio, scss
- Language: CSS
- Homepage: https://akasharojee.github.io/portfolio/
- Size: 1.12 MB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Portfolio
> Portfolio of Microverse projects
This project is a portfolio of projects I build at Microverse.
Things done so far in the project:
#### 1. Build mobile skeleton
* Parse a Figma design
* Use Flexbox for positioning
* Use images and backgrounds
#### 2. Build mobile version
* Use Grid alongside Flexbox for positioning
* Add button hover and pressed effects
#### 3. Build contact form (pair programming)
* Pair program with a coding partner
* Use HTML5 validation
* Collect form data using Formspree
#### 4. Build desktop version
* Use media query for desktop view
* Use desktop-specific classes to show/hide elements depending on view
* Display desktop sections fully in viewport height
#### 4.5. Add effects (pair programming)
* Use CSS transitions
* Use CSS animations
#### 5. Deploy
* Use GitHub pages to deploy website
#### 5.5. Add Google Analytics
* Create a Google Analytics property
* Add a web data stream
* Set up data collection using a global site tag
### 6. Evaluate accessibility
* To do
### 7. Add mobile menu (pair programming)
* Use JavaScript DOM manipulation to open/close menu in mobile view
* Use JavaScript media query
* Apply JavaScript linting with ESLint
### 8. Add details modal (pair programming)
* Use JavaScript objects to store data
### 9. Validate contact form (pair programming)
* Use JavaScript validation with Constraint Validation API
* Refactor common functions into a library
### 10. Preserve data in browser (pair programming)
* Use Storage API to save data into local storage
## Built With
- Major languages: HTML, CSS, JS
- Technologies used: Lighthouse, Webhint, Stylelint, ESLint
## Live Demo
[Live Demo Link](https://akasharojee.codes/portfolio/)
## Getting Started
To get a local copy up and running follow these simple example steps.
Use the following command in your terminal:
* **To clone the main project**
```
git clone https://github.com/AkashaRojee/portfolio
```
* **To clone the validate-contact-form branch**
```
git clone -b validate-contact-form https://github.com/AkashaRojee/portfolio
```
* **To clone the details-modal branch**
```
git clone -b details-modal https://github.com/AkashaRojee/portfolio
```
* **To clone the mobile-menu branch**
```
git clone -b mobile-menu https://github.com/AkashaRojee/portfolio
```
* **To clone the deploy branch**
```
git clone -b deploy https://github.com/AkashaRojee/portfolio
```
* **To clone the effects branch**
```
git clone -b effects https://github.com/AkashaRojee/portfolio
```
* **To clone the desktop-version branch**
```
git clone -b desktop-version https://github.com/AkashaRojee/portfolio
```
* **To clone the contact-form branch**
```
git clone -b contact-form https://github.com/AkashaRojee/portfolio
```
* **To clone the mobile-version branch**
```
git clone -b mobile-version https://github.com/AkashaRojee/portfolio
```
* **To clone the mobile-skeleton branch**
```
git clone -b mobile-skeleton https://github.com/AkashaRojee/portfolio
```
**Notes:**
* Both the mobile and the desktop version have been built. The website can be viewed in either view.
* Main is up to date.
* Currently under review: N/A.
## Authors
👤 **Akasha Rojee**
- GitHub: [@AkashaRojee](https://github.com/AkashaRojee)
- Twitter: [@AkashaRojee](https://twitter.com/AkashaRojee)
- LinkedIn: [Akasha Rojee](https://linkedin.com/in/AkashaRojee)
👤 **Damilare Akintoye**
- GitHub: [@dami1080](https://github.com/dami1080)
👤 **Yahya El Ganayni**
- GitHub: [@yahyaelganyni1](https://github.com/yahyaelganyni1)
## 🤝 Contributing
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](https://github.com/AkashaRojee/portfolio/issues).
## Show your support
Give a ⭐️ if you like this project!
## 📝 License
This project is [MIT](./MIT.md) licensed.