Personal Portfolio project
This Project is a clone of a Portfolio template from figma
Built With
- HTML/CSS
- NPM, Git, Github
Live Demo
Getting Started
this website can be viewd better on the Mobile screen size
The purpose of these project is to build the Mobile interface of a portfolio website using the figma template. This project includes linters for Reporting errors in HTML, CSS and An open-source, automated tool for improving the quality of web pages, which has audits for performance, accessibility, progressive web apps, SEO and more. It is a summary of all my works
To get a local copy up and running follow these simple example steps.
Clone The Repositiry to your local machine by following the steps below
Step 1: Type the following command into a git shell
git clone https://github.com/MrOmachi/Portfolio-Microverse.git
Step 2: Direct a terminal into the cloned repository directory
Prerequisites
- Node package Manager(NPM)
- To install NPM on your local machine, please visit NPM official website
- Text editor(Vscode, Atom, NotePad++, Sublime)
Setup
Set up folder as:
- /PORTFOLIO-MICROVERSE -.github/workflows - linters.yml
- images
- Ellipse 18.svg
- Ellipse [email protected]
- Ellipse 18.png
- Ellipse 18.svg
- github.png
- hamburger.png
- twitter.png
- Vector.png
- vector2.png
- vector3.png
- portfolioImg.jpeg
- ImgPlaceholder.png
- .hintrc
- .stylelintrc.json
- index.html
- LICENSE
- Package-lock.json
- Package.json
- style.css
- images
Install
Run the following commands to install dependencies
npm install --save-dev [email protected]
npm install --save-dev [email protected] [email protected] [email protected] [email protected]
Usage
npx hint .
npx stylelint "**/*.{css,scss}"
Deployment
Authors
- GitHub: @githubhandle
- Twitter: @twitterhandle
- LinkedIn: LinkedIn
🤝
Contributing
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Show your support
Give a
📝
License
This project is MIT licensed.
Peer to pear code review
Great work champ so far! More issues could be addressed, so your work became much better than it already is. 1- The list items are not centered properly, Please give it a zero-padding to the left so it became just like the Figma one. 2- The list items of the social pics are not in one row in the mobile view, you can try to give more width or decrease the margin or the padding.
Portfolio App Deploy
Attached below is the link to the Live Demo of the earlier deployed GitHub page of my portfolio application
Live Demo Link: https://mromachi.github.io/Portfolio-Microverse/
Js toggle Function
Add JS toggle function to mobile version drop-down
In this product I did the following with my coding partner
Accessibility Checks
Changes were made to suit accessibility requirements
[Page titles](No error found)
Image text alternatives** (![hamburger icon]()
)
Image text alternatives** (![inbox]()
)
Image text alternatives** (![eclipes]()
)
Image text alternatives** (![Mobile view arrow]()
)
Image text alternatives** (![github]()
)
Image text alternatives** (![linkedin]()
)
Image text alternatives** (![angelist]()
)
Image text alternatives** (![twitter]()
)
Image text alternatives** (![medium]()
)
Image text alternatives** (![An arrow down]()
)
Image text alternatives** (![Arrow down]()
)
Image text alternatives** (![Project Image1]()
)
Image text alternatives** (![Project Image2]()
)
Image text alternatives** (![Project Image3]()
)
Image text alternatives** (![Project Image4]()
)
Image text alternatives** (![github2]()
)
Image text alternatives** (![linkedin2]()
)
Image text alternatives** (![Angelis2]()
)
Image text alternatives** (![twitter2]()
)
Image text alternatives** (![medium2]()
)
[Text headings](No error found)
Color contrast
[Resize](No error found)
Interaction
Interaction
Interaction
[Moving content](No error found)
[Multimedia](No error found)
[The basic structure of the page](No error found).
Peer to peer code review
The comments collected during today's morning session were the following:
Block 2: Milestone 3
##Contact Page
In this project, we added the footer/contact page to the portfolio project in the HTML The footer/contact page also was styled in the style.css
Bugs: hide-and-seek
By checking the project I found the following bug: -When you open the menu by clicking on the menu hamburger, if you click in the empty spaces, the window will close automatically instead of using the "X" button.
Peer to peer code review
Great work so far. Your project is almost perfect only a few changes need to be addressed. 1- Give more margin to the buttons 'work' so doesn't stick to the edge of the window. 2- Try to give a zero margin to the title of the project's card. 3- It would be better if you gave padding to the top of the text area.