portfolio/index.html at main · alisoncase/portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="maps, cartography"/>
	<title>Alison Case</title>

    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <!-- Create the navbar -->
    <ul class="nav justify-content-center">
        <li class="nav-item">
          <a class="nav-link" href="index.html">Projects</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="info.html">Info</a>
        </li>
      </ul>
    <ul class="nav justify-content-end">
        <li class="rounded float-end">
            <a href="https://github.com/alisoncase">
                <img src="assets/github-mark.png" alt="Github Link"></a>
        </li>
        <li class="rounded float-end">
            <a href="https://www.linkedin.com/in/alison-case/">
                <img src="assets/LinkedIn-mark.png"  alt="LinkedIn Link"></a>
        </li>
      </ul>
 	<!-- Create the portfolio container -->
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h1 class="display-2">ALISON CASE</h1>
            </div>
            <div class="col-md-6">
                <figure class="text-end">
                <p>Welcome to my cartography portfolio. Here you’ll find a selection of my work. Explore my projects to learn more about what I do.</p>
                </figure>
            </div>
        </div>

        <!-- Interactive Maps Section -->
        <h2 class="mt-5">Interactive Maps</h2>
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <a href="roadmaps.html">
                        <img class="card-img-top" src="assets/Roadmaps-thumbnail.png" alt="global map app with coordinated scatterplot and dot plot graphs"></a>
                    <div class="card-body">
                        <h4 class="card-title"><a href="roadmaps.html">Country Roadmaps Interactive Map</a></h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <a href="everwadingbirds.html">
                        <img class="card-img-top" src="assets/EverWadingBirds-thumbnail.png" alt="map app of bird sightings in Everglades National Park"></a>
                    <div class="card-body">
                        <h4 class="card-title"><a href="everwadingbirds.html">Everglades National Park Wading Bird Sightings App</a></h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <a href="publichealth.html">
                        <img class="card-img-top" src="assets/PublicHealth-thumbnail.png" alt="map of United States showing health outcomes and risks"></a>
                    <div class="card-body">
                        <h4 class="card-title"><a href="publichealth.html">Public Health Outcomes and Risks App</a></h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <a href="agingeurope.html">
                        <img class="card-img-top" src="assets/AgingEurope-thumbnail.png" alt="map of Europe with old-age dependency ratios"></a>
                    <div class="card-body">
                        <h4 class="card-title"><a href="agingeurope.html">Europe's Aging Cities</a></h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <a href="geoname.html">
                        <img class="card-img-top" src="assets/Geoname-thumbnail.png" alt="web app for proposing geographic place names"></a>
                    <div class="card-body">
                        <h4 class="card-title"><a href="geoname.html">Geographic Name Proposal App</a></h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <a href="ukiyoe.html">
                        <img class="card-img-top" src="assets/Ukiyoe-thumbnail.png" alt="map of Cape Town in Ukiyo-e style"></a>
                    <div class="card-body">
                        <h4 class="card-title"><a href="ukiyoe.html">Ukiyo-e Styled Basemap Tileset</a></h4>
                    </div>
                </div>
            </div>
        </div>

        <!-- Static Maps Section -->
        <h2 class="mt-5">Static Maps</h2>
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <a href="ukrainerefugees.html">
                        <img class="card-img-top" src="assets/UkraineRefugees-thumbnail.png" alt="map of European countries hosting Ukrainian refugees"></a>
                    <div class="card-body">
                        <h4 class="card-title"><a href="ukrainerefugees.html">Ukrainian Refugees in Europe</a></h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <a href="japanhousing.html">
                        <img class="card-img-top" src="assets/JapanHousing-thumbnail.png" alt="map of trends in vacant housing distribution in Japan"></a>
                    <div class="card-body">
                        <h4 class="card-title"><a href="japanhousing.html">Vacant Homes in Japan</a></h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <a href="greatlakes.html">
                        <img class="card-img-top" src="assets/DeadliestGreatLake-thumbnail.png" alt="map of locations of deaths on Lake Michigan"></a>
                    <div class="card-body">
                        <h4 class="card-title"><a href="greatlakes.html">Deaths on Lake Michigan</a></h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <a href="africareference.html">
                        <img class="card-img-top" src="assets/AfricaReferenceMap-thumbnail.png" alt="map of Africa"></a>
                    <div class="card-body">
                        <h4 class="card-title"><a href="africareference.html">Reference Map of Africa</a></h4>
                    </div>
                </div>
            </div>
        </div>

        <!-- Story Maps Section -->
        <h2 class="mt-5">Story Maps</h2>
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <a href="grpublicart.html">
                        <img class="card-img-top" src="assets/GRPublicArt-thumbnail.png" alt="red sculpture against blue sky"></a>
                    <div class="card-body">
                        <h4 class="card-title"><a href="grpublicart.html">Public Art Guided Walking Tour</a></h4>
                    </div>
                </div>
            </div>
                <div class="col-md-4">
                    <div class="card">
                        <a href="likeneverbefore.html">
                            <img class="card-img-top" src="assets/LikeNeverBeforeMap-thumbnail.png" alt="cover image with title Like Never Before"></a>
                        <div class="card-body">
                            <h4 class="card-title"><a href="likeneverbefore.html">The Rising Dengue Epidemic in the Americas</a></h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <footer class="footer mt-auto py-3 bg-white">
              <div class="container">
                <div class="row">
                  <div class="col-md-6">
                    <p class="text-muted">© 2025 by Alison Case.<br>The content on this website is my personal portfolio and does not reflect the views of my employer.</br></p>
                  </div>
                  <div class="col-md-6 text-end">
                    <a href="#">Go to Top</a>
                  </div>
                </div>
              </div>
            </footer>
        </div>
    </div>

    <!--put your external script links here-->
    <script type="text/javascript" src="lib/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="lib/bootstrap.min.js"></script>
</body>

</html>