https://github.com/svdotsenko/portfolio-project-1

Landing
https://github.com/svdotsenko/portfolio-project-1

adaptive-design bem-methodology fancybox jquery mixitup pixel-perfect

Last synced: about 1 month ago
JSON representation

Landing

• Host: GitHub
• URL: https://github.com/svdotsenko/portfolio-project-1
• Owner: SVDotsenko
• Created: 2024-01-23T09:50:58.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-29T10:02:32.000Z (over 2 years ago)
• Last Synced: 2025-03-27T21:29:18.696Z (over 1 year ago)
• Topics: adaptive-design, bem-methodology, fancybox, jquery, mixitup, pixel-perfect
• Language: CSS
• Homepage: https://svdotsenko.github.io/portfolio-project-1/
• Size: 7.68 MB
• Stars: 0
• Watchers: 0
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Serhii's Sirko portfolio

This website is a portfolio project about Serhii Sirko, a front-end developer. It showcases Serhii's skills in web development and design, including JavaScript, CSS, and HTML.

This website is for anyone who is interested in learning more about Serhii's work as a front-end developer. It provides a glimpse into his skills, experience, and portfolio, contact information.

![Responsive Mockup](images/readme/mockups.png)

## Features

This site is designed as single page application, which consist of the following parts:

### Existing Features

- __Navigation Bar__

    - The full responsive navigation bar includes links to the Logo (Home page), About me, Skills, Services, Portfolio, Reviews and Contacts section and is identical in each section to allow for easy navigation.

    - This section will allow the user to easily navigate from section to section across all devices without having to revert back to the previous page via the ‘back’ button.

     ![Nav Bar](images/readme/menu.png)

    - It will Collapse on smaller screen sizes to make it more manageable and visually pleasing

  

      ![Nav Bar](images/readme/menu-burger.png)

  

      ![Nav Bar](images/readme/menu-mobile.png)

- __The landing page image__

    - The landing includes a photograph with text overlay to allow the user to see exactly what is this site about.

    - This section introduces the user to Serhii Sirko with attention to his portfolio.

![Landing Page](images/readme/start.png)

- __About me Section__

    - This section gives brief introduction about Serhii.

  

![About me section](images/readme/aboutme.png)

- __Skills section__

    - This section will allow the user to see Serhii's main skills.

  

![Skills section](images/readme/skills.png)

- __Services section__

    - This section will allow the user to see services which Serhii can provide.

![Services section](images/readme/services.png)

- __Portfolio section__

    - This section will allow the user to see services projects which Serhii has already done.

![Portfolio section](images/readme/portfolio.png)

- __Customer review section__

    - This section will allow the user to see customer review.

![Customer review section](images/readme/review.png)

- __Statistics section__

    - This section will allow the user to see statistics about Serhii's work.

![Statistics section](images/readme/statistics.png)

- __Contacts section__

    - This section will allow the user to see how to contact with Serhii.

![contacts section](images/readme/contacts.png)

### Features Left to Implement

- Lazy loading on load more button

## Testing

* I tested that this page works in different browsers: Chrome, Firefox, Safari.

* I confirmed that this project is responsive, looks good and functions оп ап standard screen sizes using the

devtools device toolbar.

* I confirmed that the all sections аrе readable and easy to understand.

* I have confirmed that the form works: requires entries in every field, and the submit button works.

### Validator Testing

- HTML

    - No errors were returned when passing through the official W3C validator

  

![W3C validator](images/readme/html.png)

- CSS

    - No errors were found when passing through the official (Jigsaw) validator

![W3C validator](images/readme/css.png)

- Accessibility  

  - I confirm that the colors and fonts chosen are easy to read and accessible by running it through lighthouse in devtools. 

![lighthouse](images/readme/lighthouse.png)

## Deployment

- The site was deployed to GitHub pages. The steps to deploy are as follows:

    - In the GitHub repository, navigate to the Settings tab

    - From the source section drop-down menu, select the main branch

    - Once the main branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found [here](https://svdotsenko.github.io/portfolio-project-1)

## Credits

### Content & Media 

- I implemented this [mockup](https://www.figma.com/file/h0f2OcCTHy0Nu2jKlywjbs/%D0%9F%D0%BE%D1%80%D1%82%D1%84%D0%BE%D0%BB%D1%96%D0%BE?type=design&node-id=0%3A1&mode=dev)