https://github.com/onjoseph/joseph-portfolio

My personal portfolio website Built as part of Microverse's projects to show case my projects.
https://github.com/onjoseph/joseph-portfolio

css3 flexbox html5 javascript microverse

Last synced: 25 days ago
JSON representation

My personal portfolio website Built as part of Microverse's projects to show case my projects.

• Host: GitHub
• URL: https://github.com/onjoseph/joseph-portfolio
• Owner: ONJoseph
• Created: 2022-05-06T22:48:30.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-06-13T19:49:05.000Z (almost 3 years ago)
• Last Synced: 2025-03-30T07:51:14.647Z (about 2 months ago)
• Topics: css3, flexbox, html5, javascript, microverse
• Language: CSS
• Homepage: https://github.com/ONJoseph/Joseph-Portfolio/
• Size: 1.14 MB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![Image](https://img.shields.io/badge/Microverse-blueviolet)

# Portfolio

> First milestone in the process of creating my portfolio website:Build a personal portfolio site.

> Understand how to parse a Figma design to create a UI.

-![screenshot](/images/mobile_preview_v.1.0.png)

-- ![screenshot](/images/mobile-preview-v2.png)

- ![screenshot](/images/mobile-version-preview-v3.png)

- ![screenshoot](/images/mobile-preview_v4.png)




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

## Built With

- Major languages: HTML, CSS

- Technologies used: Lighthouse, Webhint, Stylelint

## Live Demo

[Live Demo Link](https://onjoseph.github.io/Joseph-Portfolio/)

## :blue_book: Learning Objectives

- Understand how to parse a Figma design to create a UI.

- Flexbox to place elements in the page.

- Build a personal portfolio site.

- Use images and backgrounds to enhance the look of the website.

## :hammer: Built With

- Major languages

    - HTML

    - CSS

- Frameworks

    - None

- Technologies used

    - Git 

    - GitHub

    - Lighthouse, Webhint, Stylelint




## Getting Started

> This project can be run either from a local copy of the files (in it's directory structure) or by accessing it through a WEB server if it is installed as content for one.

 

> To get a local copy up and running follow these simple steps:

1. Go to the [repository page](https://github.com/ONJoseph/Joseph-Portfolio.git).

2. Press the "Code" button and copy the link.

3. Clone it using git command `git clone `.

### Usage

> **Just access the index.html file through the browser or access the webserver where it has been deployed through the browser**




## Authors

👤 **Joseph Ogbole**

- GitHub: [@ONJoseph](https://github.com/ONJoseph)

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

- LinkedIn: [LinkedIn](https://linkedin.com/in/o-n-joseph)




## 🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.




## Show your support

> Give a ⭐ if you like this project!




## Acknowledgments

- Hat tip to anyone whose code was used

- Inspiration

- etc




## 📝 License

This project is [MIT](./MIT.md) licensed.