-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
219 lines (192 loc) · 11.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Sebestyén"/>
<meta name="description" content="My portfolio of videos">
<title>Sebestyén Sandor's Video Portfolio</title>
<style>
body {
font-family: Arial, sans-serif;
color: #fff;
background-color: #333;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
height: 100vh;
}
h1, h2, h3, h4 {
text-align: center;
}
#about_me_text {
margin: 0 360px;
font-size: 20px;
}
#main_page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#portfolio_content {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
#portfolio_content h3 {
background-color: #8aa60d88;
padding: 10px;
border-radius: 5px;
cursor: pointer;
display: flex; /* Use flexbox to center text vertically and horizontally */
align-items: center; /* Center text vertically */
justify-content: center; /* Center text horizontally */
}
.project_page {
display: none;
}
#back_to_main_page_button {
cursor: pointer;
background-color: #8aa60d88;
border-radius: 5px;
display: none;
align-items: center;
justify-content: center;
position: absolute; /* Position absolutely */
top: 5%; /* Adjust the distance from the top */
left: 5%; /* Adjust the distance from the left */
font-size: 18px; /* Set the font size */
padding: 10px;
}
#project_pages h4 {
position: absolute;
top: 15%;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
text-decoration: underline;
text-decoration-color: #8aa60d88;
text-decoration-thickness: 3px;
}
.project_description,
.roles,
.project_link {
position: relative;
font-size: 20px;
margin-bottom: 10px;
display: block;
padding-left: 200px; /* Add padding to the left */
padding-right: 200px; /* Add padding to the right */
}
.project_description {
top: 0;
}
.roles {
top: 50px;
}
.project_link {
top: 100px;
}
</style>
</head>
<body>
<div id="main_page">
<h1 id="welcome_text">Welcome to my Portfolio of Videos!</h1>
<h2 id="about_me">About Me</h2>
<p id="about_me_text">
I'd like to keep this section as brief as possible so that more time may be spent enjoying the content below. My name is Sebestyén Sandor and I have two passions in this life. The first is making movies and the second is playing music. I'm absolutely obsessed with both and could do either forever and never get bored.
</p>
<p style="font-size: 16px;"><b>Please feel free to contact me: </b>[email protected]</p>
<h2 id="portfolio">My Portfolio</h2>
<div id="portfolio_content">
<h3 id="everythings_shit_button">Everything's Shit</h3>
<h3 id="shanes_final_assignment_button">Shane's Final Assignment</h3>
<h3 id="pitt_student_survey_button">Pitt Student Survey</h3>
<h3 id="peter_bark_button">Peter Bark</h3>
<h3 id="one_pager_button">One Pager</h3>
</div>
</div>
<div id="project_pages">
<h2 id="back_to_main_page_button">Back to Main Page</h2>
<div id="everythings_shit_page" class="project_page">
<h4>Everything's Shit</h4>
<p class="project_description"><b>Description:</b> This was my senior year capstone project at the University of Pittsburgh. I originally had another idea which was a mockumentary based around an amateur frisbee golf athlete, but the actor who I based the character on couldn't commit the time to the project so I had to quickly think of something that only involved my time - something quite challenging in a medium that usually requires teamwork. I had to come up with creative ways to make something that looks good and was engaging with the limitations that come with making a short film alone. For example, there was no way I could move the camera and be infront of it at the same time. I enjoyed making this project and am proud of it. The most important thing I learned from producing this is to get more angles than you think you need because I find the Chapter 2 of this short quite repetitive.</p>
<p class="roles"><b>Roles:</b> Creator, Director, Actor, Editor</p>
<p class="project_link"><b>Link:</b> <a href="https://www.youtube.com/watch?v=eJGqoby5Ni0&t=3s" target="_blank">https://www.youtube.com/watch?v=eJGqoby5Ni0&t=3s</a></p>
</div>
<div id="shanes_final_assignment_page" class="project_page">
<h4>Shane's Final Assignment</h4>
<p class="project_description"><b>Description:</b> This is the project where I learned to produce videos with the mind of an editor. If I want a certain sequence of frames, those are the shots I need to capture with the camera. I picture the final scene in my head and work backwards from there. Editing became my favorite part of the film making process. I remember editing the final sequence of this short and having to stop because I was overwhelmed with joy at the realization that I have the capacity to express myself through film. I got exactly what was in my head, and had been in my head for months, out. It felt incredibly freeing (I actually got over my ex in that moment).</p>
<p class="roles"><b>Roles:</b> Creator, Director, Editor</p>
<p class="project_link"><b>Link:</b> <a href="https://www.youtube.com/watch?v=XlNMt0IPeL4" target="_blank">https://www.youtube.com/watch?v=XlNMt0IPeL4</a></p>
</div>
<div id="pitt_student_survey_page" class="project_page">
<h4>Pitt Student Survey</h4>
<p class="project_description"><b>Description:</b> This was just a fun group project we did in class. I took a mockumentary class my second semester at Pitt after I had barely passed my neuro class first semester. I quickly realized I'd be miserable if I did 4 years of intense science so I tried something else. I've always enjoyed watching the mockumentaries the most as I feel my thoughts are a little too meta for my own good and the mockumentary is the pinnacle format for meta humor. The funniest jokes are the slight nods to and looks a character gives the audience. Spending time in the mockumentary class exposed me to film ideas I became really interested in. Just to give a couple of brief examples, the director can show us anything they wish and present it as the truth, it's ultimately up to us whether we believe what we're being spoonfed. What is a director deliberately omitting? What's right next to the frame that they're not showing us? What strings is the director pulling to give us a good show?</p>
<p class="roles"><b>Roles:</b> Actor</p>
<p class="project_link"><b>Link:</b> <a href="https://www.youtube.com/watch?v=QrIbCimNc74" target="_blank" >https://www.youtube.com/watch?v=QrIbCimNc74</a></p>
</div>
<div id="peter_bark_page" class="project_page">
<h4>Peter Bark</h4>
<p class="project_description"><b>Description:</b> This was a group project we did in class. If I remember correctly, each member of the group had a different role in production, but each group member had to edit their own rendition using the same footage. I am a strong believer that music decides that atmosphere of the scene, something that holds true for the end of this short. There isn't a sequence I've thought of where the soundtrack isn't playing in my head in the background. I still really like this song and I have another sequence I want to see on a screen and instead of in my head that has this song playing through it, it'll be part of a bigger passion project I'm working on.</p>
<p class="roles"><b>Roles:</b> Actor, Editor</p>
<p class="project_link"><b>Link:</b> <a href="https://www.youtube.com/watch?v=7rS5xnEnw1w" target="_blank">https://www.youtube.com/watch?v=7rS5xnEnw1w</a></p>
</div>
<div id="one_pager_page" class="project_page">
<h4>Warhol One Pager</h4>
<p class="project_description"><b>Description:</b> I was part of an film internship where every member received the same one page script and we all pulled a random genre out of a hat. This was my attempt at the comedic genre. I had a great time making this with the help of my younger brother. I was at home in Budapest when I was filming this so I had limited access to equipment. During the production for this project, I learned there's a way to solve every potential problem that may arise. There's always a way to get the shot, it may take some time and thinking, but there's always a way.</p>
<p class="roles"><b>Roles:</b> Director, Actor, Editor</p>
<p class="project_link"><b>Link:</b> <a href="https://www.youtube.com/watch?v=FbiTrZYKlJs" target="_blank">https://www.youtube.com/watch?v=FbiTrZYKlJs</a></p>
</div>
</div>
</body>
<script>
const main_page = document.getElementById("main_page");
const project_pages = document.getElementById("project_pages");
const back_to_main_page_button = document.getElementById("back_to_main_page_button");
const everythings_shit_button = document.getElementById("everythings_shit_button");
const shanes_final_assignment_button = document.getElementById("shanes_final_assignment_button");
const pitt_student_survey_button = document.getElementById("pitt_student_survey_button");
const peter_bark_button = document.getElementById("peter_bark_button");
const one_pager_button = document.getElementById("one_pager_button");
const everythings_shit_page = document.getElementById("everythings_shit_page");
const shanes_final_assignment_page = document.getElementById("shanes_final_assignment_page");
const pitt_student_survey_page = document.getElementById("pitt_student_survey_page");
const peter_bark_page = document.getElementById("peter_bark_page");
const one_pager_page = document.getElementById("one_pager_page");
back_to_main_page_button.addEventListener(`click`, () => {
project_pages.style.display=`none`;
main_page.style.display=`flex`;
});
everythings_shit_button.addEventListener(`click`, () => {
showPage(everythings_shit_page);
});
shanes_final_assignment_button.addEventListener(`click`, () => {
showPage(shanes_final_assignment_page);
});
pitt_student_survey_button.addEventListener(`click`, () => {
showPage(pitt_student_survey_page);
});
peter_bark_button.addEventListener(`click`, () => {
showPage(peter_bark_page);
});
one_pager_button.addEventListener(`click`, () => {
showPage(one_pager_page);
});
function showPage(page) {
project_pages.style.display=`block`;
main_page.style.display=`none`;
everythings_shit_page.style.display=`none`;
shanes_final_assignment_page.style.display=`none`;
pitt_student_survey_page.style.display=`none`;
peter_bark_page.style.display=`none`;
one_pager_page.style.display=`none`;
page.style.display=`block`;
back_to_main_page_button.style.display=`flex`;
}
</script>
</html>