adding simple profile display

DerLev · Aug 2, 2023 · 571afd4 · 571afd4
1 parent c6300f0
commit 571afd4
Show file tree

Hide file tree

Showing 7 changed files with 350 additions and 21 deletions.
diff --git a/homepage/assets/derlev-profile.webp b/homepage/assets/derlev-profile.webp
diff --git a/homepage/next.config.js b/homepage/next.config.js
@@ -3,7 +3,7 @@ const withTwin = require('./withTwin')
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  output: 'standalone'
+  output: 'standalone',
 }
 
 module.exports = withTwin(nextConfig)
diff --git a/homepage/package.json b/homepage/package.json
@@ -34,6 +34,8 @@
     "prettier-plugin-twin.macro": "^1.0.14",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.10.1",
+    "sharp": "^0.32.4",
     "tailwindcss": "^3.3.3",
     "twin.macro": "^3.4.0",
     "typescript": "5.1.6"

diff --git a/homepage/pages/index.tsx b/homepage/pages/index.tsx
@@ -1,13 +1,45 @@
+import Image from 'next/image'
 import tw from 'twin.macro'
+import DerLevProfile from '@/assets/derlev-profile.webp'
 
 const styles = {
-  wrapper: tw`flex grow flex-col items-center justify-center`,
+  wrapper: tw`flex grow flex-col items-center justify-center gap-4`,
+  profile: tw`rounded-full shadow-lg`,
+  title: tw`font-semibold text-3xl`,
+  derlev: [
+    tw`[--tw-gradient-from-position: 25%] [--tw-gradient-to-position: 70%]`,
+    tw`bg-gradient-to-tr from-primary-400 to-accent-500`,
+    tw`bg-clip-text text-transparent`,
+  ],
+  socialsStack: tw`flex w-full flex-col items-center gap-2`,
+  socialsButton: tw`flex w-full max-w-xs items-center justify-center gap-2 rounded-md border-2 border-primary-400 py-0.5 px-2 transition hover:border-primary-500 active:(translate-y-0.5 transform)`,
 }
 
 const Index = () => {
   return (
     <div css={styles.wrapper}>
-      <p>Hello World!</p>
+      <Image
+        src={DerLevProfile}
+        alt={'DerLev Profile'}
+        width={128}
+        css={styles.profile}
+        placeholder="blur"
+        quality={80}
+        loading="lazy"
+      />
+      <h1 css={styles.title}>
+        Hi, my name is <span css={styles.derlev}>DerLev</span>!
+      </h1>
+      {/* <div css={styles.socialsStack}>
+        <button css={styles.socialsButton}>
+          <FaSpotify />
+          <span>Spotify</span>
+        </button>
+        <button css={styles.socialsButton}>
+          <FaSpotify />
+          <span>Spotify</span>
+        </button>
+      </div> */}
     </div>
   )
 }

diff --git a/homepage/styles/GlobalStyles.tsx b/homepage/styles/GlobalStyles.tsx
@@ -8,7 +8,7 @@ const customStyles = css({
   },
 
   body: {
-    ...tw`bg-background text-text-100 font-body`,
+    ...tw`bg-background font-body text-text-100`,
     ...tw`antialiased`,
   },
 })

diff --git a/homepage/tailwind.config.js b/homepage/tailwind.config.js
@@ -4,13 +4,13 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        'text': {
+        text: {
           100: '#fafafa',
           500: '#7d7d7d',
-          900: '#050505'
+          900: '#050505',
         },
-        'background': '#050505',
-        'primary': {
+        background: '#050505',
+        primary: {
           50: '#f1e6ff',
           100: '#d4b3ff',
           200: '#b780fe',
@@ -20,10 +20,10 @@ module.exports = {
           600: '#4d01b2',
           700: '#37017f',
           800: '#21004c',
-          900: '#0b0019'
+          900: '#0b0019',
         },
-        'secondary': '#262626',
-        'accent': {
+        secondary: '#262626',
+        accent: {
           50: '#e7fef5',
           100: '#b6fce0',
           200: '#85facb',
@@ -33,14 +33,14 @@ module.exports = {
           600: '#07ab6a',
           700: '#057a4b',
           800: '#03492d',
-          900: '#01180f'
+          900: '#01180f',
         },
       }
     },
     fontFamily: {
-      'display': ['"Space Grotesk"', 'sans-serif'],
-      'body': ['"Space Grotesk"', 'sans-serif']
-    }
+      display: ['"Space Grotesk"', 'sans-serif'],
+      body: ['"Space Grotesk"', 'sans-serif'],
+    },
   },
   plugins: [],
 }