-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (111 loc) · 6.2 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- HTML Meta Tags -->
<title>Danielle Cruz</title>
<meta charset="UTF-8">
<meta name="author" content="Danielle Cruz">
<meta name="description" content="Danielle is a designer and developer building technologies that make experiences more equitable and more accessible.">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://danielle-cruz.github.io/">
<meta property="og:type" content="website">
<meta property="og:title" content="Danielle Cruz">
<meta property="og:description" content="Danielle is a designer and developer building technologies that make experiences more equitable and more accessible.">
<meta property="og:image" content="https://danielle-cruz.github.io/assets/images/preview.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="danielle-cruz.github.io">
<meta property="twitter:url" content="https://danielle-cruz.github.io/">
<meta name="twitter:title" content="Danielle Cruz">
<meta name="twitter:description" content="Danielle is a designer and developer building technologies that make experiences more equitable and more accessible.">
<meta property="twitter:image" content="https://danielle-cruz.github.io/assets/images/preview.png">
<!-- CSS and JS files-->
<link rel="icon" href="assets/images/icon.png">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="styles-mobile.css">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<script src="index.js" defer></script>
</head>
<body>
<!-- Navigation Menu -->
<header id="menu" aria-label="Navigation menu">
<div id="selected"><h1>Danielle Cruz</h1></div>
<div><a class="nav-link" href="about.html">About</a></div>
<div><a class="nav-link" href="assets/files/DanielleCruz-Resume.pdf" target="_blank">Resume</a></div>
</header>
<!-- Gallery -->
<main id="gallery" aria-label="Projects gallery">
<!-- <div class="thumbnail" onclick="location.href='#';">
<img src="assets/images/thumbnails/goschoolbox.png">
<h2>GoSchoolBox</h2>
<h3>Visualizing student progress in academics and social-emotional learning</h3>
</div> -->
<a id="altogether" class="thumbnail" href="work/altogether.html" aria-label="ALTogether" c>
<article>
<img src="assets/images/thumbnails/altogether.png" alt="A young white woman smiling while looking at her phone and writing alt text for an image of an ice cream cone.">
<h2>ALTogether</h2>
<h3>Creating richer, more reliable alt-text</h3>
</article>
</a>
<a id="ted-lasso" class="thumbnail" href="work/ted-lasso.html" aria-label="Be Curious, Not Judgmental" >
<article>
<img src="assets/images/thumbnails/ted-lasso.png" alt="A web of characters from Ted Lasso with red and blue lines connecting each of them.">
<h2>Be Curious, Not Judgmental</h2>
<h3>Breaking down the dialogue behind Apple TV+'s hit series "Ted Lasso"
</h3>
</article>
</a>
<a id="guia" class="thumbnail" href="work/guia.html" aria-label="Guia">
<article>
<img src="assets/images/thumbnails/guia.png" alt="A pop-up window indicating that a Portuguese article is at the appropriate difficulty and interest level for this student.">
<h2>Guia</h2>
<h3>Helping learners engage with new languages more meaningfully</h3>
</article>
</a>
<a id="soundsight" class="thumbnail" href="work/soundsight.html" aria-label="SoundSight">
<article>
<img src="assets/images/thumbnails/soundsight.png" alt="A dim-lit scene from a horror movie in which an man reaches for a mysterious key. Closed captioning reads: Eerie music with jagged green lines on the left and right."">
<h2>SoundSight</h2>
<h3>Designing a better way to visually engage with sounds in video content for Deaf and Hard of Hearing users</h3>
</article>
</a>
<a id="buildagram" class="thumbnail" href="work/buildagram.html" aria-label="Buildagram">
<article>
<img src="assets/images/thumbnails/buildagram.png" alt="A young Asian boy and south Asian woman play-testing with colorful geometric pieces.">
<h2>Buildagram</h2>
<h3>Developing a constructionist kit to bridge the gap between geometry and creativity</h3>
</article>
</a>
<a id="fil-am" class="thumbnail" href="work/fil-am.html" aria-label="Fil-Am (noun)">
<article>
<img src="assets/images/thumbnails/fil-am.png" alt="A screenshot of a red, blue, and yellow GIF displaying two girls, the Golden Gate Bridge, and a bucket of chicken.">
<h2>Fil-Am (n)</h2>
<h3>Trying to define my relationship to my Filipino-American identity</h3>
</article>
</a>
<a id="linked-out" class="thumbnail" href="work/linked-out.html" aria-label="LinkedOut">
<article>
<img src="assets/images/thumbnails/linked-out.png" alt="An interface designed to resemble LinkedIn with a cover photo of a woman staring at herself in a mirror.">
<h2>LinkedOut</h2>
<h3>Re-focusing on the experiences and accomplishments that I'm most proud of</h3>
</article>
</a>
<a id="in-flux" class="thumbnail" href="work/in-flux.html" aria-label="In Flux">
<article>
<img src="assets/images/thumbnails/in-flux.png" alt="Cupped hands catching falling blue letters as they descend the height of the screen.">
<h2>In Flux</h2>
<h3>Reflecting on the values that have stuck with me and which have passed through</h3>
</article>
</a>
<!-- <div class="thumbnail" onclick="location.href='#';">
<img src="assets/images/thumbnails/tagged.png">
<h2>Tagged</h2>
<h3>Contextualizing my life through photos I've been tagged in on social media</h3>
</div> -->
</main>
<!-- Credit -->
<footer id="credit">
<p>Designed and developed by me! 2021</p>
</footer>
</body>
</html>