-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
438 lines (386 loc) · 17.5 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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Misha V. Stefanuk
</title>
<link rel="stylesheet" href="./styles/animate.css" />
<link rel="stylesheet" href="./styles/vars.css" />
<link rel="stylesheet" href="./styles/defaults.css" />
<link rel="stylesheet" href="./styles/content.css" />
<link rel="stylesheet" href="./styles/navigation.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="./styles/styleComponents.css" />
<link rel="icon" type="image" href="./media/images/favicon.ico" />
</head>
<body>
<div id="sideNav" class="sideNav invisible">
<div class="nav-menu-header">
<div class="menu-logo-container" id="menu-logo">
<a href="#one">
<img src="./media/images/mishaLogo.png" alt="Misha V. Stefanuk" class="menu-logo">
</a>
</div>
<div class="close" id="closeIcon">
<img src="./media/svg/closeButton.svg" />
</div>
</div>
<div class="sideNavContainer">
<div class="sideNavStack">
<a href="https://open.spotify.com/artist/6xbFMr1ARsMigJhrTO9P4u" class="navItems sideNavItems" id="navFive"
target="_blank">Spotify</a>
<a href="https://www.youtube.com/@Mishastefanuk" class="navItems sideNavItems" id="navFive"
target="_blank">YouTube (main)</a>
<a href="https://youtube.com/playlist?list=PLUIlJVpmilpfxH1RKegyBESGnB64cXF8Q"
class="navItems sideNavItems ytsub" id="navSeven" target="_blank">Live Music @ Home</a>
<a href="https://youtube.com/playlist?list=PLUIlJVpmilpc-TLSQPiUIezeeexqU6RoS"
class="navItems sideNavItems ytsub" id="navEight" target="_blank">American Songbook</a>
<a href="https://www.youtube.com/playlist?list=PLUIlJVpmilpd-_J3lZRZg-NdCCcg15nY1"
class="navItems sideNavItems ytsub" id="navNine" target="_blank">Solo Improvisations</a>
<a href="https://www.youtube.com/watch?v=Od07KJ2wZFo&list=PLUIlJVpmilpfxH1RKegyBESGnB64cXF8Q&pp=iAQB"
class="navItems sideNavItems ytsub" id="navTen" target="_blank">Guest Musicians</a>
<a href="https://www.melbay.com/Author/Default.aspx?AuthorId=37585" class="navItems sideNavItems" id="navOne"
target="_blank">Mel Bay Publications</a>
<a href="https://www.sheetmusicplus.com/publishers/misha-stefanuk-sheet-music/3004585?ac=1" target="_blank"
class="navItems sideNavItems" id="navTwo">SheetMusicPlus</a>
<a href="https://www.facebook.com/MishaStefanukGroup/" target="_blank" class="navItems sideNavItems"
id="navThree">Events & Booking</a>
<!-- <a href="https://bourbonbrothersband.com/shows" target="_blank" class="navItems sideNavItems"
id="navFour">Bourbon Brothers</a> -->
<!-- <a href="/booking.html" target="_blank" class="navItems sideNavItems" id="navFive">Booking</a> -->
<a href="./media/MishaStefanukResume.pdf" target="_blank" class="navItems sideNavItems" id="navSix">Resume</a>
</div>
<div class="socialMedia">
<a href="https://www.facebook.com/misha.stefanuk" target="_blank">
<img src="./media/svg/facebook.svg" />
</a>
<a href="https://www.instagram.com/mishastefanuk/" target="_blank">
<img src="./media/svg/instagram.svg" />
</a>
<a href="https://www.youtube.com/@Mishastefanuk" target="_blank">
<img src="./media/svg/youtube.svg" />
</a>
<a href="https://open.spotify.com/artist/6xbFMr1ARsMigJhrTO9P4u" target="_blank"><img
src="./media/svg/spotify.svg" </a>
<a href="mailto:[email protected]" target="_blank">
<img src="./media/svg/email.svg" />
</a>
</div>
</div>
<div class="navFooter">
<img src="./media/images/contactInfo.png" class="contact-info">
<a href="https://www.iheartcomponents.com/" target="_blank">
<div class="iheartcomponents">
Created by <img src="./media/images/iheartcomponents.png" class="iheart" />
</div>
</a>
</div>
</div>
<main id="mainDiv" class="snapScroll">
<header>
<nav class="topNav">
<a href="#one">
<div class="logo">
<img src="./media/images/mishaLogo.png" alt="Misha V. Stefanuk" class="logo-image">
</div>
</a>
<!-- top nav items -->
<div class="topNavContainer">
<a href="#two" class="navItems hiddenNav">About</a>
<a href="#three" class="navItems hiddenNav">Awards</a>
<a href="#four" class="navItems hiddenNav">Performance</a>
<a href="#five" class="navItems hiddenNav">Publication</a>
<a href="#six" class="navItems hiddenNav">Education</a>
<!-- <a href="#seven" class="navItems hiddenNav">Events</a> -->
</div>
<div class="menu" id="menu">
<a href="#">
<div class="sideNavButtonBox">
<img src="./media/svg/piano.svg" style="width: 30px" />
Media
</a>
</div></a></div>
</nav>
</header>
<!-- SECTION ONE -->
<section id="one" class="content-section section-one">
<div class="video-background desktop">
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="./media/videoDesktop.mp4" type="video/mp4">
</video>
</div>
<div class="video-background mobile">
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="./media/videoMobile.mov" type="video/mp4">
</video>
</div>
<div class="swipe-container">
<img src="./media/images/swipe.png" class="swipe" />
</div>
<div class="upDown">
<a href="#two">
<div class="next">
<img src="./media/svg/downArrow.svg" />
</div>
</a>
</div>
</div>
</section>
<!-- SECTION TWO -->
<section id="two" class="content-section section-two">
<div class="content-content">
<div class="content-text">
<h1>About</h1>
<p>A renowned jazz and classical pianist, organist, and composer, Misha Stefanuk has been a dynamic presence
in the music
industry since 1986. His contributions span over a hundred TV credits, including Good Morning America and
One Life to
Live. His versatility and ability to perform a wide range of music styles have made him a sought-after
pianist and
organist in Atlanta, leading to his roles at Glenn Memorial UMC and WCUMC.</p>
<p>As an acclaimed author, Misha's written over 25 music books, five of which have become bestsellers. His
book '100 Easy
Piano Classics' topped sheetmusicplus.com, while 'Jazz Piano Chords' remained a best-seller for Mel Bay
Publications for
12 years. His compositions have found their way into high-profile TV shows and even an on-screen organist
role in NBC's
Constantine.</p>
<p>Educated at Boston University and Moscow Conservatory, Misha is a decorated musician, voting member of the
Grammy’s with
awards like the Stereotypes and Nations Composition Competition in Poland. His prolific career encompasses
successful
performances, influential compositions, and significant contributions to music literature.</p>
</div>
</div>
<div class="upDown">
<a href="#three">
<div class="next">
<img src="./media/svg/downArrow.svg" />
</div>
</a>
<a href="#one">
<div class="previous">
<img src="./media/svg/upArrow.svg" />
</div>
</a>
</div>
</section>
<!-- SECTION THREE -->
<section id="three" class="content-section section-three">
<div class="content-content">
<div class="content-text">
<h1>Awards</h1>
<p>Misha Stefanuk is a highly regarded musician known for his outstanding achievements in the music industry.
His work "100
Easy Piano Classics" earned the top spot on SheetMusicPlus in 2017, similar to his "Christmas Easy Piano"
collection
which was the number one piano download in 2016. His skills were further recognized when he was named a
finalist in an
Easy Piano competition and won the 2016 arranging contest for the arrangement of "Mission Impossible" theme.
</p>
<p>Stefanuk's Jazz Piano works with Mel Bay Publications were bestsellers from 2002 to 2018, showcasing his
longevity in
the industry. His musical talents were also acknowledged on a global scale with an Artist of the Year
Absolute Winner,
IYMC International Competition, 2022, and he was named the Outstanding Pianist at the Lionel Hampton Jazz
Festival in
1997.</p>
<p>In addition to his professional success, Stefanuk had significant academic accomplishments. At Belmont
University, he
won the Concerto Aria Composition Competition and made the Dean’s List in 1993 and 1994. He also studied at
the Russian
Academy of Music, graduated from Moscow Conservatory School and won a special prize in a composition
competition in
Krakow, Poland in 1992.</p>
</div>
</div>
</div>
<div class="upDown">
<a href="#four">
<div class="next">
<img src="./media/svg/downArrow.svg" />
</div>
</a>
<a href="#two">
<div class="previous">
<img src="./media/svg/upArrow.svg" />
</div>
</a>
</div>
</section>
<!-- SECTION FOUR -->
<section id="four" class="content-section section-four">
<div class="content-content">
<div class="content-text">
<h1>Performance</h1>
<p>Misha Stefanuk has had a multifaceted musical career. Currently, he serves as the accompanist at Glen
Memorial UMC,
Decatur, GA and as the music director at Winters Chapel UMC, Atlanta, GA. Stefanuk also lends his talents as
a staff
organist at Earl Smith Strand Theatre in Marietta, GA and as an accompanist for renowned artists such as
Magdalena Wor.</p>
<p>In addition to these roles, Stefanuk has undertaken a variety of freelance projects. These include
performing as an
accompanist for artists like Laquita Mitchel and Tim Miller, as well as at the Atlanta Music Festival. He
has played at
several private events at high-end venues such as the Ritz Carlton and Four Seasons. He also served as an
organist for
two churches in New Jersey from 1999-2001.</p>
<p>Stefanuk's academic engagements include being a staff accompanist at the Blair School of Music, Vanderbilt
University.
He was also an organist at St. Augustine Episcopal Church, Nashville, TN and a pianist at both Washington
State
University and Belmont University School of Music. Additionally, Stefanuk led a modern jazz trio,
MooseKnows, and was a
pianist for Patephone in Moscow, Russia.</p>
</div>
</div>
<div class="upDown">
<a href="#five">
<div class="next">
<img src="./media/svg/downArrow.svg" />
</div>
</a>
<a href="#three">
<div class="previous">
<img src="./media/svg/upArrow.svg" />
</div>
</a>
</div>
</section>
<!-- SECTION FIVE -->
<section id="five" class="content-section section-five">
<div class="content-content">
<div class="content-text">
<h1>Publications</h1>
<p>Misha Stefanuk is an esteemed musician and composer with an extensive publication portfolio. His work
includes over 100
titles with Sheetmusicplus, two being best-sellers. He also collaborated with Mel Bay Publications, creating
impactful
works like "Jazz Piano Chords," "Jazz Piano Scales," and more, with three reaching best-seller status.</p>
<p>Additionally, Stefanuk's work is recognized by various platforms. He authored "Piano for Adults - European
Method" for
First Books Library, contributed to the American Theatre Organ Society Magazine, and wrote a monthly column
in Creative
Keyboard. Lulu Publications also published his works, including "Music for Organ, Volume 1," and "Jazz Piano
Lessons."</p>
<p>Stefanuk's influence extends to interviews and articles in diverse publications and media. He has been
featured in
"Russian Music Newspaper," "The Tennessean," "Belmont Vision," "Moscow-Pullman News," Vanderbilt Radio,
Nashville
Channel 5, and ClusterTV, Atlanta highlighting his contributions to music, especially in piano and jazz.</p>
</div>
</div>
</div>
<div class="upDown">
<a href="#six">
<div class="next">
<img src="./media/svg/downArrow.svg" />
</div>
</a>
<a href="#four">
<div class="previous">
<img src="./media/svg/upArrow.svg" />
</div>
</a>
</div>
</section>
<!-- SECTION SIX -->
<section id="six" class="content-section section-six">
<div class="content-content">
<div class="content-text">
<h1>Education</h1>
<p>Misha Stefanuk's early education began in Moscow, Russia, where he studied at Moscow Children’s Music
School and Special
German School. His music-focused studies continued at Moscow College of Improvised Music and Moscow
Conservatory School,
earning a BM in Improvisation and Musicology, respectively. He also spent time studying Nuclear Physics at
Moscow
Engineering Physics Institute.</p>
<p>In the United States, Stefanuk earned a Bachelor of Music from Belmont University in Nashville, TN in 1995.
That same
year, he attended the Skidmore Jazz Institute's summer school in Saratoga Springs, NY, and later undertook
Graduate
Studies in Composition at Washington State University.</p>
<p>Stefanuk concluded his educational journey with a Master of Music in Music Education from Boston University
in 2007. His
education was enriched by masterclasses with renowned musicians such as Kirill Volkov, John Stowell, Chick
Corea and
Tony Fenelon, contributing significantly to his music career.</p>
</div>
</div>
</div>
<div class="upDown">
<a href="#seven">
<div class="next">
<img src="./media/svg/downArrow.svg" />
</div>
</a>
<a href="#five">
<div class="previous">
<img src="./media/svg/upArrow.svg" />
</div>
</a>
</div>
</section>
<!-- SECTION SEVEN -->
<!-- <section id="seven" class="content-section section-seven">
<div class="content-content">
<div class="events">
<h1>Events</h1>
<div data-tockify-component="calendar" data-tockify-calendar="stefanukevents"></div>
<script data-cfasync="false" data-tockify-script="embed"
src="https://public.tockify.com/browser/embed.js"></script>
</div>
<div class="upDown">
<a href="#six">
<div class="next">
<img src="./media/svg/upArrow.svg" />
</div>
</a>
<a href="#one">
<div class="previous">
<img src="./media/svg/returnArrow.svg" />
</div>
</a>
</div>
</section> -->
</main>
<script>
// open side menu
document.getElementById("menu").addEventListener("click", (event) => {
event.stopPropagation(); // Prevent this event from bubbling up to the document
document.getElementById("sideNav").classList.add("open");
document.getElementById("mainDiv").classList.add("blur-effect");
});
// close side menu
const closeSideMenu = () => {
document.getElementById("sideNav").classList.remove("open");
document.getElementById("mainDiv").classList.remove("blur-effect");
}
// IDs array - close menu when one of these is clicked
const ids = ["closeIcon", 'navOne', 'navTwo', 'navThree', 'navFour', 'navFive', "one", "two", "three", "four", "five", "menu-logo"];
// add event listener to each ID
ids.forEach(id => {
const element = document.getElementById(id);
if (element) {
element.addEventListener("click", closeSideMenu);
}
});
// Close menu when clicking outside of it
document.addEventListener('click', (event) => {
const sideNav = document.getElementById("sideNav");
const isClickInsideMenu = sideNav.contains(event.target);
const isMenuButton = event.target.id === 'menu';
if (!isClickInsideMenu && !isMenuButton) {
closeSideMenu();
}
});
</script>
</body>
</html>