commit ecc6a26512cceb869d2ac8b4763d9dc78fa14a5b · indexx.dev/static

+26 -53

public/style.css

···

       1
       1
        
       /* ---------------------------------------------------

     

       2
       2
        
         VARIABLES & PROPERTIES

     

       3
       3
        
       --------------------------------------------------- */

     

       4
       4
       -
       @import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");

     

       4
       4
       +
       @import url("https://fonts.googleapis.com/css2?family=Jua&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");

     

       5
       5
        
       

     

       6
       6
        
       :root {

     

       7
       7
        
         --line: transparent;

     

       8
       8
        
         --line-active: #ffffff;

     

       9
       9
        
         --bg-gradient: linear-gradient(

     

       10
       10
        
           45deg,

     

       11
       11
       -
           rgb(0, 59, 74),

     

       11
       11
       +
           rgb(0, 29, 36),

     

       12
       12
        
           rgb(0, 35, 44),

     

       13
       13
        
           rgb(0, 29, 36)

     

       14
       14
        
         );

     

       15
       15
       +
         --ring-center-x: 50%;

     

       16
       16
       +
         --ring-pattern: repeating-radial-gradient(

     

       17
       17
       +
           circle at var(--ring-center-x) center,

     

       18
       18
       +
           transparent 0px,

     

       19
       19
       +
           transparent 113px,

     

       20
       20
       +
           rgba(0, 27, 34, 0.3) 203px,

     

       21
       21
       +
           rgba(0, 74, 92, 0.136) 206px

     

       22
       22
       +
         );

     

       23
       23
       +
       

     

       24
       24
       +
         transition: --ring-center-x 0.5s ease;

     

       15
       25
        
       }

     

       16
       26
        
       

     

       17
       27
        
       @property --animatedBorder {

     
···

       28
       38
        
         font-family: "Nunito Sans", sans-serif;

     

       29
       39
        
         width: 100%;

     

       30
       40
        
         height: 100%;

     

       31
       31
       -
         background: var(--bg-gradient);

     

       41
       41
       +
         background: var(--ring-pattern), var(--bg-gradient);

     

       42
       42
       +
         background-blend-mode: normal;

     

       43
       43
       +
       }

     

       44
       44
       +
       

     

       45
       45
       +
       :root:has(main#page.side) {

     

       46
       46
       +
         --ring-center-x: 35%;

     

       32
       47
        
       }

     

       33
       48
        
       

     

       34
       49
        
       a {

     
···

       70
       85
        
       h1 {

     

       71
       86
        
         color: #fff;

     

       72
       87
        
         margin-bottom: 0;

     

       73
       73
       -
         font-weight: 1000;

     

       88
       88
       +
         font-family: "Jua", sans-serif;

     

       89
       89
       +
         font-weight: 400;

     

       90
       90
       +
         font-style: normal;

     

       74
       91
        
         font-size: 4rem;

     

       75
       92
        
       }

     

       76
       93
        
       

     
···

       85
       102
        
       }

     

       86
       103
        
       

     

       87
       104
        
       /* ---------------------------------------------------

     

       88
       88
       -
         CIRCLE HOVER LINK

     

       89
       89
       -
       --------------------------------------------------- */

     

       90
       90
       -
       .circle-hover {

     

       91
       91
       -
         display: inline-block;

     

       92
       92
       -
         position: relative;

     

       93
       93
       -
         margin: 0 var(--spacing, 0px);

     

       94
       94
       -
         flex: 1;

     

       95
       95
       -
         min-width: 0;

     

       96
       96
       -
         transition: margin 0.25s;

     

       97
       97
       -
       }

     

       98
       98
       -
       

     

       99
       99
       -
       .circle-hover:hover {

     

       100
       100
       -
         --spacing: 4px;

     

       101
       101
       -
         --stroke: var(--line-active);

     

       102
       102
       -
         --stroke-delay: 0.1s;

     

       103
       103
       -
         --offset: 180px;

     

       104
       104
       -
         color: #fff !important;

     

       105
       105
       -
       }

     

       106
       106
       -
       

     

       107
       107
       -
       .circle-hover svg {

     

       108
       108
       -
         width: 76px;

     

       109
       109
       -
         height: 40px;

     

       110
       110
       -
         position: absolute;

     

       111
       111
       -
         left: 50%;

     

       112
       112
       -
         bottom: 0;

     

       113
       113
       -
         transform: translate(-50%, 7px) translateZ(0);

     

       114
       114
       -
         fill: none;

     

       115
       115
       -
         stroke: var(--stroke, var(--line));

     

       116
       116
       -
         stroke-linecap: round;

     

       117
       117
       -
         stroke-width: 2px;

     

       118
       118
       -
         stroke-dasharray: var(--offset, 69px) 278px;

     

       119
       119
       -
         stroke-dashoffset: 361px;

     

       120
       120
       -
         transition: stroke 0.25s ease var(--stroke-delay, 0s), stroke-dasharray 0.35s;

     

       121
       121
       -
       }

     

       122
       122
       -
       

     

       123
       123
       -
       /* ---------------------------------------------------

     

       124
       105
        
         PROJECTS SIDE PANE

     

       125
       106
        
       --------------------------------------------------- */

     

       126
       107
        
       #projects-pane {

     
···

       167
       148
        
       #now-playing {

     

       168
       149
        
         position: fixed;

     

       169
       150
        
         bottom: 20px;

     

       170
       170
       -
         left: 50%;

     

       171
       171
       -
         transform: translateX(-50%);

     

       151
       151
       +
         left: 20px;

     

       172
       152
        
         display: flex;

     

       173
       153
        
         align-items: center;

     

       174
       154
        
         gap: 12px;

     

       175
       155
        
         padding: 8px;

     

       176
       176
       -
         background-color: rgba(8, 61, 74, 0.42);

     

       156
       156
       +
         background-color: rgba(0, 0, 0, 0.271);

     

       177
       157
        
         border-radius: 8px;

     

       178
       158
        
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

     

       179
       179
       -
         color: #000;

     

       180
       180
       -
         text-align: right;

     

       159
       159
       +
         color: #fff;

     

       160
       160
       +
         text-align: left;

     

       181
       161
        
         text-decoration: none;

     

       182
       182
       -
         max-width: 400px;

     

       183
       183
       -
         min-width: 300px;

     

       184
       184
       -
         outline: 2px solid #0000001a;

     

       185
       185
       -
         outline-offset: 5px;

     

       162
       162
       +
         width: 300px;

     

       186
       163
        
         transition: opacity 0.2s, left 0.5s ease;

     

       187
       187
       -
       }

     

       188
       188
       -
       

     

       189
       189
       -
       body:has(main#page.side) #now-playing {

     

       190
       190
       -
         left: 35%;

     

       191
       164
        
       }

     

       192
       165
        
       

     

       193
       166
        
       #now-playing img {

+1 -14

src/assets/crown.svg

···

       1
       1
       -
       <svg

     

       2
       2
       -
         width="24"

     

       3
       3
       -
         height="24"

     

       4
       4
       -
         viewBox="0 0 24 24"

     

       5
       5
       -
         fill="none"

     

       6
       6
       -
         xmlns="http://www.w3.org/2000/svg"

     

       7
       7
       -
       >

     

       8
       8
       -
         <path

     

       9
       9
       -
           fill-rule="evenodd"

     

       10
       10
       -
           clip-rule="evenodd"

     

       11
       11
       -
           d="M2.5 6.09143L7.21997 10.8114L12.0005 6.03088L16.7811 10.8114L21.5 6.09245V14.9691C21.5 16.626 20.1569 17.9691 18.5 17.9691H5.5C3.84314 17.9691 2.5 16.626 2.5 14.9691V6.09143ZM19.5 10.9087V14.9691C19.5 15.5214 19.0523 15.9691 18.5 15.9691H5.5C4.94771 15.9691 4.5 15.5214 4.5 14.9691V10.9077L7.21997 13.6277L12.0005 8.84717L16.7811 13.6277L19.5 10.9087Z"

     

       12
       12
       -
           fill="currentColor"

     

       13
       13
       -
         />

     

       14
       14
       -
       </svg>
     

       1
       1
       +
       <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 24 24"><path fill="#ffd700" d="M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11zm14 3c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1v-1h14z"/></svg>

+64

src/components/AudioVisualizer.jsx

···

       1
       1
       +
       import React from "react";

     

       2
       2
       +
       

     

       3
       3
       +
       const BAR_COUNT = 15;

     

       4
       4
       +
       const BAR_ANIMATION_DELAYS = [

     

       5
       5
       +
         "0.3s",

     

       6
       6
       +
         "0.7s",

     

       7
       7
       +
         "0.1s",

     

       8
       8
       +
         "0.9s",

     

       9
       9
       +
         "0.4s",

     

       10
       10
       +
         "0.2s",

     

       11
       11
       +
         "0.8s",

     

       12
       12
       +
         "0.5s",

     

       13
       13
       +
         "0s",

     

       14
       14
       +
         "0.6s",

     

       15
       15
       +
         "0.3s",

     

       16
       16
       +
         "0.9s",

     

       17
       17
       +
         "0.1s",

     

       18
       18
       +
         "0.7s",

     

       19
       19
       +
         "0.4s",

     

       20
       20
       +
       ];

     

       21
       21
       +
       

     

       22
       22
       +
       export default function AudioVisualizer() {

     

       23
       23
       +
         return (

     

       24
       24
       +
           <div className="visualizer">

     

       25
       25
       +
             {Array(BAR_COUNT).fill(0).map((_, index) => (

     

       26
       26
       +
               <div

     

       27
       27
       +
                 key={index}

     

       28
       28
       +
                 className="bar"

     

       29
       29
       +
                 style={{ animationDelay: BAR_ANIMATION_DELAYS[index] }}

     

       30
       30
       +
               >

     

       31
       31
       +
               </div>

     

       32
       32
       +
             ))}

     

       33
       33
       +
       

     

       34
       34
       +
             <style jsx>

     

       35
       35
       +
               {`

     

       36
       36
       +
               .visualizer {

     

       37
       37
       +
                 display: flex;

     

       38
       38
       +
                 align-items: center;

     

       39
       39
       +
                 gap: 1px;

     

       40
       40
       +
                 height: 50px;

     

       41
       41
       +
               }

     

       42
       42
       +
       

     

       43
       43
       +
               .bar {

     

       44
       44
       +
                 width: 2px;

     

       45
       45
       +
                 background: linear-gradient(to top, #1b1bff, #8585fe, #1b1bff);

     

       46
       46
       +
                 border-radius: 1px;

     

       47
       47
       +
                 animation: wave 2.5s ease-in-out infinite; 

     

       48
       48
       +
               }

     

       49
       49
       +
               

     

       50
       50
       +
               @keyframes wave {

     

       51
       51
       +
                 0%, 100% {

     

       52
       52
       +
                   /* Start/End Height */

     

       53
       53
       +
                   height: 5px; 

     

       54
       54
       +
                 }

     

       55
       55
       +
                 50% {

     

       56
       56
       +
                   /* Peak Height */

     

       57
       57
       +
                   height: 30px; 

     

       58
       58
       +
                 }

     

       59
       59
       +
               }

     

       60
       60
       +
             `}

     

       61
       61
       +
             </style>

     

       62
       62
       +
           </div>

     

       63
       63
       +
         );

     

       64
       64
       +
       }

+9 -9

src/components/Header.astro

···

       1
       1
        
       <section id="header">

     

       2
       2
        
         <h1 class="animated-border unselectable spin">

     

       3
       3
        
           <svg

     

       4
       4
       +
             xmlns="http://www.w3.org/2000/svg"

     

       4
       5
        
             width="24"

     

       5
       6
        
             height="24"

     

       6
       7
        
             viewBox="0 0 24 24"

     

       7
       7
       -
             fill="none"

     

       8
       8
       -
             xmlns="http://www.w3.org/2000/svg"

     

       9
       9
       -
             style="position: absolute; top: -5px; margin-left: -2px; transform: rotate(-10deg); color: gold;"

     

       8
       8
       +
             style="position: absolute; top: -5px; margin-left: -7px; transform: rotate(-10deg); z-index: 2000;"

     

       9
       9
       +
             ><path

     

       10
       10
       +
               fill="gold"

     

       11
       11
       +
               d="M5 16 3 5l5.5 5L12 4l3.5 6L21 5l-2 11zm14 3c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1v-1h14z"

     

       12
       12
       +
             ></path></svg

     

       10
       13
        
           >

     

       11
       11
       -
             <path

     

       12
       12
       -
               fill-rule="evenodd"

     

       13
       13
       -
               clip-rule="evenodd"

     

       14
       14
       -
               d="M2.5 6.09143L7.21997 10.8114L12.0005 6.03088L16.7811 10.8114L21.5 6.09245V14.9691C21.5 16.626 20.1569 17.9691 18.5 17.9691H5.5C3.84314 17.9691 2.5 16.626 2.5 14.9691V6.09143ZM19.5 10.9087V14.9691C19.5 15.5214 19.0523 15.9691 18.5 15.9691H5.5C4.94771 15.9691 4.5 15.5214 4.5 14.9691V10.9077L7.21997 13.6277L12.0005 8.84717L16.7811 13.6277L19.5 10.9087Z"

     

       15
       15
       -
               fill="currentColor"></path>

     

       16
       16
       -
           </svg>

     

       17
       14
        
           <span style="position: relative; z-index: 2;">index</span>

     

       18
       15
        
         </h1>

     

       19
       16
        
         <span style="display: block; margin-top: -5px;"

     

       20
       17
        
           >hey, i'm index. have a great day 👋</span

     

       18
       18
       +
         >

     

       19
       19
       +
         <span style="display: block; margin-top: -5px;"

     

       20
       20
       +
           >i do stuff in typescript sometimes</span

     

       21
       21
        
         >

     

       22
       22
        
         <small

     

       23
       23
        
           style="display: block; margin-top: -5px;margin-bottom:10px;color: rgb(0, 84, 106);font-size: 0.9rem;"

-19

src/components/ProjectsPane.astro

···

       1
       1
       -
       ---

     

       2
       2
       -
       import { projects } from "../data/projects";

     

       3
       3
       -
       import ProjectCard from "./ProjectCard.astro";

     

       4
       4
       -
       ---

     

       5
       5
       -
       

     

       6
       6
       -
       <section id="projects-pane" data-bs-theme="dark">

     

       7
       7
       -
         <h6

     

       8
       8
       -
           class="text-muted text-center"

     

       9
       9
       -
           style="text-transform: uppercase; letter-spacing: 5px;"

     

       10
       10
       -
         >

     

       11
       11
       -
           (SOME OF) MY PROJECTS

     

       12
       12
       -
         </h6>

     

       13
       13
       -
       

     

       14
       14
       -
         <ul class="list-unstyled">

     

       15
       15
       -
           <li>

     

       16
       16
       -
             {projects.map((project) => <ProjectCard {...project} />)}

     

       17
       17
       -
           </li>

     

       18
       18
       -
         </ul>

     

       19
       19
       -
       </section>

+2 -2

src/components/SocialLinks.astro

···

       28
       28
        
       ---

     

       29
       29
        
       

     

       30
       30
        
       <ul

     

       31
       31
       -
         class="d-flex mt-5 mb-3"

     

       32
       32
       -
         style="padding: 0px; width: 50%; margin: auto; justify-content: space-evenly; flex-basis: 33%;"

     

       31
       31
       +
         class="d-flex mt-3 mb-3"

     

       32
       32
       +
         style="padding: 0px; width: 50%; margin: auto; justify-content: center; gap: 20px;"

     

       33
       33
        
       >

     

       34
       34
        
         {links.map((link) => <SocialLink {...link} />)}

     

       35
       35
        
       </ul>

+8 -13

src/components/islands/Lastfm.jsx

···

       1
       1
        
       import { useEffect, useState } from "react";

     

       2
       2
       +
       import AudioVisualizer from "../AudioVisualizer";

     

       2
       3
        
       

     

       3
       4
        
       export default function Lastfm() {

     

       4
       5
        
           const [data, setData] = useState(null);

     
···

       31
       32
        
               fetchLastfmData();

     

       32
       33
        
           }, []);

     

       33
       34
        
       

     

       34
       34
       -
           if (error) return <span>Error: {error}</span>;

     

       35
       35
       -
           if (!data) return null;

     

       35
       35
       +
           if (error || !data) return null;

     

       36
       36
        
       

     

       37
       37
        
           let timeAgo = "";

     

       38
       38
        
           let oldStatusClasses = "";

     
···

       50
       50
        
               else if (hours > 0) timeAgo = `${hours} hours ago`;

     

       51
       51
        
               else if (minutes > 0) timeAgo = `${minutes} minutes ago`;

     

       52
       52
        
               else timeAgo = "just now";

     

       53
       53
       +
       

     

       54
       54
       +
               if (days == 1) timeAgo = "1 day ago";

     

       53
       55
        
       

     

       54
       56
        
               oldStatusClasses = days > 3

     

       55
       57
        
                   ? "opacity-75 text-decoration-line-through"

     
···

       63
       65
        
                   target="_blank"

     

       64
       66
        
                   className={oldStatusClasses}

     

       65
       67
        
               >

     

       66
       66
       -
                   <img

     

       67
       67
       -
                       src={data.albumArt}

     

       68
       68
       -
                       alt={`${data.album} cover`}

     

       69
       69
       -
                   />

     

       68
       68
       +
                   <AudioVisualizer />

     

       70
       69
        
                   <div

     

       71
       70
        
                       style={{

     

       72
       71
        
                           display: "flex",

     
···

       86
       85
        
                               marginTop: "-5px",

     

       87
       86
        
                           }}

     

       88
       87
        
                       >

     

       89
       89
       -
                           {data.nowPlaying

     

       90
       90
       -
                               ? (

     

       91
       91
       -
                                   <span style={{ color: "#22c55e" }}>

     

       92
       92
       -
                                       ▶ Now Playing

     

       93
       93
       -
                                   </span>

     

       94
       94
       -
                               )

     

       95
       95
       -
                               : timeAgo}

     

       88
       88
       +
                           <small style={{ fontSize: "0.7rem" }}>

     

       89
       89
       +
                               ^ what I'm listening (or last listened) to

     

       90
       90
       +
                           </small>

     

       96
       91
        
                       </div>

     

       97
       92
        
                   </div>

     

       98
       93
        
               </a>

+16 -5

src/components/islands/Status.jsx

···

       47
       47
        
               return (

     

       48
       48
        
                   <span

     

       49
       49
        
                       className="badge bg-dark"

     

       50
       50
       -
                       style={{ color: "#595959 !important" }}

     

       50
       50
       +
                       style={{

     

       51
       51
       +
                           color: "#595959 !important",

     

       52
       52
       +
                           //outline: "1px solid white",

     

       53
       53
       +
                           //outlineOffset: "1px",

     

       54
       54
       +
                       }}

     

       51
       55
        
                   >

     

       52
       56
        
                       Error: {error}

     

       53
       57
        
                   </span>

     
···

       57
       61
        
               return (

     

       58
       62
        
                   <span

     

       59
       63
        
                       className="badge bg-dark"

     

       60
       60
       -
                       style={{ color: "#595959 !important" }}

     

       64
       64
       +
                       style={{

     

       65
       65
       +
                           color: "#595959 !important",

     

       66
       66
       +
                           //outline: "1px solid white",

     

       67
       67
       +
                           //outlineOffset: "1px",

     

       68
       68
       +
                       }}

     

       61
       69
        
                   >

     

       62
       70
        
                       Loading status...

     

       63
       71
        
                   </span>

     
···

       68
       76
        
           const now = new Date();

     

       69
       77
        
           const diff = now.getTime() - date.getTime();

     

       70
       78
        
       

     

       71
       71
       -
           const days = Math.floor(diff / (1000 * 60 * 60 * 24)); // Calculate days

     

       79
       79
       +
           const days = Math.floor(diff / (1000 * 60 * 60 * 24));

     

       72
       80
        
       

     

       73
       81
        
           if (days >= 2) {

     

       74
       74
       -
               return null; // Don't render the component if it's been 2 or more days

     

       82
       82
       +
               return null;

     

       75
       83
        
           }

     

       76
       84
        
       

     

       77
       85
        
           const minutes = Math.floor(diff / 60000);

     
···

       82
       90
        
           else if (hours > 0) timeAgo = `${hours} hours ago`;

     

       83
       91
        
           else if (minutes > 0) timeAgo = `${minutes} minutes ago`;

     

       84
       92
        
       

     

       93
       93
       +
           if (days == 1) timeAgo = "1 day ago";

     

       94
       94
       +
       

     

       85
       95
        
           const oldStatusClasses = days >= 1

     

       86
       96
        
               ? "opacity-75 text-decoration-line-through"

     

       87
       97
        
               : "";

     
···

       91
       101
        
                   href={data.link}

     

       92
       102
        
                   target="_blank"

     

       93
       103
        
                   className={`badge bg-white ${oldStatusClasses}`}

     

       104
       104
       +
                   //style={{ outline: "1px solid white", outlineOffset: "1px" }}

     

       94
       105
        
               >

     

       95
       95
       -
                   Index is.. "{data.text}", {timeAgo}

     

       106
       106
       +
                   I'm.. "{data.text}", {timeAgo}

     

       96
       107
        
               </a>

     

       97
       108
        
           );

     

       98
       109
        
       }