Portfolio with React + Bootstrap

portfolio-with-react-bootstrap.markdown

Portfolio with React + Bootstrap

A react-bootstrap portfolio web page

A Pen by Vasilii V on CodePen.

License.

Portfolio.pug

#container






<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

script.babel

const myProjects = [['React Calculator', 'FCC Calculator made with React.js', 'https://i.imgur.com/y7qcqCK.png', 'https://codepen.io/VasV/full/bGEVyRR'], ['Screen Keyboard', 'Touch keyboard built with Vanilla JS and CSS', 'https://i.imgur.com/2lH0mRc.png', 'https://codepen.io/VasV/full/ExPWErE'],['Quiz App', 'Quiz application built with React', 'https://i.imgur.com/lJVET9A.png','https://codepen.io/VasV/full/abdWYrE'], ['Weather App','Displays weather','https://i.imgur.com/0sgAk8x.png', 'https://codepen.io/VasV/full/gOaOBRM'],['0-X React','Naughts and Crosses Game', 'https://i.imgur.com/m7mWhoi.png', 'https://codepen.io/VasV/full/PoPVwBz'], ['Pomodoro Clock', 'Pomodoro clock built with React', 'https://i.imgur.com/F5HDGvd.png', 'https://codepen.io/VasV/full/oNbzmKQ'],['Countdown timer', 'Made with Vanilla JS', 'https://i.imgur.com/ptn6zs2.png', 'https://codepen.io/VasV/full/rNxeqEq'],
                    ['Breakout game', 'Brick game', 'https://i.imgur.com/dGZ5PrD.png', 'https://codepen.io/VasV/full/QWyjweM'], ['Voice Synthesis', 'Simple Voice Synthesis App built with vanilla JS', 'https://i.imgur.com/KIgq7gj.png', 'https://codepen.io/VasV/full/pogNLRP'],['Video Player', 'Plays video', 'https://i.imgur.com/rt3IQER.png','https://codepen.io/VasV/full/BaopRrd'],['Night Mode', 'Switches between day and night mode', 'https://i.imgur.com/moehU3Z.png', 'https://codepen.io/VasV/full/NWGbwPe'],['Profile Scroller','Simple scroller for a dating website','https://i.imgur.com/qUkMQEr.png','https://codepen.io/VasV/full/VwvKmxW'], ['Github Finder', 'Lookup of Github user info', 'https://i.imgur.com/DuKkxjS.png', 'https://codepen.io/VasV/full/oNjNEzK'], ['Number Guesser', 'Guess a number game', 'https://i.imgur.com/GGi5gNa.png', 'https://codepen.io/VasV/full/VwLGJar'], ['Book database', 'Manage a bookstore database', 'https://i.imgur.com/Ge8blmH.png', 'https://codepen.io/VasV/full/OJVBJvq'], ['Loan Calculator', 'Calculate your loan', 'https://i.imgur.com/hho5hWT.png','https://codepen.io/VasV/full/MWwqrzX'], ['To-do list', 'Self-descriptive', 'https://i.imgur.com/4YBdJ9D.png', 'https://codepen.io/VasV/full/MWwGKrM'], ['React Menu', 'Restaraunt menu build with Ract', 'https://i.imgur.com/iseCzEr.png', 'https://codepen.io/VasV/full/oNXoKMP'], [
  'Drum kit', 'Drum kit', 'https://i.imgur.com/e02otOS.png', 'https://codepen.io/VasV/full/abOwEwM'
], ['Markdown previewer', 'Previewer of Github flavoured markdown', 'https://i.imgur.com/lxpvILm.png', 'https://codepen.io/VasV/full/PoqpaRL'], ['Random quote generator', '', 'https://i.imgur.com/Vl5ptDq.png', 'https://codepen.io/VasV/full/MWwJMEG'], ['Clock', 'Simple clock made with vanilla JS', 'https://i.imgur.com/jkSfP4U.png', 'https://codepen.io/VasV/full/QzXeJo'], ['Tribute page', 'Plain HTML page', 'https://i.imgur.com/0G8aDw0.png', 'https://codepen.io/VasV/full/YRGWaN']]



class Navigation extends React.Component {
  render() {
    return (
   <nav class="navbar navbar-expand-md navbar-light bg-danger">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span><i class="fas fa-bars"></i></span>
  </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link text-white" href="#sobre">About</a></li>
        <li class="nav-item"><a class="nav-link text-white" href="#portfolio" >Portfolio</a></li>
        <li class="nav-item"><a class="nav-link text-white" href="#contacto">Contacts</a></li>
      </ul>
        </div>
   </nav>
      );
  }
}

class Header extends React.Component {
  render() {
    return (
      <header class="container-fluid">
        <div class="header">
          <h1>My name is Vasilii Vakhtin</h1>
          <h3>I'm a Javascript\React Developer</h3>
        </div>
      </header>
    );
  }
}

  
class Sobre extends React.Component {
  render() {
    return (
      <section class="container-fluid section-sobre">
        <h2 class="sobre" id="sobre">About</h2>
        <div class="container sobre-container d-md-flex justify-content-md-around">
          <div class="p-2 align-self-md-start">
            <p class="text-justify">My name is Vasilii Vakhtin. I am 27, live in Barcelona, Spain. I have a Bachelor's degree in Translation and Master's degree in Marketing.</p>
              </div>
          <div class="p-2 align-self-md-end">
            <p class="text-justify">I speak Russian (mother tongue), English and Spanish (fluently) and Catalan (at the beginner level). I study HTML/CSS, Javascript and its frameworks - mainly React, Redux, Bootstrap and Vue.
            </p></div>
        </div>
      </section>
    );
  }
}

class Portfolio extends React.Component {
  render() {
    return (
      <section class="portfolio container-fluid">
        <h2 id="portfolio">Portfolio</h2>
        <div class="container contenedor-portfolio d-md-flex flex-md-wrap">
         {myProjects.map(e => {
            return (<article>
              <div class="jod-desc">
                <h3>{e[0]}</h3>
                <p>{e[1]}</p>
               <a href={e[3]} target="_blank">
      <button className='btn btn-light'>Open the project</button>
  </a>
                </div>
                <img src={e[2]} class="img-fluid"/>
            </article>)
          })} 
       
          </div>
      </section>
    
    );
  }
}

class Contacto extends React.Component {
  
  submitForm(ev) {
    ev.preventDefault();
    const form = ev.target;
    const data = new FormData(form);
    const xhr = new XMLHttpRequest();
    xhr.open(form.method, form.action);
    xhr.setRequestHeader("Accept", "application/json");
    xhr.onreadystatechange = () => {
      if (xhr.readyState !== XMLHttpRequest.DONE) return;
      if (xhr.status === 200) {
        form.reset();
        this.setState({ status: "SUCCESS" });
      } else {
        this.setState({ status: "ERROR" });
      }
    };
    xhr.send(data);
  }
  
  render() {
    return (
      <section class="container-fluid contacto">
        <h3 id="contacto">Contacts</h3>
        <div class="formulario">
           <form class="d-flex flex-column"  onSubmit={this.submitForm} action="https://formspree.io/mpzjejrk"   method="POST">
          
                  <div class="form-group">
                    <label for="nameTXT">Your Name </label>
                    <input type="text" id="nameTXT" name="nameTXT" />
                    
                  </div>
                  <div class="form-group">
                    <label for="emailTXT">Email Address</label>
                    <input type="email" id="emailTXT" name="emailTXT" />
                    
                  </div>
                  <div class="form-group">
                    <label for="subjectTXT">Subject</label>
								<input type="text" id="subjectTXT" name="subjectTXT" />
                  </div>
                  <div class="form-group">
							
								<textarea cols="36" rows="8" id="messageTXT" name="messageTXT"></textarea>
							</div>
                  <button type="submit" class="noir" id="submitBTN" name="submitBTN"><span class="glyphicon glyphicon-send"></span>Send</button>
                
        </form>
 
        </div>
      </section>
    );
    
  }
}

class Encontrame extends React.Component {
  render() {
    return (
    <footer class="container-fluid d-flex align-items-center justify-content-center flex-column">
        <h3 id="encontrame">My social networks</h3>
        <div class="container d-flex align-items-center justify-content-around flex-wrap">
          
          <span><a href="https://codepen.io/VasV" target="_blank"><i class="fab fa-codepen"></i></a></span>
          <span><a href="https://www.facebook.com/basile.vakhtin" target="_blank"><i class="fab fa-facebook-f"></i></a></span>
          <span><a href="https://www.linkedin.com/in/vasiliiv/" target="_blank"><i class="fab fa-linkedin-in"></i></a></span>
          <span><a href="https://github.com/VasVV" target="_blank"><i class="fab fa-github"></i></a></span>
        </div>
    </footer>
    )
  }
}


class App extends React.Component {
  render() {
    return (
      <div>
        <Navigation />
        <Header />
        <Sobre />
        <Portfolio />
        <Contacto />
        <Encontrame />
      </div>
    );
  }
}
ReactDOM.render(
 <App /> ,
  document.getElementById('container')
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/5.2.0/react-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/5.2.0/react-router-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-bootstrap/0.25.0/ReactRouterBootstrap.min.js"></script>

style.scss

$header: #00B288;
$sobre: #FFFFFF;
$nav: #DC3545;

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
   scroll-behavior: smooth;
}

.navbar {
  position: fixed;
  z-index: 20;
  width: 100%;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
  box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
}

li a {
  text-align:center;
  text-transform: uppercase;
  font-weight: bolder;
  color: white;
  font-family: 'Noto Sans', sans-serif;
  letter-spacing: 1.5px;
}

.navbar-toggler {
  border: none;
}

.fas.fa-bars{
  font-size: 1.9rem;
  color: white;
}

h1, h3 {
  text-align: center;
}

h3 {
  font-family: 'EB Garamond', serif;
  margin-top: 20px;
}
h1 {
  color: white;
  font-family: 'Heebo', sans-serif;
  letter-spacing: 1px;
}

header {
  padding-top: 50px;
  background-color: $header;
  height: 100vh;
}

h2.sobre {
  text-align: center;
  margin-bottom: 50px;
  font-size: 2.7rem;
  color: $header;
  font-weight: bolder;
  font-family: 'Khula', sans-serif;
}

.header {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.section-sobre {
  width: 100%;
  background-color: $sobre;
  padding-top: 120px;
  padding-bottom: 120px;
}

.p-2 {
  p {
    font-family: 'Karma';
    font-size: 1.1rem;
  }
}

article {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.img-fluid {
  transition: all 1s;
  width: 100%;
  height: 100%;
}

article:hover > .img-fluid {
  transform: scale(1.1);
}
article:hover > .jod-desc {
  transform: translateX(0);
  visibility: inherit;
}
.jod-desc {
  padding: 15px;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0, .7);
  transition: all .5s;
  z-index: 2;
  transform: translateX(-100%);
  
  h3 {
    color: white;
    font-size: 2rem;
    letter-spacing: 2px;
    text-align: center;
    font-family: 'Heebo', sans-serif;
  }
  
  p {
    color: white;
    font-weight: bolder;
    letter-spacing: 1px;
    text-align: center;
    font-family: 'EB Garamond', serif;
  }
}

.portfolio {
  background-color: $header;
  padding-top: 120px;
  padding-bottom: 120px;
}

#portfolio, #encontrame {
  text-align: center;
  margin-bottom: 50px;
  font-size: 2.7rem;
  color: white;
  font-weight: bolder;
  font-family: 'Khula', sans-serif;
}

#contacto {
  text-align: center;
  margin-bottom: 50px;
  font-size: 2.7rem;
  color: $header;
  font-weight: bolder;
  font-family: 'Khula', sans-serif;
}

.contacto {
  padding-top: 120px;
  padding-bottom: 120px;
}

input, textarea {
  margin-bottom: 40px;
  font-family: 'EB Garamond', serif;
}

.form-control {
  border: none;
  border-bottom: 2px solid $header;
}

.form-control-lg {
  border-radius: unset;
}

.btn {
  background-color: $nav;
  color: white;
  font-weight: bolder;
  letter-spacing: 1px;
  padding: 10px;
  box-shadow: 0px 0px 3px black;
  transition: all .5s;
  
  &:hover {
    background-color: #c42f3b;
  }
}

.fab {
  font-size: 2rem;
  padding: 20px;
  background: linear-gradient(70deg, $nav, #f73b4b);
  border-radius: 100%;
  cursor: pointer;
  transition: all .5s;
  margin: 5px;
}

.fab:hover {
  transform: scale(1.1);
}

.fa-facebook-f {
  padding: 20px 26px;
}

footer {
  
  background-color: $header;
  padding: 150px 0;
  .container {
    
    width: 90%;
    margin: 0 auto;
  }
}


#hecho {
  background-color: $nav;
  padding-top: 20px;
  padding-bottom: 10px;
}
h6 {
  color: white;
  font-size: 1rem;
  letter-spacing: 1px;
  text-align: center;
  padding: 5px;
}

@media (min-width: 768px) {
  .p-2 {
  width: 45%;
}
  
  article {
    
    width: 50%;
    height: 42vh;
    display: inline-block;
  }
  
  .formulario {
    width: 70%;
    margin: 0 auto;
  }
}

@media (min-width: 1000px) {
  footer {
    
    .container {
      
      width: 60%
    }
    }
  
  article {
    height: 56vh;
  }
}