Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<body onload="">
  <div id="wrapper">
    <div id = "" class="container-fluid">

<!--Nav Bar-->
<div class="container-fluid">   
  <div id="top">
<div class="row">
  
  <div class="navibar1 col-sm-6 col-xs-12 sweet2">
    <p id="largetext"><strong>Xander</strong></p>

  </div>

  <a href="#port"><div class="navibar1 col-sm-3 col-xs-12 sweet">
    <p id="purp-bg" class= "me">Portfolio</p>

  </div></a>
  
<a href="#footer">
   <div class="navibar1 col-sm-3 col-xs-12 sweet">
     <p id="purp-bg" class = "me">Contact</p>

  </div>
 </a>
  
  </div>
</div>   

      
<!--Jumbotron--> 
 
      
 <div class="jumbotron col-xs-12 col-sm-12">
   
   <div class="container-fluid">
     <div class="row">
     <div class="col-sm-6 col-xs-12 ">
       <div id="new">
       <p id ="go">Welcome! I'm Xander Stevenson and I'm a...</p>
         <p id="myjob">Full-Stack Software Developer</p>

         </br>
       <p id ="go">Python, Django, JavaScript, jQuery, React, Node, Express, MondoDB, Mongoose, PostgreSQL, SQL, HTML, CSS, Sass, Bootstrap</p>

      <br>
      <p>
         <a href="http://xanderstevenson.com/resume" class="btn btn-primary btn-lg" target="_blank" role="button" id="mine">Click Here to Check Out<br>My Résumé</a>
        
       </div> 
        
        
      </p>
       </br>
              </br>
     </div>

 
       <div class="col-sm-6 col-xs-12 ">
         
           <p id ="go">Here you will find, my intricate articles of digital design. Surfaces, edifaces, envelope and combine, interacting in unison, often written, in, Sublime. <br><br>
             <strong><span id="ul">Each app is <em>clickable</em></span> - Please click on each one to give it a try!!!
           </p>

         </strong>
             <center><a href="https://res.cloudinary.com/dx5eoz5dw/image/upload/v1556029623/El-Hambre_Wire-Frame_dhzjju.png" target="_blank"><img src="https://res.cloudinary.com/dx5eoz5dw/image/upload/v1556029623/El-Hambre_Wire-Frame_dhzjju.png" id="art"></a>   <br> <br>   <p style="font-size: 20px">This is the flow chart I created for my <a href="https://www.youtube.com/watch?v=PIEm6GQvOGU&feature=youtu.be" target="_blank">El Hambre</a> project. <br> Please click on it to have a look.</p></center>

       </div>
     </div>
  </div>
   </div>
   
</div>     
      
<!--Jumbotron-->     
      

<!--Portfolio-->
     


<div class="container-fluid">
  
<div class="row">
    <div class="col-xs-0 col-md-2"><p></p>
  </div>  

    <!-- grid 1 -->  
   <div class="col-xs-12 col-md-8 col-lg-12">
  <div id="port" class="title" style="height: 100%;"><p><strong>Python / Django</strong> Full-Stack App<br><span id="title2">( Click on the Image to See the App in Action )</span></p> 
     </div>
      <div class="col-xs-0 col-md-2"><p></p>
  </div>   
   </div>
   </div> 
  
 
    
<div class="container-fluid">
  <div class="row">
    
    <div class="col-xs-0 col-sm-1 col-md-4 col-lg-4 col-xl-4">
    </div>
    
    
    <div class="col-xs-12 col-sm-12 col-lg-4 col-xl-4 portfolio">

            <p>I created this Python/Django App from scratch in my spare time. It really helped me learn more of the ins-n-outs, as well as some of the intricacies and nuances of Django. </p>
      <p>The site is fully functioning, implementing Stripe for payment and SendGrid for email. Amazon S3 stores all customer media in secure, encrypted form.</p>
    

<a href ="https://www.sentheard.com" target ="_blank"><img src="https://res.cloudinary.com/dx5eoz5dw/image/upload/v1597337520/SentHeard_i11co0.png" id="el_hambre_img"></a>
</br>     
    </div> 
    
  
  
      <div class="col-xs-0 col-sm-1 col-md-4 col-lg-4 col-xl-4">
    </div>
    

</div>
     </div>


<div class="container-fluid">
  <div class="row">
    
    <div class="col-xs-0 col-sm-1 col-md-4 col-lg-4 col-xl-4">
    </div>
    
    
    <div class="col-xs-12 col-sm-12 col-lg-4 col-xl-4 portfolio">

            <p>This full-stack Django app was my final individual project for Code Platoon. I came came up with the concept and planned, developed and designed the entire app myself. The database used is PostgreSQL. </p>
      <p>The Stripe payment API and the SendGrid email API were used to collect donations and send emails containing Amazon Gift Card codes generated asynchronously via the AWS Gift Card API.</p>
    

<a href ="https://youtu.be/PIEm6GQvOGU" target ="_blank"><img src="http://res.cloudinary.com/dx5eoz5dw/image/upload/e_sharpen:100/v1555391547/Portfolio/El_Hambre.png" id="el_hambre_img"></a>
</br>     
    </div> 
    
  
  
      <div class="col-xs-0 col-sm-1 col-md-4 col-lg-4 col-xl-4">
    </div>
    

</div>
     </div>




<div class="row">
    <div class="col-xs-0 col-md-2"><p></p>
  </div>  

    <!-- grid 1 -->  
   <div class="col-xs-12 col-md-8 col-lg-12">
  <div id="port" class="title" style="height: 100%;"><p><strong>Python GUI Development</strong> with TkInter<br><span id="title2">( Graphics for Data Analytics and Games )</span></p> 
     </div>
      <div class="col-xs-0 col-md-2"><p></p>
  </div>   
   </div>
   </div> 
  
 
    
<div class="container-fluid">
  <div class="row">
    
    <div class="col-xs-0 col-sm-1 col-md-4 col-lg-4 col-xl-4">
    </div>
    
    
    <div class="col-xs-12 col-sm-12 col-lg-4 col-xl-4 portfolio">

           <p>I created this program in Python for work at Cisco, as a tool we could use to make quick references. 
             <br>TkInter is the standard GUI package for Python. <br><br>
 ( Click <a href ="https://res.cloudinary.com/dx5eoz5dw/raw/upload/v1572378814/Python_TkInter_USA.zip" target ="_blank">HERE</a> to Download the GUI. )
<br>
 <img src='https://res.cloudinary.com/dx5eoz5dw/image/upload/e_sharpen:100,q_100/v1591650792/Portfolio/ciscolodex-img2.png' id="el_hambre_img">      
 <img src='https://res.cloudinary.com/dx5eoz5dw/image/upload/v1591651304/Portfolio/ciscolodex-img.png' id="el_hambre_img">        
      
            <p>After I had mastered the fundamentals of Python, I began to branch out and learn about all its different applications. <br>
              <br>
( Click <a href ="https://res.cloudinary.com/dx5eoz5dw/raw/upload/v1572378814/Python_TkInter_USA.zip" target ="_blank">HERE</a> to Download the GUI. )
 <a href ="https://res.cloudinary.com/dx5eoz5dw/raw/upload/v1572378814/Python_TkInter_USA.zip" target ="_blank">
 <video autoplay controls loop id="el_hambre_img">
  <source src="https://res.cloudinary.com/dx5eoz5dw/video/upload/v1572379347/Python_TkInter_USA_e4emax.mov" type="video/mp4">
  Your browser does not support the video tag.
</video></a>     
    
   
</br>  
    
<!-- <p><span class="">
( Instructions to download and run ) <br><br><strong>Mac OSx:</strong>    click <a href ="https://res.cloudinary.com/dx5eoz5dw/raw/upload/v1572378814/Python_TkInter_USA.zip" target ="_blank">HERE</a> download the file and unzip it with Archive Utility or a similar app. In the Finder on your Mac, hold down the CONTROL button and click on the file. Click Open. Click Open again to allow the file to run. </br></br><strong>Windows OS:    </strong> Not available at this time. Pyinstaller unable to encode Unicode</span>  </p> 
 <p>
 Have a look at the steps I took while learning to create Python GUI graphics  
</p>
 -->

<!-- Here's some of my practice designs while learning Python graphics  
</p>
<img src = "https://res.cloudinary.com/dx5eoz5dw/image/upload/v1572483489/TkInter.gif" id='usa_flag_vid'>
 -->

</div> 
      
      <div class="col-xs-0 col-sm-1 col-md-4 col-lg-4 col-xl-4">
    </div>
    

</div>
     </div>





<div class="row">

    <div class="col-xs-0 col-md-2"><p></p>
  </div>  
 
    <!-- grid 1 -->  
   <div class="col-xs-12 col-lg-12">
  <div class="title"><p><strong>React.js</strong> JavaScript Apps<br><span id="title2">(Click on Images to Try the Apps)</span></p>
     </div>
      <div class="col-xs-0 col-md-2"><p></p>
  </div>   
   </div>
   </div>     
 <!--   </div> -->       
 <div class="row">
      
     <div class="col-xs-0 col-sm-1">   
    </div>
   
     <div class="col-xs-12 col-sm-10  portfolio">
      <p id="portfolio">A client requested I design a mockup React web app using the the Movie Database API and hosted on Google Firebase. I finished it over the weekend. Click <a href="https://xanderstevenson.github.io/UltimateMovieDatabase/" target="_blank">HERE</a> to see it live. **Update 10-2019** Changes to the Database API this app feeds from has caused some glitches. </p>
   
      <video controls loop width="350" height="100%" Autoplay=autoplay>
    <source src="https://res.cloudinary.com/dx5eoz5dw/video/upload/v1559798229/UltimateMoveDatabase/TUMG.mov" type="video/mp4">
</video>
      
    </div> 

        <div class="col-xs-12 col-sm-12 col-lg-12 portfolio">
      <p>React.js Calculator - I used the React framework to generate HTML with interactivity through JavaScript using Babel as a preprocessor. The Bootstrap framework and CSS were used to make it visually appealing. At first, React.js was a little intimidating, but now I appreciate how amazing it is. Thannk you Facebook!</p>
         
      <a href ="https://codepen.io/supernal-android/full/Jawadp/" target ="_blank"><img src="https://res.cloudinary.com/dx5eoz5dw/image/upload/v1559950608/Portfolio/React-Calculator_z1j4di.png"></a>
    </div>    

    <div class="col-xs-0 col-sm-1">
    </div>
   </div> 
 <div class="row">
      
     <div class="col-xs-0 col-sm-1">   
    </div>
   
     <div class="col-xs-12 col-sm-10  portfolio">
      <p id="portfolio">A beautiful React.js app I made at Code Platoon implementing state and prop manipulation on data received via API. The user can select a headline button and be presented with the abstract and a live link to the original article. Hosted on Google Firebase (Backend-as-a-Service).</p>
   
      <a href="https://xander-news-app-2.firebaseapp.com/" target="_blank"><img src="https://res.cloudinary.com/dx5eoz5dw/image/upload/v1559951457/Portfolio/NewsApp.png" class="img"></a>
      
    </div> 
      
        <div class="col-xs-12 col-sm-10 portfolio">
<p id="portfolio">This App utilizes React.js, Redux, Sass and Babel to give the user a preview of how their Markdown code will be displayed in HTML. I made this app as part of a Udemy course on JavaScript programming. This app has a realworld application, too.</p>
   <br>
    
            <a href ="https://codepen.io/supernal-android/full/Pdyzzg/" target="_blank"><img src="https://res.cloudinary.com/dx5eoz5dw/image/upload/v1559951936/Portfolio/MarkDown.png"></a>
    </div>    
   
    <div class="col-xs-0 col-sm-1">
    </div>
<!--   </div> -->  
  
  
 <div class="row">
    <div class="col-xs-0 col-md-2"><p></p>
  </div>  
 
    <!-- grid 1 -->  
   <div class="col-xs-12 col-lg-12">
  <div class="title"><p><strong>JavaScript</strong> App Design<br><span id="title2">(Click on Images to Try the Apps)</span></p>

     </div>
      <div class="col-xs-0 col-md-2"><p></p>
  </div>   
   </div>
   </div> 
   
   
  <div class="row">
    
    <div class="col-xs-0 col-sm-1">
    </div>

     <div class="col-xs-12 col-sm-10  portfolio">
            <p>A fun Connect Four game I built from scratch, on my own, with JavaScript and jQuery. This was a front end project for the Python and Django Full Stack Bootcamp on Udemy. I love coding and had a blast making this. Finishing projects like this reminds me how much I love programming and algorithmic problem-solving. This one was fun to make and it looks cool, too.</p>
      <a href="https://codepen.io/supernal-android/full/JevGbo/" target="_blank"><img src="https://res.cloudinary.com/dx5eoz5dw/image/upload/v1542993159/Connect_Four_jwnnmc.png"></a>
      
    </div>    
 
    <div class="col-xs-12 col-sm-10 portfolio">
      <p>JavaScript Tic-Tac-Toe app, built with "vanilla" JavaScript. Understanding pure/vanilla JavaScript ensures you will have a truly granular understanding of the language and make the best use of it's libraries and frameworks. I captued different frames during game play and created an animate gif out of them.</p>
      <a href="https://codepen.io/supernal-android/full/yQPNrR/" target="_blank"><img src="https://res.cloudinary.com/dx5eoz5dw/image/upload/v1542503207/Tic-Tac-Toe_c8blvm.gif"></a>
      
    </div> 
  
      <div class="col-xs-0 col-sm-1">
    </div>
    
  </div>

    <div class="row">
      
          <div class="col-xs-0 col-sm-1">
    </div>
     <div class="col-xs-12 col-sm-10  portfolio">
      <p >I made this To-Do List using vanilla JavaScript. I stored user data in Local Storage, which is more persistent than Session Storage. User data is collected via prompting through a browser window and data is output through the window, as well.</p>
      <a href="https://codepen.io/supernal-android/full/RvymRo" target="_blank"><img src="http://res.cloudinary.com/dx5eoz5dw/image/upload/e_sharpen:100/v1550010158/To-Do_List_.png" style="max-height:575px"></a>
      
    </div> 
      
       <div class="col-xs-12 col-sm-10  portfolio">
      <p>Pomodoro Clock app, which is a special timer perfect for scheduling work and breaks of specific durations. Made with JavaScript/jQuery. I actually use this app to schedule breaks and study periods and I'm rather proud of the elegant UI. As I've worked with more people in the industry, I've come to know how populat this method is.</p>
      
            <a href="https://codepen.io/supernal-android/full/rZPEgx/" target="_blank"><img src="https://res.cloudinary.com/dx5eoz5dw/image/upload/v1541514691/Pomodoro_Clock_wjo7ap.png"></a>
    </div> 

    </div>
  
          <div class="col-xs-0 col-sm-1">
    </div>
      
</div>      
      
 
<div class="container-fluid">
  
 <div class="row">
    <div class="col-xs-0 col-md-2"><p></p>
  </div>  
 
    <!-- grid 1 -->  
   <div class="col-xs-12 col-lg-12">
  <div class="title"><p>MORE <strong>JavaScript</strong> Apps<br><span id="title2">(Click on Images to Try the Apps)</span></p>
     </div>
      <div class="col-xs-0 col-md-2"><p></p>
  </div>   
   </div>
   </div> 
  
  <div class="row">
    
    <div class="col-xs-0 col-sm-1">
    </div>

     <div class="col-xs-12 col-sm-10  portfolio">
            <p>The Great RGB Color Game. Made this app with pure "vanilla" JavaScript. It turned out to be very useful for helping myself and others improve our ability to discern colors by only their red/green/blue values.</p>
      <a href="https://codepen.io/supernal-android/full/RBmJjZ/" target="_blank"><img src="http://res.cloudinary.com/dx5eoz5dw/image/upload/v1534365446/TGRCG.jpg"></a>
      
    </div>    
 
    <div class="col-xs-12 col-sm-10  portfolio">
      <p>A creative app I created from scratch on Microsoft Azure infrastructure with JavaScript. I made this at a Hackathon at Florida Institute of Technology in 2018. It utilizes HTML5 to activate the user's camera and show them a mirror-image of themselves. Click on the mirror for a surprise.</p>
      
      <a href ="https://codepen.io/supernal-android/full/wQOLBK" target="_blank"><img src="https://res.cloudinary.com/dx5eoz5dw/image/upload/v1554306933/mirror-mirror_ootq42.png"></a>
    </div>    
  
      <div class="col-xs-0 col-sm-1">
    </div>
    
  </div>

    <div class="row">
      
          <div class="col-xs-0 col-sm-1">
    </div>
     <div class="col-xs-12 col-sm-10  portfolio">
      <p id="portfolio">I designed this interactive app using JavaScript and an API administered by Wikipedia. Attractive but functional HTML and CSS design. I really enjoy working with APIs like this.</p>
      <a href="https://codepen.io/supernal-android/full/PjEWgZ/" target="_blank"><img src="https://res.cloudinary.com/dx5eoz5dw/image/upload/v1559952201/Portfolio/WikiViewer.png"></a>
      
    </div> 
      
       <div class="col-xs-10 col-sm-10  portfolio">
      <p>I used global variables and a function based on randomization in JavaScript to produce this random quote machine. Minimalist HTML and CSS design give it a utilitarian feel.</p>
      
            <a href="https://codepen.io/supernal-android/full/xrxddK/" target ="_blank"><img src="https://res.cloudinary.com/dx5eoz5dw/image/upload/v1559952450/Portfolio/QuoteGenerator.png"></a>
    </div> 

    </div>
  

 
<div class="container-fluid">
  
 <div class="row">
  
   
    <div class="col-xs-4"><p></p>
  </div>    
   
  <!-- grid 3 --> 
   
  </div>       
    </div> 
    </div>
    <div class="col-sm-2">
    </div>
      
</div>        
    
 <div class="row">
      
          <div class="col-xs-0 col-sm-1">
            
    </div>
     <div class="col-xs-12 col-sm-10  portfolio">
           <p>Living La Vida Locale - I built this app with React.js and Material IU on the front-end and Python, Django, PostgreSQL, and AWS S3 on the backend. It's designed to choose a local, novel experience for the user.
        Click on the image to watch a video of me designing the app from scratch.</p>

      <a href="https://www.youtube.com/watch?v=cCKWjqcaRb4&feature=youtu.be" target ="_blank"><img src="https://res.cloudinary.com/dx5eoz5dw/image/upload/v1555389859/La_Vida_Locale.png">
<!--         <img src="https://media.giphy.com/media/xT9IgzoKnwFNmISR8I/giphy.gif"> -->
          </a>
    </div> 
      
        <div class="col-xs-12 col-sm-10 portfolio">
          <p>Coming Soon....</p>

      <a href=""><img src="">
<!--         <img src="https://media.giphy.com/media/xT9IgzoKnwFNmISR8I/giphy.gif"> -->
          </a>
    </div>    

          <div class="col-xs-0 col-sm-1">
    </div>
 
<div class="container-fluid">
  
 <div class="row">
  
   
    <div class="col-xs-4"><p></p>
  </div>    
   
  <!-- grid 3 --> 
   
  </div>       
    </div> 
    </div>
  </div>
  
  
  <div class="row">

    <div class="col-xs-0 col-md-2"><p></p>
  </div>  
 
    <!-- grid 1 -->  
   <div class="col-xs-12 col-md-8 col-lg-12">
  <div class="title" style="height: 100%;"><p><strong>Python</strong> Programming<br><span id="title2">(ATTENTION: follow the instructions below to download and run the Python apps.)</span></p><center><p><span class="instructions"><strong>Mac OSx:</strong>    click on image to download the file and unzip it with Archive Utility or a similar app. In the Finder on your Mac, hold down the CONTROL button and click on the file. Click Open. Click Open again to allow the file to run. </br></br><strong>Windows OS:    </strong> double-click the dowloaded file and click 'More info', followed by 'Run anyway'</span></p></center>  
  </div></center>
     </div>
      <div class="col-xs-0 col-md-2"><p></p>
  </div>   
   </div>
   </div>     
  
  
  <div class="row">
    
    <div class="col-xs-0 col-sm-1">
    </div>
    
    
    <div class="col-xs-12 col-sm-10 portfolio">
      
            <p>I made this app as a mini solo project at about week 2 of the Code Platoon bootcamp. It validates if a phone number is in the correct format.</p>

 <center><span id="download_text"><a href="https://res.cloudinary.com/dx5eoz5dw/raw/upload/v1549575145/Phone-E-Phone.zip" target="_blank">
   
Download for Mac</a>
</br>

</br>
 <a href="https://res.cloudinary.com/dx5eoz5dw/raw/upload/v1553952847/Phone_E_Phone.zip" target="_blank" style="max-height:650px;">Download for Windows</a>
</span></center>


</br>

<img src="https://res.cloudinary.com/dx5eoz5dw/image/upload/v1549575137/Phone-E-Phone.png" >
</br>     
    </div> 
      
      
    <div class="col-xs-12 col-sm-10 portfolio">

      <p>This is a nice little accounting app I constructed with Python. This project reminds me of when I started coding as a kid. I feel so lucky to have found my passion. When work is not work at all, but fun, life is sweet. Thanks to my parents for buying me my first PC and encouraging me.</p>

<center><span id="download_text"><a href="https://res.cloudinary.com/dx5eoz5dw/raw/upload/v1549637891/Budget.zip" target="_blank">
   
Download for Mac</a>
</br>

</br>
 <a href="https://res.cloudinary.com/dx5eoz5dw/raw/upload/v1550965028/Budget_for_Widows.zip" target="_blank">Download for Windows</a>
</span></center>

<br>

<img src="https://res.cloudinary.com/dx5eoz5dw/image/upload/e_sharpen:100/v1549637754/BudgetCover.png" >



      
    </div>
   
    
        <div class="col-xs-0 col-sm-1">
    </div>
</div>
  <div class="row">
    
    <div class="col-xs-0 col-sm-1">
    </div>
    
    
    <div class="col-xs-12 col-sm-12 portfolio">
      
            <p>I was descent with Python before coding bootcamp, but using it daily at such a high-tempo made me a Python Jedi.</br></br>Here's an app I made for a project at Code Platoon. I imported a module to generate a random number, guiding the user based on their input. This type of app is fun because it's interactive, albeit asynchronous.</p>
<br>
 <center><span id="download_text"><a href="https://res.cloudinary.com/dx5eoz5dw/raw/upload/v1549415998/Guessing_Game_for_Mac.zip" target="_blank">
   
Download for Mac</a>
</br>

</br>
 <a href="https://res.cloudinary.com/dx5eoz5dw/raw/upload/v1549429346/Guessing_Game_for_Windows.zip" target="_blank">Download for Windows</a>
</span></center>


</br>

<img src="https://res.cloudinary.com/dx5eoz5dw/image/upload/v1549415587/guessing_game.png">
</br>
</br>   
    </div> 
      
      
    <div class="col-xs-12 col-sm-12 portfolio">

      <p>I began as a self-taught Python developer, learning through books and online tutorials. What really honed my Python skills were the hundreds of hours spent using Python at Code Platoon.</br>Here's one of the first Python apps I made, from scratch, without any help.</p>

<center><span id="download_text"><a href="https://res.cloudinary.com/dx5eoz5dw/raw/upload/v1549343083/Hangman_for_Mac.zip" target="_blank">
   
Download for Mac</a>
</br>

</br>
 <a href="https://res.cloudinary.com/dx5eoz5dw/raw/upload/v1549429268/Hangman_for_Windows.zip" target="_blank">Download for Windows</a>
</span></center>

<br>

<img src="https://res.cloudinary.com/dx5eoz5dw/image/upload/v1546742087/Hangman.png">


 
      
    </div>
   
    <br>
        <div class="col-xs-0 col-sm-1">
    </div>

    <br>
    <br>
<!-- Django -->

<div class="container-fluid" >
  
  
<br>
    <!-- grid 1 -->  
   
 

  
  <div class="row">
    <div class="col-xs-0 col-md-2"><p></p>
  </div>  
 
    <!-- grid 1 -->  
   <div class="col-xs-12 col-md-8 col-lg-12">
  <div class="title" style="height: 100%;"><p><strong>Java</strong> Programming<br><span id="title2"></span></p> 
     </div>
      <div class="col-xs-0 col-md-2"><p></p>
  </div>   
   </div>
   </div> 
  
  
 
<div class="container-fluid">
  <div class="row">
    
    <div class="col-xs-0 col-sm-1 col-md-4 col-lg-4 col-xl-4">
    </div>
    
    
    <div class="col-xs-12 col-sm-11 col-lg-4 col-xl-4 portfolio">
    
    <center><div id="javaApp" class="col-xs-10 col-sm-10 col-md-10 ">
      <p>I studied Java at Keiser University under Professor Johnston, who was formerly a software engineer for the U.S. Navy, where he wrote code and managed programming teams for the onboard computer systems of nuclear submarines.</p>
            <hr>
      
      <br>

      <br>
 <center><img src="https://res.cloudinary.com/dx5eoz5dw/image/upload/v1541105478/Word_Space_Count_i2tr0y.png" alt="Image the UI of a Java program I wrote." id="spaceCount"></center>
      <br>
      <p id="vidText">You can watch a video of the app in action below.</p>
  
      <center><video width="300" height="275" controls >
  <source src="https://res.cloudinary.com/dx5eoz5dw/video/upload/v1541105479/Word_Space_Count_by_Xander_ckignr.mp4" type="video/mp4" >
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
        </video></center></center>
      
    </div>
   
    
    <div class="col-xs-0 col-sm-1 col-md-4 col-lg-4 col-xl-4">
    </div>
    
  </div>  
 
</div> -->
    
       
    <div class="row">    
      
      <div class="col-xs-0 col-sm-1 col-md-4 col-lg-4 col-xl-4">
    </div>
    
    
    <div class="col-xs-12 col-sm-12 col-lg-4 col-xl-4">    
      
     <div class="footer" id="footer">
 
    
     
<div class="social">      
        <img src="https://media.giphy.com/media/10bdAP4IOmoN7G/giphy.gif"  id="star-wars-img">
  <br>

  <a href="https://github.com/xanderstevenson" target='_blank'><img src="https://res.cloudinary.com/dx5eoz5dw/image/upload/v1494509073/1494526947_github-icon_cr5dva.png"></a> 
  
  <a href="https://www.linkedin.com/in/xanderstevenson" target='_blank'><img src="https://res.cloudinary.com/dx5eoz5dw/image/upload/v1494509253/1494527234_8_oh8g16.png"></a>
  
   <a href="mailto:xanderstevenson2@gmail.com.com"><img src="https://res.cloudinary.com/dx5eoz5dw/image/upload/v1494510596/1494528571_social_media_online_email_q7483v.png"></a>  
       
   
       
       <a href="#top"><p>Back to Top</p></a>
    
  

  
  
  </div>   
               <div class="col-xs-0 col-sm-1 col-md-4 col-lg-4 col-xl-4">
    </div>
    
      </div>
  
  
    </div>
  </div>
 </div>
</div> <!--footer div-->

 
  
  
  </div> <!--container-fluid-->    
  </div> <!--wrapper-->   
</body>
  
  


              
            
!

CSS

              
                body {
  background-color: black;
  background-image: url("https://res.cloudinary.com/dx5eoz5dw/image/upload/v1494681484/destiny-wheel_o235q6.png");
  background-attachment: fixed;
  background-size: contain;
  background-size: 100% auto;
  min-width: 355px;
  max-width: 100%;
  max-height: 100%;
  margin: 0px auto;
  display: inline-block;
  text-align: center;
  align-content: center;
font-family: 'Devanagari';
    color: darkgray;
  scroll-snap-type: y mandatory;
}




.row {
/*   width: 100%; */
  align-content: center;
  margin: 0px auto;
    min-width: 355px;
  padding: 0px;

}


#top {
  width: 100%;
    min-width: 355px;
  

}

.container-fluid{
    max-width: 100%;
  color: darkgray;
/*   color: #262823; */
  text-shadow: 1px 1px black;
  margin: 0px auto;
  width: 100%;
  min-width: 355px;
  scroll-snap-type: y mandatory;
  padding:0px;  
}



#wrapper {
  min-width: 355px;
/*   padding-left: 1%; */
}

.portfolio  {
  height: 100%;
     width: 100%;
  min-width: 355px;
  max-width: 600px;
/*   max-width: 100%; */
  max-height: 1000px;
  min-height: 550px;
  background-color: #272530;
  border: 1px solid gray;
  color: Gray;
   margin-bottom: 10px;
/*   margin-left: 0px; */
  margin-top: 25px;
/*   padding-left: 45px; */
/*   padding-right: 25px; */
  opacity: 0.98;
  align-content: center;
    text-align: center;
    margin: 0px auto;
    scroll-snap-type: y mandatory;
}

.navibar1 {
/* background-color: #272530; */
  height: 120px;
  box-sizing: border-box;
  margin-top: 0px;
  padding: 0px 25px 0px 15px;
  border-style: ;
  padding-left: 0px;
/*   color: darkgray; */
color: #BDA275;

}



.jumbotron {
      margin-bottom: 10px;
      opacity: 0.97;
      padding-left: 0px;
/*   width: 100%; */
  min-width: 355px;
  background-color: #272530;
    background-image: url('https://res.cloudinary.com/dx5eoz5dw/image/upload/e_sharpen:100/a_180/v1556062055/purp-banged-out_tsl58n.png');
      border: 3px ridge #3F3FBF;
  
-webkit-box-shadow: inset -3px 3px 36px 15px rgba(88,82,106,1);
-moz-box-shadow: inset -3px 3px 36px 15px rgba(88,82,106,1);
box-shadow: inset -3px 3px 36px 15px rgba(88,82,106,1);
}

.jumbotron p {
  font-size: 200%;
  font-weight: bold;
  display: block;
  margin: 0px auto;
}

#jumbotext {
         font-size: 275%;
   text-align: left;
  color: white;
}

.jumbotron, h1.jumbotron, p.jumbotron {
/*   background-color: #272530; */

  border: 1px solid darkslategray;
  text-align: left;
  min-width: 300px;
  text-shadow: 1px 1px silver;
}



.col-sm-8 {
  margin: 0px auto;
  padding-bottom: 5px;
}

.col-sm-3 {
  margin: 0px auto;
/*   min-width: 150px; */
}

.col-sm-4 {
}

/* .col-sm-6, .col-sm-3 {
 paddin-left: 25px;
}
 */

a {
  max-height: 600px;
}

.img {
  margin: 0px auto;
  align-content: center;
}


.col-sm-10 {
 alignpcontent: center;
  text-align: center;
/*     min-width: 300px;   */
/*   max-width: 45%; */
  margin: 0px auto;
/*   float: left; */
}

#largetext {
        font-size: 55px;
        border: 1px solid #2F3336;
/*         padding: 0px auto 20px; */
        display: block;
        margin: 20px auto;
        text-shadow: 1px black; 
        background-color: #272530;
   background-image: url('https://res.cloudinary.com/dx5eoz5dw/image/upload/v1556059429/banged-out_hjylsh.png');
        height: 65%;
        width: 87%;
         border-style: outset;
  min-width: 195px;
  max-width: 250px;
  color: darkgray;
    border: 1px ridge #3F3FBF;
  box-shadow: -2px 2px 4px #BEA378;
font-family: 'Devanagari', Latin;
padding-bottom: 15px;
}

.gold {
  color: #BDA275;
}

.me {
  margin: 0px auto;
  box-shadow: -2px 2px 3px #1F2227;
  margin-left: 0px;
  min-width: 165px;
  max-width: 190px;
  padding: 5px;
  background-color: #272530;
  background-image: url('https://res.cloudinary.com/dx5eoz5dw/image/upload/v1556059429/banged-out_hjylsh.png');
    color: #BDA275;
  font-family: 'Devanagari';
}

.sweet {
  padding-left: 30px;
  min-width: 150px;
 height: 100%;
  min-height: 120px;
  opacity: 0.90;
  font-family: 'Devanagari', Latin;
    color: #BDA275;
}


.sweet2 {
  padding-left: 15px;
    padding-right: 15px;
   opacity: 0.90;
  color: darkgray;
  font-weightL: bold;
  font-family: 'Devanagari', Latin;
  color: #BDA275;
}

#purp-bg {
  background-color: #272530;
    border: 1px ridge #3F3FBF;
    box-shadow: 1.5px 1.5px 3px #BEA378;
      color: darkgray;
  font-family: 'Devanagari', Latin;
  font-weight: bold;
  
}

.portfolio p    {
  text-align: center;
}

p.portfolio    {
  text-align: center;
}

#footer {
  max-height: 120px; 
}

.footer {
  background-color: #272530;
  border: 1px solid gray;
  height: 120px;
  margin-bottom: 10px;
  margin-top: 10px;
/*   box-sizing: border-box; */
/*    width:100%; */
   max-height:120px; 
}

.navibar1 p {
  color: GhostWhite;
  text-shadow: 1px 1px black;
  text-align: center;
  font-family: sans-serif;
  padding: 15px auto;
  font-size: 42px;
  border: 1px solid #2F3336;
  border-style: outset;
  margin-top: 20px;
  margin-right: auto;
  margin-bottom: 25px;
  margin-left: auto;
  background-color: #798579;
}

.btn-primary, .btn-primary:link {
   background-color: #5B5768;
   border: 1px solid black;
   text-align: center;
   margin: 0px auto;
}

.btn-primary:hover  {
       background-color: gray;
       border: 1px solid black;
}

#mine.btn-primary:active, 
#mine.btn-primary:focus, 
#mine.btn-primary:target, 
#mine.btn-primary:active:focus {
  background-color: black;
}


#mine {
/*     width: 300px; */
  margin: 0px auto;
  text-align: center;
  margin-top: 10%;
  margin-left: .5%;
  box-shadow: -3px 3px #413153;
font-size: 24px;
}

#new {
  text-align: center;
 border: 1px groove lightgray;
  padding: 0px;
  width: 100%;
  min-width: 300px;
  font-weight: normal;
  margin: 0px auto;
  margin-left: -10px;
  
}

hr {
  min-width: 300px;;
margin: 0px auto;
}

#ul {
  text-decoration: underline;
}

#go {
  text-align: center;
/*   margin-left: 5%; */
  text-shadow: 2px 2px black;
  font-size: 30px;
  font-weight: normal;
  margin: 0px auto;
  padding-left: 25px;
}

#myjob {
  font-size: 425%;
  font-weight: bold;
  text-align: center;
  padding-top: 5%;
  margin: 0px auto;
  margin-top: -15px;
  color: #BEA378;
/* margin-left: 5%; */
}

a:link, .navibar1 p, #contact a:active a:focus {
  color: lightgray;
  text-decoration: none;
}

.footer p {
 padding-bottom: 0px;
 text-align: center;
 text-decoration: none;
}

.footer p:active {
  color: lightgray;
}

.portfolio img {
     display: inline-block;
      float: left;
      width: 95%;
       margin: 0px auto;
}

.portfolio p {
    padding-top: 15px;
  padding-bottom: 15px;
  font-weight: normal;
  color: lightgray;
  text-shadow: none;
  font-size: 145%;
}


#portfolio {
     display: inline-block;
      float: left;
     margin: 0px auto;
      width: 100%;
  max-width: 875px;
}



#footer {
   position:relative;
   bottom:0;
  opacity: 0.95;
  width: 100%;
  max-width: 600px;
  min-width: 325px;
/*   margin-left: -15px; */
  float: left;

}
.social img {
       
      height: 64px;
      width: 64px;
  padding-bottom: 20px;

}
.social {
        margin: 25px auto;
        text-align: center;
  background-color: black;
  opacity: 0.90;
  margin: 0px auto;
  align-content: center;
  border: 3px inset silver;
}

a:active, a:hover. a:link, a:target, a:focus, a:active:focus {
       color: lightgray;
  text-decoration: none;
}

#star-wars-img {

  height: 100%;
  min-width: 310px;
  align-content: center;
  margin: 10px auto;
}




.black-bg {
   background-color: #1B1E21;
    padding: 5px 5px;
  padding-top: 15px;
  font-size: 175%;
  opacity: 0.9;
   color: lightgray;
    margin: 0px auto;
  display: inline-block;
  max-width: 80%;
    min-width: 300px;
      margin: 0px auto;
}

#short-hr {
  width: 250px;
}

.title {
  height: 95px;
  width: 100%;
  display: inline-block;
  text-align: center;
  background-color: #1B1E21;
  color: lightgray;
  padding-top: 10px;
  font-size: 175%;
  opacity: 0.9;
  min-width: 250px;
    margin: 0px auto;
  align-content: center;
  text-align: center;
  border: 2px inset silver;
}

#title2 {
  font-size: 75%;
}

.title3 {
  width: 90%;
  max-width: 275px;
  display: inline-block;
  margin: 0px auto;
  text-align: center;
  background-color: #1B1E21;
  color: lightgray;
  padding: 5px 5px;
  padding-top: 15px;
  font-size: 175%;
  opacity: 0.9;
}

#coffee {
  font-size: 75%;
}

#spaceCount {
  width: 300px;
  height: 200px;
}

#vid {
  margin: 0px auto;
  width: 300px;
  display: inline-block;
  margin-top: 0px;
}

#vidText {
  margin-bottom: 0px;
  padding-bottom: 0px;
}

#python_img {
  height: 35%;
  width: 75%; 
  max-width: 300px;
}

#download_text {
  margin: 0px auto;
  text-align: center;
  background-color: #171592;
  padding: 2px;
    font-size: 16px;
}

.instructions {
  font-size: 18px;
  max-width: 500px;
  padding-left: 65px;
    padding-right: 65px;
  content-align: center;
  text-align: center;
}

#javaApp {
  display: inline-block;
  width: 100%;
  max-width: 850px;
  min-width: 325px;
  margin: 0px auto;
  text-align: center;
}

#art {
  height: 200px;
  margin: 0px auto;
  margin-top: 40px;
  display: inline-block;
  text-align: center;
}

.el_hambre {
  width: 90%;
  align-content: center;
  margin: 0px auto;
  padding: 0px;
  max-width: 700px;
  min-width: 325px;
}


.width-100 {
  width: 100%;
  max-width: 1000px;
}

#el_hambre_img {
  text-align: center;
  margin: 0px auto;
  align-content: center;
  float: none;
  width: 100%;
  height: 50%;
  max-width: 450px;
  max-height: 650px;
}

#usa_flag_vid {
  text-align: center;
  margin: 0px auto;
  align-content: center;
  float: none;
  width: 100%;
  height: 50%;
  max-width: 450px;
  max-height: 500px;
}
              
            
!

JS

              
                // <img src="https://res.cloudinary.com/dx5eoz5dw/image/upload/v1494413013/Xander_350x350-//4_nbj66w.png" id="photo_self" alt="Photo of Xander"    class="container-fluid img-responsive pull-right">

  

$(".me").on("click", function(){
  $().css("color", "");

})

//       var int = setInterval(function() {
//         var lg = document.getElementById("largetext");
//             if (lg.style.color == "lightgray"){
//               lg.style.color = "thistle";
//               lg.style.textShadow = "1px 1px black";
//             }
//             else if(lg.style.color == "thistle"){
//               lg.style.color = "lightsteelblue";
//               lg.style.textShadow = "1px 1px black";
//                  }
        
//             else {
//               lg.style.color = "lightgray";
//               lg.style.textShadow = "1px 1px black";
//               }
//             }, 500);

      var int2 = setInterval(function() {
        var mj = document.getElementById("myjob");
            if (mj.style.color != "#BEA378"){
              mj.style.color = "#BEA378";
              mj.style.textShadow = "1px 1px black";
            }
            else {
              mj.style.color = "darkslateblue";
              mj.style.textShadow = "1px 1px black";
              }
            }, 1000);

      var int3 = setInterval(function() {
        var cj = document.getElementById("mine");
            if (cj.style.backgroundColor != "darkslateblue"){
              cj.style.backgroundColor = "darkslateblue";
              cj.style.textShadow = "1px 1px black";
            }
            else {
              cj.style.backgroundColor= "#404090";
              cj.style.textShadow = "1px 1px black";
              }
            }, 1000);


              
            
!
999px

Console