LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Andrew Chou
What I’m doing now: Studying math and computer science at the University of Texas at Austin.

What captures my interest: All things data (especially geospatial), maps, open source, sports (especially basketball), and good food.

How to contact me: I encourage anyone to reach out to me for literally any topic. I love to interact with people on social media, so Twitter ( @botherchou ) is probably your best option. If you're anti-Twitter or you want to be more ~formal~ about it, email works too [ chouandrewo (at) gmail.com ].

The map to the right displays the places that I’ve lived in (for at least a couple months). To learn more about the specifics, just click on the marker! The marker in purple indicates where I’m currently residing.

What I do with technology at the moment:

In the beginning of 2016, I took an introductory computer science course taught in Python, and I immediately became obsessed with programming software development. With an academic interest statistics and geospatial technology, starting out with Python seemed like a perfect fit for me. So while I’ve further delved into the Python world and its various applications i.e. data science, back-end development, GIS, and just the language itself, I had a relentless desire to further explore other languages and concepts in the world of software engineering and technology in general.

I’ve recently focused my energy on learning web development, and I began teaching myself the basic web stack in the beginning of 2017 (JS/CSS/HTML for front-end, Python for back-end). Right now, I prefer to learn the fundamentals and stick to “lean” JavaScript and CSS whenever I use them i.e. limit my use of frameworks and dependence-heavy libraries. If I have the time, I use it to work through the “Getting Started” portions of docs for technologies that grab my attention.

Some of the things I’d love to frustrate myself with in the future include Node, Julia, Vue and React, and Go. If you have any particular resources, advice, or even mentorship that you’re willing to offer, I’d certainly appreciate it! Also, although I wouldn’t consider myself an expert in any particular area, I’m always open to helping someone out in any I can! I welcome any opportunity to teach and learn collaboratively because I’ve benefited so greatly from the abundance of resources in the community and reciprocating should be the least I can do. 🙂
CSS
@import url('https://fonts.googleapis.com/css?family=Muli|Quicksand');

body {
  height: 100vh;
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
}

.bio-link {
  text-decoration: none;
  color: #16699e;
}

.bio-link:hover {
  color: #66B7E3;
}

.item {
  border: 2px solid #16699e;
}

.main-grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, 20%);
  grid-template-rows: 325px fit-content(300px) auto 50px;
  grid-template-areas: 
    "header header header header header"
    "bio bio bio map map"
    "content-left content-left content-right content-right content-right"
    "footer footer footer footer footer";
}

.bio {
  grid-area: bio;
}

.map-area {
  grid-area: map;
}

.footer {
  grid-area: footer;
}

.sub-grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 20%);
  -webkit-user-select: none; /* Chrome/Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none;
}

.name-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-row: 3 / 3;
  grid-column: 2 / 3;
}

.name {
  position: relative;
  display: inline-flex;
  align-content: center;
  font-family: 'Quicksand', sans-serif;
  font-size: 3.5rem;
  text-align: center;
  color: white;
  background-color: rgba(0,0,0,.3);
  border-width: 2px 0 2px 0;
  border-style: solid;
  border-color: white;
  padding: 0 1rem 0 1rem;
}

.links-container {
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  grid-row: 1 / 1;
  grid-column: 3 / 4;
}

.link-line {
  position: relative;
  display: inline-flex;
  width: 40%;
  justify-content: space-between;
  padding-right: 1rem;
}

.icon-background {
  border-radius: 5px;
  background-color: rgba(0,0,0,.3);
  padding: .25rem .25rem 0 .25rem;
}

.icon-background:hover {
  background-color: rgba(0,0,0,.5);
}

.icon-link {
  color: white;
}

.head {
  grid-area: header;
  background-color: #0d96e5;
}

#particles-js {
  grid-row: 1 / 6;
  grid-column: 1 / 6;
}

#map {
  width: 100%;
  height: 100%;
}

.leaflet-popup-content {
  width: 20rem;
  font-family: 'Muli', sans-serif;
}

.popup-city-name {
  font-size: 1.5em !important;
  margin: .5rem 0 .75rem 0;
}

.popup-text {
  font-size: 1.1em !important;
}

.bio, .content {
  font-family: 'Muli', sans-serif;
  font-size: 1rem;
  padding: 1rem;
}

.content-right {
  grid-area: content-right; 
}

.content-left {
  grid-area: content-left;
}

footer {
  display: flex;
  font-size: .75rem;
  justify-content: space-between;
}
JS
feather.replace();


// Display a random word whenever page loads
/*
const randomWord = fetch('https://setgetgo.com/randomword/get.php').then(response => response.text()).then(function(promise) {
  document.getElementsByClassName('random-word')[0].innerHTML = `Here's a random word for you: ${promise}`
})
*/

particlesJS("particles-js", {
  particles: {
    number: {
      value: 400,
      density: {
        enable: true,
        value_area: 1000
      }
    },
    color: {
      value: "#ffffff"
    },
    shape: {
      type: "circle",
      stroke: {
        width: 0,
        color: "#000000"
      }
    },
    opacity: {
      value: 0.6
    },
    size: {
      value: 3,
      random: true
    },
    line_linked: {
      enable: true,
      distance: 100,
      color: "#ffffff",
      opacity: 0.4,
      width: 1
    },
    move: {
      enable: true,
      speed: 5,
      out_mode: "out"
    }
  },
  retina_detect: true
});


let data = {
  labels: ["Python", "Web Stuff", "R", "SQL", "Bash"],
  datasets: [
    {
      values: [2, 1, 1, 2, 0.25],
      color: 'violet'
    }
  ]
};

let chart = new Chart({
  parent: '#chart',
  title: 'What I Use',
  data: data,
  type: 'bar' // or 'line', 'scatter', 'pie', 'percentage'
});

// Mapbox stuff

/*
// Mapbox GL
mapboxgl.accessToken = "pk.eyJ1IjoiYW5kcmV3Y2hvdSIsImEiOiJjajJqeXR5b2cwMGRiMnFucW53NWJmNjlnIn0.LmmouuLX7C6EE61cOUez3A";

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v8',
  center: [-95, 40],
  zoom: 2.5
})


map.on('load', function () {
  map.addLayer({
    id: "places",
    type: "symbol",
    source: {
      type: "geojson",
      data: {
        type: "FeatureCollection",
        features: [{
          type: "Feature",
          properties: {
          city: "Port Washington",
          state: "New York",
          periodStart: "1997",
          periodEnd: "2015",
          description: "I grew up here. Not much of a choice for this one.",
          icon: "marker"
        },
        geometry: {
          type: "Point",
          coordinates: [-73.71006, 40.848415]
        }
      }, {
        type: "Feature",
        properties: {
          city: "Austin",
          state: "Texas",
          periodStart: "2015",
          periodEnd: "2019 (hopefully)",
          description: "Pursuing a B.S. in mathematics with a ~certificate~ in computer science at UT Austin (emphasis on the B.S. 😉).",
          icon: "marker"
        },
        geometry: {
          type: "Point",
          coordinates: [-97.748306, 30.285085]
        }
      }, {
        type: "Feature",
        properties: {
          city: "Seattle",
          state: "Washington",
          periodStart: "2016 (Summer)",
          periodEnd: null,
          description: "Spent the summer with my twin brother, who goes to UW. Also worked as a cashier at the Pacific Science Center.",
          icon: "marker"
        },
        geometry: {
          type: "Point",
          coordinates: [-122.3321, 47.6062]
        }
      }, {
        type: "Feature",
        properties: {
          city: "Chicago",
          state: "Illinois",
          periodStart: "2017 (Summer)",
          periodEnd: null,
          description: "Worked as a data intern at NextTier Education. I also worked remotely as a mapping intern for the Humanitarian OpenStreetMap Team (HOT).",
          icon: "marker"
        },
        geometry: {
          type: "Point",
          coordinates: [-87.630385, 41.882331]
        }
      }]
      }
    },
    layout: {
      "icon-image": "{icon}-11",
      "icon-allow-overlap": true
    },
  })

  map.on('click', 'places', function (e){
    
    let content = `
 

    

    `;
    
    
    new mapboxgl.Popup({anchor: 'bottom'})
    .setLngLat(e.features[0].geometry.coordinates)
    .setHTML(content)
    .addTo(map);
    
    
    let latZoom = e.features[0].geometry.coordinates[0]
    let longZoom = e.features[0].geometry.coordinates[1]
    map.flyTo({center: [latZoom, longZoom + 5]});
    
  });
  
  map.on('mouseenter', 'places', function (){
    map.getCanvas().style.cursor = 'pointer';
  });
  
  map.on('mouseleave', 'places', function () {
        map.getCanvas().style.cursor = '';
    });
  
  
});
*/

// Mapbox JS
L.mapbox.accessToken =
  "pk.eyJ1IjoiYW5kcmV3Y2hvdSIsImEiOiJjajJqeXR5b2cwMGRiMnFucW53NWJmNjlnIn0.LmmouuLX7C6EE61cOUez3A";

var map = L.mapbox
  .map("map", "mapbox.streets", { zoomControl: false })
  .setView([40, -95], 3);

L.control
  .zoom({
    position: "topright"
  })
  .addTo(map);

// Create marker layer
const currentLocation = "#3a1a7f";
const markerColor = "#156a9e";
const markerSize = "small";

const featureData = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {
        city: "Port Washington",
        state: "New York",
        periodStart: "1997",
        periodEnd: "2015",
        description: "I grew up here. Not much of a choice for this one.",
        "marker-color": markerColor,
        "marker-size": markerSize,
        "marker-symbol": "1"
      },
      geometry: {
        type: "Point",
        coordinates: [-73.71006, 40.848415]
      }
    },
    {
      type: "Feature",
      properties: {
        city: "Austin",
        state: "Texas",
        periodStart: "2015",
        periodEnd: "2018 (hopefully)",
        description:
          "Pursuing a B.S. in mathematics with a ~certificate~ in computer science @ UT Austin (emphasis on the B.S. 😉).",
        "marker-color": currentLocation,
        "marker-size": markerSize,
        "marker-symbol": "2"
      },
      geometry: {
        type: "Point",
        coordinates: [-97.748306, 30.285085]
      }
    },
    {
      type: "Feature",
      properties: {
        city: "Seattle",
        state: "Washington",
        periodStart: "2016 (Summer)",
        periodEnd: null,
        description:
          "Spent the summer with my twin brother, who goes to UW, and worked as a cashier @ Pacific Science Center.",
        "marker-color": markerColor,
        "marker-size": markerSize,
        "marker-symbol": "3"
      },
      geometry: {
        type: "Point",
        coordinates: [-122.3321, 47.6062]
      }
    },
    {
      type: "Feature",
      properties: {
        city: "Chicago",
        state: "Illinois",
        periodStart: "2017 (Summer)",
        periodEnd: null,
        description:
          "Data intern @ NextTier Education and mapping intern @ Humanitarian OpenStreetMap Team (HOT).",
        "marker-color": markerColor,
        "marker-size": markerSize,
        "marker-symbol": "4"
      },
      geometry: {
        type: "Point",
        coordinates: [-87.630385, 41.882331]
      }
    }
  ]
};

const markerLayer = L.mapbox
  .featureLayer(featureData)
  .on("click", function(e) {
    let lat = e.layer.getLatLng().lat;
    let long = e.layer.getLatLng().lng;

    map.flyTo({ lat: lat + 10, lng: long });
  })
  .addTo(map);

markerLayer.eachLayer(function(layer) {
  let content = `





`;

  layer.bindPopup(content);
});
Term
Wed, 12/27/2017 - 06:59

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv