🔥

src/components/Body.tsx

@@ -0,0 +1,11 @@
+import styles from '../styles/Home.module.scss'
+
+const Body = ({children}: {children: any}) => {
+    return(
+        <div className={styles.bodySection}>
+            {children}
+        </div>
+    )
+}
+
+export default Body

src/components/Footer.tsx

@@ -0,0 +1,11 @@
+import styles from '../styles/Home.module.scss'
+
+const Footer = () => {
+    return(
+        <div className={styles.footerLayout}>
+            <a href='https://cigany.ninja' target="_blank" rel='noopener noreferrer'>?</a>
+        </div>
+    )
+}
+
+export default Footer

src/components/Icon.tsx

@@ -0,0 +1,36 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import toast, { Toaster } from 'react-hot-toast';
+import copy from 'copy-to-clipboard'
+
+const Icon = ({icon, reference, copy = false} : {icon: any, reference: any, copy?: boolean}) => {
+    return(
+        <>
+            { 
+                copy ? (
+                    <a onClick={() => doThings(reference)}>
+                        <FontAwesomeIcon icon={icon} />
+                    </a>
+                ) : (
+                    <a href={reference} target='_blank' rel="noopener noreferrer" aria-label="Icon">
+                        <FontAwesomeIcon icon={icon} />
+                    </a>
+                )
+            }
+            <Toaster position='bottom-left' reverseOrder={false} />
+        </>
+    )
+}
+
+const doThings = (value: any) => {
+    copy(value)
+    toast.remove()
+    toast.success('Successfully copied to clipboard', {
+        style: {
+            background: '#111',
+            color: '#fff',
+            fontSize: '1.1rem'
+        }
+    })
+}
+
+export default Icon

src/components/IconLayout.tsx

@@ -0,0 +1,13 @@
+import styles from '../styles/Home.module.scss'
+
+const IconLayout = ({children}: {children: any}) => {
+    return(
+        <>
+            <div className={styles.iconLayout}>
+                {children}
+            </div>
+        </>
+    )
+}
+
+export default IconLayout

src/components/MainLayout.tsx

@@ -0,0 +1,14 @@
+import styles from '../styles/Home.module.scss'
+
+const MainLayout = () => {
+    return(
+        <>
+            <div className={styles.mainLayout}>
+                <h1>albert</h1>
+                <p>17-year-old <b>system administrator</b> and student from Hungary</p>
+            </div>
+        </>
+    )
+}
+
+export default MainLayout

src/components/Spotify.tsx

@@ -0,0 +1,31 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useLastFM } from 'use-last-fm'
+import styles from '../styles/Home.module.scss'
+
+const Spotify = () => {
+    const lastFM = useLastFM('albrtadam', 'f6d19bc25ca340225c70c3d386cd4eab');
+
+    return(
+        <div className={styles.spotify}>
+            {lastFM.status === 'playing'
+                ?
+                <>
+                    <a href={lastFM.song.url} target='_blank' rel="noopener noreferrer">
+                        <img src={lastFM.song.art} width={50} height={50} className={styles.song} alt=""/>
+                        <p>Listening to <b>{lastFM.song.name}</b></p>
+                    </a>
+                </>
+                :
+                <>
+                    <img src="https://i.albrt.hu/66e8e4c6.webp" width={50} height={50} className={styles.nosong} alt=""/>
+                    <p>Not listening to anything</p>
+                </>
+            }
+            <div className={styles.tinyText}>
+                <FontAwesomeIcon icon={['fab', 'spotify']} /> Spotify
+            </div>
+        </div>
+    )
+}
+
+export default Spotify

src/components/Time.tsx

@@ -0,0 +1,23 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useEffect, useState } from 'react'
+
+import styles from '../styles/Home.module.scss'
+
+const Timer = () => {
+    const [date, setDate] = useState(new Date())
+    
+    useEffect(() => {      
+        const interval = setInterval(() => {
+            setDate(new Date())
+        }, 1000)
+        return () => clearInterval(interval)
+    })
+
+    return(
+        <div className={styles.time}>
+            <p><FontAwesomeIcon icon={['fas', 'clock']} /> {date.toLocaleDateString('en-GB', { dateStyle: 'short' }) + ' • ' + date.toLocaleTimeString('en-GB', { timeStyle: 'medium', hour12: true}).toUpperCase()}</p>
+        </div>
+    )
+}
+
+export default Timer

src/components/Weather.tsx

@@ -0,0 +1,27 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import styles from '../styles/Home.module.scss'
+
+const Weather = ({data}: {data: any}) => {
+    const { temp: temperature } = data.main
+    const { icon: weatherIcon, description: weatherDescription} = data.weather[0]
+
+    const icons: any = {
+        _01d: ['fas', 'sun'], _01n: ['fas', 'moon'],
+        _02d: ['fas', 'cloud-sun'], _02n: ['fas', 'cloud-moon'],
+        _03d: ['fas', 'cloud'], _03n: ['fas', 'cloud'],
+        _04d: ['fas', 'clouds'], _04n: ['fas', 'clouds'],
+        _09d: ['fas', 'cloud-drizzle'], _09n: ['fas', 'cloud-drizzle'],
+        _10d: ['fas', 'cloud-showers-heavy'], _10n: ['fas', 'cloud-showers-heavy'],
+        _11d: ['fas', 'cloud-bolt-sun'], _11n: ['fas', 'cloud-bolt-moon'],
+        _13d: ['fas', 'snow-flake'], _13n: ['fas', 'snow-flake'],
+        _50d: ['fas', 'cloud-fog'], _50n: ['fas', 'cloud-fog']
+    }
+
+    return (
+        <div className={styles.weather}>
+            <FontAwesomeIcon icon={icons[`_${weatherIcon}`]}/> <p>It&apos;s currently <b>{parseInt(temperature)} °C</b> <span>({weatherDescription})</span> in <a href='https://weather.com/en-GB/weather/today/l/b979f874d2f515646f37e2bb434a85cc04869c5a35c6bdf1c6fba26f659313f0' target="_blank" rel='noopener noreferrer'><b>Budapest</b></a></p>
+        </div>
+    )
+}
+
+export default Weather

src/styles/Home.module.scss

@@ -0,0 +1,151 @@
+@import '_variables';
+
+.bodySection {
+    margin-top: 8rem;
+    margin-left: 10%;
+    margin-right: 10%;
+    animation: fadeIn .4s forwards;
+    transition: all .2s ease-in-out;
+}
+
+.mainLayout {
+    h1 {
+        line-height: .2;
+        font-size: 3rem;
+        font-weight: 700;
+    }
+
+    p {
+        color: $secondary-color;
+        font-size: 1rem;
+        font-weight: 400;
+    }
+}
+
+
+.iconLayout {
+    margin-bottom: 5%;
+
+    svg {
+        font-size: 1.2em;
+        cursor: pointer;
+        margin-right: 7%;
+        margin-bottom: 1em;
+    }
+}
+
+.time,
+.weather,
+.spotify {
+    animation: fadeIn .6s forwards;
+    opacity: 0;
+    font-size: 1em;
+}
+.time svg,
+.weather svg {
+    font-size: .9rem;
+}
+
+.time {
+    animation-delay: 0.2s;
+}
+
+.weather {
+    opacity: 0;
+    animation-delay: 0.5s;
+
+    img {
+        float: left;
+    }
+
+    p {
+        display: inline;
+    }
+
+    a {
+        font-size: 1em;
+    }
+    a:hover {
+        text-decoration: none;
+        color: #C7D2FE;
+    }
+}
+    
+.spotify {
+    font-size: .9em;
+    margin-top: 5%;
+    opacity: 0;
+    animation-delay: .7s;
+    padding: 1rem 1rem 1.8rem 1rem;
+    border: 1px solid $spotify-box-color;
+    border-radius: .5rem;
+    cursor: pointer;
+
+    img {
+        border-radius: 10px;
+        float: left;
+        margin-right: 5%;
+    }
+
+    p {
+        display: inline;
+    }
+
+    .tinyText {
+        font-weight: 300;
+        font-size: .8em;
+
+        svg {
+            margin-top: 5px;
+            color: #1DB954;
+        }
+    }
+}
+
+
+.footerLayout {
+    position: absolute;
+    bottom: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+
+    a {
+        cursor: pointer;
+        text-decoration: none;
+
+        &:hover {
+            color: #C7D2FE
+        }
+    }
+}
+
+@media(min-width: 1200px) {
+    .bodySection {
+        margin-left: 30%;
+        margin-right: 45%;
+    }
+
+    .iconLayout {
+        margin-bottom: 2%;
+    }
+
+    .spotify {
+        margin-top: 8%;
+        width: 80%;
+    }
+}
+
+@media(min-height: 800px) {
+    .bodySection {
+        margin-top: 15rem;
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}

src/styles/_variables.scss

@@ -0,0 +1,6 @@
+$background-color: #000000;
+$primary-color: #ffffff;
+$secondary-color: #9CA3AF;
+$selection-color: #8039e2;
+$spotify-box-color: #521c9e;
+$font: 'Inter', sans-serif;

src/styles/globals.scss

@@ -0,0 +1,26 @@
+@import '_variables';
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700&display=swap');
+
+html,
+body {
+    background-color: $background-color;
+    color: $primary-color;
+    padding: 0;
+    margin: 0;
+    font-family: $font;
+    font-weight: 400;
+}
+
+::selection {
+  background: rgba($selection-color, .7);
+  color: $primary-color;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+* {
+    box-sizing: border-box;
+}