-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnotebook.html
146 lines (142 loc) · 12.3 KB
/
notebook.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/html5reset.css">
<link rel="stylesheet" href="css/style.css">
<title>Serena's Portfolio</title>
</head>
<body>
<div class="skip"><a href="#main">Skip to Main Content</a></div>
<header>
<nav>
<ul>
<li><a href = "index.html" >Home</a></li>
<li><a href = "review.html">Reviews</a></li>
<li class="active"><a href = "notebook.html">Longform Writing</a></li>
</ul>
</nav>
</header>
<main id = "main">
<h1>Notebook Samples</h1>
<p>Filter by: </p>
<div class="container">
<div class="controls">
<button type="button" id='all-button' data-filter="all">All</button>
<button type="button" id='tv-button' data-filter=".tv">TV</button>
<button type="button" id='music-button' data-filter=".music">Music</button>
<button type="button" id='film-button' data-filter=".film">Film</button>
<button type="button" id='books-button' data-filter=".books">Books</button>
<button type="button" id='digital-button' data-filter=".digital-culture">Digital Culture</button>
<button type="button" id="special-button" data-filter=".favorites">Serena's Favorites</button>
</div>
<p id="hover" class="special">Hover over or tab to any of the images below to find out why I love these pieces.</p>
<div class="targets">
<div class="notebook" id="notes">
<figure class="mix tv" id="sitcom">
<a href="https://www.michigandaily.com/arts/b-side/not-your-average-family-sitcom-pilot/" target="_blank"><img src="images/sitcom.webp" alt="Girl in front of a broken laptop screen of a family"></a>
<a href="https://www.michigandaily.com/arts/b-side/not-your-average-family-sitcom-pilot/" target="_blank"><figcaption>Not-your-average family sitcom pilot</figcaption></a>
</figure>
<figure class="mix digital-culture film tv" id="luke">
<a href="https://www.michigandaily.com/arts/b-side/this-is-not-the-luke-skywalker-youre-looking-for/" target="_blank"><img src="images/luke.webp" alt="Side by side of Luke Skywalker and his deepfake replica"></a>
<a href="https://www.michigandaily.com/arts/b-side/this-is-not-the-luke-skywalker-youre-looking-for/" target="_blank"><figcaption>This is not the Luke Skywalker you’re looking for</figcaption></a>
</figure>
<figure class="mix film" id="spielberg">
<a href="https://www.michigandaily.com/arts/film/spielbergs-the-fabelmans-through-the-looking-glass/" target="_blank"><img src="images/the fabelmans.JPG" alt="Sammy in front of a mirror with a film camera from the film The Fabelmans"></a>
<a href="https://www.michigandaily.com/arts/film/spielbergs-the-fabelmans-through-the-looking-glass/" target="_blank"><figcaption>Spielberg’s 'The Fabelmans' through the looking glass </figcaption></a>
</figure>
<figure class="mix tv" id="xmas">
<a href="https://www.michigandaily.com/tv/all-i-want-for-christmas-is-cable-tv/" target="_blank"><img src="images/xmas.webp" alt="Stack of old TV sets with classic Christmas films on the screens"></a>
<a href="https://www.michigandaily.com/tv/all-i-want-for-christmas-is-cable-tv/" target="_blank"><figcaption>All I want for Christmas is cable TV</figcaption></a>
</figure>
<figure class="mix books tv film favorites" id="image1">
<a href="https://www.michigandaily.com/arts/b-side/on-nancy-drew-scooby-doo-and-the-mysteries-of-childhood/" target="_blank"><img src="images/little-me.webp" alt="Little girl in front of a car"></a>
<a href="https://www.michigandaily.com/arts/b-side/on-nancy-drew-scooby-doo-and-the-mysteries-of-childhood/" target="_blank"><figcaption>On Nancy Drew, Scooby-Doo and the mysteries of childhood</figcaption></a>
</figure>
<figure class="mix tv" id="thank">
<a href="https://www.michigandaily.com/tv/thankful-for-thanksgiving-tv/" target="_blank"><img src="images/thanksgiving.webp" alt="Monica from the TV show Friends with a turkey stuck on her head"></a>
<a href="https://www.michigandaily.com/tv/thankful-for-thanksgiving-tv/" target="_blank"><figcaption>Thankful for Thanksgiving TV</figcaption></a>
</figure>
<figure class="mix tv" id="teen">
<a href="https://www.michigandaily.com/tv/the-fatal-flaw-of-teen-tv/" target="_blank"><img src="images/teen-tv.webp" alt="Bulletin board of images from famous teen TV shows"></a>
<a href="https://www.michigandaily.com/tv/the-fatal-flaw-of-teen-tv/" target="_blank"><figcaption>The fatal flaw of teen TV</figcaption></a>
</figure>
<figure class="mix books tv" id="haunt">
<a href="https://www.michigandaily.com/tv/why-the-haunting-of-hill-house-is-a-perfect-adaptation/" target="_blank"><img src="images/hill-house.webp" alt="Haunted House"></a>
<a href="https://www.michigandaily.com/tv/why-the-haunting-of-hill-house-is-a-perfect-adaptation/" target="_blank"><figcaption>Why 'The Haunting of Hill House' is a perfect adaptation</figcaption></a>
</figure>
<figure class="mix film" id="dune">
<a href="https://www.michigandaily.com/arts/b-side/dune-isnt-worthy-of-your-praise/" target="_blank"><img src="images/dune.webp" alt = "Wanted poster of the film Dune"></a>
<a href="https://www.michigandaily.com/arts/b-side/dune-isnt-worthy-of-your-praise/" target="_blank"><figcaption>'Dune' isn't worthy of your praise</figcaption></a>
</figure>
<figure class="mix film tv" id="spooky">
<a href="https://www.michigandaily.com/tv/six-spooky-horror-comedies-to-kick-off-october-right/" target="_blank"><img src="images/horror-comedy.webp" alt="Girl smoking in front of a burning house from the film Ready or Not"></a>
<a href="https://www.michigandaily.com/tv/six-spooky-horror-comedies-to-kick-off-october-right/" target="_blank"><figcaption>Six spooky horror-comedies to kick off October right</figcaption></a>
</figure>
<figure class="mix digital-culture film" id="bodies">
<a href="https://www.michigandaily.com/arts/b-side/bodies-bodies-bodies-internet-gossip-and-pseudo-intellectual-arts-criticism/" target="_blank"><img src="images/gossip.webp" alt="Girl reading a text message"></a>
<a href="https://www.michigandaily.com/arts/b-side/bodies-bodies-bodies-internet-gossip-and-pseudo-intellectual-arts-criticism/" target="_blank"><figcaption>'Bodies Bodies Bodies,' internet gossip and pseudo-intellectural arts criticism</figcaption></a>
</figure>
<figure class="mix music favorites" id="image2">
<a href="https://www.michigandaily.com/arts/the-concert-the-sun-and-the-holy-spirit-of-lordes-solar-power/" target="_blank"><img src="images/lorde.webp" alt="Silhouette of Lorde"></a>
<a href="https://www.michigandaily.com/arts/the-concert-the-sun-and-the-holy-spirit-of-lordes-solar-power/" target="_blank"><figcaption>The concert, the sun and the holy spirit of Lorde’s 'Solar Power'</figcaption></a>
</figure>
<figure class="mix tv digital-culture" id="netflix">
<a href="https://www.michigandaily.com/arts/whether-you-realize-it-or-not-netflix-is-just-another-social-media-app%ef%bf%bc/" target="_blank"><img src="images/netflix.webp" alt="A piece of cake designed as a Netflix TV screen"></a>
<a href="https://www.michigandaily.com/arts/whether-you-realize-it-or-not-netflix-is-just-another-social-media-app%ef%bf%bc/" target="_blank"><figcaption>Whether you realize it or not, Netflix is just another social media app</figcaption></a>
</figure>
<figure class="mix film" id="romcom">
<a href="https://www.michigandaily.com/arts/why-i-hate-classic-rom-com-endings/" target="_blank"><img src="images/rom-com.webp" alt="Suitcase of items from Breakfast at Tiffany's"></a>
<a href="https://www.michigandaily.com/arts/why-i-hate-classic-rom-com-endings/" target="_blank"><figcaption>Why I hate classic rom-com endings</figcaption></a>
</figure>
<figure class="mix tv">
<a href="https://www.michigandaily.com/tv/elite-short-stories-guzman-caye-rebe-and-finding-comedy-where-you-least-expect-it/" target="_blank"><img src="images/elite.webp" alt="Cast of the TV Show Elite"></a>
<a href="https://www.michigandaily.com/tv/elite-short-stories-guzman-caye-rebe-and-finding-comedy-where-you-least-expect-it/" target="_blank"><figcaption>'Elite' and finding comedy where you least expect it</figcaption></a>
</figure>
<figure class="mix music favorites" id="image3">
<a href="https://www.michigandaily.com/arts/phoebe-bridgers-knows-the-end-but-how-do-we-deal-with-the-ending/" target="_blank"><img src="images/phoebe.webp" alt="Ghost with an I know the end sign"></a>
<a href="https://www.michigandaily.com/arts/phoebe-bridgers-knows-the-end-but-how-do-we-deal-with-the-ending/" target="_blank"><figcaption>Phoebe Bridgers knows the end, but how do we deal with the ending?</figcaption></a>
</figure>
</div>
</div>
</div>
<br>
<div class="hover-texts">
<p id="nancy" class="special">I've always felt that my love for art and passion for writing about it originated in the golden
memories I have of books and movies and TV shows that I absorbed during childhood. This piece takes a deep dive on those
influences, especially in regards to the presence of the mystery genre in the media I read and watch in my ongoing, fruitless
attempt to perpetually follow in my sister's footsteps.
</p>
<p id="lorde" class="special">I wrote this very lengthy piece on a bit of a spiritual awakening I had at a Lorde concert, and
the impact that her music has had on my life through the ebbs and flows of my teenage-dom. Maybe it's because I wrote this
right around the summer solstice and because it's about the "Solar Power" tour, but this one just radiates good summer energy
for me, and is full of perfectly luminous memories.
</p>
<p id="phoebe" class="special">This is the first piece I ever wrote for The Michigan Daily, one that will always be very near
and dear to my heart. It's one of my most raw and vulnerable pieces of writing, dissecting one of my favorite songs,
Phoebe Bridgers' "I Know the End," during a period of time where it felt like not only was my life falling apart, but the
rest of the world too.
</p>
</div>
</main>
<footer>
<p>Serena Irani © 2023</p>
</footer>
<script src="./mixitup/demos/mixitup.min.js"></script>
<script>
var containerEl = document.querySelector('.targets');
const animation_off = window.matchMedia(`(prefers-reduced-motion: reduce)`) === true || window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true;
if(animation_off){
var mixer = mixitup(containerEl, {
animation: {
enable: false
}
});
} else {
var mixer = mixitup(containerEl);
}
</script>
<script src="./js/special.js"></script>
</body>
</html>