-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
225 lines (139 loc) · 11.3 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
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
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html lang="en">
<head>
<!--Go ahead and fill in the blank in <title>I am...</title> (see just below). The <title> will appear in your document's browser tab-->
<title>I am...</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--Designers refer to this next section as a "Hero Image." The hero image is styled on the style.css page by calling a "class." To replace the hero image, simply place a .jpg file in the same file folder (directory) as this project and name it "hero.jpg." Alternatively, if you are working with a .png, you will need to open the style.css file using your text editor, find the "hero-image" class and change the file type from ".jpg" to ".png."" Browsers will only work with .jpg, .jpeg, or .png images. Since hero images need to stretch across the screen, typically you will want to select an image 1200px in width to allow quick load time yet avoid pixilation.-->
<div class="hero-image">
<div class="hero-text">
<h1>I am...</h1>
<h2>Who I Say I Am.</h2>
</div>
</div>
<div class="textblock" style="text-align: left">
<h1>Alex Ocampo</h1>
<br>
<h2>Field of Study</h2>
<h3>I'm a senior double-majoring in Linguistics and Digital Narrative & Interactive Design. I transferred to the University of Pittsburgh in Fall 2021 from Bard College at Simon's Rock, where I received my Associate's Degree. I originally enrolled at Pitt for Linguistics with a Computer Science minor, and after taking a few DNID courses as GenEds I realized how much I loved analyzing media, exploring creative processes, and just <em>making stuff</em> with computers. Currently, I work at Pitt's Speech and Neural Systems Lab and can see myself happily pursuing computational linguistics as a career. It's probably what's gonna happen. But as I experience more and more of the expressive and outward-facing possibilities of these digital tools, I wouldn't be surprised if I completely switched up my career path some day.</h3>
</div>
<!--Replace the images here. You can also control max-image width%. Keep your file names simple, don't use spaces, and be case sensitive). Be sure to add alt="text." Visually impaired individuals using screen readers rely on alt="text" to describe pictures to them. Describe your image as clearly and succinctly as possible.-->
<img src="ocampo_logo.jpg" alt="my logo" class="center-img" style="width:30%;"></img>
<!--What experience do you have to leverage in this class? Are you a writer, are you a maker, are you a thinker or critic? What is your medium/media? What interests you about that medium/those media? What media/skills do you wish to learn more about/pursue in this class?-->
<div class="textblock" style="text-align: left">
<h2>Knowledge, Tools, and Skills</h2>
<h3>I have a lot of surface knowledge across a variety of media; I practice digital illustration, have fair literacy in programming (mostly in Python), took Composing Digital Media last semester, and know my way around some Adobe programs & their free equivalents from a variety of other classes. Dominantly, though, my excitement lies in media analysis and critically considering how these methods inform our perceptions. I'd like to imagine those interests are evident in other projects I've made. Ultimately I am most comfortable with (synthesized) visual & written media, and would like to spend my time exporing their intersections, maybe through media like webcomics, zines, and websites.</h3>
</div>
<!--Quick fact: Did you know "Lorem ipsum," the fill text used in this web template, was hacked out of Cicero's "De finibus bonorum et malorum"? Developers made it non-sensical, so don't bother with Google Translate.-->
<div>
<img src="self_portrait_old.png" alt="self portrait of Alex Ocampo" class="center-img" style="max-width:50%;">
</div>
<!--So, what exactly are you into? Take some time to explain your interest...what you will pursue in this class. What is it, define it, why is it important/significant, how do you intend to approach this subject matter?-->
<div class="textblock" style="text-align: left">
<h2>Potential Project</h2>
<h3>I'm not sure what the exact topic will be yet, but I am interested in exploring how the ways in which we communicate affect our worldviews. It will probably be a project centered around self-talk on the Internet and the dominant ways people describe themselves on social media. What are the trends, key terms, and metaphors we use when we talk about ourselves online? I'm not entirely sure what I intend to prove yet but there is certainly something there. Our performances of ourselves are so constantly public and influenced by, well, <em>influencers</em>, and I wonder what that might mean for our generation. I also wonder what place fiction works may have in this class as a tool to highlight such subjects. I would probably prefer this to culminate as a webcomic or narrative website, ultimately some piece of media that can exclusively exist online.</h3>
</div>
<div class="blockquote" style="text-align: center">
<h2>"[...] metaphor is pervasive in our everyday life, not just in language but in thought and action." —Metaphors We Live By (Lakoff, Johnson)</h2>
</div>
<div>
<img src="metaphors_we_live_by.jpg" alt="book cover of Metaphors We Live By" class="center-img" style="max-width:50%;">
</div>
<!--Let's talk a little about the future. After school what kind of job or career would you like to pursue? What is your reasoning for going on this path? How might it connect to all of these prior elements-field of study, home and family, interests and activities? How might the work we do in this space help you to realize this future?-->
<div class="textblock" style="text-align: left">
<h2>In the Future</h2>
<h3>As I mentioned, I plan on going into linguistic research in the future, probably pursuing higher education somewhere along the line. However, I do have wishes to continue creative ventures even if they stay relegated as a hobby. Ultimately I just want to do work that asks and attempts to answer questions about how we as individuals think and behave, and consider what that means on a broader scale. Whether that comes from academic inquiry or artistic introspection is yet to be seen.</h3>
</div>
<div>
<img src="pc_on_fire.jpg" alt="describe the image HERE for accessibility purposes" class="none" style="max-width:100%; margin-left:auto; margin-right:auto;">
</div>
<div id="logo">
<img src="fuego.jpg" alt="image of fire" style="width:25%;">
<p><b>generated by <a href="https://pitt-fuego.github.io/Pitt-Fuego-Coding-Tools/">Pitt Fuego</a></b></p>
<p><em>Why make a spark when you can light a fire?</em></p>
</div>
</body>
</html>
<!--Looking to add components? You've come to the right place. Copy and paste Code Snippets and add to the body section. Adjust class properties on style.css.
***Add Text Block***
(Format textblock using inline styling: text-align: left, center, justify, right; Format text: Italics: <em>italics</em>; Bold: <b>bold</b>; Link Website: <a href="link">LinkName</a>; Link Asset: <a href=filename.pdf>FileName</a>; Line Breaks: <br></br>; Tip for composing longer content: use <h3> and <p> instead of <h2> and <h3>)
<div class="textblock" style="text-align: left">
<h2>Header</h2>
<h3>We recommend using our mobile-ready text sizing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3>
</div>
***Add Block Quote***
(Format text: Italics: <em>italics</em>; Bold: <b>bold</b>. For more stylings, find blockquote class on style.css)
<div class="blockquote" style="text-align: center">
<h2>Excepteur sint occaecat cupidatat non proident!</h2>
</div>
***Add Bulleted Points to Textblock***
(Change <ul></ul> to <ol></ol> to change from unordered list to ordered list. For more stylings, find the ul/li classes on style.css)
<div class= "ul">
<li>first</li>
<li>second</li>
<li>third</li>
</div>
-or- (try a nested list)
<div class="ul">
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</div>
***Add a Button***
(Clearly label button for accessibility purposes. If this is not possible, include: aria-label=”label for accessibility purposes.” For more stylings, find button class on style.css)
<div class="buttonbox">
<a href="https://pitt-fuego.github.io/Pitt-Fuego-Coding-Tools/" class="button" aria-label="">Button</a>
</div>
***Embed YouTube Video***
<div class="video">
<div class="video-container">
<<iframe width="560" height="315" src="https://www.youtube.com/embed/PhPLTpqG0pU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>>
</div>
<p>Add a caption.</p>
</div>
***Add a Standard Image***
(Control image properties with inline width value.)
<img src="fuego.jpg" alt="describe the image HERE for accessibility purposes" style="width:30%;" class="center-img">
<p style="text-align: center"><em>Add a caption.</em></p>
***Add Image Block with Padding and Caption*** (Control image properties with inline width value.)
<div class="imgageblock">
<img src="fuego.jpg" alt="describe the image HERE for accessibility purposes" style="width:100%;">
<p style="text-align: center"><em>Add a caption.</em></p>
</div>
***Add a Photo Grid***
<div class="photogrid">
<div class="row">
<div class="column">
<img src="pgrid1.jpg" alt="describe the image HERE for accessibility purposes">
<img src="pgrid2.jpg" alt="describe the image HERE for accessibility purposes">
</div>
<div class="column">
<img src="pgrid3.jpg" alt="describe the image HERE for accessibility purposes">
<img src="pgrid4.jpg" alt="describe the image HERE for accessibility purposes">
</div>
<div class="column">
<img src="pgrid5.jpg" alt="describe the image HERE for accessibility purposes">
<img src="pgrid6.jpg" alt="describe the image HERE for accessibility purposes">
</div>
</div>
<p><em>Add a caption.</em></p>
</div>
***Add a Parallax Window***
(To adjust window, find parallax class on style.css)
<div class="parallax"></div>
***Add a Copyright Footer***
<div id="footer">
<p>Copyright Your Name, Year.</p>
</div>
***Need something that's not here? Then you probably don't need it. But okay...go to w3 Schools***
Looking to use GitHub to publish this webtext to the internet? Follow the directions on the repository READ.ME.
Peace and love only, Stephen Quigley, University of Pittsburgh, 2021.-->