albert/albert.lol
1
0
Fork 0
mirror of https://github.com/skidoodle/albert.lol.git synced 2025-02-15 06:09:15 +01:00
Code Issues Projects Releases Packages Wiki Activity

Prettier and a new readme

Browse source
This commit is contained in:
skidoodle 2022-08-26 21:27:32 +02:00
parent 146b35d1d3
commit f21d8f8086
16 changed files with 352 additions and 2594 deletions
Download patch file Download diff file Expand all files Collapse all files

125
pages/index.tsx
View file

@ -1,66 +1,81 @@
import Image from 'next/image'
import Link from 'next/link'
import React from 'react'
import useSWR from 'swr'
import FadeIn from 'react-fade-in'
import Image from "next/image";
import Link from "next/link";
import React from "react";
import useSWR from "swr";
import FadeIn from "react-fade-in";
import { socials } from 'components/data/socials'
import { Icon } from 'components/Icon'
import { Toaster } from 'react-hot-toast'
import { FaSpotify } from 'react-icons/fa'
import { socials } from "components/data/socials";
import { Icon } from "components/Icon";
import { Toaster } from "react-hot-toast";
import { FaSpotify } from "react-icons/fa";
import profilePic from '../public/profile.webp'
import profilePic from "../public/profile.webp";
const fetcher = (url: RequestInfo) => fetch(url).then(r => r.json())
const fetcher = (url: RequestInfo) => fetch(url).then((r) => r.json());
export default function() {
const { data: spotify } = useSWR('/api/spotify', fetcher, { refreshInterval: 1000 })
if(!spotify) return
return (
<FadeIn>
<div className='px-8 w-11/12 m-auto rounded-lg max-w-4xl'>
<div className='flex flex-col justify-center items-center mt-40 md:mt-48 lg:mt-64'>
<Image src={profilePic} alt='Profile Picture' className="rounded-full text-center" height={150} width={150}/>
export default function () {
const { data: spotify } = useSWR("/api/spotify", fetcher, {
refreshInterval: 1000,
});
if (!spotify) return;
return (
<FadeIn>
<div className="px-8 w-11/12 m-auto rounded-lg max-w-4xl">
<div className="flex flex-col justify-center items-center mt-40 md:mt-48 lg:mt-64">
<Image
src={profilePic}
alt="Profile Picture"
className="rounded-full text-center"
height={150}
width={150}
/>
<h1 className='text-4xl font-bold mt-1'>albert</h1>
<h1 className="text-4xl font-bold mt-1">albert</h1>
<p className='text-[#9ca3af] text-xl flex flex-wrap items-center justify-center whitespace-pre-wrap'>
{ Math.floor((new Date().getTime() - new Date('2004-07-22').getTime()) / (1000 * 60 * 60 * 24 * 365.25)) }
yrs old <b className='font-semibold'>system administrator</b> and student from Hungary
</p>
</div>
<p className="text-[#9ca3af] text-xl flex flex-wrap items-center justify-center whitespace-pre-wrap">
{Math.floor(
(new Date().getTime() - new Date("2004-07-22").getTime()) /
(1000 * 60 * 60 * 24 * 365.25)
)}
yrs old <b className="font-semibold">system administrator</b> and
student from Hungary
</p>
</div>
<hr className='border-t-[#727277] w-4/5 md:w-2/5 m-auto mt-5 md:mt-8'/>
<hr className="border-t-[#727277] w-4/5 md:w-2/5 m-auto mt-5 md:mt-8" />
<div className='mt-3 flex justify-center items-center'>
<FaSpotify className='text-[#32a866]' />&nbsp;
<div className="mt-3 flex justify-center items-center">
<FaSpotify className="text-[#32a866]" />
&nbsp;
<p className="font-semibold">
Listening to
{spotify.song ? (
<Link href={`${spotify.song.url}`}>
<a target="_blank" className="text-[#32a866]">
{" "}
{spotify.song.title || "nothing"}
</a>
</Link>
) : (
<a className="text-[#32a866]"> nothing</a>
)}
</p>
</div>
<p className='font-semibold'>Listening to
{
spotify.song
? <Link href={`${spotify.song.url}`}>
<a target='_blank' className='text-[#32a866]'> { spotify.song.title || 'nothing' }</a>
</Link>
<div className="flex justify-between items-center text-3xl mt-11 md:mt-16 max-w-sm m-auto">
{socials.map((social) => (
<Icon
key={social.id}
reference={social.ref}
copyValue={social.copyValue}
>
{React.createElement(social.icon)}
</Icon>
))}
</div>
</div>
: <a className='text-[#32a866]'> nothing</a>
}
</p>
</div>
<div className='flex justify-between items-center text-3xl mt-11 md:mt-16 max-w-sm m-auto'>
{ socials.map(social => (
<Icon
key={ social.id }
reference={ social.ref }
copyValue={ social.copyValue }
>
{ React.createElement(social.icon) }
</Icon>
))}
</div>
</div>
<Toaster />
</FadeIn>
)
<Toaster />
</FadeIn>
);
}