Add navigation

3 files changed, 52 insertions, 10 deletions

diff --git a/resources/pug/finals/index.pug b/resources/pug/finals/index.pug
index 60def7a..4b79fc9 100644
--- a/resources/pug/finals/index.pug
+++ b/resources/pug/finals/index.pug
@@ -5,8 +5,26 @@ block extra_head
 
 block titleContainer
 
+block append js
+	script(src='/assets/js/jquery.slim.min.js')
+	script(src='/assets/js/scrollspy.min.js')
+
+	script $('body').scrollspy({target: '#sticky-nav'});
+
 block content
-	header
+	#sticky-nav
+		ul.nav.nav-pills
+			li(role='presentation') #[a(href='#introduction') Introduction]
+			li(role='presentation') #[a(href='#publications') Publications]
+			li(role='presentation') #[a(href='#talks') Talks]
+			li(role='presentation') #[a(href='#projects') Software projects]
+			li(role='presentation') #[a(href='#reading-group') Reading group]
+			li(role='presentation') #[a(href='#grants') Grants]
+			li(role='presentation') #[a(href='#teaching') Teaching]
+			li(role='presentation') #[a(href='#employment') Employment]
+			li(role='presentation') #[a(href='#education') Education]
+
+	header#introduction
 		div(style="display:table-row;")
 			img#profile(alt="Camil Staps", style="vertical-align:bottom;", src="/assets/img/profile.jpg", width="170")
 			div#basicinfo(style="display:table-cell;vertical-align:bottom;")
@@ -56,7 +74,7 @@ block content
 			| under the supervision of #[a(href="https://www.rooryck.org/") Johan Rooryck]
 			| and #[a(href="https://radboud.academia.edu/ellenvanwolde") Ellen van Wolde].
 
-	section
+	section#publications
 		h2 Publications
 		mixin pub(year, title)
 			p
@@ -181,7 +199,7 @@ block content
 				td
 					+pub(2017, 'Code generation for the Thumb-2 instruction set')(misc='Radboud University Nijmegen BSc. thesis', url='https://cs.ru.nl/bachelorscripties/2017/Camil_Staps___4498062___Code-generation-for-the-Thumb-2-instruction-set.pdf', oa)
 
-	section
+	section#talks
 		h2 Talks
 		p.
 			I keep track of #[a(href='/conferences.html') the conferences I visit and how much CO#[sub 2] I emit in doing so].
@@ -235,7 +253,7 @@ block content
 				td Jan 5, #[a(href="http://clean.cs.ru.nl/NL-FP_dag_2018", title="Dutch Functional Programming Day") NL-FP day]
 				td #[a(href="https://cloogle.org") Cloogle]: a programming language search engine and its applications (#[a(href="https://clean.cs.ru.nl/NL-FP_dag_2018#Camil_Staps_-_Cloogle:_a_programming_language_search_engine_and_its_applications") abstract & slides]).
 
-	section
+	section#projects
 		h2 Software projects
 		table.main_table
 			tr
@@ -253,19 +271,19 @@ block content
 
 		p Find more on #[a(href="https://gitlab.com/camilstaps") GitLab], #[a(href="https://github.com/camilstaps") GitHub], and #[a(href="https://git.camilstaps.nl/") git.camilstaps.nl].
 
-	section
+	section#reading-group
 		h2 Biblical Hebrew reading group
 		p.
 			I'm running a weekly #[a(href='/hebrew-reading-group.html') online reading group in Biblical Hebrew], open to new members.
 
-	section
+	section#grants
 		h2 Grants
 		table.main_table
 			tr
 				td 2019–2024
 				td #[a(href="https://www.nwo.nl/projecten/pgw19015-0") NWO Promoties in de Geesteswetenschappen], €249K (covering my PhD project; applied for by Holger Gzella; grant no. PGW.19.015).
 
-	section
+	section#teaching
 		h2 Teaching
 		table.main_table
 			tr
@@ -286,7 +304,7 @@ block content
 					Student assistant for various courses in computing science, Radboud University Nijmegen.
 					See under Employment for a list of courses.
 
-	section
+	section#employment
 		h2 Employment
 		table.main_table
 			tr
@@ -343,7 +361,7 @@ block content
 				td May 2013–Mar. 2019
 				td Owner of ViviSoft.
 
-	section
+	section#education
 		h2 Education
 		table.main_table
 			tr
diff --git a/resources/pug/include/layout.pug b/resources/pug/include/layout.pug
index 1cbf0f4..1b4e96d 100644
--- a/resources/pug/include/layout.pug
+++ b/resources/pug/include/layout.pug
@@ -5,7 +5,7 @@ html(lang="en")
 	head
 		include head.pug
 
-	body
+	body(style='position:relative;')
 		.container
 			block titleContainer
 				header
diff --git a/resources/sass/style.scss b/resources/sass/style.scss
index f92f58d..227093c 100644
--- a/resources/sass/style.scss
+++ b/resources/sass/style.scss
@@ -17,12 +17,36 @@
 
 body {
 	font-family: Hebrew, sans-serif;
+	position: relative;
 }
 
 .container {
 	max-width: 970px;
 }
 
+#sticky-nav {
+	padding-top: 1em;
+}
+
+@media (min-width: 1270px) {
+	/* 970px is width of .container; 200px is width of #sticky-nav. This places
+	 * the nav buttons to the left of the content. */
+	#sticky-nav {
+		left: calc(50% - 970px/2 - 150px);
+		position: fixed;
+		text-align: right;
+		width: 150px;
+	}
+
+	#sticky-nav li {
+		float: none;
+	}
+
+	#sticky-nav li > a {
+		display: inline-block;
+	}
+}
+
 .greyed-out {
 	color: #888;
 }