index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Jose gabriel tamura web page">
    
    <meta name="author" content="Jose Gabriel tamura">
    <meta name="keywords" content="Jose,Gabriel,Tamura">
    <!-- SITE TITLE -->
    <Title>Jose Gabriel Tamura</Title>


    <!--Imports de CSS en orden de aparicion-->
    <!--Google apis-->
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">

    <!--Bootstrap-->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">


    <link href="assets/css/1_giftAnimation.css" rel="stylesheet" type="text/css">
    <link href="assets/css/2_NavBar.css" rel="stylesheet" type="text/css">
    <link href="assets/css/3_headerAndStuff.css" rel="stylesheet" type="text/css">
    <link href="assets/css/4_aboutMe.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="assets/css/4_1_aboutMeGame.css">
    <link href="assets/css/5_skillGraph.css" rel="stylesheet" type="text/css">
    <link href="assets/css/6_projects.css" rel="stylesheet" type="text/css">
    <link href="assets/css/7_ideasForFuture.css" rel="stylesheet" type="text/css">
    <link href="assets/css/8_contact.css" rel="stylesheet" type="text/css">


    <!-- FONT AWESOME CSS -->
    <link href="assets/css/fontAwesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/css/normalize.min.css" rel="stylesheet">
    <link href="assets/css/owl.carousel.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">

    <!-- RESPONSIVE CSS -->
    <link href="assets/css/responsive.min.css" rel="stylesheet">

</head>

<body>
    <!--Gift  deploy until the page is ready-->
    <div class="preloader-area">
        <div class="preloader">
            <div class="preload1" id="tamu"></div>
            <br><br>
            <div class="preload" id="cat"></div>

        </div>
    </div>
    <!--header  profile pic and  WELCOME-->
    <header id="welcome" class="header-area">
        <div class="header-area-table">
            <div class="header-area-tablecell">
                <div class="container">
                    <div class="header-text">
                        <br><br>
                        <div id="headerH1">
                            <h1>Welcome</h1>
                        </div>
                        <br><br><br><br>
                        <h3>This is my personal site!</h3>
                        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                        <h4 id="byJoseT">By: Jose Gabriel Tamura</h4>
                    </div>
                </div>
            </div>
        </div>
    </header>


    <!--Nav bar -->
    <div class="menu-area">
        <div class="container">
            <div class="row">
                <div class="col-md-1 col-sm-1"> </div>
                <!--To create an space for the navbar to be centered-->
                <div class="col-md-9 col-sm-10">
                    <div class="mainmenu">
                        <div class="navbar navbar-nobg">
                            <div class="navbar-collapse collapse">
                                <ul class="nav navbar-nav">
                                    <li class="active"><a class="smoth-scroll" href="#welcome">Welcome <div class="ripple-wrapper"></div></a>
                                    </li>
                                    <li><a class="smoth-scroll" href="#about">About me</a>
                                    </li>
                                    <li><a class="smoth-scroll" href="#skills">Skills</a>
                                    </li>
                                    <li><a class="smoth-scroll" href="#work">Projects</a>
                                    </li>
                                    <li><a class="smoth-scroll" href="#testimonial">Further Ideas</a>
                                    </li>
                                    <li><a class="smoth-scroll" href="#contact">contact</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-1"> </div>
                <!--To create an space for the navbar to be centered-->
            </div>
        </div>
    </div>


    <!--ABOUT ME -->
    <section id="about" class="about-me-area">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="section-title">
                        <h2>About me</h2>
                    </div>
                </div>
            </div>
            <div class="row" id="rowOfAboutMeContent">
                <div class="col-md-4">
                    <div class="me-image">
                        <div class="row">
                            <div class="col-md-3"></div>
                            <div class="col-md-7" id="imageContainer">
                                <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                                <a class="about-button" href="assets/images/CV.pdf" target="_blank">View cv</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-8" id="rowOfAboutMeContentSmall">
                    <div class="col-md-6">
                        <div class="about-me-text" id="firstP">
                            <p>
                                My name is Jose Gabriel Tamura Lara. I was born and raised in Cali (Colombia), a great city near the Pacific ocean. I moved to Bogotá when I was 17 years old to begin my studies in <a href="https://sistemas.uniandes.edu.co/en/">Systems and Computing Engineering </a> at Los Andes University. Now I'm in 6th semester and expect to graduate in August 2018. Some of my hobbies are cycling, swimming and hiking. I also love food, but I'm not a good cook (I'm working on it). </p>

                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="about-me-text" id="secondP">
                            <p>What I like the most is designing solutions for challenging problems and being able to code those ideas. Since 2014 until now I have focused on Java (because is the core language at Systems and Computing Engineering in the University). Nevertheless, I think that every single solution needs different approaches and different technologies, which is why I'm very enthusiastic about learning some of them. </p>


                        </div>
                    </div>

                    <div class="col-md-12">
                        <section class="game">
                        <br><h2>Was my description too boring??  Play this game I made especially for you!</h2> Within 1 minutes get the higher score as possible. Select the numbers that sum the target  <br>

                            <div class="gameContainer row">

                                <div class="col-md-8 col-sm-6" id="gamePanel">
                                        <div class="object1 col-md-1">
                                            <button class="buttonsN" id="button1"></button>
                                        </div>
                                        <div class="object2 col-md-1">
                                            <button class="buttonsN" id="button2"></button>
                                                                    
                                        </div>
                                        <div class="object3 col-md-1">
                                             <button class="buttonsN" id="button3"></button>
                                                                    
                                        </div>
                                        <div class="object4 col-md-1">
                                            <button class="buttonsN" id="button4"></button>
                                        </div>
                                        <div class="object5 col-md-1">
                                            <button class="buttonsN" id="button5"></button>
                                        </div>
                                        <div class="object6" col-md-1">
                                            <button class="buttonsN" id="buttons6"></button> 
                                        </div>
                                        <h3  class = "col-md-1" id="scoreGame"> Score: 0</h3>
                                </div>
                              
                                <div class="col-md-4 col-sm-6" id="controlPanel">
                                    <div class="target">
                                        <button class="buttons" id="targetButton"></button>
                                        <h4>TARGET</h4>
                                    </div>
                                    <div class="time">
                                        <button class="buttons" id="timeButton"></button>
                                        <h4>TIMER</h4>
                                    </div>
                                    <div class="start">
                                        <button class="buttons" id="startButton"></button>
                                        <h4>START</h4>
                                        </div>
                                </div>

                            </div>
                        
                        <!--<div class="start">
                                    <button class="buttons" id="difficult">Easy</button>
                                    <h4>Difficult</h4>
                        </div>-->

                        </section>

                    </div>
                </div>


            </div>
        </div>
    </section>


    <!-- SKILLS -->
    <section id="skills" class="skills-area">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="section-title">
                        <h2>skills</h2>
                        <div id="contentMobileSkills">click me!</div>
                    </div>
                </div>
            </div>

            <div class="skillsContent">
                <div>
                    <ul class="graph">
                        <li class="Java">Java</li>
                        <li class="JavaScript">JavaScript</li>
                        <li class="Python">Python</li>
                        <li class="HtmlyCss">Html+Css</li>
                        <li class="SQL">SQL</li>
                    </ul>
                </div>
                <div class="flexContainer">
                    <div class="flex-item">Begginer
                        <p id="treintaYTresPorciento">33%</p>
                    </div>
                    <div class="flex-item">Intermediate
                        <p id="sesentaYSietePorcento">66,6%</p>
                    </div>
                    <div class="flex-item">Advanced
                        <p id="cienPorciento">100%</p>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- PROJECTS -->
    <section id="work" class="work section-padding">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="section-title">
                        <h2>Projects</h2>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-10">
                    <!--Build a row inside this col-10 to be centered-->
                    <div class="row">
                        <!--First line-->
                        <div class="col-md-4 proyectos">
                            <div class="col-sm-6 col-md-4">
                                <div class="thumbnail">
                                    <div class="projectsPics" id="img1"></div>
                                    <div class="caption">
                                        <h3 class="proyectTitle">Software Architecture Project</h3>
                                        <div class="boxBut" id="myBtn1">
                                            <div class="proyectTitle button" id="mainTitle">Oil Col</div>
                                        </div>

                                        <!-- The Modal -->
                                        <div id="myModal1" class="modal">

                                            <!-- Modal content -->
                                            <div class="modal-content">
                                                <div class="wrapButtonClose"><button id="close1">&times;</button></div><br>
                                                <p>Manage the information of simulated Oil fields (geolocation, temperature, emergencies, etc). It provide relevant information to the person on charge in the oil well, from specialized reports to email warnings if some oil well have troubles. <br><br> Tecnologies: Project made on Java. Integrate REST services. IoT technology (Node-red). Data base: postgresql. Reactive architecture (developed in Play!). Security provided by Auth0. Course: ”Software Architecture” Los Andes University (Member in a group of four). <a href="https://github.com/Arquisuave/oilcol-app-play" target="_blank">Repository</a></p>
                                                <br>

                                            </div>
                                            <!--Cierra modal-content-->
                                        </div>
                                        <!--Cierra myModal1-->
                                    </div>
                                    <!--Cierra caption-->
                                </div>
                                <!--Cierra thumbnail-->
                            </div>
                            <!--Cierra col sm 6-->
                        </div>
                        <!--Cierra col md 4 proyectos-->

                        <div class="col-md-4 proyectos">
                            <div class="col-sm-6 col-md-4">
                                <div class="thumbnail">
                                    <div class="projectsPics" id="img2"></div>
                                    <div class="caption">
                                        <h3 class="proyectTitle">Transactional Systems Project</h3>
                                        <div class="boxBut" id="myBtn2">
                                            <div class="proyectTitle button" id="mainTitle">Sea Port</div>
                                        </div>

                                        <!-- The Modal -->
                                        <div id="myModal2" class="modal">

                                            <!-- Modal content -->
                                            <div class="modal-content">
                                                <div class="wrapButtonClose"><button id="close2">&times;</button></div><br>
                                                <p>Simulates a real sea port and offers the necessary services to securely manage all kind of transactions that take place in a sea port. Includes functions of register, planning, verification and validation of ships, charge, costumers, storage and transport. <br><br> Tecnologies: Made on Java. Integrate REST services. Oracle Database connection. It is deployed in Wildfly. Course: ”Transactional Systems” Los Andes University (Member in a group of two).
                                                    <a href="https://github.com/Josega149/TransactionalSystemsProject" target="_blank">Repository</a></p>
                                                <br>

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

                        <div class="col-md-4 proyectos">
                            <div class="col-sm-6 col-md-4">
                                <div class="thumbnail">
                                    <div class="projectsPics" id="img3"></div>
                                    <div class="caption">
                                        <h3 class="proyectTitle">Deep Blue <br> Project</h3>
                                        <div class="boxBut" id="myBtn3">
                                            <div class="proyectTitle button" id="mainTitle">Coral Control</div>
                                        </div>

                                        <!-- The Modal -->
                                        <div id="myModal3" class="modal">

                                            <!-- Modal content -->
                                            <div class="modal-content">
                                                <div class="wrapButtonClose"><button id="close3">&times;</button></div><br>
                                                <p>(Still working on it) The idea of the project is to look after variations in coral environments and provide trustful information about the physical conditions around them (and alert if they are in danger). This project is being developed for the course "Deep Blue: Chronicles of the sea" in which the students, aware of the importance of the sea, create and develop a solution in order to help biodiversity and life under the ocean. <br><br> Ideal Tecnologies: Project made on JavaScript. Integrate REST services. IoT technology (Node-red). Data base: postgresql. Course: "Deep Blue: Chronicles of the sea" Los Andes University. <a href="https://github.com/Arquisuave/oilcol-app-play" target="_blank">Repository</a></p>
                                                <br>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Second line-->
                        <div class="col-md-4 proyectos">
                            <div class="col-sm-6 col-md-4">
                                <div class="thumbnail">
                                    <div class="projectsPics" id="img4"></div>
                                    <div class="caption">
                                        <h3 class="proyectTitle">Design, develop and Innovation Project</h3>
                                        <div class="boxBut" id="myBtn4">
                                            <div class="proyectTitle button" id="mainTitle">Contract Validator</div>
                                        </div>

                                        <!-- The Modal -->
                                        <div id="myModal4" class="modal">

                                            <!-- Modal content -->
                                            <div class="modal-content">
                                                <div class="wrapButtonClose"><button id="close4">&times;</button></div><br>
                                                <p>It is focused on the government public works and how the enterprises spend public money in order to completetheir contracts. It is designed to check the correctness in their billing supports.</p>
                                                <br>

                                            </div>
                                            <!--Cierra modal-content-->
                                        </div>
                                        <!--Cierra myModal1-->
                                    </div>
                                    <!--Cierra caption-->
                                </div>
                                <!--Cierra thumbnail-->
                            </div>
                            <!--Cierra col sm 6-->
                        </div>
                        <!--Cierra col md 4 proyectos-->

                        <div class="col-md-4 proyectos">
                            <div class="col-sm-6 col-md-4">
                                <div class="thumbnail">
                                    <div class="projectsPics" id="img5"></div>
                                    <div class="caption">
                                        <h3 class="proyectTitle">Incognit 5</h3>
                                        <div class="boxBut" id="myBtn5">
                                            <div class="proyectTitle button" id="mainTitle">5</div>
                                        </div>

                                        <!-- The Modal -->
                                        <div id="myModal5" class="modal">

                                            <!-- Modal content -->
                                            <div class="modal-content">
                                                <div class="wrapButtonClose"><button id="close5">&times;</button></div><br>
                                                <p>More Projects are comming! just wait a second :)</p>
                                                <br>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--
                        <div class="col-md-4 proyectos">
                            <div class="col-sm-6 col-md-4">
                                <div class="thumbnail">
                                    <div class="projectsPics" id="img6"></div>
                                    <div class="caption">
                                        <h3 class="proyectTitle">Incognit 6 </h3>
                                        <div class="boxBut" id="myBtn6">
                                            <div class="proyectTitle button" id="mainTitle">6</div>
                                        </div>

                                        <!-- The Modal --
                                        <div id="myModal6" class="modal">

                                            <!-- Modal content --
                                            <div class="modal-content">
                                                <div class="wrapButtonClose"><button id="close6">&times;</button></div><br>
                                                <p>More Projects are comming! just wait a second :) </p>
                                                <br>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>-->

                    </div>
                    <!--Cierra Row-->
                </div>
                <!--Cierra col 10 grande-->
                <div class="col-md-1"></div>
            </div>
        </div>
    </section>


    <!-- Ideas for the future -->
    <section id="testimonial" class="testimonial-area section-padding">
        <div class="container">
            <div class="row">
                <div class="col-md-5">
                    <div class="section-title">
                        <h2><i class="fa fa-grav" aria-hidden="true"></i>Further Ideas </h2>
                        <h5 id="contentPcIdeas">These are just some ideas that I wish to develop someday (15 seg! read quickly)</h5>
                        <h5 id="contentMobileIdeas">These are just some ideas that I wish to develop someday (swipe the idea to the left)</h5>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="testimonial-list">
                        <div class="single-testimonial">
                            <p>
                                One of the issues that big cities struggle with is public transportation. This has become a serius problem in Bogotá due to Transmilenio's poor planning when it comes to routes, infrastructure and personnel. An opportunity to improve the system would be to act upon the users' need. This means to schedule certain buses according to the amount of people that require an specific route at a given time.
                            </p>
                            <h2>Smart Cities </h2>
                            <h3 class="text-muted"></h3>
                        </div>
                        <div class="single-testimonial">
                            <p>
                                Another problem related with transportation is stoplights' timing. Stoplights are programed according to their surroundings and with timers. A stopLight will turn into green, even though there are no cars waiting for it. ¿Why don't stoplights consider the number of cars and pedestrians to take better mobility decisions?
                            </p>
                            <h2>Smart Cities</h2>
                            <h3 class="text-muted"></h3>
                        </div>
                        <div class="single-testimonial">
                            <p>
                                180.000 tons is the estimated amount of garbage that Bogotá produces per month. In Colombia only a few have regular recycling habits and no city reuses its trash. In order to reuse, you need to identify what you have and classify it. A way to solve this problem is build gargeBots whose purpose is to look after useful raw material.
                            </p>
                            <h2>Environment</h2>
                            <h3 class="text-muted"></h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section id="contact" class="Contact section-padding">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="section-title">
                        <h2>contact me! <br>I would be happy to hear about you</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="single-contact">
                        <h2>Address:</h2>
                        <p>Nop</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="single-contact">
                        <h2>Phone:</h2>
                        <p>+57 315 9289059</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="single-contact">
                        <h2>Email:</h2>
                        <p>jg.tamura10@uniandes.edu.co</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer class="footer-area">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <p>&copy; Tamu 2017. Photos by: Andrés Botero</p>
                </div>
            </div>
        </div>
    </footer>


    <!--JQUERY -->
    <script src="assets/js/jquery.min.js"></script>


    <!-- BOOTSTRAP JS-->
    <script src="assets/js/bootstrap.min.js"></script>

    <!-- For the ideas section -->
    <script src="assets/js/owl.carousel.min.js"></script>

    <!-- STICKY JS -->
    <script src="assets/js/jquery.sticky.min.js"></script>
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <!--Pop up js-->
    <script src="assets/js/6_popUpProjects.js"></script>

    <script src="assets/js/movingBars.js">
    </script>
    <!-- MAIN JS-->
    <!--Main -->
    <script src="assets/js/main.js"></script>
    <script src="assets/js/gameMadeByJoseTamura.js"></script>


</body>

</html>