diff --git a/_config.yml b/_config.yml
index 147c2e7..953f1e4 100644
--- a/_config.yml
+++ b/_config.yml
@@ -13,7 +13,9 @@ collections:
   thesis:
     output: true
   talks:
-      output: true
+    output: true
+  projects:
+    output: true
 
 
 plugins:
diff --git a/_data/navigation.yml b/_data/navigation.yml
index b44fb10..712f917 100644
--- a/_data/navigation.yml
+++ b/_data/navigation.yml
@@ -4,3 +4,5 @@
   link: /cv/
 - name: Thesis
   link: /thesis/
+- name: Projects
+  link: /projects/
diff --git a/_drafts/test_map.html b/_drafts/test_map.html
deleted file mode 100644
index de4e7bf..0000000
--- a/_drafts/test_map.html
+++ /dev/null
@@ -1,119 +0,0 @@
----
-title: Test Map
-excerpt: 
----
-
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
-    crossorigin=""/>
-     <!-- Make sure you put this AFTER Leaflet's CSS -->
- <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
- integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
- crossorigin=""></script>
- <script src="https://unpkg.com/leaflet-simple-map-screenshoter"></script>
- <script src="https://unpkg.com/file-saver/dist/FileSaver.js"></script>
- <script src="/assets/js/domtoimage.min.js"></script>
-
-
- <style>
-    #map { 
-        height: 1600px; 
-        width: 1600px;
-    }
- </style>
-    
-    </head>
-    
-    <body>
-        <div id="map"></div>
-
-        <script>
-    let Stamen_TonerBackground = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-background/{z}/{x}/{y}{r}.{ext}', {
-    subdomains: 'abcd',
-    minZoom: 0,
-    maxZoom: 16,
-    ext: 'png'
-    });
-    let Stamen_Toner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', {
-    subdomains: 'abcd',
-    minZoom: 0,
-    maxZoom: 16,
-    ext: 'png'
-    });
-    const key = 'paglUJQl74h39APJmOFJ';
-    let os_maps = L.tileLayer(`https://api.maptiler.com/tiles/uk-osgb10k1888/{z}/{x}/{y}.jpg?key=paglUJQl74h39APJmOFJ`,{ //style URL
-    tileSize: 512,
-    zoomOffset: -1,
-    minZoom: 1,
-    crossOrigin: true
-    });
-    let os_multi_scale = L.tileLayer(`https://api.maptiler.com/tiles/uk-osgb1888/{z}/{x}/{y}?key=paglUJQl74h39APJmOFJ`,{ //style URL
-    tileSize: 512,
-    zoomOffset: -1,
-    minZoom: 1,
-    crossOrigin: true
-    });
-    let os_maps_2 = L.tileLayer("https://api.maptiler.com/tiles/uk-osgb1888/{z}/{x}/{y}?key=paglUJQl74h39APJmOFJ",{ //style URL
-    tileSize: 512,
-    zoomOffset: -1,
-    minZoom: 1,
-    crossOrigin: true
-    });
-    let hills = L.tileLayer("https://api.maptiler.com/tiles/uk-osgb10k1888/{z}/{x}/{y}.jpg?key=paglUJQl74h39APJmOFJ",{ //style URL
-    tileSize: 512,
-    zoomOffset: -1,
-    minZoom: 1,
-    crossOrigin: true
-    });
-
-    let os_london = L.tileLayer("https://api.maptiler.com/tiles/uk-oslondon1k1893/{z}/{x}/{y}.jpg?key=paglUJQl74h39APJmOFJ",{ //style URL
-    tileSize: 512,
-    zoomOffset: -1,
-    minZoom: 1,
-    crossOrigin: true
-    });
-
-    
-
-    var baseMaps = {
-    "Stamen Toner": Stamen_TonerBackground,
-    "Stamen Toner Labelled" : Stamen_Toner,
-    "OS Maps Multi Scale" : os_multi_scale,
-    "OS Maps": os_maps,
-    "OS Maps Hills": os_maps_2,
-    "Hills" : hills,
-    "OS Maps London" : os_london,
-    };
-
-
-    let pluginOptions = {
-        cropImageByInnerWH: true, // crop blank opacity from image borders
-        hidden: false, // hide screen icon
-        preventDownload: false, // prevent download on button click
-        domtoimageOptions: {}, // see options for dom-to-image
-        position: 'topleft', // position of take screen icon
-        screenName: 'screen', // string or function
-        // iconUrl: ICON_SVG_BASE64, // screen btn icon base64 or url
-        hideElementsWithSelectors: ['.leaflet-control-container'], // by default hide map controls All els must be child of _map._container
-        mimeType: 'image/svg', // used if format == image,
-        caption: null, // string or function, added caption to bottom of screen
-        captionFontSize: 15,
-        captionFont: 'Arial',
-        captionColor: 'black',
-        captionBgColor: 'white',
-        captionOffset: 5,
-    }
-
-    home = [51.55575624506862, -0.08058359767120651];
-    center = {lat: 51.54540094923517, lng: -0.08419990539550783};
-    let map = L.map('map').setView(home, 15);
-    map.addLayer(Stamen_Toner);
-
-    let simpleMapScreenshoter = L.simpleMapScreenshoter(pluginOptions).addTo(map);
-    let layerControl = L.control.layers(baseMaps).addTo(map);
-    
-             </script>
-        
-    </body>
-</html>
-
diff --git a/_projects/tonis_map.html b/_projects/tonis_map.html
new file mode 100644
index 0000000..ce076aa
--- /dev/null
+++ b/_projects/tonis_map.html
@@ -0,0 +1,235 @@
+---
+title: Toni's Map
+excerpt: A going away present for my friend Toni.
+permalink: /tonis-map/
+assets: /assets/blog/maps/icons
+image: /assets/blog/maps/tonis_map.png
+---
+
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+    crossorigin=""/>
+     <!-- Make sure you put this AFTER Leaflet's CSS -->
+ <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+ integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+ crossorigin=""></script>
+ <script src="https://unpkg.com/leaflet-simple-map-screenshoter"></script>
+ <script src="https://unpkg.com/file-saver/dist/FileSaver.js"></script>
+ <script src="/assets/js/domtoimage.min.js"></script>
+
+
+ <style>
+    .leaflet-pane {
+    filter: grayscale(1) contrast(1.0);
+    }
+
+    #map { 
+        /* height: 4100px;
+        width: 4102px; */
+    
+    height: 100%;
+    width: 100%;
+    }
+
+    .customIcon {
+        width: 20px;
+        height: 20px;
+    }
+
+    div.icon {
+        color: black;
+        /* background-color: rgba(255, 255, 255, 0.8); */
+        text-shadow: 0px 10px 10px white,
+                     10px 0px 10px white,
+                     0px -10px 10px white,
+                     -10px 0px 10px white;
+        /* width: 150px;
+        height: 150px; */
+        font-size: 1em; 
+        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        text-align: center;
+        padding: 50%;
+        border-radius: 20%;
+        /* border-color: black; */
+        
+        
+    }
+
+ </style>
+    
+    </head>
+    
+    <body>
+        <div id="map"></div>
+
+        <script>
+    let Stamen_TonerBackground = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-background/{z}/{x}/{y}.{ext}', {
+    subdomains: 'abcd',
+    minZoom: 0,
+    maxZoom: 16,
+    zoomOffset: 0,
+    ext: 'png',
+    });
+
+    // Using detectRetina: false and manually adding @2x is a hack to export the retina tiles directly 
+    let Stamen_Toner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}@2x.{ext}', {
+    subdomains: 'abcd',
+    minZoom: 0,
+    maxZoom: 16,
+    ext: 'png',
+    maxNativeZoom: 13,
+    minNativeZoom: 13,
+    // tileSize: 512,
+    // zoomOffset: -1,
+    detectRetina: false,
+    className: 'stamen'
+    });
+    const key = 'paglUJQl74h39APJmOFJ';
+    let os_maps = L.tileLayer(`https://api.maptiler.com/tiles/uk-osgb10k1888/{z}/{x}/{y}@2x.jpg?key=paglUJQl74h39APJmOFJ`,{ //style URL
+    tileSize: 512,
+    zoomOffset: -1,
+    minZoom: 1,
+    crossOrigin: true
+    });
+    let os_multi_scale = L.tileLayer(`https://api.maptiler.com/tiles/uk-osgb1888/{z}/{x}/{y}?key=paglUJQl74h39APJmOFJ`,{ //style URL
+    tileSize: 512,
+    zoomOffset: -1,
+    minZoom: 1,
+    crossOrigin: true
+    });
+    let os_maps_2 = L.tileLayer("https://api.maptiler.com/tiles/uk-osgb1888/{z}/{x}/{y}?key=paglUJQl74h39APJmOFJ",{ //style URL
+    tileSize: 512,
+    zoomOffset: -1,
+    minZoom: 1,
+    crossOrigin: true
+    });
+    let hills = L.tileLayer("https://api.maptiler.com/tiles/uk-osgb10k1888/{z}/{x}/{y}.jpg?key=paglUJQl74h39APJmOFJ",{ //style URL
+    tileSize: 512,
+    zoomOffset: -1,
+    minZoom: 1,
+    crossOrigin: true
+    });
+
+    let os_london = L.tileLayer("https://api.maptiler.com/tiles/uk-oslondon1k1893/{z}/{x}/{y}.jpg?key=paglUJQl74h39APJmOFJ",{ //style URL
+    tileSize: 512,
+    zoomOffset: -1,
+    minZoom: 1,
+    crossOrigin: true
+    });
+
+    
+
+    var baseMaps = {
+    "Stamen Toner": Stamen_TonerBackground,
+    "Stamen Toner Labelled" : Stamen_Toner,
+    "OS Maps Multi Scale" : os_multi_scale,
+    "OS Maps": os_maps,
+    "OS Maps Hills": os_maps_2,
+    "Hills" : hills,
+    "OS Maps London" : os_london,
+    };
+
+
+    let pluginOptions = {
+        cropImageByInnerWH: true, // crop blank opacity from image borders
+        hidden: false, // hide screen icon
+        preventDownload: false, // prevent download on button click
+        domtoimageOptions: {}, // see options for dom-to-image
+        position: 'topleft', // position of take screen icon
+        screenName: 'screen', // string or function
+        // iconUrl: ICON_SVG_BASE64, // screen btn icon base64 or url
+        hideElementsWithSelectors: ['.leaflet-control-container'], // by default hide map controls All els must be child of _map._container
+        mimeType: 'image/svg', // used if format == image,
+        caption: null, // string or function, added caption to bottom of screen
+        captionFontSize: 15,
+        captionFont: 'Arial',
+        captionColor: 'black',
+        captionBgColor: 'white',
+        captionOffset: 5,
+    }
+
+    let map = L.map('map', {
+        zoomSnap: 0.1,
+    })
+    map.addLayer(Stamen_Toner);
+
+    let simpleMapScreenshoter = L.simpleMapScreenshoter(pluginOptions).addTo(map);
+    let layerControl = L.control.layers(baseMaps).addTo(map);
+
+    assets =  "/assets/blog/maps/icons"
+    places = [
+        {ltlng : [51.51995130374973, -0.09422280473133485], name: 'The Barbican!', icon: "heart.svg"},
+        {ltlng : [51.55575624506862, -0.08058359767120651], name: 'T+A', icon: "house.svg"},
+        {ltlng : [51.56525837288342, -0.05251125889774798], name: 'RARA', icon: "warehouse.svg"},
+        {ltlng : [51.52645152178261, -0.06341480189873742], name: 'E&nbsp;Pellicci', icon: "warehouse.svg"},
+        {ltlng : [51.520621113485696, -0.1298840925962555], name: 'LSHTM', icon: "warehouse.svg"},
+        {ltlng : [51.55137856433745, -0.055549635581998706], name: 'Black Cat', icon: "warehouse.svg"},
+        {ltlng : [51.53555650873838, -0.05082052638403943], name: 'Party!', icon: "warehouse.svg"},
+        {ltlng : [51.5213208032812, -0.06440122268996837], name: 'Home', icon: "warehouse.svg"},
+        {ltlng : [51.52758357786464, -0.056382425792311966], name: 'Bethwall Green', icon: "warehouse.svg"},
+        {ltlng : [51.558143000795965, -0.08413768399876369], name: "🍦"},
+        {ltlng : [51.53561093730289, -0.06208617791235625], name: "Market Cafe"}, // From mike
+        {ltlng : [51.55164580102093, -0.07479603558247123], name: "Red&nbsp;Hand"}, // From mike
+        {ltlng : [51.548807269803135, -0.07664573558247124], name: "Vortex"}, // From mike
+        {ltlng : [51.524667799040785, -0.09343089325258623], name: "Monohon"}, // From mike
+        
+        
+        
+    ]
+
+    // places.forEach(place => 
+    //     L.marker(place.ltlng).addTo(map)
+    //     .bindTooltip(place.name,  {
+    //         permanent: true, 
+    //         direction: 'right'
+    //     }));
+
+    places.forEach(place => 
+        L.marker(place.ltlng, {icon: 
+            L.divIcon({
+                className: 'my-div-icon',
+                // html: `<div class="icon"><img class = "customIcon" src = "${assets}/${place.icon}"></img>${place.name}</div>`,
+                html: `<div class="icon">${place.name}</div>`,
+        })}).addTo(map));
+
+
+	const ZoomViewer = L.Control.extend({
+		onAdd() {
+			const gauge = L.DomUtil.create('div');
+			gauge.style.width = '200px';
+			gauge.style.background = 'rgba(255,255,255,0.5)';
+			gauge.style.textAlign = 'left';
+			map.on('zoomstart zoom zoomend', (ev) => {
+				gauge.innerHTML = `Zoom level: ${map.getZoom()}`;
+			});
+			return gauge;
+		}
+	});
+
+	const zoomViewer = (new ZoomViewer()).addTo(map);
+
+
+    // const center = {lat: 51.53803381685164, lng: -0.09551626866416196};
+    // const zoom = 
+    // map.setView(center, 14.5);
+
+    let bounds = L.latLngBounds()
+    bounds.extend([51.494566124726866, -0.16118163403141098]);
+    bounds.extend([51.583371925056, -0.018402892484412632]);
+    map.fitBounds(bounds);
+
+    map.on('zoomed', function() {
+        var newzoom = '' + (2*(mymap.getZoom())) +'px';
+        
+        el.getElementsBy .css({'width':newzoom,'height':newzoom}); 
+    });
+    
+             </script>
+        
+    </body>
+</html>
+
diff --git a/_sass/main.scss b/_sass/main.scss
index e16ba18..d195756 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -4,6 +4,7 @@
 @import "nav"; //the side navbar
 @import "header"; // the header
 @import "article"; // individual blog articles
+@import "projects"; //Styles for the projects page
 @import "cv"; // the CV page
 @import "thesis"; // the thesis content
 @import "blogroll"; // the summaries of the blogposts
diff --git a/_sass/projects.scss b/_sass/projects.scss
new file mode 100644
index 0000000..0eac69c
--- /dev/null
+++ b/_sass/projects.scss
@@ -0,0 +1,9 @@
+article.project {
+    display: flex;
+
+    img {
+        height: 7em;
+        margin-right: 1em;
+        border-radius: 2em;
+    }
+}
\ No newline at end of file
diff --git a/assets/blog/maps/tonis_map.png b/assets/blog/maps/tonis_map.png
new file mode 100644
index 0000000..d567e4d
Binary files /dev/null and b/assets/blog/maps/tonis_map.png differ
diff --git a/projects.md b/projects.md
new file mode 100644
index 0000000..354d21b
--- /dev/null
+++ b/projects.md
@@ -0,0 +1,21 @@
+---
+title: Projects
+layout: default
+redirect_from:
+  - /projects/
+---
+{% for post in site.projects %}
+<article class="h-entry project">
+    {% unless post.hide_image %}
+    <figure class="blogroll">
+    <img class="u-photo" src = "{{post.image}}" alt="{{post.alt}}">
+    </figure>
+    {% endunless %}
+
+    <section>
+    <h2 class="p-name blogroll-title"><a class="u-uid u-url" href="{{ post.url }}">{{ post.title }}</a></h2>
+    <time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time>
+    <summary class="p-summary">{{ post.excerpt | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
+    </section>
+</article>
+{% endfor %}
\ No newline at end of file
