Skip to content

ONJoseph/Portfolio

Repository files navigation

Image

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

  • screenshot
  • screenshoot

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

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

🔨 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.
  2. Press the "Code" button and copy the link.
  3. Clone it using git command git clone <link>.

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


🤝 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 licensed.