JSFiddle - React, Tailwind, and code Playground

HTML

<h2 class="title_bar">
<ul>
					
	<li><span onclick = "clicked_about(1)">About</span></li>
	<li><span onclick="clicked_resume(1)">Resume</span></li>
</ul>
					
</h2> 

	
<div id="intro_page" class="unseen">
	<p id="intro_main_text"> I enjoy reading, swimming, jogging, painting and exploring. </p>
	<figure class="intro_pic1">
	    <img src="img/award.jpg" alt="Receiving Award" height="50" />
	    <figcaption>Award 2015</figcaption>
	</figure>
</div>

<div id="resume_page" class="unseen">
	<p>My resume</p>
</div>

CSS

body {
   overflow-x:hidden
}

#intro_page.unseen{
    transform: translateX(120%);
    transition: transform 1s ease-in;
}
#intro_page{
    transform: translateX(0);
    transition: transform 1s ease-in;
}

#resume_page.unseen{
    transform: translateX(-100%);
    transition: transform 1s ease-in;
}

#resume_page{
    transform: translateX(0);
    transition: transform 1s ease-in;
}

JavaScript

function clicked_resume(OnScreen)
{
    var resume = document.getElementById('resume_page');
    if(OnScreen == 1)
    {
        resume.className = '';
        clicked_about(0);
    }
    else if(OnScreen == 0)
    {
        resume.className = 'unseen';
    }
    
}

function clicked_about(OnScreen)
{
   
    var about = document.getElementById('intro_page');
    if(OnScreen == 1)
    {
        about.className = '';
        clicked_resume(0);

    }
    else if(OnScreen == 0)
    {
        about.className = 'unseen';
    }
}