index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="Angelly Pugliese personal website">
    

    <!-- OG Meta Tags to improve the way the post looks when you share the page on LinkedIn, Facebook, Google+ -->
	<meta property="og:site_name" content="" /> <!-- website name -->
	<meta property="og:site" content="" /> <!-- website link -->
	<meta property="og:title" content=""/> <!-- title shown in the actual shared post -->
	<meta property="og:description" content="" /> <!-- description shown in the actual shared post -->
	<meta property="og:image" content="" /> <!-- image link, make sure it's jpg -->
	<meta property="og:url" content="" /> <!-- where do you want your post to link to -->
	<meta property="og:type" content="article" />

    <!-- Website Title -->
    <title>Angelly Pugliese</title>
    
    <!-- Styles -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/mdb.css" rel="stylesheet">
    <link href="css/fontawesome-all.css" rel="stylesheet">
    <link href="css/swiper.css" rel="stylesheet">
	<link href="css/magnific-popup.css" rel="stylesheet">
	<link href="css/styles.css" rel="stylesheet">
	

</head>
<body data-spy="scroll" data-target=".fixed-top">
    

    <!-- Navbar -->
    <nav class="navbar navbar-expand-md navbar-dark navbar-custom fixed-top">
        <!-- Text Logo - Use this if you don't have a graphic logo -->
        <!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Leno</a> -->

        <!-- Image Logo -->
        <!-- <a class="navbar-brand logo-image" href="index.html"><img src="images/logo.svg" alt="alternative"></a>  -->
        
        <!-- Mobile Menu Toggle Button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-awesome fas fa-bars"></span>
            <span class="navbar-toggler-awesome fas fa-times"></span>
        </button>
        <!-- end of mobile menu toggle button -->

        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#header">ABOUT ME <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#portfolio">PORTFOLIO</a>
                </li>
                
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="resume.html">RESUME</a>
                </li>               

                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#contact">CONTACT</a>
                </li>
            </ul>
           
        </div>
    </nav> <!-- end of navbar -->
    <!-- end of navbar -->


    <!-- Header -->
    <header id="header" class="header">
        <div class="header-content">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="text-container">
                            <h1><br><span id="js-rotating">Hello,Hola, Ciao, Hallo</span>, my name is Angelly Pugliese</h1>
                            <p class="p-large">I'm a Geoinformatics Engineering student with emphasis in Computer Science.</p>
                            
                        </div>
                    </div> <!-- end of col -->
                    <div class="col-lg-6">
                        <div class="round-img">
                            
                        </div> <!-- end of image-container -->
                    </div> <!-- end of col -->
                </div> <!-- end of row -->
            </div> <!-- end of container -->
        </div> <!-- end of header-content -->
    </header> <!-- end of header -->
    <!-- end of header -->


    <div class="container">
        <div class="row">
            <div class="col-10 offset-1 text-center" style="padding-top: 60px; padding-bottom: 60px;">
                <h2 style="color: #33415C;">ABOUT ME</h2>
                <br/>
                <p style="color: #33415C; font-size: 18px;">I'm a computer scientist exploring in the Geoinformatics world. Currently, I'm starting the last semester of my MSc and working on my thesis which is related to machine learning for satellite imagery classification.</p>
            </div> <!-- end of col -->
        </div> <!-- end of row -->
    </div>
    <div class="container-fluid">
        <div id="portfolio" class="ex-header" style="padding-top: 60px;">
            <h2>PORTFOLIO</h2>
            <br/>
            <p style="padding-left: 20px; padding-right: 20px;">In this section I expose some of my main development projects. In the future, I will also list my research papers, at the moment I just have one :D</p>
            <br/>
            <div class="container">
            <div class="row">
               <div class="card-deck">
                  <div class="card">
                    <div class="text-center">
                    <img class="card-img-top" style="width: 150px;" src="images/geopriv.png" alt="Card image cap"></div>
                    <div class="card-body">
                      <h5 class="card-title">QGIS plugin</h5>
                      <p class="card-text" style="color: #33415C;">It implements different geoprivacy mechanisms.</p>
                      <a href="https://diuke.github.io/GeoPrivPlugin/" target="_blank" class="btn btn-primary">See more</a>
                    </div>
                  </div>
                  <div class="card">
                    <div class="text-center">
                    <img class="card-img-top" style="width: 220px;" src="images/plos.png" alt="Card image cap"></div>
                    <div class="card-body">
                      <h5 class="card-title">Walkability measurement (class project)</h5>
                      <p class="card-text" style="color: #33415C;">Static website to show the result of the indicators according to the measurements and additional information for GIS class.</p>
                      <a href="https://anpugliese.github.io/PLOS_project/" target="_blank" class="btn btn-primary">See more</a>
                    </div>
                  </div>
                  <div class="card">
                    <div class="text-center">
                    <img class="card-img-top" style="width: 250px;" src="images/logoB.png" alt="Card image cap"></div>
                    <div class="card-body">
                      <h5 class="card-title">Company Website</h5>
                      <p class="card-text" style="color: #33415C;">Creation of a totally new website using Wordpress.</p>
                      <a href="https://solucionesyredes.com/" target="_blank" class="btn btn-primary">See more</a>
                    </div>
                  </div>
                </div>
                <div class="card-deck" style="margin-top: 20px;">
                    <div class="card">
                      <div class="text-center">
                      <img class="card-img-top" style="width: 300px;" src="images/flipper.PNG" alt="Card image cap"></div>
                      <div class="card-body">
                        <h5 class="card-title">Flipper for Computer Graphics class</h5>
                        <p class="card-text" style="color: #33415C;">It might take a while to load because the assets are heavy.</p>
                        <a href="https://diuke.github.io/FlipperComputerGraphics/" target="_blank" class="btn btn-primary">See more</a>
                      </div>
                    </div>
                    <div class="card">
                      <div class="text-center">
                      <img class="card-img-top" style="width: 220px;" src="images/ISG.png" alt="Card image cap"></div>
                      <div class="card-body">
                        <h5 class="card-title">Height Conversion Service</h5>
                        <p class="card-text" style="color: #33415C;">Conversion from ellipsoidal to orthometric height and viceversa for the International Service for the Geoid.</p>
                        <a href="https://www.isgeoid.polimi.it/Geoid/height_conversion.html" target="_blank" class="btn btn-primary">See more</a>
                      </div>
                    </div>
                    <div class="card" style="opacity: 0;">
                      <div class="text-center">
                      <img class="card-img-top" style="width: 250px;" src="images/logoB.png" alt="Card image cap"></div>
                      <div class="card-body">
                        <h5 class="card-title">Company Website</h5>
                        <p class="card-text" style="color: #33415C;">Implementation of a totally new website using Wordpress.</p>
                        <a href="https://solucionesyredes.com/" target="_blank" class="btn btn-primary">See more</a>
                      </div>
                    </div>
                  </div>
            </div>
            </div>
            

        </div>
    </div> <!-- end of container -->


    <!-- Contact -->
    <div id="contact" class="form">
        <div class="container">
            <div class="row">
                <div class="col-lg-12" >
                    <h2>CONTACT</h2>
                    <ul class="list-unstyled li-space-lg">
                        <li class="address">Don't hesitate to give me a call or send me an email.</li>
                        <li><i class="fas fa-map-marker-alt"></i>Milan, Italy</li>
                        <li><i class="fas fa-phone"></i><a class="blue" href="tel:003024630820">+39 3517351508</a></li>
                        <li><i class="fas fa-envelope"></i><a class="blue" href="mailto:angellypugliese@gmail.com">angellypugliese@gmail.com</a></li>
                    </ul>
                </div> <!-- end of col -->
            </div> <!-- end of row -->
            
        </div> <!-- end of container -->
    </div> <!-- end of form -->
    <!-- end of contact -->


    <!-- Footer -->
    <div class="footer">
        <div class="container">
            <div class="row text-center">
                
                
                <div class="col-12 text-center">
                    
                        <h4>Social Media</h4>
                        
                      
                        <span class="fa-stack">
                            <a href="https://github.com/anpugliese/" target="_blank">
                                <i class="fas fa-circle fa-stack-2x"></i>
                                <i class="fab fa-github fa-stack-1x"></i>
                            </a>
                        </span>
                      
                        <span class="fa-stack">
                            <a href="https://www.linkedin.com/in/angelly-pugliese/" target="_blank">
                                <i class="fas fa-circle fa-stack-2x"></i>
                                <i class="fab fa-linkedin-in fa-stack-1x"></i>
                            </a>
                        </span>
                   
                </div> <!-- end of col -->
            </div> <!-- end of row -->
        </div> <!-- end of container -->
    </div> <!-- end of footer -->  
    <!-- end of footer -->


    <!-- Copyright -->
    <div class="copyright">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <p class="p-small">Copyright © Angelly Pugliese, 2020</p>
                </div> <!-- end of col -->
            </div> <!-- enf of row -->
        </div> <!-- end of container -->
    </div> <!-- end of copyright --> 
    <!-- end of copyright -->
    
    	
    <!-- Scripts -->
    <script src="js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
    <script src="js/popper.min.js"></script> <!-- Popper tooltip library for Bootstrap -->
    <script src="js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
    <script src="js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
    <script src="js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
    <script src="js/jquery.magnific-popup.js"></script> <!-- Magnific Popup for lightboxes -->
    <script src="js/morphext.min.js"></script> <!-- Morphtext rotating text in the header -->
    <script src="js/validator.min.js"></script> <!-- Validator.js - Bootstrap plugin that validates forms -->
    <script src="js/scripts.js"></script> <!-- Custom scripts -->
</body>
</html>