Compare commits
10 Commits
ab7d89e90f
...
408833b8c1
| Author | SHA1 | Date | |
|---|---|---|---|
|
408833b8c1 | ||
|
|
63b4721565 | ||
|
|
c2387d1c23 | ||
|
|
1d71fbe774 | ||
|
|
432db443ad | ||
|
|
f4d142b79d | ||
|
|
474936057a | ||
|
|
90aa4fe4ce | ||
|
|
0ad2c404ce | ||
|
|
5a188cd994 |
Binary file not shown.
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 104 KiB |
BIN
images/partwriting_banner.jpg
Normal file
BIN
images/partwriting_banner.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 191 KiB |
BIN
images/store_bachanalysis_thumb.jpg
Normal file
BIN
images/store_bachanalysis_thumb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
images/store_boulanger_thumb.jpg
Normal file
BIN
images/store_boulanger_thumb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
images/store_chordprogressions_thumb.jpg
Normal file
BIN
images/store_chordprogressions_thumb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
images/store_partwriting_thumb.jpg
Normal file
BIN
images/store_partwriting_thumb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
BIN
images/store_thematic_thumb.jpg
Normal file
BIN
images/store_thematic_thumb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
25
index.html
25
index.html
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
|
||||
@ -44,7 +44,8 @@
|
||||
<a href="#portfolio">portfolio</a>
|
||||
<a href="#contact">contact</a>
|
||||
<a href="#bio">bio</a>
|
||||
<a href="blog.jjayberthumemusic.com">blog</a>
|
||||
<a href="/store/">store</a>
|
||||
<a href="#" data-tooltip="Coming soon!">blog</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
@ -52,8 +53,8 @@
|
||||
<section>
|
||||
<h1>Music for Games</h1>
|
||||
<p>Creating aesthetically and emotionally compelling music for video games, deeply integrated into the player experience.</p>
|
||||
<p>Helping your game’s story by crafting an original sound world with memorable melodies, identifying characters, locations, and plot points.</p>
|
||||
<p>Accommodating all of the musical needs of your project, whether dynamic music elements that react to the player’s actions, music synced to a narrative cutscene, or seamlessly looping background music immersing the player beyond merely sonic wallpaper.</p>
|
||||
<p>Helping your game’s story by crafting an original sound world with memorable melodies identifying characters, locations, and plot points.</p>
|
||||
<p>Accommodating all of the musical needs of your project, whether dynamic music components that react to the player’s actions, music synced to a narrative cutscene, or seamlessly looping background music immersing the player beyond merely sonic wallpaper.</p>
|
||||
</section>
|
||||
</article>
|
||||
<article id="portfolio">
|
||||
@ -70,22 +71,28 @@
|
||||
<article id="contact">
|
||||
<h1>Contact</h1>
|
||||
<section>
|
||||
<p>Contact me at <a href="email:contact@jjayberthumemusic.com">contact@jjayberthumemusic.com</a> for a free 30-second musical demo custom-composed to your specifications.</p>
|
||||
<p>Get in touch with me at <a href="email:contact@jjayberthumemusic.com">contact@jjayberthumemusic.com</a>. I can compose a free 30-second musical demo to your specifications so you can see if I’m the right fit for your project.</p>
|
||||
<p><img src="images/berthume_banner.jpg"></p>
|
||||
<div class="social">
|
||||
<a href="https://soundcloud.com/jjayberthume">SoundCloud</a>
|
||||
<a href="https://www.youtube.com/user/JJBerthume/">YouTube</a>
|
||||
<a href="https://www.patreon.com/jjayberthume">Patreon</a>
|
||||
<a href="https://www.facebook.com/JJayBerthumeMusic/">Facebook</a>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
<article id="bio">
|
||||
<h1>Bio</h1>
|
||||
<section>
|
||||
<p>I attended Furman University for a BA in music composition and a minor in jazz piano. My studies included jazz (solo, combo, and performing piano in the Furman University Large Jazz Ensemble), ethnomusicology, music technology, baroque and renaissance counterpoint, classical piano instruction, orchestration, classical and contemporary harmony, and form & analysis. I was music director of The Bell Tower Boys for two semesters, was awarded the Mattie Hip Cunningham Scholarship for the most promising rising senior, was inducted into the Phi Eta Sigma honorary music society, and was awarded Best Freshman Essay for my essay “The Morality of Music.”</p>
|
||||
<p>Before attending Furman, I wrote over five hours of music which included projects such as Seven Days to Die, World War Tanks, Super Squares, Can You See the Stars, and Heir. My concert works have been performed by the Appalachian Wind Symphony, the Furman Symphony Orchestra, the Furman University Percussion Ensemble, Buncombe Street Methodist and Earle Street Baptist churches, and The Twelve Peers.</p>
|
||||
<p>Based in Greenville, SC, I currently write music for video games and the concert hall, in addition to composing a musical for the Misfit Theatre Company and working on an original jazz album with percussionist Brett Ensley. I also maintain a music composition YouTube channel of 17,000 subscribers, teach privately online, and co-host a musical podcast called Keycast with Louie Taylor.</p>
|
||||
<p>An avid lover of video games and anime since my early childhood, I am ensconced in the video game industry as both a consumer and creator.</p>
|
||||
<p>Before attending Furman, I wrote over five hours of music which included projects such as Seven Days to Die, World War Tanks, Super Squares, Can You See the Stars, and Heir. My concert works have been performed by the Appalachian Wind Symphony, the Furman Symphony Orchestra, the Furman Percussion Ensemble, Buncombe Street Methodist and Earle Street Baptist churches, and The Twelve Peers.</p>
|
||||
<p>Based in Greenville, SC, I currently write music for video games and the concert hall. I am currently composing a musical for the Misfit Theatre Company and working on an original jazz album with percussionist Brett Ensley. I also maintain a music composition YouTube channel of 17,000 subscribers, teach privately online, and co-host a musical podcast called Keycast with Louie Taylor.</p>
|
||||
<p>An avid lover of video games and anime since my early childhood, I am ensconced in the video game industry as both a consumer and a creator.</p>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
<footer>
|
||||
<p><em>Copyright ©2019 JJay Berthume. All rights reserved.</em></p>
|
||||
<p><em>Copyright ©2021 JJay Berthume. All rights reserved.</em></p>
|
||||
<a href="#repeat-top"><img class="rest" src="images/rest.svg"></a>
|
||||
</footer>
|
||||
<div class="repeat">
|
||||
|
||||
115
store/index.html
Normal file
115
store/index.html
Normal file
@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-icon-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<meta name="msapplication-TileColor" content="#ffffff">
|
||||
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<title>JJay Berthume</title>
|
||||
|
||||
<meta content="Creating aesthetically and emotionally compelling music for video games, deeply integrated into the player experience." name="description">
|
||||
<meta content="music, video games, composer, soundtrack, indie, classical, " name="keywords">
|
||||
|
||||
<link href="/styles/normalize.css" rel="stylesheet">
|
||||
<link href="/styles/index.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="repeat-top" class="repeat repeat-top">
|
||||
</div>
|
||||
<div class="repeat">
|
||||
<span>• •</span>
|
||||
<span>• •</span>
|
||||
</div>
|
||||
<header>
|
||||
<h3><a href="/"><img class="logo" src="/images/berthume_logo_full.png"></a></h3>
|
||||
<nav>
|
||||
<a href="/#portfolio">portfolio</a>
|
||||
<a href="/#contact">contact</a>
|
||||
<a href="/#bio">bio</a>
|
||||
<a href="#">store</a>
|
||||
<a href="#" data-tooltip="Coming soon!">blog</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<article>
|
||||
<section>
|
||||
<h1>Store</h1>
|
||||
<p>This store contains all of the educational resources I've made available for purchase.</p>
|
||||
<ul class="store-list">
|
||||
<li class="store-list-item">
|
||||
<img src="/images/store_partwriting_thumb.jpg">
|
||||
<p>21st Century Part-Writing<br>
|
||||
<small><em>Book</em></small></p>
|
||||
<p class="button-parent">
|
||||
<a class="store-button" href="https://sellfy.com/jjb-music-education-resources/p/21st-century-part-writing/">Buy $25+</a>
|
||||
</p>
|
||||
</li>
|
||||
<li class="store-list-item">
|
||||
<img src="/images/store_thematic_thumb.jpg">
|
||||
<p>Thematic Development Techniques<br>
|
||||
<small><em>Pamphlet</em></small></p>
|
||||
<p class="button-parent">
|
||||
<a class="store-button" href="https://sellfy.com/jjb-music-education-resources/p/nm5mjh/">Buy $5+</a>
|
||||
</p>
|
||||
</li>
|
||||
<li class="store-list-item">
|
||||
<img src="/images/store_chordprogressions_thumb.jpg">
|
||||
<p>15 Chord Progressions - Volume 1<br>
|
||||
<small><em>Pamphlet</em></small></p>
|
||||
<p class="button-parent">
|
||||
<a class="store-button" href="https://sellfy.com/jjb-music-education-resources/p/15-harmonic-progressions-volume-1/">Buy $3+</a>
|
||||
</p>
|
||||
</li>
|
||||
<li class="store-list-item">
|
||||
<img src="/images/store_bachanalysis_thumb.jpg">
|
||||
<p>Bach C Major Prelude, WTC I - Reduction and Harmonic Analysis<br>
|
||||
<small><em>Pamphlet</em></small></p>
|
||||
<p class="button-parent">
|
||||
<a class="store-button" href="https://sellfy.com/jjb-music-education-resources/p/bjccng/">Buy $1+</a>
|
||||
</p>
|
||||
</li>
|
||||
<li class="store-list-item">
|
||||
<img src="/images/store_boulanger_thumb.jpg">
|
||||
<p>Boulanger, D'un Jardin Clair (Orchestrated by J.Jay Berthume)<br>
|
||||
<small><em>Pamphlet</em></small></p>
|
||||
<p class="button-parent">
|
||||
<a class="store-button" href="https://sellfy.com/jjb-music-education-resources/p/oz4w49/">Buy $1+</a>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
<footer>
|
||||
<p><em>Copyright ©2021 JJay Berthume. All rights reserved.</em></p>
|
||||
<a href="#repeat-top"><img class="rest" src="/images/rest.svg"></a>
|
||||
</footer>
|
||||
<div class="repeat">
|
||||
<span>• •</span>
|
||||
<span>• •</span>
|
||||
</div>
|
||||
<div class="repeat repeat-bottom"></div>
|
||||
</body>
|
||||
</html>
|
||||
130
styles/index.css
130
styles/index.css
@ -148,11 +148,50 @@ nav {
|
||||
font-style: italic;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: 372px;
|
||||
max-width: 425px;
|
||||
margin: auto;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
|
||||
.store-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.store-list-item {
|
||||
border-radius: 0.1875rem;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.2);
|
||||
text-decoration: none;
|
||||
padding: 1em;
|
||||
width: 41%;
|
||||
margin-right: 1em;
|
||||
margin-bottom: 1em;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.button-parent {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.store-button {
|
||||
background-color: #372a6d;
|
||||
color: #ffffff;
|
||||
border-color: #ffffff;
|
||||
border-radius: 50px;
|
||||
padding: 0.25em 2em;
|
||||
text-decoration: none;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.store-list-item img {
|
||||
border-radius: 0.1875rem;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
@ -162,8 +201,7 @@ img {
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 2.5em;
|
||||
margin-bottom: 22px;
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.portfolio {
|
||||
@ -172,11 +210,86 @@ img {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.social {
|
||||
font-style: italic;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 1.25em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: calc(50% - 10.6665px);
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tooltip Styles
|
||||
*/
|
||||
|
||||
/* Add this attribute to the element that needs a tooltip */
|
||||
[data-tooltip] {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Hide the tooltip content by default */
|
||||
[data-tooltip]:before,
|
||||
[data-tooltip]:after {
|
||||
visibility: hidden;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Position tooltip above the element */
|
||||
[data-tooltip]:before {
|
||||
position: absolute;
|
||||
bottom: 150%;
|
||||
left: 50%;
|
||||
margin-bottom: 5px;
|
||||
margin-left: -80px;
|
||||
padding: 7px;
|
||||
width: 160px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
background-color: #3e3579;
|
||||
background-color: hsla(143, 31, 66, 0.9);
|
||||
color: #fff;
|
||||
content: attr(data-tooltip);
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* Triangle hack to make tooltip look like a speech bubble */
|
||||
[data-tooltip]:after {
|
||||
position: absolute;
|
||||
bottom: 150%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
width: 0;
|
||||
border-top: 5px solid #000;
|
||||
border-top: 5px solid hsla(0, 0%, 20%, 0.9);
|
||||
border-right: 5px solid transparent;
|
||||
border-left: 5px solid transparent;
|
||||
content: " ";
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
/* Show tooltip content on hover */
|
||||
[data-tooltip]:hover:before,
|
||||
[data-tooltip]:hover:after {
|
||||
visibility: visible;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Medium screens */
|
||||
@ -190,6 +303,12 @@ iframe {
|
||||
.portfolio {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.social {
|
||||
flex-direction: column;
|
||||
}
|
||||
.store-list {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small screens */
|
||||
@ -204,11 +323,14 @@ iframe {
|
||||
max-width: 300px;
|
||||
}
|
||||
.logo {
|
||||
max-width: 88px;
|
||||
max-width: 200px;
|
||||
}
|
||||
nav, .portfolio {
|
||||
flex-direction: column;
|
||||
}
|
||||
.store-list-item {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
.repeat {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user