commit

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
+}

.github/dependabot.yml

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "daily"

.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+.vercel

README.md

@@ -0,0 +1,2 @@
+# portfolio-v2
+Built with Next.js ♥

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/Icon.tsx

@@ -0,0 +1,35 @@
+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)}>
+                        {icon}
+                    </a>
+                ) : (
+                    <a href={reference} target='_blank' rel='noopener noreferrer' aria-label="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 { useLastFM } from 'use-last-fm'
+import { FaSpotify } from 'react-icons/fa'
+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='song_art.png' width={50} height={50} alt=""/>
+                    <p>Not listening to anything</p>
+                </>
+            }
+            <div className={styles.tinyText}>
+                <FaSpotify /> Spotify
+            </div>
+        </div>
+    )
+}
+
+export default Spotify

components/Time.tsx

@@ -0,0 +1,26 @@
+import { FaClock } from 'react-icons/fa';
+import { dayjs } from 'components/dayjs'
+import { useEffect, useState } from 'react'
+import styles from 'styles/Home.module.scss'
+
+const now = () => dayjs().tz()
+
+const format = 'hhA'
+
+const Time = () => {
+  const [date, setDate] = useState(now())
+
+  useEffect(() => {
+    const timer = setInterval(() => setDate(now()), 1000)
+    return () => clearInterval(timer)
+  }, [])
+
+  return (
+    <p className={styles.time}>
+      <FaClock />
+      {' '}{date.format('DD/MM/YYYY • h:mm:ss A')}
+    </p>
+  )
+}
+
+export default Time

components/Weather.tsx

@@ -0,0 +1,28 @@
+import styles from 'styles/Home.module.scss'
+import { FaSun, FaMoon, FaCloudSun, FaCloudMoon, FaCloud, FaCloudShowersHeavy } from 'react-icons/fa'
+import { BsCloudDrizzleFill, BsCloudsFill, BsCloudLightningFill, BsCloudSnowFill, BsCloudFogFill } from 'react-icons/bs' 
+
+const Weather = ({data}: {data: any}) => {
+    const { temp: temperature } = data.main
+    const { icon: weatherIcon, description: weatherDescription} = data.weather[0]
+
+    const icons: any = {
+        _01d: <FaSun />, _01n: <FaMoon />,
+        _02d: <FaCloudSun />, _02n: <FaCloudMoon />,
+        _03d: <FaCloud />, _03n: <FaCloud />,
+        _04d: <BsCloudsFill />, _04n: <BsCloudsFill />,
+        _09d: <BsCloudDrizzleFill />, _09n: <BsCloudDrizzleFill />,
+        _10d: <FaCloudShowersHeavy />, _10n: <FaCloudShowersHeavy />,
+        _11d: <BsCloudLightningFill />, _11n: <BsCloudLightningFill />,
+        _13d: <BsCloudSnowFill />, _13n: <BsCloudSnowFill />,
+        _50d: <BsCloudFogFill />, _50n: <BsCloudFogFill />
+    }
+
+    return (
+        <div className={styles.weather}>
+            {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

components/dayjs.ts

@@ -0,0 +1,9 @@
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
+
+dayjs.extend(utc)
+dayjs.extend(timezone)
+dayjs.tz.setDefault('Europe/Budapest')
+
+export { dayjs }

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,9 @@
+const path = require('path')
+
+module.exports = {
+  productionBrowserSourceMaps: true,
+  swcMinify: true,
+  sassOptions: {
+    includePaths: [path.join(__dirname, 'styles')]
+  }
+}

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "portfolio",
+  "version": "1.0",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "buildexport": "next build && next export"
+  },
+  "dependencies": {
+    "aws-sdk": "^2.1125.0",
+    "dotenv": "^16.0.0",
+    "@swc/core": "^1.2.173",
+    "copy-to-clipboard": "^3.3.1",
+    "csstype": "^3.0.10",
+    "dayjs": "^1.11.1",
+    "goober": "2.1.9",
+    "next": "12.1.5",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-fade-in": "^2.0.1",
+    "react-hot-toast": "^2.2.0",
+    "react-icons": "^4.3.1",
+    "sass": "^1.51.0",
+    "use-last-fm": "^0.6.1"
+  },
+  "devDependencies": {
+    "@types/node": "17.0.27",
+    "@types/react": "^18.0.8",
+    "@types/node": "17.0.30",
+    "@types/react": "^18.0.7",
+    "@types/react-dom": "^18.0.3",
+    "eslint": "8.14.0",
+    "eslint-config-next": "12.1.1",
+    "eslint": "8.14.0",
+    "eslint-config-next": "12.1.5",
+    "typescript": "4.6.4"
+  }
+}

pages/_app.tsx

@@ -0,0 +1,8 @@
+import { AppProps } from 'next/app'
+import 'styles/globals.scss'
+
+const MyApp = ({ Component, pageProps }: AppProps) => {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

pages/_document.tsx

@@ -0,0 +1,26 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+const Document = () => {
+    return (
+        <>
+            <Html lang='en'>
+                <Head>
+                    <link rel='preconnect' href='https://vitals.vercel-insights.com' />
+                    <link rel='preconnect' href='https://ws.audioscrobbler.com' />
+                    <meta property='og:url' content='https://albrt.hu' />
+                    <meta property='og:site_name' content='albrt.hu' />
+                    <meta name='title' content='albert' />
+                    <meta name='og:title' content='albert' />
+                    <meta name='description' content='system administrator' />
+                    <meta name='og:description' content='system administrator' />
+                    <meta name='theme-color' content='#000000' />
+                    <meta property='og:image' content='/favicon.ico' />
+                </Head>
+                <Main />
+                <NextScript />
+            </Html>
+        </>
+    )
+}
+
+export default Document

pages/api/s3.tsx

@@ -0,0 +1,26 @@
+import aws from 'aws-sdk';
+
+export default async function handler(req, res) {
+    aws.config.update({
+        accessKeyId: process.env.ACCESS_KEY,
+        secretAccessKey: process.env.SECRET_KEY,
+        region: process.env.REGION,
+        endpoint: process.env.ENDPOINT,
+        signatureVersion: 'v4'
+    });
+    const s3 = new aws.S3();
+    const params = {
+        Bucket: 'i.albrt.hu'
+    }
+    const data = await s3.listObjectsV2(params).promise()
+    let totalsize = data.Contents!.reduce((acc, curr) => {
+        return acc + curr.Size! / 1024 / 1024 / 1024
+    }, 0)
+
+    res.statusCode = 200
+    res.setHeader('Content-Type', 'application/json')
+    res.end(JSON.stringify({
+        'objectCount': data.KeyCount,
+        'totalSize': (Math.round(totalsize * 100) / 100)
+    }, null, 2))
+}

pages/index.tsx

@@ -0,0 +1,52 @@
+import { GetServerSideProps } from 'next'
+import Head from 'next/head'
+import FadeIn from 'react-fade-in'
+import Body from 'components/Body'
+import Icon from 'components/Icon'
+import IconLayout from 'components/IconLayout'
+import MainLayout from 'components/MainLayout'
+import Spotify from 'components/Spotify'
+import Weather from 'components/Weather'
+import { FaSteam, FaGithub, FaEnvelope } from 'react-icons/fa'
+import { RiInstagramFill } from 'react-icons/ri'
+import { SiDiscord } from 'react-icons/si'
+import dynamic from 'next/dynamic'
+const Time = dynamic(() => import('components/Time'), {
+    ssr: false,
+})
+
+const Home = ({data}: any) => {
+    return (
+        <>
+            <Head>
+                <title>albert</title>
+            </Head>
+            <Body>
+                <FadeIn>
+                    <MainLayout />
+                        <IconLayout>
+                            <Icon icon={<FaGithub />} reference={'https://github.com/skidoodle'} copy={false} />
+                            <Icon icon={<FaSteam />} reference={'https://steamcommunity.com/id/_albert'} copy={false} />
+                            <Icon icon={<FaEnvelope />} reference={'hello@albrt.hu'} copy={true} />
+                            <Icon icon={<RiInstagramFill />} reference={'https://instagram.com/albertadam_'} copy={false} />
+                            <Icon icon={<SiDiscord />} reference={'albert#8838'} copy={true} />
+                        </IconLayout>
+                    <Time />
+                    <Weather data={data} />
+                    <Spotify />
+                </FadeIn>
+            </Body>
+        </>
+    )
+}
+
+export const getServerSideProps: GetServerSideProps = async () => {
+    const response = await fetch('https://api.openweathermap.org/data/2.5/weather?lat=47.51&lon=19.04&appid=1b3c10c18e894eaf1fd63eedde53fa54&units=metric')
+    const data = await response.json()
+
+    return {
+        props: { data }
+    }
+}
+
+export default Home

styles/Home.module.scss

@@ -0,0 +1,128 @@
+@import '_variables';
+
+.bodySection {
+    margin-top: 8rem;
+    margin-left: 10%;
+    margin-right: 10%;
+}
+
+.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.4em;
+        cursor: pointer;
+        margin-right: 6%;
+        margin-bottom: 1em;
+    }
+}
+
+.time {
+    svg {
+        font-size: .9em;
+    }
+}
+
+.weather {
+    img {
+        float: left;
+    }
+
+    p {
+        display: inline;
+    }
+
+    span {
+        font-size: .8rem;
+    }
+    
+    a:hover {
+        text-decoration: none;
+        color: #C7D2FE;
+    }
+    svg {
+        font-size: .9em;
+    }
+}
+    
+.spotify {
+    font-size: 1em;
+    margin-top: 5%;
+    padding: 1rem 1rem 1.8rem 1rem;
+    border: 1px solid $spotify-box-color;
+    border-radius: .5rem;
+
+    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;
+    }
+}

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;

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;
+}

tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "baseUrl": "."
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}