🔥

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

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

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

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

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

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} alt=""/>
+                        <p>Listening to <b>{lastFM.song.name}</b></p>
+                    </a>
+                </>
+                :
+                <>
+                    <img src='https://i.albrt.hu/66e8e4c6.webp' width={50} height={50} alt=""/>
+                    <p>Not listening to anything</p>
+                </>
+            }
+            <div className={styles.tinyText}>
+                <FontAwesomeIcon icon={['fab', 'spotify']} /> Spotify
+            </div>
+        </div>
+    )
+}
+
+export default Spotify

components/Time.tsx

@@ -0,0 +1,22 @@
+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

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