commit 5d7cb85b4bebfd0d885a9df56b273dc4d4fe80a7 · indexx.dev/static

+4 -4

package-lock.json

···

       12
       12
        
               "@atproto/api": "^0.15.6",

     

       13
       13
        
               "@types/react": "^19.1.6",

     

       14
       14
        
               "@types/react-dom": "^19.1.6",

     

       15
       15
       -
               "astro": "^5.9.2",

     

       15
       15
       +
               "astro": "^5.11.0",

     

       16
       16
        
               "fs": "^0.0.1-security",

     

       17
       17
        
               "marked": "^15.0.11",

     

       18
       18
        
               "node-cache": "^5.1.2",

     
···

       1895
       1895
        
             }

     

       1896
       1896
        
           },

     

       1897
       1897
        
           "node_modules/astro": {

     

       1898
       1898
       -
             "version": "5.9.2",

     

       1899
       1899
       -
             "resolved": "https://registry.npmjs.org/astro/-/astro-5.9.2.tgz",

     

       1900
       1900
       -
             "integrity": "sha512-K/zZlQOWMpamfLDOls5jvG7lrsjH1gkk3ESRZyZDCkVBtKHMF4LbjwCicm/iBb3mX3V/PerqRYzLbOy3/4JLCQ==",

     

       1898
       1898
       +
             "version": "5.11.0",

     

       1899
       1899
       +
             "resolved": "https://registry.npmjs.org/astro/-/astro-5.11.0.tgz",

     

       1900
       1900
       +
             "integrity": "sha512-MEICntERthUxJPSSDsDiZuwiCMrsaYy3fnDhp4c6ScUfldCB8RBnB/myYdpTFXpwYBy6SgVsHQ1H4MuuA7ro/Q==",

     

       1901
       1901
        
             "dependencies": {

     

       1902
       1902
        
               "@astrojs/compiler": "^2.12.2",

     

       1903
       1903
        
               "@astrojs/internal-helpers": "0.6.1",

+1 -1

package.json

···

       13
       13
        
           "@atproto/api": "^0.15.6",

     

       14
       14
        
           "@types/react": "^19.1.6",

     

       15
       15
        
           "@types/react-dom": "^19.1.6",

     

       16
       16
       -
           "astro": "^5.9.2",

     

       16
       16
       +
           "astro": "^5.11.0",

     

       17
       17
        
           "fs": "^0.0.1-security",

     

       18
       18
        
           "marked": "^15.0.11",

     

       19
       19
        
           "node-cache": "^5.1.2",

+123 -98

public/style.css

···

       1
       1
       -
       /*

     

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

     

       2
       2
        
         VARIABLES & PROPERTIES

     

       3
       3
       -
       */

     

       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");

     

       5
       5
        
       

     

       6
       6
        
       :root {

     

       7
       7
        
         --line: transparent;

     

       8
       8
        
         --line-active: #ffffff;

     

       9
       9
       -
       

     

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

     

       11
       10
        
           45deg,

     

       12
       11
        
           rgb(0, 59, 74),

     
···

       21
       20
        
         initial-value: 0deg;

     

       22
       21
        
       }

     

       23
       22
        
       

     

       24
       24
       -
       /*

     

       25
       25
       -
         ENTIRE PAGE

     

       26
       26
       -
       */

     

       23
       23
       +
       /* ---------------------------------------------------

     

       24
       24
       +
         GLOBAL STYLES

     

       25
       25
       +
       --------------------------------------------------- */

     

       27
       26
        
       html,

     

       28
       27
        
       body {

     

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

     
···

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

     

       33
       32
        
       }

     

       34
       33
        
       

     

       34
       34
       +
       a {

     

       35
       35
       +
         color: rgb(0, 151, 188) !important;

     

       36
       36
       +
         text-decoration: none;

     

       37
       37
       +
       }

     

       38
       38
       +
       

     

       39
       39
       +
       a:hover .project-card {

     

       40
       40
       +
         border-color: rgb(0, 83, 104);

     

       41
       41
       +
       }

     

       42
       42
       +
       

     

       43
       43
       +
       .unselectable {

     

       44
       44
       +
         user-select: none;

     

       45
       45
       +
         -webkit-user-select: none;

     

       46
       46
       +
         -moz-user-select: none;

     

       47
       47
       +
         -ms-user-select: none;

     

       48
       48
       +
       }

     

       49
       49
       +
       

     

       50
       50
       +
       /* ---------------------------------------------------

     

       51
       51
       +
         PAGE LAYOUT

     

       52
       52
       +
       --------------------------------------------------- */

     

       35
       53
        
       main#page {

     

       36
       54
        
         position: absolute;

     

       37
       55
        
         top: 50%;

     

       38
       56
        
         left: 0;

     

       39
       57
        
         width: 100%;

     

       40
       58
        
         margin-top: -100px;

     

       41
       41
       -
         color: rgb(0, 92, 116);

     

       59
       59
       +
         color: rgb(0, 151, 188);

     

       42
       60
        
         transition: width 0.5s ease;

     

       43
       61
        
       }

     

       44
       62
        
       

     
···

       46
       64
        
         width: 70%;

     

       47
       65
        
       }

     

       48
       66
        
       

     

       49
       49
       -
       /*

     

       50
       50
       -
         TEXT

     

       51
       51
       -
       */

     

       67
       67
       +
       /* ---------------------------------------------------

     

       68
       68
       +
         TEXT STYLES

     

       69
       69
       +
       --------------------------------------------------- */

     

       52
       70
        
       h1 {

     

       53
       71
        
         color: #fff;

     

       54
       54
       -
         margin-bottom: 0px;

     

       72
       72
       +
         margin-bottom: 0;

     

       55
       73
        
         font-weight: 1000;

     

       56
       74
        
         font-size: 4rem;

     

       57
       75
        
       }

     

       58
       76
        
       

     

       59
       77
        
       h1.spin {

     

       60
       60
       -
         animation-name: textSpin;

     

       61
       61
       -
         animation-duration: 4.5s;

     

       62
       62
       -
         animation-iteration-count: infinite;

     

       63
       63
       -
         animation-timing-function: linear;

     

       64
       64
       -
       

     

       78
       78
       +
         animation: textSpin 4.5s linear infinite;

     

       65
       79
        
         position: relative;

     

       66
       80
        
       }

     

       67
       81
        
       

     
···

       70
       84
        
         content: "index" !important;

     

       71
       85
        
       }

     

       72
       86
        
       

     

       73
       73
       -
       a {

     

       74
       74
       -
         color: rgb(0, 151, 188) !important;

     

       75
       75
       -
         text-decoration: none;

     

       76
       76
       -
       }

     

       77
       77
       -
       

     

       87
       87
       +
       /* ---------------------------------------------------

     

       88
       88
       +
         CIRCLE HOVER LINK

     

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

     

       78
       90
        
       .circle-hover {

     

       79
       91
        
         display: inline-block;

     

       80
       92
        
         position: relative;

     

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

     

       82
       82
       -
         transition: margin 0.25s;

     

       83
       83
       -
       

     

       84
       94
        
         flex: 1;

     

       85
       95
        
         min-width: 0;

     

       86
       86
       -
       

     

       87
       87
       -
         svg {

     

       88
       88
       -
           width: 76px;

     

       89
       89
       -
           height: 40px;

     

       90
       90
       -
           position: absolute;

     

       91
       91
       -
           left: 50%;

     

       92
       92
       -
           bottom: 0;

     

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

     

       94
       94
       -
           fill: none;

     

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

     

       96
       96
       -
           stroke-linecap: round;

     

       97
       97
       -
           stroke-width: 2px;

     

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

     

       99
       99
       -
           stroke-dashoffset: 361px;

     

       100
       100
       -
           transition:

     

       101
       101
       -
             stroke 0.25s ease var(--stroke-delay, 0s),

     

       102
       102
       -
             stroke-dasharray 0.35s;

     

       103
       103
       -
         }

     

       96
       96
       +
         transition: margin 0.25s;

     

       97
       97
       +
       }

     

       104
       98
        
       

     

       105
       105
       -
         &:hover {

     

       106
       106
       -
           --spacing: 4px;

     

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

     

       108
       108
       -
           --stroke-delay: 0.1s;

     

       109
       109
       -
           --offset: 180px;

     

       110
       110
       -
           color: #fff !important;

     

       111
       111
       -
         }

     

       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;

     

       112
       105
        
       }

     

       113
       106
        
       

     

       114
       114
       -
       /*

     

       115
       115
       -
         UTILITY

     

       116
       116
       -
       */

     

       117
       117
       -
       .unselectable {

     

       118
       118
       -
         -webkit-user-select: none;

     

       119
       119
       -
         /* Safari */

     

       120
       120
       -
         -moz-user-select: none;

     

       121
       121
       -
         /* Firefox */

     

       122
       122
       -
         -ms-user-select: none;

     

       123
       123
       -
         /* Internet Explorer/Edge */

     

       124
       124
       -
         user-select: none;

     

       125
       125
       -
         /* Standard syntax */

     

       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;

     

       126
       121
        
       }

     

       127
       122
        
       

     

       128
       128
       -
       /*

     

       129
       129
       -
         PROJECTS SIDE-PANE

     

       130
       130
       -
       */

     

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

     

       124
       124
       +
         PROJECTS SIDE PANE

     

       125
       125
       +
       --------------------------------------------------- */

     

       131
       126
        
       #projects-pane {

     

       132
       132
       -
         opacity: 0;

     

       133
       133
       -
         pointer-events: none;

     

       134
       134
       -
         visibility: hidden;

     

       135
       135
       -
       

     

       136
       127
        
         position: absolute;

     

       137
       128
        
         top: 0;

     

       138
       129
        
         right: 0;

     

       139
       130
        
         width: 30%;

     

       140
       140
       -
         background: rgb(0 23 29 / 48%);

     

       131
       131
       +
         height: 97%;

     

       141
       132
        
         margin: 15px;

     

       142
       133
        
         padding: 20px;

     

       143
       134
        
         border-radius: 10px;

     

       144
       144
       -
         height: 97%;

     

       135
       135
       +
         background: rgba(0, 23, 29, 0.48);

     

       136
       136
       +
         opacity: 0;

     

       137
       137
       +
         pointer-events: none;

     

       138
       138
       +
         visibility: hidden;

     

       139
       139
       +
       }

     

       140
       140
       +
       

     

       141
       141
       +
       #projects-pane ul {

     

       142
       142
       +
         height: 100%;

     

       143
       143
       +
         padding-bottom: 20px;

     

       144
       144
       +
         overflow-y: scroll;

     

       145
       145
       +
         overflow-x: hidden;

     

       146
       146
       +
       }

     

       147
       147
       +
       

     

       148
       148
       +
       .project-card {

     

       149
       149
       +
         background: rgba(0, 23, 29, 0.641);

     

       150
       150
       +
         border: 1px solid rgb(0, 44, 55);

     

       151
       151
       +
         padding: 10px;

     

       152
       152
       +
         border-radius: 10px;

     

       153
       153
       +
         margin-bottom: 10px;

     

       154
       154
       +
         color: #fff !important;

     

       145
       155
        
       }

     

       146
       156
        
       

     

       147
       147
       -
       /*

     

       148
       148
       -
         ANIMATED BORDERS UTILITY

     

       149
       149
       -
       */

     

       157
       157
       +
       /* ---------------------------------------------------

     

       158
       158
       +
         NOW PLAYING WIDGET

     

       159
       159
       +
       --------------------------------------------------- */

     

       160
       160
       +
       #now-playing {

     

       161
       161
       +
         position: fixed;

     

       162
       162
       +
         bottom: 20px;

     

       163
       163
       +
         left: 50%;

     

       164
       164
       +
         transform: translateX(-50%);

     

       165
       165
       +
         display: flex;

     

       166
       166
       +
         align-items: center;

     

       167
       167
       +
         gap: 12px;

     

       168
       168
       +
         padding: 8px;

     

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

     

       170
       170
       +
         border-radius: 8px;

     

       171
       171
       +
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

     

       172
       172
       +
         color: #000;

     

       173
       173
       +
         text-align: right;

     

       174
       174
       +
         text-decoration: none;

     

       175
       175
       +
         max-width: 400px;

     

       176
       176
       +
         min-width: 300px;

     

       177
       177
       +
         outline: 2px solid #0000001a;

     

       178
       178
       +
         outline-offset: 5px;

     

       179
       179
       +
         transition: opacity 0.2s;

     

       180
       180
       +
       }

     

       181
       181
       +
       

     

       182
       182
       +
       #now-playing img {

     

       183
       183
       +
         width: 64px;

     

       184
       184
       +
         height: 64px;

     

       185
       185
       +
         border-radius: 4px;

     

       186
       186
       +
         object-fit: cover;

     

       187
       187
       +
       }

     

       188
       188
       +
       

     

       189
       189
       +
       #now-playing #content {

     

       190
       190
       +
         width: 100%;

     

       191
       191
       +
       }

     

       192
       192
       +
       

     

       193
       193
       +
       /* ---------------------------------------------------

     

       194
       194
       +
         ANIMATED BORDER EFFECT

     

       195
       195
       +
       --------------------------------------------------- */

     

       150
       196
        
       .animated-border::before,

     

       151
       197
        
       .animated-border::after {

     

       152
       198
        
         content: "";

     

       153
       199
        
         position: absolute;

     

       154
       200
        
         top: 50%;

     

       155
       201
        
         left: 50%;

     

       156
       156
       -
         translate: -50% -50%;

     

       202
       202
       +
         transform: translate(-50%, -50%);

     

       157
       203
        
         font-size: 70px;

     

       158
       204
        
         z-index: 1;

     

       159
       159
       -
       

     

       160
       205
        
         background: conic-gradient(

     

       161
       206
        
           from var(--animatedBorder),

     

       162
       207
        
           transparent,

     
···

       166
       211
        
         );

     

       167
       212
        
         background-clip: text;

     

       168
       213
        
         -webkit-text-fill-color: transparent;

     

       169
       169
       -
       

     

       170
       170
       -
         animation: 3s animatedBorder linear infinite;

     

       214
       214
       +
         animation: animatedBorder 3s linear infinite;

     

       171
       215
        
       }

     

       172
       216
        
       

     

       173
       217
        
       .animated-border::before {

     
···

       175
       219
        
         opacity: 0.5;

     

       176
       220
        
       }

     

       177
       221
        
       

     

       178
       178
       -
       .project-card {

     

       179
       179
       -
         background: rgba(0, 23, 29, 0.641);

     

       180
       180
       -
         border: 1px solid rgb(0, 44, 55);

     

       181
       181
       -
         padding: 10px;

     

       182
       182
       -
         border-radius: 10px;

     

       183
       183
       -
         margin-bottom: 10px;

     

       184
       184
       -
         color: #fff !important;

     

       185
       185
       -
       }

     

       186
       186
       -
       

     

       187
       187
       -
       #projects-pane ul {

     

       188
       188
       -
         overflow-x: hidden;

     

       189
       189
       -
         overflow-y: scroll;

     

       190
       190
       -
         height: 100%;

     

       191
       191
       -
         padding-bottom: 20px;

     

       192
       192
       -
       }

     

       193
       193
       -
       

     

       194
       194
       -
       a:hover .project-card {

     

       195
       195
       -
         border-color: rgb(0, 83, 104);

     

       196
       196
       -
       }

     

       197
       197
       -
       

     

       222
       222
       +
       /* ---------------------------------------------------

     

       223
       223
       +
         ANIMATIONS

     

       224
       224
       +
       --------------------------------------------------- */

     

       198
       225
        
       @keyframes textSpin {

     

       199
       226
        
         0% {

     

       200
       227
        
           transform: rotateY(0deg);

     

       201
       228
        
         }

     

       202
       202
       -
       

     

       203
       229
        
         100% {

     

       204
       230
        
           transform: rotateY(359deg);

     

       205
       231
        
         }

     
···

       209
       235
        
         from {

     

       210
       236
        
           --animatedBorder: 0deg;

     

       211
       237
        
         }

     

       212
       212
       -
       

     

       213
       238
        
         to {

     

       214
       239
        
           --animatedBorder: 360deg;

     

       215
       240
        
         }

-1

src/assets/astro.svg

···

       1
       1
       -
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="115" height="48"><path fill="#17191E" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="url(#a)" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="#17191E" d="M.02 30.31s4.02-1.95 8.05-1.95l3.04-9.4c.11-.45.44-.76.82-.76.37 0 .7.31.82.76l3.04 9.4c4.77 0 8.05 1.95 8.05 1.95L17 11.71c-.2-.56-.53-.91-.98-.91H7.83c-.44 0-.76.35-.97.9L.02 30.31Zm42.37-5.97c0 1.64-2.05 2.62-4.88 2.62-1.85 0-2.5-.45-2.5-1.41 0-1 .8-1.49 2.65-1.49 1.67 0 3.09.03 4.73.23v.05Zm.03-2.04a21.37 21.37 0 0 0-4.37-.36c-5.32 0-7.82 1.25-7.82 4.18 0 3.04 1.71 4.2 5.68 4.2 3.35 0 5.63-.84 6.46-2.92h.14c-.03.5-.05 1-.05 1.4 0 1.07.18 1.16 1.06 1.16h4.15a16.9 16.9 0 0 1-.36-4c0-1.67.06-2.93.06-4.62 0-3.45-2.07-5.64-8.56-5.64-2.8 0-5.9.48-8.26 1.19.22.93.54 2.83.7 4.06 2.04-.96 4.95-1.37 7.2-1.37 3.11 0 3.97.71 3.97 2.15v.57Zm11.37 3c-.56.07-1.33.07-2.12.07-.83 0-1.6-.03-2.12-.1l-.02.58c0 2.85 1.87 4.52 8.45 4.52 6.2 0 8.2-1.64 8.2-4.55 0-2.74-1.33-4.09-7.2-4.39-4.58-.2-4.99-.7-4.99-1.28 0-.66.59-1 3.65-1 3.18 0 4.03.43 4.03 1.35v.2a46.13 46.13 0 0 1 4.24.03l.02-.55c0-3.36-2.8-4.46-8.2-4.46-6.08 0-8.13 1.49-8.13 4.39 0 2.6 1.64 4.23 7.48 4.48 4.3.14 4.77.62 4.77 1.28 0 .7-.7 1.03-3.71 1.03-3.47 0-4.35-.48-4.35-1.47v-.13Zm19.82-12.05a17.5 17.5 0 0 1-6.24 3.48c.03.84.03 2.4.03 3.24l1.5.02c-.02 1.63-.04 3.6-.04 4.9 0 3.04 1.6 5.32 6.58 5.32 2.1 0 3.5-.23 5.23-.6a43.77 43.77 0 0 1-.46-4.13c-1.03.34-2.34.53-3.78.53-2 0-2.82-.55-2.82-2.13 0-1.37 0-2.65.03-3.84 2.57.02 5.13.07 6.64.11-.02-1.18.03-2.9.1-4.04-2.2.04-4.65.07-6.68.07l.07-2.93h-.16Zm13.46 6.04a767.33 767.33 0 0 1 .07-3.18H82.6c.07 1.96.07 3.98.07 6.92 0 2.95-.03 4.99-.07 6.93h5.18c-.09-1.37-.11-3.68-.11-5.65 0-3.1 1.26-4 4.12-4 1.33 0 2.28.16 3.1.46.03-1.16.26-3.43.4-4.43-.86-.25-1.81-.41-2.96-.41-2.46-.03-4.26.98-5.1 3.38l-.17-.02Zm22.55 3.65c0 2.5-1.8 3.66-4.64 3.66-2.81 0-4.61-1.1-4.61-3.66s1.82-3.52 4.61-3.52c2.82 0 4.64 1.03 4.64 3.52Zm4.71-.11c0-4.96-3.87-7.18-9.35-7.18-5.5 0-9.23 2.22-9.23 7.18 0 4.94 3.49 7.59 9.21 7.59 5.77 0 9.37-2.65 9.37-7.6Z"/><defs><linearGradient id="a" x1="6.33" x2="19.43" y1="40.8" y2="34.6" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>

-1

src/assets/background.svg

···

       1
       1
       -
       <svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1024" fill="none"><path fill="url(#a)" fill-rule="evenodd" d="M-217.58 475.75c91.82-72.02 225.52-29.38 341.2-44.74C240 415.56 372.33 315.14 466.77 384.9c102.9 76.02 44.74 246.76 90.31 366.31 29.83 78.24 90.48 136.14 129.48 210.23 57.92 109.99 169.67 208.23 155.9 331.77-13.52 121.26-103.42 264.33-224.23 281.37-141.96 20.03-232.72-220.96-374.06-196.99-151.7 25.73-172.68 330.24-325.85 315.72-128.6-12.2-110.9-230.73-128.15-358.76-12.16-90.14 65.87-176.25 44.1-264.57-26.42-107.2-167.12-163.46-176.72-273.45-10.15-116.29 33.01-248.75 124.87-320.79Z" clip-rule="evenodd" style="opacity:.154"/><path fill="url(#b)" fill-rule="evenodd" d="M1103.43 115.43c146.42-19.45 275.33-155.84 413.5-103.59 188.09 71.13 409 212.64 407.06 413.88-1.94 201.25-259.28 278.6-414.96 405.96-130 106.35-240.24 294.39-405.6 265.3-163.7-28.8-161.93-274.12-284.34-386.66-134.95-124.06-436-101.46-445.82-284.6-9.68-180.38 247.41-246.3 413.54-316.9 101.01-42.93 207.83 21.06 316.62 6.61Z" clip-rule="evenodd" style="opacity:.154"/><defs><linearGradient id="b" x1="373" x2="1995.44" y1="1100" y2="118.03" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient><linearGradient id="a" x1="107.37" x2="1130.66" y1="1993.35" y2="1026.31" gradientUnits="userSpaceOnUse"><stop stop-color="#3245FF"/><stop offset="1" stop-color="#BC52EE"/></linearGradient></defs></svg>

-9

src/assets/favicon.svg

···

       1
       1
       -
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">

     

       2
       2
       -
           <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />

     

       3
       3
       -
           <style>

     

       4
       4
       -
               path { fill: #000; }

     

       5
       5
       -
               @media (prefers-color-scheme: dark) {

     

       6
       6
       -
                   path { fill: #FFF; }

     

       7
       7
       -
               }

     

       8
       8
       -
           </style>

     

       9
       9
       -
       </svg>

+35 -24

src/components/Header.astro

···

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

     

       2
       2
       -
         <svg

     

       3
       3
       -
           width="24"

     

       4
       4
       -
           height="24"

     

       5
       5
       -
           viewBox="0 0 24 24"

     

       6
       6
       -
           fill="none"

     

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

     

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

     

       1
       1
       +
       <section id="header">

     

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

     

       3
       3
       +
           <svg

     

       4
       4
       +
             width="24"

     

       5
       5
       +
             height="24"

     

       6
       6
       +
             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;"

     

       10
       10
       +
           >

     

       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
       17
       +
           <span style="position: relative; z-index: 2;">index</span>

     

       18
       18
       +
         </h1>

     

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

     

       20
       20
       +
           >hey, i'm index. have a great day 👋</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;"

     

       24
       24
       +
         >

     

       25
       25
       +
           i usually mess around in Typescript, and recently i've been exploring the

     

       26
       26
       +
           <a href="https://atproto.com/" target="_blank"><b>AT protocol</b>.</a>

     

       27
       27
       +
         </small>

     

       28
       28
       +
         <!--

     

       29
       29
       +
         <small

     

       30
       30
       +
           style="display: block; margin-top: -5px;color: rgb(0, 84, 106);font-size: 0.8rem;"

     

       9
       31
        
         >

     

       10
       10
       -
           <path

     

       11
       11
       -
             fill-rule="evenodd"

     

       12
       12
       -
             clip-rule="evenodd"

     

       13
       13
       -
             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"

     

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

     

       15
       15
       -
         </svg>

     

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

     

       17
       17
       -
       </h1>

     

       18
       18
       -
       <span style="display: block; margin-top: -5px;">hey, i'm index. have a great day 👋</span>

     

       19
       19
       -
       <small style="display: block; margin-top: -5px;color: rgb(0, 84, 106);font-size: 0.8rem;">

     

       20
       20
       -
         i usually mess around in Typescript, and recently i've been exploring the 

     

       21
       21
       -
         <a href="https://atproto.com/" target="_blank"><b>AT protocol</b>.</a>

     

       22
       22
       -
       </small>

     

       23
       23
       -
       <small style="display: block; margin-top: -5px;color: rgb(0, 84, 106);font-size: 0.8rem;">

     

       24
       24
       -
         i'm interested in making an open-source Goodreads alternative on the protocol :)

     

       25
       25
       -
       </small>
     

       32
       32
       +
           i'm interested in making an open-source Goodreads alternative on the

     

       33
       33
       +
           protocol :)

     

       34
       34
       +
         </small>

     

       35
       35
       +
         -->

     

       36
       36
       +
       </section>

-121

src/components/NowPlaying.jsx

···

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

     

       2
       2
       -
       

     

       3
       3
       -
       export default function NowPlaying() {

     

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

     

       5
       5
       -
           const [error, setError] = useState(null);

     

       6
       6
       -
       

     

       7
       7
       -
           useEffect(() => {

     

       8
       8
       -
               const fetchNowPlaying = async () => {

     

       9
       9
       -
                   try {

     

       10
       10
       -
                       const res = await fetch(

     

       11
       11
       -
                           "https://indexx.dev/api/misc/lastfm",

     

       12
       12
       -
                       );

     

       13
       13
       -
                       if (!res.ok) throw new Error(`HTTP ${res.status}`);

     

       14
       14
       -
       

     

       15
       15
       -
                       const json = await res.json();

     

       16
       16
       -
                       const status = {

     

       17
       17
       -
                           song: json.track,

     

       18
       18
       -
                           artist: json.artist,

     

       19
       19
       -
                           albumArt: json.cover,

     

       20
       20
       -
                           createdAt: json.createdAt,

     

       21
       21
       -
                           link: json.url,

     

       22
       22
       -
                           nowPlaying: !json.createdAt,

     

       23
       23
       -
                       };

     

       24
       24
       -
                       setData(status);

     

       25
       25
       -
                   } catch (err) {

     

       26
       26
       -
                       console.error("Fetch failed:", err);

     

       27
       27
       -
                       setError(err.message);

     

       28
       28
       -
                   }

     

       29
       29
       -
               };

     

       30
       30
       -
       

     

       31
       31
       -
               fetchNowPlaying();

     

       32
       32
       -
           }, []);

     

       33
       33
       -
       

     

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

     

       35
       35
       -
           if (!data) return null;

     

       36
       36
       -
       

     

       37
       37
       -
           let timeAgo = "";

     

       38
       38
       -
           let oldStatusClasses = "";

     

       39
       39
       -
       

     

       40
       40
       -
           if (!data.nowPlaying && data.createdAt) {

     

       41
       41
       -
               const date = new Date(data.createdAt);

     

       42
       42
       -
               const now = new Date();

     

       43
       43
       -
               const diff = now.getTime() - date.getTime();

     

       44
       44
       -
       

     

       45
       45
       -
               const minutes = Math.floor(diff / 60000);

     

       46
       46
       -
               const hours = Math.floor(minutes / 60);

     

       47
       47
       -
               const days = Math.floor(hours / 24);

     

       48
       48
       -
       

     

       49
       49
       -
               if (days > 0) timeAgo = `${days} days ago`;

     

       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
       -
               oldStatusClasses = days > 3

     

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

     

       56
       56
       -
                   : "";

     

       57
       57
       -
           }

     

       58
       58
       -
       

     

       59
       59
       -
           return (

     

       60
       60
       -
               <a

     

       61
       61
       -
                   href={data.link}

     

       62
       62
       -
                   target="_blank"

     

       63
       63
       -
                   style={{

     

       64
       64
       -
                       position: "fixed",

     

       65
       65
       -
                       bottom: "20px",

     

       66
       66
       -
                       left: "20px",

     

       67
       67
       -
                       display: "flex",

     

       68
       68
       -
                       alignItems: "center",

     

       69
       69
       -
                       gap: "12px",

     

       70
       70
       -
                       padding: "8px",

     

       71
       71
       -
                       backgroundColor: "#1e1d2d",

     

       72
       72
       -
                       borderRadius: "8px",

     

       73
       73
       -
                       boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)",

     

       74
       74
       -
                       textDecoration: "none",

     

       75
       75
       -
                       color: "#000",

     

       76
       76
       -
                       maxWidth: "400px",

     

       77
       77
       -
                       transition: "opacity 0.2s",

     

       78
       78
       -
                       textAlign: "left",

     

       79
       79
       -
                   }}

     

       80
       80
       -
                   className={oldStatusClasses}

     

       81
       81
       -
               >

     

       82
       82
       -
                   <img

     

       83
       83
       -
                       src={data.albumArt}

     

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

     

       85
       85
       -
                       style={{

     

       86
       86
       -
                           width: "64px",

     

       87
       87
       -
                           height: "64px",

     

       88
       88
       -
                           borderRadius: "4px",

     

       89
       89
       -
                           objectFit: "cover",

     

       90
       90
       -
                       }}

     

       91
       91
       -
                   />

     

       92
       92
       -
                   <div

     

       93
       93
       -
                       style={{

     

       94
       94
       -
                           display: "flex",

     

       95
       95
       -
                           flexDirection: "column",

     

       96
       96
       -
                           gap: "2px",

     

       97
       97
       -
                       }}

     

       98
       98
       -
                   >

     

       99
       99
       -
                       <div style={{ fontWeight: "bold" }}>{data.song}</div>

     

       100
       100
       -
                       <div style={{ fontSize: "0.9em", marginTop: "-5px" }}>

     

       101
       101
       -
                           {data.artist}

     

       102
       102
       -
                       </div>

     

       103
       103
       -
                       <div

     

       104
       104
       -
                           style={{

     

       105
       105
       -
                               fontSize: "0.8em",

     

       106
       106
       -
                               opacity: 0.7,

     

       107
       107
       -
                               marginTop: "-5px",

     

       108
       108
       -
                           }}

     

       109
       109
       -
                       >

     

       110
       110
       -
                           {data.nowPlaying

     

       111
       111
       -
                               ? (

     

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

     

       113
       113
       -
                                       ▶ Now Playing

     

       114
       114
       -
                                   </span>

     

       115
       115
       -
                               )

     

       116
       116
       -
                               : timeAgo}

     

       117
       117
       -
                       </div>

     

       118
       118
       -
                   </div>

     

       119
       119
       -
               </a>

     

       120
       120
       -
           );

     

       121
       121
       -
       }

+1 -1

src/components/ProjectCard.astro

+1 -3

src/components/ProjectsPane.astro

···

       13
       13
        
       

     

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

     

       15
       15
        
           <li>

     

       16
       16
       -
             {projects.map((project) => (

     

       17
       17
       -
               <ProjectCard {...project} />

     

       18
       18
       -
             ))}

     

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

     

       19
       17
        
           </li>

     

       20
       18
        
         </ul>

     

       21
       19
        
       </section>

+23 -12

src/components/SocialLink.astro

···

       1
       1
        
       ---

     

       2
       2
       +
       import type { JSX } from "astro/jsx-runtime";

     

       3
       3
       +
       

     

       2
       4
        
       interface Props {

     

       5
       5
       +
         icon?: any;

     

       3
       6
        
         name: string;

     

       4
       7
        
         href: string;

     

       5
       8
        
         tooltip?: {

     
···

       8
       11
        
         };

     

       9
       12
        
       }

     

       10
       13
        
       

     

       11
       11
       -
       const { name, href, tooltip } = Astro.props;

     

       14
       14
       +
       const { icon, name, href, tooltip } = Astro.props;

     

       15
       15
       +
       

     

       16
       16
       +
       const Icon = icon;

     

       12
       17
        
       ---

     

       13
       18
        
       

     

       14
       19
        
       <a

     

       15
       20
        
         href={href}

     

       16
       21
        
         target="_blank"

     

       17
       17
       -
         class="circle-hover"

     

       18
       22
        
         {...tooltip && {

     

       19
       19
       -
           'data-bs-toggle': 'tooltip',

     

       20
       20
       -
           'data-bs-title': tooltip.title,

     

       21
       21
       -
           'data-bs-placement': tooltip.placement || 'bottom'

     

       23
       23
       +
           "data-bs-toggle": "tooltip",

     

       24
       24
       +
           "data-bs-title": tooltip.title,

     

       25
       25
       +
           "data-bs-placement": tooltip.placement || "bottom",

     

       22
       26
        
         }}

     

       23
       27
        
       >

     

       24
       24
       -
         <svg viewBox="0 0 70 36">

     

       25
       25
       -
           <path

     

       26
       26
       -
             d="M6.9739 30.8153H63.0244C65.5269 30.8152 75.5358 -3.68471 35.4998 2.81531C-16.1598 11.2025 0.894099 33.9766 26.9922 34.3153C104.062 35.3153 54.5169 -6.68469 23.489 9.31527"

     

       27
       27
       -
           ></path>

     

       28
       28
       -
         </svg>

     

       29
       29
       -
         <span>{name}</span>

     

       30
       30
       -
       </a>
     

       28
       28
       +
         <span class="icon-hover">

     

       29
       29
       +
           {Icon ? <Icon style="width: 35px; height: 35px;" /> : name}

     

       30
       30
       +
         </span>

     

       31
       31
       +
       </a>

     

       32
       32
       +
       

     

       33
       33
       +
       <style>

     

       34
       34
       +
         .icon-hover {

     

       35
       35
       +
           display: inline-block;

     

       36
       36
       +
           transition: transform 0.2s ease;

     

       37
       37
       +
         }

     

       38
       38
       +
         a:hover .icon-hover {

     

       39
       39
       +
           transform: scale(1.12);

     

       40
       40
       +
         }

     

       41
       41
       +
       </style>

+33 -18

src/components/SocialLinks.astro

···

       1
       1
        
       ---

     

       2
       2
       -
       import SocialLink from './SocialLink.astro';

     

       2
       2
       +
       import Bluesky from "./icons/Bluesky.astro";

     

       3
       3
       +
       import Discord from "./icons/Discord.astro";

     

       4
       4
       +
       import Github from "./icons/Github.astro";

     

       5
       5
       +
       import Lastfm from "./icons/Lastfm.astro";

     

       6
       6
       +
       import Mastodon from "./icons/Mastodon.astro";

     

       7
       7
       +
       import SocialLink from "./SocialLink.astro";

     

       3
       8
        
       

     

       4
       9
        
       const links = [

     

       5
       10
        
         {

     

       6
       6
       -
           name: 'Bluesky',

     

       7
       7
       -
           href: 'https://bsky.app/profile/did:plc:sfjxpxxyvewb2zlxwoz2vduw'

     

       11
       11
       +
           icon: Bluesky,

     

       12
       12
       +
           name: "Bluesky",

     

       13
       13
       +
           href: "https://bsky.app/profile/did:plc:sfjxpxxyvewb2zlxwoz2vduw",

     

       8
       14
        
         },

     

       9
       15
        
         {

     

       10
       10
       -
           name: 'Discord',

     

       11
       11
       -
           href: 'https://discord.com/users/589386198011871233',

     

       16
       16
       +
           icon: Discord,

     

       17
       17
       +
           name: "Discord",

     

       18
       18
       +
           href: "https://discord.com/users/589386198011871233",

     

       12
       19
        
           tooltip: {

     

       13
       13
       -
             title: 'index.lua',

     

       14
       14
       -
             placement: "top"

     

       15
       15
       -
           }

     

       20
       20
       +
             title: "index.lua",

     

       21
       21
       +
             placement: "top",

     

       22
       22
       +
           },

     

       23
       23
       +
         },

     

       24
       24
       +
         {

     

       25
       25
       +
           icon: Github,

     

       26
       26
       +
           name: "GitHub",

     

       27
       27
       +
           href: "https://github.com/indexxing/",

     

       16
       28
        
         },

     

       17
       29
        
         {

     

       18
       18
       -
           name: 'GitHub',

     

       19
       19
       -
           href: 'https://github.com/indexxing/'

     

       30
       30
       +
           icon: Mastodon,

     

       31
       31
       +
           name: "Mastodon",

     

       32
       32
       +
           href: "https://mastodon.social/@indexcard",

     

       20
       33
        
         },

     

       21
       34
        
         {

     

       22
       22
       -
           name: 'last.fm',

     

       23
       23
       -
           href: 'https://last.fm/user/Index_Card'

     

       24
       24
       -
         }

     

       35
       35
       +
           icon: Lastfm,

     

       36
       36
       +
           name: "last.fm",

     

       37
       37
       +
           href: "https://last.fm/user/Index_Card",

     

       38
       38
       +
         },

     

       25
       39
        
       ];

     

       26
       40
        
       ---

     

       27
       41
        
       

     

       28
       28
       -
       <ul class="d-flex mt-4 mb-3" style="padding: 0px; width: 50%; margin: auto; justify-content: space-evenly; flex-basis: 33%;">

     

       29
       29
       -
         {links.map(link => (

     

       30
       30
       -
           <SocialLink {...link} />

     

       31
       31
       -
         ))}

     

       32
       32
       -
       </ul>
     

       42
       42
       +
       <ul

     

       43
       43
       +
         class="d-flex mt-4 mb-3"

     

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

     

       45
       45
       +
       >

     

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

     

       47
       47
       +
       </ul>

src/components/Status.jsx src/components/islands/Status.jsx

src/components/icons/Bluesky.astro

···

       1
       1
       +
       ---

     

       2
       2
       +
       const props = Astro.props

     

       3
       3
       +
       ---

     

       4
       4
       +
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" {...props}>

     

       5
       5
       +
       	<path fill="#a4ccff" d="M12 11.388c-.906-1.761-3.372-5.044-5.665-6.662c-2.197-1.55-3.034-1.283-3.583-1.033C2.116 3.978 2 4.955 2 5.528c0 .575.315 4.709.52 5.4c.68 2.28 3.094 3.05 5.32 2.803c-3.26.483-6.157 1.67-2.36 5.898c4.178 4.325 5.726-.927 6.52-3.59c.794 2.663 1.708 7.726 6.444 3.59c3.556-3.59.977-5.415-2.283-5.898c2.225.247 4.64-.523 5.319-2.803c.205-.69.52-4.825.52-5.399c0-.575-.116-1.55-.752-1.838c-.549-.248-1.386-.517-3.583 1.033c-2.293 1.621-4.76 4.904-5.665 6.664" />

     

       6
       6
       +
       </svg>

src/components/icons/Discord.astro

···

       1
       1
       +
       ---

     

       2
       2
       +
       const props = Astro.props

     

       3
       3
       +
       ---

     

       4
       4
       +
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" {...props}>

     

       5
       5
       +
       	<path fill="#a4ccff" d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.1.1 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.1 16.1 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02M8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12m6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12" />

     

       6
       6
       +
       </svg>

src/components/icons/Github.astro

···

       1
       1
       +
       ---

     

       2
       2
       +
       const props = Astro.props

     

       3
       3
       +
       ---

     

       4
       4
       +
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" {...props}>

     

       5
       5
       +
       	<path fill="#a4ccff" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2" />

     

       6
       6
       +
       </svg>

src/components/icons/Lastfm.astro

···

       1
       1
       +
       ---

     

       2
       2
       +
       const props = Astro.props

     

       3
       3
       +
       ---

     

       4
       4
       +
       <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" {...props}>

     

       5
       5
       +
       	<path fill="#a4ccff" d="m225.8 367.1l-18.8-51s-30.5 34-76.2 34c-40.5 0-69.2-35.2-69.2-91.5c0-72.1 36.4-97.9 72.1-97.9c66.5 0 74.8 53.3 100.9 134.9c18.8 56.9 54 102.6 155.4 102.6c72.7 0 122-22.3 122-80.9c0-72.9-62.7-80.6-115-92.1c-25.8-5.9-33.4-16.4-33.4-34c0-19.9 15.8-31.7 41.6-31.7c28.2 0 43.4 10.6 45.7 35.8l58.6-7c-4.7-52.8-41.1-74.5-100.9-74.5c-52.8 0-104.4 19.9-104.4 83.9c0 39.9 19.4 65.1 68 76.8c44.9 10.6 79.8 13.8 79.8 45.7c0 21.7-21.1 30.5-61 30.5c-59.2 0-83.9-31.1-97.9-73.9c-32-96.8-43.6-163-161.3-163C45.7 113.8 0 168.3 0 261c0 89.1 45.7 137.2 127.9 137.2c66.2 0 97.9-31.1 97.9-31.1" />

     

       6
       6
       +
       </svg>

src/components/icons/Mastodon.astro

···

       1
       1
       +
       ---

     

       2
       2
       +
       const props = Astro.props

     

       3
       3
       +
       ---

     

       4
       4
       +
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" {...props}>

     

       5
       5
       +
       	<path fill="#a4ccff" d="M20.94 14c-.28 1.41-2.44 2.96-4.97 3.26c-1.31.15-2.6.3-3.97.24c-2.25-.11-4-.54-4-.54v.62c.32 2.22 2.22 2.35 4.03 2.42c1.82.05 3.44-.46 3.44-.46l.08 1.65s-1.28.68-3.55.81c-1.25.07-2.81-.03-4.62-.5c-3.92-1.05-4.6-5.24-4.7-9.5l-.01-3.43c0-4.34 2.83-5.61 2.83-5.61C6.95 2.3 9.41 2 11.97 2h.06c2.56 0 5.02.3 6.47.96c0 0 2.83 1.27 2.83 5.61c0 0 .04 3.21-.39 5.43M18 8.91c0-1.08-.3-1.91-.85-2.56c-.56-.63-1.3-.96-2.23-.96c-1.06 0-1.87.41-2.42 1.23l-.5.88l-.5-.88c-.56-.82-1.36-1.23-2.43-1.23c-.92 0-1.66.33-2.23.96C6.29 7 6 7.83 6 8.91v5.26h2.1V9.06c0-1.06.45-1.62 1.36-1.62c1 0 1.5.65 1.5 1.93v2.79h2.07V9.37c0-1.28.5-1.93 1.51-1.93c.9 0 1.35.56 1.35 1.62v5.11H18z" />

     

       6
       6
       +
       </svg>

+100

src/components/islands/NowPlaying.jsx

···

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

     

       2
       2
       +
       

     

       3
       3
       +
       export default function NowPlaying() {

     

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

     

       5
       5
       +
           const [error, setError] = useState(null);

     

       6
       6
       +
       

     

       7
       7
       +
           useEffect(() => {

     

       8
       8
       +
               const fetchNowPlaying = async () => {

     

       9
       9
       +
                   try {

     

       10
       10
       +
                       const res = await fetch(

     

       11
       11
       +
                           "https://indexx.dev/api/misc/lastfm",

     

       12
       12
       +
                       );

     

       13
       13
       +
                       if (!res.ok) throw new Error(`HTTP ${res.status}`);

     

       14
       14
       +
       

     

       15
       15
       +
                       const json = await res.json();

     

       16
       16
       +
                       const status = {

     

       17
       17
       +
                           song: json.track,

     

       18
       18
       +
                           artist: json.artist,

     

       19
       19
       +
                           albumArt: json.cover,

     

       20
       20
       +
                           createdAt: json.createdAt,

     

       21
       21
       +
                           link: json.url,

     

       22
       22
       +
                           nowPlaying: !json.createdAt,

     

       23
       23
       +
                       };

     

       24
       24
       +
                       setData(status);

     

       25
       25
       +
                   } catch (err) {

     

       26
       26
       +
                       console.error("Fetch failed:", err);

     

       27
       27
       +
                       setError(err.message);

     

       28
       28
       +
                   }

     

       29
       29
       +
               };

     

       30
       30
       +
       

     

       31
       31
       +
               fetchNowPlaying();

     

       32
       32
       +
           }, []);

     

       33
       33
       +
       

     

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

     

       35
       35
       +
           if (!data) return null;

     

       36
       36
       +
       

     

       37
       37
       +
           let timeAgo = "";

     

       38
       38
       +
           let oldStatusClasses = "";

     

       39
       39
       +
       

     

       40
       40
       +
           if (!data.nowPlaying && data.createdAt) {

     

       41
       41
       +
               const date = new Date(data.createdAt);

     

       42
       42
       +
               const now = new Date();

     

       43
       43
       +
               const diff = now.getTime() - date.getTime();

     

       44
       44
       +
       

     

       45
       45
       +
               const minutes = Math.floor(diff / 60000);

     

       46
       46
       +
               const hours = Math.floor(minutes / 60);

     

       47
       47
       +
               const days = Math.floor(hours / 24);

     

       48
       48
       +
       

     

       49
       49
       +
               if (days > 0) timeAgo = `${days} days ago`;

     

       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
       +
               oldStatusClasses = days > 3

     

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

     

       56
       56
       +
                   : "";

     

       57
       57
       +
           }

     

       58
       58
       +
       

     

       59
       59
       +
           return (

     

       60
       60
       +
               <a

     

       61
       61
       +
                   id="now-playing"

     

       62
       62
       +
                   href={data.link}

     

       63
       63
       +
                   target="_blank"

     

       64
       64
       +
                   className={oldStatusClasses}

     

       65
       65
       +
               >

     

       66
       66
       +
                   <img

     

       67
       67
       +
                       src={data.albumArt}

     

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

     

       69
       69
       +
                   />

     

       70
       70
       +
                   <div

     

       71
       71
       +
                       style={{

     

       72
       72
       +
                           display: "flex",

     

       73
       73
       +
                           flexDirection: "column",

     

       74
       74
       +
                           gap: "2px",

     

       75
       75
       +
                           width: "100%",

     

       76
       76
       +
                       }}

     

       77
       77
       +
                   >

     

       78
       78
       +
                       <div style={{ fontWeight: "bold" }}>{data.song}</div>

     

       79
       79
       +
                       <div style={{ fontSize: "0.9em", marginTop: "-5px" }}>

     

       80
       80
       +
                           {data.artist}

     

       81
       81
       +
                       </div>

     

       82
       82
       +
                       <div

     

       83
       83
       +
                           style={{

     

       84
       84
       +
                               fontSize: "0.8em",

     

       85
       85
       +
                               opacity: 0.7,

     

       86
       86
       +
                               marginTop: "-5px",

     

       87
       87
       +
                           }}

     

       88
       88
       +
                       >

     

       89
       89
       +
                           {data.nowPlaying

     

       90
       90
       +
                               ? (

     

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

     

       92
       92
       +
                                       ▶ Now Playing

     

       93
       93
       +
                                   </span>

     

       94
       94
       +
                               )

     

       95
       95
       +
                               : timeAgo}

     

       96
       96
       +
                       </div>

     

       97
       97
       +
                   </div>

     

       98
       98
       +
               </a>

     

       99
       99
       +
           );

     

       100
       100
       +
       }

src/components/status.astro

This is a binary file and will not be displayed.

+8 -3

src/pages/index.astro

···

       3
       3
        
       

     

       4
       4
        
       import Header from "../components/Header.astro";

     

       5
       5
        
       import SocialLinks from "../components/SocialLinks.astro";

     

       6
       6
       -
       import Status from '../components/Status.jsx';

     

       7
       7
       -
       import NowPlaying from "../components/NowPlaying.jsx";

     

       8
       8
       -
       import ProjectsPane from "../components/ProjectsPane.astro";

     

       6
       6
       +
       //import ProjectsPane from "../components/ProjectsPane.astro";

     

       7
       7
       +
       

     

       8
       8
       +
       import Status from "../components/islands/Status.jsx";

     

       9
       9
       +
       import NowPlaying from "../components/islands/NowPlaying.jsx";

     

       9
       10
        
       ---

     

       10
       11
        
       

     

       11
       12
        
       <Layout title="hello" description="insert wave emoji">

     
···

       14
       15
        
           <Status client:load />

     

       15
       16
        
           <NowPlaying client:load />

     

       16
       17
        
           <SocialLinks />

     

       18
       18
       +
           <!--

     

       17
       19
        
           <a

     

       18
       20
        
             id="projects-button"

     

       19
       21
        
             href="#"

     
···

       23
       25
        
           >

     

       24
       26
        
             . . .

     

       25
       27
        
           </a>

     

       28
       28
       +
           -->

     

       26
       29
        
         </main>

     

       30
       30
       +
         <!--

     

       27
       31
        
         <ProjectsPane />

     

       28
       32
        
         <script>

     

       29
       33
        
           import { initializeProjects } from "../scripts/projects";

     

       30
       34
        
           initializeProjects();

     

       31
       35
        
         </script>

     

       36
       36
       +
         -->

     

       32
       37
        
       </Layout>