changing frameworks

nginx/vue/public/css/cv_styles.css

@@ -0,0 +1,272 @@
+/* Fonts */
+@font-face {
+    font-family: "AldoTheApache";
+    src: url("/fonts/AldotheApache.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "RobotFont";
+    src: url("/fonts/Robot_Font.otf") format("opentype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "m12";
+    src: url("/fonts/m12.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "big_noodle_titling";
+    src: url("/fonts/big_noodle_titling.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "CreatoDisplay";
+    src: url("/fonts/CreatoDisplay-Bold.otf") format("opentype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+/* Variables */
+:root {
+    /* Blue - Beige */
+    /* --primary: #153448;
+  --secondary: #3C5B6F;
+  --tertiary: #948979;
+  --quaternary: #f5bb78;
+  --background: #DFD0B8; */
+
+    /* Blue - Turqouise */
+    /* --primary: #161D6F;
+  --secondary: #0B2F9F;
+  --tertiary: #98DED9;
+  --quaternary: #C7FFD8;
+  --background: #C2EFD1; */
+
+    /* Red - Blue */
+    /* --primary: #ff204e; */
+    /* --secondary: #a0153e; */
+    /* --tertiary: #5d0341; */
+    /* --quaternary: #3a0e41; */
+    /* --background: #00224d; */
+
+    /* Blue - Brown */
+    /* --primary: #35374B; */
+    /* --secondary: #344955; */
+    /* --tertiary: #50727b; */
+    /* --quaternary: #78a083; */
+    /* --background: #c7b077; */
+
+    /* Black - White */
+    --primary: black;
+    --secondary: black;
+    --tertiary: black;
+    --quaternary: #cccccc;
+    --background: white;
+
+    /* Blue - White */
+    /* --primary: #201e43; */
+    /* --secondary: #134b70; */
+    /* --tertiary: #508c9b; */
+    /* --quaternary: #cceeee; */
+    /* --background: #eeeeee; */
+
+    --font-heading: big_noodle_titling;
+    --font-text: CreatoDisplay;
+    --font-size-text: 90%;
+    --font-size-heading: 2.5em;
+    --font-size-tableheading: 1.2em;
+}
+
+/* A5 Page */
+.a5page {
+    /* overflow: scroll; */
+    display: flex;
+    flex-direction: column;
+    font-family: var(--font-text);
+    height: 148mm;
+    width: 210mm;
+    padding: 5mm;
+    box-sizing: border-box;
+    background-color: var(--background);
+    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
+    border: solid 2px var(--primary);
+}
+
+/* A4 Page */
+.a4page {
+    font-family: var(--font-text);
+    width: 210mm;
+    /* Standard A4 width */
+    height: 297mm;
+    /* Standard A4 height */
+    padding: 10mm;
+    box-sizing: border-box;
+    background-color: var(--background);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--primary);
+    overflow: auto;
+    /* Enables scrolling when content exceeds height */
+    margin: 0 auto;
+    /* Centers the page horizontally */
+}
+
+/* Component Styling */
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4 {
+    color: var(--primary);
+    font-family: var(--font-heading);
+    text-transform: capitalize;
+    text-align: center;
+}
+
+h1 {
+    font-size: var(--font-size-heading);
+}
+
+h2 {
+    margin: 0px;
+    border-bottom: 2px solid var(--primary);
+}
+
+p {
+    color: var(--secondary);
+    font-size: var(--font-size-text);
+    margin-top: 0.3em;
+    margin-bottom: 0.5em;
+}
+
+table {
+    color: var(--secondary);
+    width: 100%;
+    border-collapse: collapse;
+}
+
+td {
+    /* border: 2px solid var(--tertiary); */
+    border-top: 1px solid var(--tertiary);
+    padding: 1px 0px 1px 10px;
+    font-size: var(--font-size-text);
+    text-align: center;
+}
+
+th {
+    border: 2px solid var(--tertiary);
+    padding: 1px 0px 1px 7px;
+    font-family: var(--font-heading);
+    font-size: var(--font-size-tableheading);
+    background-color: var(--quaternary);
+    text-align: left;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+a:hover,
+a:visited {
+    color: inherit;
+}
+
+/* Classes */
+/* Cover Navigation (for ease of use) */
+.cover-nav {
+    position: fixed;
+    top: 0.5vh;
+    /* Position the element at the top of the screen */
+    left: 80vw;
+    /* Position the element at the left of the screen */
+    border: 2px solid var(--tertiary);
+    width: 19.5vw;
+    /* Make the element span the width of the screen (optional) */
+    background-color: var(--background);
+    /* Set a background color to avoid overlap issues */
+    z-index: 1000;
+    /* Ensures the element is above other content */
+}
+
+.cover-nav td,
+tr {
+    font-family: var(--font-text);
+    border: 0;
+}
+
+.cover-nav th {
+    text-align: center;
+    align-items: center;
+    border-bottom: 2px solid var(--tertiary);
+}
+
+@media print {
+    .no-print {
+        display: none !important;
+    }
+}
+
+/* Cover letter styling */
+textarea {
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    border: 0px solid var(--primary);
+    resize: none;
+    font-family: var(--font-text);
+}
+
+/* Contact At Top of Page */
+.contact {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 2px solid var(--primary);
+}
+
+.contact-details {
+    display: flex;
+    flex-direction: column;
+    text-align: right;
+}
+
+.contact-details p {
+    margin: 2px 0;
+}
+
+/* Interests and Skills at bottom of page */
+.interests {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    border-top: solid 2px var(--primary);
+}
+
+.interests td,
+tr,
+th {
+    border: 0;
+}
+
+.row-leftalign {
+    /* background-image: url("https://www.fridakahlo.org/assets/img/paintings/without-hope.jpg"); */
+    text-align: left;
+}

nginx/vue/public/css/styles.css

@@ -0,0 +1,56 @@
+@media print {
+    .no-print {
+        display: none !important;
+    }
+}
+
+body {
+    background-image: linear-gradient(to bottom, aqua, blue);
+    font-family: "Times New Roman", Times, serif;
+
+    width: 100vw;
+    height: 100vh;
+
+    /*background-image: url("../img/background.png");
+    background-size: cover;*/
+}
+
+main {
+    width: 148mm; /* A5 width */
+    height: 210mm; /* A5 height */
+    max-width: 100%; /* responsive on smaller screens */
+    margin: 20px auto; /* center horizontally with some spacing */
+    padding: 20px;
+    background: white; /* paper color */
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* subtle paper shadow */
+    overflow-y: auto; /* scroll vertically if content overflows */
+    border: 1px solid #ccc; /* optional border for realism */
+    box-sizing: border-box; /* include padding in size */
+    font-family: "Times New Roman", serif; /* optional paper-like font */
+}
+
+p {
+    color: black;
+}
+
+h1,
+h2,
+h3,
+h4 {
+    color: black;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    background-color: beige;
+}
+
+.album-img {
+    width: 50mm;
+    height: 50mm;
+}

nginx/vue/public/index.html

@@ -0,0 +1,113 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <script
+            defer
+            src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
+        ></script>
+
+        <script>
+            function spotifyPlayer() {
+                return {
+                    album_image: "/img/Untitled.png",
+                    artist_name: "",
+                    song_name: "",
+                    song_url: "",
+                    playing: false,
+                    async fetchNowPlaying() {
+                        try {
+                            const res = await fetch(
+                                "https://www.adam-french.co.uk/api/spotify",
+                            );
+                            const data = await res.json();
+                            if (data.playing == false) {
+                                this.album_image = "/img/Untitled.png";
+                                return;
+                            }
+
+                            this.album_image = data.album_image;
+                            this.artist_name = data.artist_name;
+                            this.song_name = data.song_name;
+                            this.song_url = data.song_url;
+                            this.playing = data.playing;
+                        } catch (err) {
+                            console.error("Failed to fetch Spotify data", err);
+                        }
+                    },
+                };
+            }
+        </script>
+
+        <!--<script type="module">
+          import {renderToCanvas} from './js/mobile-automata.mjs'
+          const canvas = document.getElementById('automataCanvas');
+          renderToCanvas(canvas, canvas.width, canvas.height);
+        </script>-->
+
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>AF</title>
+        <link rel="icon" type="img/x-icon" href="img/favicon.ico" />
+        <link rel="stylesheet" href="css/styles.css" />
+    </head>
+    <body>
+        <canvas
+            id="automataCanvas"
+            style="
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+                display: block;
+                z-index: -1;
+            "
+        ></canvas>
+
+        <main>
+            <h1>Welcome</h1>
+
+            <h2>whoami?</h2>
+            <p>Hi im Adam</p>
+
+            <h2>cv</h2>
+            <a href="/pages/cv/index.html">CV</a>
+
+            <h2>bookmarks</h2>
+            <a href="/pages/bookmarks.html">bookmarks</a>
+
+            <h2>Listening to:</h2>
+            <div
+                x-data="spotifyPlayer()"
+                x-init="fetchNowPlaying(); setInterval(fetchNowPlaying, 60000)"
+                class="spotify-card"
+            >
+                <img :src="album_image" class="album-img" alt="" />
+                <div class="spotify-info">
+                    <div x-text="song_name || 'No song playing'"></div>
+                    <div x-text="artist_name"></div>
+                    <div
+                        x-text="playing ? 'Playing' : ''"
+                        :class="{'playing': playing}"
+                    ></div>
+                    <a :href="song_url"></a>
+                </div>
+            </div>
+
+            <!--<h2> </h2>
+            <p>
+                Sometimes there's this fire that sends shivers down my back.
+                It'll come when I'm lis
+            </p>
+            -->
+
+            <!--<h2>Shrines</h1>
+            <a href="/pages/shrines/evangelion.html">Evangelion</a>
+            <a href="/pages/shrines/skipskipbenben.html">Skip skip ben ben</a>
+            <a href="/pages/shrines/demoman.html">demoman</a>-->
+            <!--<a href="pages/shrines/gto.html">GTO</a>-->
+        </main>
+    </body>
+</html>