aylorbrown/aylor-coming-soon

Stand-in portfolio site built with vanilla JS with help from SuperHi Javascript for Designers

Aylor Brown Portfolio Placeholder

While I worked on my portfolio, I wanted to create a placeholder site with contact info and links to my GitHub and LinkedIn. I used it as an opportunity to practise my Javascript skills.

Features

Uses an array of object to create the content for the pages

const pages = [
    { copy: 'a NYC-based designer and developer', background: 'rgb(239, 186, 179)', circle: 'rgb(190, 70, 36)' }, 
    { copy: 'currently working on her portfolio', background: 'rgb(252, 153, 101)', circle: 'rgb(85, 93, 69)'}, 
    { copy: 'giving you links to her <a href="https://github.com/aylorbrown">GitHub</a> and <a href="https://www.linkedin.com/in/aylor-brown-a02609199/">Linkedin</a>', background: 'rgb(254, 137, 42)', circle: 'rgb(190, 70, 36)'}, 
    { copy: 'letting you <a href="mailto:aylorbrown@gmail.com?Subject=Hello%20Aylor!">contact</a> her for resume and work samples', background: 'rgb(254, 120, 38)', circle: 'rgb(234, 194, 99)'}
]

Picks the relevant tags (we'll use this later)

const nextTag = document.querySelector('footer img.next');
const previousTag = document.querySelector('footer img.prev');
const randomTag = document.querySelector('footer img.random');
const outputTag = document.querySelector('h2');
const circleTag = document.querySelector('.circle');
const bodyTag = document.querySelector('body');

Three functions: one to increase the page number, decrease the page number, and pick a random slide

const next = function () {
    pageNumber = pageNumber + 1; 

    if (pageNumber > pages.length - 1) {
        pageNumber = 0;
    }
    updateSection();
}

A function that updates each section

const updateSection = function () {
    outputTag.innerHTML = pages[pageNumber].copy;
    circleTag.style.backgroundColor = pages[pageNumber].circle;
    bodyTag.style.backgroundColor = pages[pageNumber].background;
}

A user can use the arrow right and left to move the next or previous page

document.addEventListener('keyup', function (event) {
    console.log(event);

    // if the key being pressed is arrowRight
    if (event.key == 'ArrowRight') {
        next()
    }  else if (event.key == 'ArrowLeft') {
        previous();
    }  
})

I'm currently looking for new opportunities in NYC so hit me up!

Author

Aylor Brown