cabin fever preview

feelixs · Sep 17, 2024 · 59865a0 · 59865a0
1 parent a40b672
commit 59865a0
Show file tree

Hide file tree

Showing 7 changed files with 254 additions and 0 deletions.
diff --git a/cabinfever.html b/cabinfever.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- <link rel="icon" href="favicon.ico" type="image/x-icon"> -->
+    <title>Cabin Fever | HOME</title>
+    <link rel="stylesheet" href="css/fever.css">
+</head>
+<body>
+<nav>
+    <img id="logo" src="media/cf-logo.webp" alt="Cabin Fever logo" class="logo">
+    <div class="align-left">
+        <span class="playwrite-cu-title white" id="typed">Cabin Fever</span><span id="cursor"></span>
+    </div>
+    <script src="js/typer-cf.js"></script>
+</nav>
+<main>
+    <div id="content">
+        <div id="band-container">
+            <img class="img-center" src="media/band.webp" alt="Cabin Fever performing live">
+        </div>
+        <div id="albums-container">
+            <p id="js-warning-albums">Please enable javascript to view this content</p>
+            <h2 class="title title-pad-left">OUR MUSIC</h2>
+            <table id="albums-table">
+                <!-- Populated via albums-cf.js -->
+            </table>
+        </div>
+    </div>
+</main>
+
+<script src="js/albums-cf.js"></script>
+</body>
+</html>
diff --git a/css/fever.css 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;
+}
diff --git a/js/albums-cf.js 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
@@ -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
diff --git a/media/cf-logo.webp b/media/cf-logo.webp
diff --git a/projects.html b/projects.html
@@ -34,6 +34,12 @@ <h2 class="title-color">Personal Projects</h2>
                     <br>January 2024 - May 2024
                     <br><span style="font-size:0.8em;margin-left:10px">- Website for the Trio Luna musical group, built over the Django framework.</span>
                 </li>
+                <li>
+                    <a target="_blank" href="https://felixcreations.com/cabinfever">Cabin Fever Website</a>
+                    <br><b>Client Project</b> - Linux, Django, Nginx
+                    <br>July 2024 - Present
+                    <br><span style="font-size:0.8em;margin-left:10px">- (Under construction) I'm currently working on a website for another client. You can view the preview using the provided link.</span>
+                </li>
                 <li>
                     <a target="_blank" href="https://clyppy.com">Clyppy.com</a>
                     <br><b>Multi-Purpose website</b> - Linux, Django, MySQL, Nginx