Further icon additions and navigation, accordion within accordion for…

… stage locations, styling in footer, optimizing JS functions
learicist · Jul 4, 2024 · be1f076 · be1f076
1 parent 6f67c77
commit be1f076
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 25 deletions.
diff --git a/main.css b/main.css
@@ -179,6 +179,10 @@
   border-radius: 5px;
 }
 
+.flatIcons {
+  width: 4.5%;
+}
+
 #elementTags {
   max-height: 52px;
   /* max-width: 60px; */
@@ -228,7 +232,7 @@ span {
 
 .about {
   font-size: 2em;
-  margin-top: 26.5%;
+  margin-top: 20%;
 }
 
 .accordionRow {
@@ -285,6 +289,10 @@ span {
   display: block;
 }
 
+#stageCardLocations {
+  display: block;
+}
+
 .venueLink {
   font-size: calc(10px + 0.6vw);
   margin: 10px auto;
@@ -478,6 +486,10 @@ img[alt="screenshot of webpage"] {
   margin-bottom: 25px;
 }
 
+#blBlock h4 {
+  color: white;
+}
+
 .me {
   border-color: black;
   color: white;

diff --git a/main.js b/main.js
@@ -164,39 +164,43 @@ $(document).ready(function() {
 			console.log($(this).text());
 			switch ($(this).text()) {
 				case "Instruments:":
-					$("#stageCard").addClass("hidden");
-					$("#recordingCard").addClass("hidden");
-					$("#writingCard").addClass("hidden");
+					$(".accordionCards").addClass("hidden");
+					// $("#stageCard").addClass("hidden");
+					// $("#recordingCard").addClass("hidden");
+					// $("#writingCard").addClass("hidden");
 					if ($("#instrumentCard").hasClass("hidden")) {
 						$("#instrumentCard").removeClass("hidden");
 					} else {
 						$("#instrumentCard").addClass("hidden");
 					}
 					break
 				case "Stage:":
-					$("#instrumentCard").addClass("hidden");
-					$("#recordingCard").addClass("hidden");
-					$("#writingCard").addClass("hidden");
+					$(".accordionCards").addClass("hidden");
+					// $("#instrumentCard").addClass("hidden");
+					// $("#recordingCard").addClass("hidden");
+					// $("#writingCard").addClass("hidden");
 					if ($("#stageCard").hasClass("hidden")) {
 						$("#stageCard").removeClass("hidden");
 					} else {
 						$("#stageCard").addClass("hidden");
 					}
 					break
 				case "Recording:":
-					$("#instrumentCard").addClass("hidden");
-					$("#stageCard").addClass("hidden");
-					$("#writingCard").addClass("hidden");
+					$(".accordionCards").addClass("hidden");
+					// $("#instrumentCard").addClass("hidden");
+					// $("#stageCard").addClass("hidden");
+					// $("#writingCard").addClass("hidden");
 					if ($("#recordingCard").hasClass("hidden")) {
 						$("#recordingCard").removeClass("hidden");
 					} else {
 						$("#recordingCard").addClass("hidden");
 					}
 					break
 				case "Writing:":
-					$("#instrumentCard").addClass("hidden");
-					$("#stageCard").addClass("hidden");
-					$("#recordingCard").addClass("hidden");
+					$(".accordionCards").addClass("hidden");
+					// $("#instrumentCard").addClass("hidden");
+					// $("#stageCard").addClass("hidden");
+					// $("#recordingCard").addClass("hidden");
 					if ($("#writingCard").hasClass("hidden")) {
 						$("#writingCard").removeClass("hidden");
 					} else {
@@ -208,6 +212,24 @@ $(document).ready(function() {
 
 	});
 
+	// Stage location reveals
+	$(".venueLink").on("click", function () {
+		switch ($(this).text()) {
+			case "Hudson Valley, NY":
+				$(".venueList").addClass("hidden");
+				$("#hudson").removeClass("hidden");
+				break
+			case "New York City":
+				$(".venueList").addClass("hidden");
+				$("#nyc").removeClass("hidden");
+				break
+			case "Binghamton, NY":
+				$(".venueList").addClass("hidden");
+				$("#bing").removeClass("hidden");
+				break
+		}
+	});
+
 	//Name at bottom of page
 	$(".myName").on({
 		mouseenter: function() {

diff --git a/music.html b/music.html
@@ -116,10 +116,22 @@
 
 					<div class="row accordionRow" id="accordionRowCards">
 						<div class="col-md-8 accordions accordionCards hidden" id="instrumentCard">
-							<p>Lead Vocals, Backing Vocals, & Harmonies.
-								<br>Acoustic, Electric, Slide, Lap Steel, & Bass Guitars.
-								<br>Drums & Percussion.
-								<br>Piano, Keyboard, Synthesizer, & Organ.
+							<p>
+								<i class="fa-solid fa-microphone-lines"></i>
+								Lead Vocals, Backing Vocals, & Harmonies. 
+								<i class="fa-solid fa-microphone-lines"></i>
+								<br>
+								<i class="fa-solid fa-guitar"></i>
+								Acoustic, Electric, Slide, Lap Steel, & Bass Guitars.
+								<i class="fa-solid fa-guitar"></i>
+								<br>
+								<i class="fa-solid fa-drum"></i>
+								Drums & Percussion.
+								<i class="fa-solid fa-drum"></i>
+								<br>
+								<img class="flatIcons" src="https://res.cloudinary.com/learicist/image/upload/v1720052085/Portfolio/piano.png" />
+								Piano, Keyboard, Synthesizer, & Organ.
+								<img class="flatIcons" src="https://res.cloudinary.com/learicist/image/upload/v1720052085/Portfolio/piano.png" />
 							</p>
 						</div>
 						<div class="col-md-8 accordions accordionCards hidden" id="stageCard">
@@ -128,11 +140,12 @@
 							<br>
 							<div class="accordions" id="stageCardLocations">
 								<button type="button" class="venueLink">Hudson Valley, NY</button> 
-									<p class="venueList hidden">Twin Star Orchards, Rhinecellar, Mahoney's, Hopewell Inn, Union Street Brewing</p>
 								<button type="button" class="venueLink">New York City</button> 
-									<p class="venueList hidden">Bowery Poetry Club, Crash Mansion, The Delancy</p>
-								<button type="button" class="venueLink">Binghamton, NY</button> 
-									<p class="venueList hidden">Spring Fling on SUNY Campus, Event Center on SUNY Campus, Thirsty's, On the Roxx, Peacemaker's Stage</p>
+								<button type="button" class="venueLink">Binghamton, NY</button>
+								<br>
+								<p class="venueList hidden" id="hudson">Twin Star Orchards, Rhinecellar, Mahoney's, Hopewell Inn, Union Street Brewing</p>
+								<p class="venueList hidden" id="nyc">Bowery Poetry Club, Crash Mansion, The Delancy</p>
+								<p class="venueList hidden" id="bing">Spring Fling on SUNY Campus, Event Center on SUNY Campus, Thirsty's, On the Roxx, Peacemaker's Stage</p>
 							</div>
 
 						</div>
@@ -149,9 +162,13 @@
 							</p>
 						</div>
 						<div class="col-md-8 accordions accordionCards hidden" id="writingCard">
-							<p>Composition, both personal and professional, both band and solo settings.
-								<br>
-								Commissioned Bespoke original compositions.
+							<p>Chord progressions, melodies, harmonies, percussion. 
+								<br><i class="fa-solid fa-pencil fa-lg"></i>
+								<br>Both personal and professional settings. 
+								<br><i class="fa-solid fa-square-pen fa-lg"></i>
+								<br>Both band and solo environments.
+								<br><i class="fa-solid fa-feather-pointed fa-lg"></i>
+								<br>Commissioned Bespoke original compositions.
 							</p>
 						</div>
 					</div>
@@ -328,7 +345,11 @@ <h4 style="margin-top:1.2em" class="text-center bottomLeft">ABOUT THIS PAGE</h4>
 							& "We Got it from Here, Thank You for Your Service"
 							<br></br>
 							by
-							<a class="myName" class="btn btn-default" target="_blank" href="https://twitter.com/learicist">Michael Leary</a>
+							<a 
+								class="myName" 
+								target="_blank" 
+								href="https://twitter.com/learicist">Michael Leary
+							</a>
 						</p>
 					</div>