Merge pull request 'Security fixes, documentation updates, and cleanup' (#1) from aidan/my-website:main into main

.gitignore

@@ -24,7 +24,10 @@ dist-ssr
 *.sw?
 
 # Bun
-bun.lockb
+bun.lock*
+
+# pnpm
+pnpm-lock.yaml
 
 # ts build info
 tsconfig.app.tsbuildinfo

README.md

@@ -1,27 +1,56 @@
 # Giv's Website
 
 ## Introduction
+
 Hey, this is my website! You will be able to know what I'm good on and how to contact me through there.
 
-## Used Technologies
+## Technology Stack
+
 - React
 - TypeScript
 - Vite
 
 ## How to access?
+
 - Thanks to NineTailed, the deploy is available [here](https://givfnz.com)
 - If you want to check the source code, visit the project repo on [Gitea](https://git.pontusmail.org/GivFNZ/my-website).
 
 ## Contributions
-Any contribution is welcome. If you want to test the website in your own machine to help on this, make sure you have node.js installed, then clone the project repo and do the command: 
 
-`npm i`
+Any contribution is welcome. If you want to test the website in your own machine to help on this, make sure you have Node.js installed, then clone the project repo and run the following commands:
 
-Then it will be available at localhost://5173.
+### NPM
+
+- `npm i` - Install dependencies
+- `npm run dev` - Run dev server
+
+### Bun
+
+- `bun install` - Install dependencies
+- `bun dev` - Run dev server
+
+The development server will be available at http://localhost:5173.
+
+### Environment Variables
+
+**The LastFM feature is disabled, and this environment variable is not required yet.**
+
+To run the project, you need to set up the following environment variables:
+
+| Variable                    | Description              |
+|-----------------------------|--------------------------|
+| `VITE_LASTFM_API_KEY`       | Your [Last.fm API Key]() |
+
+Create a `.env` file in the root of the project and add the required variables like so:
+
+```env
+VITE_LASTFM_API_KEY=your-lastfm-api-key-here
+```
 
 ## Special Thanks
+
 - [Aidan](https://github.com/ihatenodejs)
 - [lucmsilva](https://github.com/lucmsilva651/)
-- [NineTailedFox]
+- NineTailedFox
 
-Enjoy!
+**Enjoy!**

src/api/lastfm.ts

@@ -1,6 +1,6 @@
 import { api } from "../lib/axios";
 
-const api_key = import.meta.env.VITE_LASTFM_API_KEY
+const api_key = null;
 
 export interface getRecentTracksResponse {
     recenttracks: {

src/locales/en-us.json

@@ -9,8 +9,8 @@
     "projects": "Projects",
     "send": "Send",
     "myLast": "My Last.FM Status",
-    "myLastDescription": "Take a look on my last played song:",
+    "myLastDescription": "I'm listening to:",
-    "lastLink": "Check this song page on Last.FM",
+    "lastLink": "View on Last.FM",
     "music": "Music",
     "currentlyListening": "I'm currently listening to it!",
     "lastUpdate": "Last update: "

src/pages/home/index.tsx

@@ -29,7 +29,7 @@ export default function Home() {
   return (
     <MainContainer>
       <TopSection>
-        <Avatar src="https://avatars.githubusercontent.com/u/53719063?v=4" alt="Giv's Gh picture" />
+        <Avatar src="https://avatars.githubusercontent.com/u/53719063?v=4" alt="GitHub Profile Picture" />
         <Paragraph>
           <span ref={typedElement} />
         </Paragraph>

src/pages/music/index.tsx

@@ -4,7 +4,7 @@ import { useQuery } from '@tanstack/react-query'
 import { Paragraph } from "../../components/Paragraph/styles";
 import { useTranslation } from "react-i18next";
 import { IconLink } from "../home/styles";
-
+import { MusicDescription, MusicTitle } from "./styles";
 
 export default function Music() {
     const { t } = useTranslation()
@@ -14,8 +14,8 @@ export default function Music() {
     })
     return (
         <MainContainer>
-            <h1>{t("myLast")}</h1>
+            <MusicTitle>{t("myLast")}</MusicTitle>
-            <h3>{t("myLastDescription")}</h3>
+            <MusicDescription>{t("myLastDescription")}</MusicDescription>
             <Paragraph>{lastResponse?.recenttracks?.track[0].name} - {lastResponse?.recenttracks?.track[0].artist["#text"]}</Paragraph>
             <IconLink target="blank" href={lastResponse?.recenttracks?.track[0].url}>{t("lastLink")}</IconLink>
             {lastResponse?.recenttracks?.track[0]?.date?.["#text"] ?

src/pages/music/styles.ts

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+export const MusicTitle = styled.h1`
+  padding-bottom: 1rem;
+`;
+
+export const MusicDescription = styled.h3`
+  font-size: 1.5rem;
+  font-weight: 400;
+`;