Responsive Portfolio Website

Portfolio page

A portfolio website is a unique way to showcase work and let others know about myself. It's a platform for projects, and information about me.

Key points:

• Responsive Personal Portfolio Website Using HTML SCSS & JavaScript
• Smooth scrolling in each section.
• Developed first with the Mobile First methodology, then for desktop.
• Compatible with all mobile devices and with a beautiful and pleasant user interface.
• Built using BEM methodology- valid semantic adaptive layout
• Using JavaScript to implement the functionality

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

• View the optimal layout depending on their device's screen size
• See hover and focus states for interactive elements
• See responsive navbar
• Scroll sections active link

Screenshot

Desktop version

There's section "Projects" with some examples of my work

Links

• Solution URL: Portfolio page
• Live Site URL: Portfolio page

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• BEM
• SCSS
• npm sass
• JS
• DOM API

What I learned

This was the project in which I tried to use lots of JS. The coolest thing I did was this scroll sections active link functionality:

const sections = document.querySelectorAll('section[id]')

function scrollActive(){
    const scrollY = window.pageYOffset;

    sections.forEach(current =>{
        const sectionHeight = current.offsetHeight;
        const sectionTop = current.offsetTop - 72;
        const sectionId = current.getAttribute('id');
        if(scrollY >= sectionTop && scrollY <= sectionTop + sectionHeight){
            document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active');
        }else{
            document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active');
        }
    })
}
window.addEventListener('scroll', scrollActive);

Working on this project I also worked with npm sass.

Continued development

In future projects I want to focus more on using JS and API in my work, start building React apps.

Useful resources

• Sass Guidelines - An opinionated styleguide for writing sane, maintainable and scalable Sass.
• Sass Basics - Basics on how to transform SCSS into CSS using terminal.
• BEM - Basics of BEM methodology.

Author

• LinkedIn - Eugene Zanevskij
• GitHub - @EugeneZanevskij