+
+
+
+
+
diff --git a/css/fever.css b/css/fever.css
new file mode 100644
index 0000000..b3de617
--- /dev/null
+++ b/css/fever.css
@@ -0,0 +1,102 @@
+@import url('https://fonts.googleapis.com/css2?family=Playwrite+CU:wght@100..400&display=swap');
+
+/* PAGE STYLE */
+body {
+ background-color: black;
+ margin: 0;
+ padding: 0;
+}
+
+td, tr { /* for the album cover table */
+ padding: 10px;
+}
+
+nav {
+ display: flex;
+}
+
+img {
+ max-height: 100%;
+}
+
+main {
+ background-color: #1f1f1f;
+}
+
+/* CLASSES */
+
+.align-center {
+ text-align: center;
+}
+
+.align-left {
+ text-align: left;
+}
+
+.playwrite-cu-title {
+ font-family: "Playwrite CU", cursive;
+ font-optical-sizing: auto;
+ font-weight: 400;
+ font-style: normal;
+ font-size: 2.5em;
+}
+
+.white {
+ color: white;
+}
+
+.img-center {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.album-image {
+ width: 200px;
+}
+
+.album-image {
+ width: 100%;
+ height: auto;
+ display: block;
+}
+
+.album-image {
+ transition: transform 0.3s ease-in-out;
+}
+
+.album-image:hover {
+ transform: scale(1.1);
+}
+
+.title-pad-left {
+ padding-left: 200px;
+}
+
+.title {
+ font-size: 2em;
+ font-weight: bold;
+ font-family: "Sama Devanagari", Arial, sans-serif;
+}
+
+/* ID'S */
+
+#logo {
+ width: 100px;
+}
+
+#albums-container {
+ background-color: white;
+ padding: 100px 50px 50px 100px; /* around the whole table */
+}
+
+#albums-table {
+ width: 100%;
+ table-layout: fixed;
+}
+
+#band-container {
+ height: 500px;
+ padding-top: 50px;
+ padding-bottom: 100px;
+}
\ No newline at end of file
diff --git a/js/albums-cf.js b/js/albums-cf.js
new file mode 100644
index 0000000..bc6bb90
--- /dev/null
+++ b/js/albums-cf.js
@@ -0,0 +1,94 @@
+const clientId = 'f72749c20805440cb541ad0d7e82acd4'; // spotify client id
+let accessToken = '';
+let albumImages = [];
+let albumHrefs = [];
+
+async function getAccessToken(secret) {
+ const result = await fetch('https://accounts.spotify.com/api/token', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/x-www-form-urlencoded',
+ 'Authorization': 'Basic ' + btoa(clientId + ':' + secret)
+ },
+ body: 'grant_type=client_credentials'
+ });
+
+ const data = await result.json();
+ accessToken = data.access_token;
+}
+
+async function getAlbumsByArtist(artistId, secret) {
+ if (!accessToken) {
+ await getAccessToken(secret);
+ }
+
+ const result = await fetch(`https://api.spotify.com/v1/artists/${artistId}/albums`, {
+ method: 'GET',
+ headers: {
+ 'Authorization': 'Bearer ' + accessToken
+ }
+ });
+
+ const data = await result.json();
+ return data.items.map(album => ({
+ name: album.name,
+ release_date: album.release_date,
+ total_tracks: album.total_tracks,
+ url: album.external_urls.spotify,
+ art: album.images[0].url
+ }));
+}
+
+async function getMySecret() {
+ // TODO: store secret in this server's environment variables
+ const response = await fetch('https://trioluna.com/api/spotify-secret');
+ // storing privately on this remote server and fetching it securely for now
+ const data = await response.json();
+ console.log(data);
+ return data.secret;
+}
+
+function renderImgs(imgs, urls) {
+ // Render images on the page in a table format
+ const albumTable = document.getElementById('albums-table');
+ document.getElementById('js-warning-albums').innerHTML = ''; // Clear warning
+ // Initialize a row variable outside the loop
+ let row = albumTable.insertRow();
+
+ for (let i = 0; i < imgs.length; i++) {
+ // Check if the current index is divisible by 4
+ // If yes, create a new row after filling the previous one
+ if (i % 4 === 0 && i !== 0) {
+ row = albumTable.insertRow();
+ }
+ const link = document.createElement('a');
+ link.href = urls[i];
+ link.target = '_blank';
+ link.classList.add('album-link');
+ const img = document.createElement('img');
+ img.src = imgs[i];
+ img.alt = 'album cover';
+ img.classList.add('album-image');
+ link.appendChild(img);
+
+ // Create a cell in the row and append the image
+ const cell = row.insertCell();
+ cell.appendChild(link);
+ }
+}
+
+getMySecret().then(clientSecret => {
+ const artistId = '59yZaUd3eLLGsz10hRIT3Y'; // cabin fever id
+ getAlbumsByArtist(artistId, clientSecret).then(albums => {
+ console.log('Albums:', albums);
+ for (const album of albums) { // populate albumImages
+ albumImages.push(album.art);
+ albumHrefs.push(album.url);
+ }
+ renderImgs(albumImages, albumHrefs);
+ }).catch(error => {
+ console.error('Error fetching albums:', error);
+ });
+}).catch(error => {
+ console.error('Error fetching secret:', error);
+});
diff --git a/js/typer-cf.js b/js/typer-cf.js
new file mode 100644
index 0000000..2b56cf0
--- /dev/null
+++ b/js/typer-cf.js
@@ -0,0 +1,17 @@
+window.onload = function() {
+ var text = document.getElementById('typed').textContent;
+ document.getElementById('typed').textContent = '';
+ var i = 0;
+
+ function typeWriter() {
+ if (i < text.length) {
+ document.getElementById('typed').textContent += text.charAt(i);
+ i++;
+ setTimeout(typeWriter, 20);
+ } else {
+ document.getElementById('cursor').style.display = 'none';
+ }
+ }
+
+ setTimeout(typeWriter, 500);
+}
diff --git a/media/band.webp b/media/band.webp
new file mode 100644
index 0000000..de3cd6f
Binary files /dev/null and b/media/band.webp differ
diff --git a/media/cf-logo.webp b/media/cf-logo.webp
new file mode 100644
index 0000000..8b32ed6
Binary files /dev/null and b/media/cf-logo.webp differ
diff --git a/projects.html b/projects.html
index 46aac46..b829d11 100644
--- a/projects.html
+++ b/projects.html
@@ -34,6 +34,12 @@
Personal Projects
January 2024 - May 2024
- Website for the Trio Luna musical group, built over the Django framework.
+
+ Cabin Fever Website
+ Client Project - Linux, Django, Nginx
+ July 2024 - Present
+ - (Under construction) I'm currently working on a website for another client. You can view the preview using the provided link.
+
+