<commit_before><!DOCTYPE html>
<html lang="es">

<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="Personal website">
    <meta name="author" content="<NAME>">

    <link rel="icon" href="favicon.ico">

    <!-- Facebook's open graph works similarly and helps Facebook to pull images and a description right into your Facebook posts. See also https://developers.facebook.com/docs/sharing/webmasters#markup -->

    <meta property="og:title" content="Kiran Bammarito's website">
    <meta property="og:site_name" content="kbammarito.github.io">
    <meta property="og:url" content="https://kbammarito.github.io">
    <meta property="og:type" content="website">
    <meta property="og:description" content="LANDING PAGE">
    <meta property="og:image" content="NEED TO ADD">


    <!-- Twitter cards work similiarly to Facebook's open graph tags; they pull images and a description right into tweets that link to this page.  See also https://dev.twitter.com/cards/overview -->

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@bammarito">
    <meta name="twitter:creator" content="@bammarito">
    <meta name="twitter:title" content="Kiran Bammarito's website">
    <meta name="twitter:description" content="LANDING PAGE">
    <meta name="twitter:image:src" content="NEED TO ADD">
    <meta name="twitter:url" content="https://kbammarito.github.io">

    <title>Kiran Bammarito</title>

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

    <!-- Custom Fonts -->
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>

    <!-- Theme CSS -->
    <link href="css/agencyes.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" integrity="<KEY>" crossorigin="anonymous"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" integrity="<KEY>" crossorigin="anonymous"></script>
    <![endif]-->

    <script src='https://www.google.com/recaptcha/api.js?hl=es'></script>
</head>

<body id="page-top" class="index">

    <!-- Navigation -->
    <nav id="mainNav" class="navbar navbar-default navbar-custom navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand page-scroll" href="index.html">Kiran Bammarito</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#acerca">Acerca de mí</a>
                    </li> 
<!--                     <li>
                        <a class="page-scroll" href="#journey">Journey</a>
                    </li>    -->                 
                    <li>
                        <a class="page-scroll" href="#destrezas">Destrezas</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#portfolio">Proyectos</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contacto">Contacto</a>
                    </li>
                    <li>
                        <a href="english.html">English</a>
                    </li>
                    <li>
                        <a href="deutsch.html">Deutsch</a>
                    </li>                                        
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

    <!-- Team Section -->
<!--     <section id="team" class="bg-light-gray">
        <header>
            <div class="container">
                <div class="intro-text">
                    <div class="intro-heading"><NAME></div>
                </div>
            <div class="row">
                <div class="col-lg-12 text-center">
                    <div class="team-member">
                        <img src="img/me.jpg" class="img-responsive img-circle" alt="">
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 text-center btn-wrapper">
                        <a href="#skills" class="page-scroll btn btn-xl">English</a>
                    </div>
                    <div class="col-lg-4 text-center btn-wrapper">
                        <a href="#skills" class="page-scroll btn btn-xl">Español</a>
                    </div>
                    <div class="col-lg-4 text-center btn-wrapper">
                        <a href="#skills" class="page-scroll btn btn-xl">Deutsch</a>
                    </div>                            
                </div>                
            </div>
        </header>
    </section> -->

    <!-- About Section -->
    <section id="acerca" class="bg-light-gray">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="team-member">
                        <img src="img/team/me_team.jpg" class="img-responsive img-circle" alt="">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <p class="large text-muted">¡Hola! Soy <NAME>. Yo trabajo en la intersección de los datos y las comunicaciones. Fuera de trabajo, me gusta cocinar, subir y hacer artesanías. En particular, me encantan los libros para colorear. ¡Agradezco sugerencias!</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Journey Section -->
<!--     <section id="journey" class="bg-light-gray">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">Journey</h2>
                    <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <ul class="timeline">
                        <li>
                            <div class="timeline-image">
                                <img class="img-circle img-responsive" src="img/about/me_about.jpg" alt="">
                            </div>
                            <div class="timeline-panel">
                                <div class="timeline-heading">
                                    <h4>2009-2011</h4>
                                    <h4 class="subheading">Our Humble Beginnings</h4>
                                </div>
                                <div class="timeline-body">
                                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                                </div>
                            </div>
                        </li>
                        <li class="timeline-inverted">
                            <div class="timeline-image">
                                <img class="img-circle img-responsive" src="img/about/2.jpg" alt="">
                            </div>
                            <div class="timeline-panel">
                                <div class="timeline-heading">
                                    <h4>March 2011</h4>
                                    <h4 class="subheading">An Agency is Born</h4>
                                </div>
                                <div class="timeline-body">
                                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="timeline-image">
                                <img class="img-circle img-responsive" src="img/about/3.jpg" alt="">
                            </div>
                            <div class="timeline-panel">
                                <div class="timeline-heading">
                                    <h4>December 2012</h4>
                                    <h4 class="subheading">Transition to Full Service</h4>
                                </div>
                                <div class="timeline-body">
                                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                                </div>
                            </div>
                        </li>
                        <li class="timeline-inverted">
                            <div class="timeline-image">
                                <img class="img-circle img-responsive" src="img/about/4.jpg" alt="">
                            </div>
                            <div class="timeline-panel">
                                <div class="timeline-heading">
                                    <h4>July 2014</h4>
                                    <h4 class="subheading">Phase Two Expansion</h4>
                                </div>
                                <div class="timeline-body">
                                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                                </div>
                            </div>
                        </li>
                        <li class="timeline-inverted">
                            <div class="timeline-image">
                                <h4>Be Part
                                    <br>Of Our
                                    <br>Story!</h4>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
 -->
    <!-- Skills Section -->
    <section id="destrezas">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">Destrezas y habilidades</h2><br><br>
                </div>
            </div>
            <div class="row text-center">
                <div class="col-md-4">
                    <span class="fa-stack fa-4x">
                        <i class="fa fa-circle fa-stack-2x text-primary"></i>
                        <i class="fa fa-bar-chart fa-stack-1x fa-inverse"></i>
                    </span>
                    <h4 class="service-heading">Datos</h4>
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
                </div>
                <div class="col-md-4">
                    <span class="fa-stack fa-4x">
                        <i class="fa fa-circle fa-stack-2x text-primary"></i>
                        <i class="fa fa-comments fa-stack-1x fa-inverse"></i>
                    </span>
                    <h4 class="service-heading">Comunicaciones</h4>
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
                </div>
                <div class="col-md-4">
                    <span class="fa-stack fa-4x">
                        <i class="fa fa-circle fa-stack-2x text-primary"></i>
                        <i class="fa fa-lock fa-stack-1x fa-inverse"></i>
                    </span>
                    <h4 class="service-heading">Web Security</h4>
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Portfolio Grid Section -->
    <section id="portfolio" class="bg-light-gray">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">Proyectos</h2>
                    <h3 class="section-subheading text-muted">Muchas gracias por entender que la mayoría de mis proyectos se escriben en inglés.</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/cali.png" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>La medida de votación 64 de California</h4>
                        <p class="text-muted">Un análisis de datos</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/mooc.png" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Un red social y unas películas</h4>
                        <p class="text-muted">Un análisis de datos</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/data_viz.png" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Llamadas telefónicas para políticos</h4>
                        <p class="text-muted">​Una visualización de datos</p>
                    </div>
                </div>
<!--                 <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="#portfolioModal4" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/golden.png" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Golden</h4>
                        <p class="text-muted">Website Design</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="#portfolioModal5" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/escape.png" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Escape</h4>
                        <p class="text-muted">Website Design</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/dreams.png" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Dreams</h4>
                        <p class="text-muted">Website Design</p>
                    </div>
                </div> -->
            </div>
        </div>
    </section>

    <!-- Clients Aside -->
<!--     <aside class="clients">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <a href="#">
                        <img src="img/logos/envato.jpg" class="img-responsive img-centered" alt="">
                    </a>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a href="#">
                        <img src="img/logos/designmodo.jpg" class="img-responsive img-centered" alt="">
                    </a>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a href="#">
                        <img src="img/logos/themeforest.jpg" class="img-responsive img-centered" alt="">
                    </a>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a href="#">
                        <img src="img/logos/creative-market.jpg" class="img-responsive img-centered" alt="">
                    </a>
                </div>
            </div>
        </div>
    </aside>
 -->
    <!-- Contact Section -->
    <section id="contacto">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">Contácteme</h2><br><br>
<!--                     <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3> -->
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <form name="sentMessage" id="contactForm" novalidate>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Nombre *" id="name" required data-validation-required-message="Por favor, escriba su nombre.">
                                    <p class="help-block text-danger"></p>
                                </div>
                                <div class="form-group">
                                    <input type="email" class="form-control" placeholder="Email *" id="email" required data-validation-required-message="Por favor, escriba su correo electrónico.">
                                    <p class="help-block text-danger"></p>
                                </div>
                                <div class="g-recaptcha" data-sitekey="<KEY>">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <textarea class="form-control" placeholder="Mensaje *" id="message" required data-validation-required-message="Por favor, escriba su mensaje."></textarea>
                                    <p class="help-block text-danger"></p>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <div class="col-lg-12 text-center">
                                <div id="success"></div>
                                <button type="submit" class="btn btn-xl">Enviar</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <div class="row">
                <div class="col-sm-5 text-right">
                    <span class="copyright">Derecho de autor &copy; <NAME> 2017</span>
                </div>
                <div class="col-sm-2"></div>
                <div class="col-sm-5">
                    <ul class="list-inline social-buttons pull-left">
                        <li><a href="https://github.com/kbammarito" target="_blank"><i class="fa fa-github fa-lg"></i></a>
                        </li>
                        <li><a href="https://www.linkedin.com/in/kbammarito/" target="_blank"><i class="fa fa-linkedin"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

    <!-- Portfolio Modals -->
    <!-- Use the modals below to showcase details about your portfolio projects! -->

    <!-- Portfolio Modal 1 -->
    <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="close-modal" data-dismiss="modal">
                    <div class="lr">
                        <div class="rl">
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-lg-8 col-lg-offset-2">
                            <div class="modal-body">
                                <!-- Project Details Go Here -->
                                <h2 class="text-center">La medida de votación 64 de California</h2>
                                <p class="item-intro text-muted text-center">Un análisis de datos</p>
                                <img class="img-responsive img-centered" src="img/portfolio/cali_preview.png" alt="">
                                <p><strong>Resumen:</strong> Esto es un análisis de muestra de las contribuciones y los contribuidores a la medida de votación 64 de California, en las elecciones generales (de noviembre de 2016).<br><strong>Usando:</strong> Python y Pandas<br><strong>Código:</strong> Vea mi Jupyter Notebook <strong><a href="https://github.com/kbammarito/analysis_california_prop_64/blob/master/prop_64_analysis.ipynb" target="_blank">aquí</a></strong>. Favor, tenga en cuenta que los Jupyter Notebooks no se ven bien en dispositivos móviles.</p>
                                <div class="text-center"><button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Portfolio Modal 2 -->
    <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="close-modal" data-dismiss="modal">
                    <div class="lr">
                        <div class="rl">
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-lg-8 col-lg-offset-2">
                            <div class="modal-body">
                                <h2 class="text-center">Un red social y unas películas</h2>
                                <p class="item-intro text-muted text-center">Un análisis de datos</p>
                                <img class="img-responsive img-centered" src="img/portfolio/mooc_preview.png" alt="">
                                <p><strong>Resumen:</strong> Hice unos ejercicios de la clase de <strong><a href="https://lagunita.stanford.edu/courses/DB/2014/SelfPaced/about" target="_blank">"Databases"</a></strong>(Bases de datos) de Stanford.<br><strong>Usando:</strong> PostgreSQL<br><strong>Código:</strong> Vea mis Jupyter Notebooks <strong><a href="https://github.com/kbammarito/stanford_databases" target="_blank">aquí</a></strong>. Favor, tenga en cuenta que los Jupyter Notebooks no se ven bien en dispositivos móviles.
                                </p>
                                <div class="text-center"><button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Portfolio Modal 3 -->
    <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="close-modal" data-dismiss="modal">
                    <div class="lr">
                        <div class="rl">
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-lg-8 col-lg-offset-2">
                            <div class="modal-body">
                                <!-- Project Details Go Here -->
                                <h2 class="text-center">Llamadas telefónicas para políticos</h2>
                                <p class="item-intro text-muted text-center">Una visualización de datos</p>
                                <img class="img-responsive img-centered" src="img/portfolio/data_viz_preview.png" alt="">
                                <p><strong>Overview:</strong> This is an interactive bar chart showing politicians and a hypothetical number of phone calls.<br><strong>Usando:</strong> d3.js y dimple.js<br><strong>Código:</strong> Vea el gráfico <strong><a href="http://htmlpreview.github.io/?https://github.com/kbammarito/data_visualizations/blob/master/kbammarito_d3_bar_chart.html">aquí</a></strong> y coloque el cursor sobre las barras o presiona ellas para interactuar con él.
                                </p>
                                <div class="text-center"><button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Portfolio Modal 4 -->
    <div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content"><commit_msg>fixed<commit_after><!DOCTYPE html>
<html lang="es">

<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="Personal website">
    <meta name="author" content="<NAME>">

    <link rel="icon" href="favicon.ico">

    <!-- Facebook's open graph works similarly and helps Facebook to pull images and a description right into your Facebook posts. See also https://developers.facebook.com/docs/sharing/webmasters#markup -->

    <meta property="og:title" content="Kiran Bammarito's website">
    <meta property="og:site_name" content="kbammarito.github.io">
    <meta property="og:url" content="https://kbammarito.github.io">
    <meta property="og:type" content="website">
    <meta property="og:description" content="LANDING PAGE">
    <meta property="og:image" content="NEED TO ADD">


    <!-- Twitter cards work similiarly to Facebook's open graph tags; they pull images and a description right into tweets that link to this page.  See also https://dev.twitter.com/cards/overview -->

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@bammarito">
    <meta name="twitter:creator" content="@bammarito">
    <meta name="twitter:title" content="Kiran Bammarito's website">
    <meta name="twitter:description" content="LANDING PAGE">
    <meta name="twitter:image:src" content="NEED TO ADD">
    <meta name="twitter:url" content="https://kbammarito.github.io">

    <title>Kiran Bammarito</title>

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

    <!-- Custom Fonts -->
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>

    <!-- Theme CSS -->
    <link href="css/agencyes.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" integrity="<KEY>" crossorigin="anonymous"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" integrity="<KEY>" crossorigin="anonymous"></script>
    <![endif]-->

    <script src='https://www.google.com/recaptcha/api.js?hl=es'></script>
</head>

<body id="page-top" class="index">

    <!-- Navigation -->
    <nav id="mainNav" class="navbar navbar-default navbar-custom navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand page-scroll" href="index.html"><NAME></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#acerca">Acerca de mí</a>
                    </li> 
<!--                     <li>
                        <a class="page-scroll" href="#journey">Journey</a>
                    </li>    -->                 
                    <li>
                        <a class="page-scroll" href="#destrezas">Destrezas</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#portfolio">Proyectos</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contacto">Contacto</a>
                    </li>
                    <li>
                        <a href="english.html">English</a>
                    </li>
                    <li>
                        <a href="deutsch.html">Deutsch</a>
                    </li>                                        
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

    <!-- Team Section -->
<!--     <section id="team" class="bg-light-gray">
        <header>
            <div class="container">
                <div class="intro-text">
                    <div class="intro-heading">Kiran Bammarito</div>
                </div>
            <div class="row">
                <div class="col-lg-12 text-center">
                    <div class="team-member">
                        <img src="img/me.jpg" class="img-responsive img-circle" alt="">
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 text-center btn-wrapper">
                        <a href="#skills" class="page-scroll btn btn-xl">English</a>
                    </div>
                    <div class="col-lg-4 text-center btn-wrapper">
                        <a href="#skills" class="page-scroll btn btn-xl">Español</a>
                    </div>
                    <div class="col-lg-4 text-center btn-wrapper">
                        <a href="#skills" class="page-scroll btn btn-xl">Deutsch</a>
                    </div>                            
                </div>                
            </div>
        </header>
    </section> -->

    <!-- About Section -->
    <section id="acerca" class="bg-light-gray">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="team-member">
                        <img src="img/team/me_team.jpg" class="img-responsive img-circle" alt="">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <p class="large text-muted">¡Hola! Soy Kiran Bammarito. Yo trabajo en la intersección de los datos y las comunicaciones. Fuera de trabajo, me gusta cocinar, subir y hacer artesanías. En particular, me encantan los libros para colorear. ¡Agradezco sugerencias!</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Journey Section -->
<!--     <section id="journey" class="bg-light-gray">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">Journey</h2>
                    <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <ul class="timeline">
                        <li>
                            <div class="timeline-image">
                                <img class="img-circle img-responsive" src="img/about/me_about.jpg" alt="">
                            </div>
                            <div class="timeline-panel">
                                <div class="timeline-heading">
                                    <h4>2009-2011</h4>
                                    <h4 class="subheading">Our Humble Beginnings</h4>
                                </div>
                                <div class="timeline-body">
                                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                                </div>
                            </div>
                        </li>
                        <li class="timeline-inverted">
                            <div class="timeline-image">
                                <img class="img-circle img-responsive" src="img/about/2.jpg" alt="">
                            </div>
                            <div class="timeline-panel">
                                <div class="timeline-heading">
                                    <h4>March 2011</h4>
                                    <h4 class="subheading">An Agency is Born</h4>
                                </div>
                                <div class="timeline-body">
                                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="timeline-image">
                                <img class="img-circle img-responsive" src="img/about/3.jpg" alt="">
                            </div>
                            <div class="timeline-panel">
                                <div class="timeline-heading">
                                    <h4>December 2012</h4>
                                    <h4 class="subheading">Transition to Full Service</h4>
                                </div>
                                <div class="timeline-body">
                                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                                </div>
                            </div>
                        </li>
                        <li class="timeline-inverted">
                            <div class="timeline-image">
                                <img class="img-circle img-responsive" src="img/about/4.jpg" alt="">
                            </div>
                            <div class="timeline-panel">
                                <div class="timeline-heading">
                                    <h4>July 2014</h4>
                                    <h4 class="subheading">Phase Two Expansion</h4>
                                </div>
                                <div class="timeline-body">
                                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                                </div>
                            </div>
                        </li>
                        <li class="timeline-inverted">
                            <div class="timeline-image">
                                <h4>Be Part
                                    <br>Of Our
                                    <br>Story!</h4>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
 -->
    <!-- Skills Section -->
    <section id="destrezas">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">Destrezas y habilidades</h2><br><br>
                </div>
            </div>
            <div class="row text-center">
                <div class="col-md-4">
                    <span class="fa-stack fa-4x">
                        <i class="fa fa-circle fa-stack-2x text-primary"></i>
                        <i class="fa fa-bar-chart fa-stack-1x fa-inverse"></i>
                    </span>
                    <h4 class="service-heading">Datos</h4>
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
                </div>
                <div class="col-md-4">
                    <span class="fa-stack fa-4x">
                        <i class="fa fa-circle fa-stack-2x text-primary"></i>
                        <i class="fa fa-comments fa-stack-1x fa-inverse"></i>
                    </span>
                    <h4 class="service-heading">Comunicaciones</h4>
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
                </div>
                <div class="col-md-4">
                    <span class="fa-stack fa-4x">
                        <i class="fa fa-circle fa-stack-2x text-primary"></i>
                        <i class="fa fa-lock fa-stack-1x fa-inverse"></i>
                    </span>
                    <h4 class="service-heading">Web Security</h4>
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Portfolio Grid Section -->
    <section id="portfolio" class="bg-light-gray">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">Proyectos</h2>
                    <h3 class="section-subheading text-muted">Muchas gracias por entender que la mayoría de mis proyectos se escriben en inglés.</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/cali.png" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>La medida de votación 64 de California</h4>
                        <p class="text-muted">Un análisis de datos</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/mooc.png" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Un red social y unas películas</h4>
                        <p class="text-muted">Un análisis de datos</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/data_viz.png" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Llamadas telefónicas para políticos</h4>
                        <p class="text-muted">​Una visualización de datos</p>
                    </div>
                </div>
<!--                 <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="#portfolioModal4" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/golden.png" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Golden</h4>
                        <p class="text-muted">Website Design</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="#portfolioModal5" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/escape.png" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Escape</h4>
                        <p class="text-muted">Website Design</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/dreams.png" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Dreams</h4>
                        <p class="text-muted">Website Design</p>
                    </div>
                </div> -->
            </div>
        </div>
    </section>

    <!-- Clients Aside -->
<!--     <aside class="clients">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <a href="#">
                        <img src="img/logos/envato.jpg" class="img-responsive img-centered" alt="">
                    </a>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a href="#">
                        <img src="img/logos/designmodo.jpg" class="img-responsive img-centered" alt="">
                    </a>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a href="#">
                        <img src="img/logos/themeforest.jpg" class="img-responsive img-centered" alt="">
                    </a>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a href="#">
                        <img src="img/logos/creative-market.jpg" class="img-responsive img-centered" alt="">
                    </a>
                </div>
            </div>
        </div>
    </aside>
 -->
    <!-- Contact Section -->
    <section id="contacto">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">Contácteme</h2><br><br>
<!--                     <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3> -->
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <form name="sentMessage" id="contactForm" novalidate>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Nombre *" id="name" required data-validation-required-message="Por favor, escriba su nombre.">
                                    <p class="help-block text-danger"></p>
                                </div>
                                <div class="form-group">
                                    <input type="email" class="form-control" placeholder="Email *" id="email" required data-validation-required-message="Por favor, escriba su correo electrónico.">
                                    <p class="help-block text-danger"></p>
                                </div>
                                <div class="g-recaptcha" data-sitekey="<KEY>">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <textarea class="form-control" placeholder="Mensaje *" id="message" required data-validation-required-message="Por favor, escriba su mensaje."></textarea>
                                    <p class="help-block text-danger"></p>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <div class="col-lg-12 text-center">
                                <div id="success"></div>
                                <button type="submit" class="btn btn-xl">Enviar</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <div class="row">
                <div class="col-sm-5 text-right">
                    <span class="copyright">Derecho de autor &copy; <NAME> 2017</span>
                </div>
                <div class="col-sm-2"></div>
                <div class="col-sm-5">
                    <ul class="list-inline social-buttons pull-left">
                        <li><a href="https://github.com/kbammarito" target="_blank"><i class="fa fa-github fa-lg"></i></a>
                        </li>
                        <li><a href="https://www.linkedin.com/in/kbammarito/" target="_blank"><i class="fa fa-linkedin"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

    <!-- Portfolio Modals -->
    <!-- Use the modals below to showcase details about your portfolio projects! -->

    <!-- Portfolio Modal 1 -->
    <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="close-modal" data-dismiss="modal">
                    <div class="lr">
                        <div class="rl">
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-lg-8 col-lg-offset-2">
                            <div class="modal-body">
                                <!-- Project Details Go Here -->
                                <h2 class="text-center">La medida de votación 64 de California</h2>
                                <p class="item-intro text-muted text-center">Un análisis de datos</p>
                                <img class="img-responsive img-centered" src="img/portfolio/cali_preview.png" alt="">
                                <p><strong>Resumen:</strong> Esto es un análisis de muestra de las contribuciones y los contribuidores a la medida de votación 64 de California, en las elecciones generales (de noviembre de 2016).<br><strong>Usando:</strong> Python y Pandas<br><strong>Código:</strong> Vea mi Jupyter Notebook <strong><a href="https://github.com/kbammarito/analysis_california_prop_64/blob/master/prop_64_analysis.ipynb" target="_blank">aquí</a></strong>. Favor, tenga en cuenta que los Jupyter Notebooks no se ven bien en dispositivos móviles.</p>
                                <div class="text-center"><button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Portfolio Modal 2 -->
    <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="close-modal" data-dismiss="modal">
                    <div class="lr">
                        <div class="rl">
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-lg-8 col-lg-offset-2">
                            <div class="modal-body">
                                <h2 class="text-center">Un red social y unas películas</h2>
                                <p class="item-intro text-muted text-center">Un análisis de datos</p>
                                <img class="img-responsive img-centered" src="img/portfolio/mooc_preview.png" alt="">
                                <p><strong>Resumen:</strong> Hice unos ejercicios de la clase de <strong><a href="https://lagunita.stanford.edu/courses/DB/2014/SelfPaced/about" target="_blank">"Databases"</a></strong>(Bases de datos) de Stanford.<br><strong>Usando:</strong> PostgreSQL<br><strong>Código:</strong> Vea mis Jupyter Notebooks <strong><a href="https://github.com/kbammarito/stanford_databases" target="_blank">aquí</a></strong>. Favor, tenga en cuenta que los Jupyter Notebooks no se ven bien en dispositivos móviles.
                                </p>
                                <div class="text-center"><button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Portfolio Modal 3 -->
    <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="close-modal" data-dismiss="modal">
                    <div class="lr">
                        <div class="rl">
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-lg-8 col-lg-offset-2">
                            <div class="modal-body">
                                <!-- Project Details Go Here -->
                                <h2 class="text-center">Llamadas telefónicas para políticos</h2>
                                <p class="item-intro text-muted text-center">Una visualización de datos</p>
                                <img class="img-responsive img-centered" src="img/portfolio/data_viz_preview.png" alt="">
                                <p><strong>Resumen:</strong> This is an interactive bar chart showing politicians and a hypothetical number of phone calls.<br><strong>Usando:</strong> d3.js y dimple.js<br><strong>Código:</strong> Vea el gráfico <strong><a href="http://htmlpreview.github.io/?https://github.com/kbammarito/data_visualizations/blob/master/kbammarito_d3_bar_chart.html">aquí</a></strong> y coloque el cursor sobre las barras o presiona ellas para interactuar con él.
                                </p>
                                <div class="text-center"><button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Portfolio Modal 4 -->
    <div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
{'fraction_non_alphanumeric': 0.1367597307179715, 'fraction_numerical': 0.008167310255271162, 'mean_word_length': 1.294636556104446, 'pattern_counts': {'":': 0, '<': 1374, '<?xml version=': 0, '>': 1374, 'https://': 34, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 106, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1141283', 'n_tokens_mistral': 16414, 'n_tokens_neox': 15211, 'n_words': 3360}