update data to generic

components/WebLinks.js

@@ -28,16 +28,16 @@ const Links = () => {
   const social = allLinks.filter((el) => {
     return el.type === "social"
   });
-  const projects = allLinks.filter((el) => {
-    return el.type === "project"
+  const installs = allLinks.filter((el) => {
+    return el.type === "install"
   });
 
   const newProduct = bioData[0].newProduct; // checking for newProduct flag true false
   const newProductUrl = bioData[0].newProductUrl; // get product url if available
 
 
-  const nfts = allLinks.filter((el) => {
-    return el.type === "nft"
+  const demos = allLinks.filter((el) => {
+    return el.type === "demo"
   });
   const others = allLinks.filter((el) => {
     return el.type === "other"
@@ -77,7 +77,7 @@ const Links = () => {
           <LinkBio>
             <h1>
               {/* {description}  // Not used because I want to customize dots between text */}
-              Design Wizard <span>✦</span> Making Open source designs 2D/3D <span>✦</span> Creating NFT arts <span>✦</span> Voyaging in the Metaverse
+              {description ? description : <>Fall back text if description not in BioData.js</>}
             </h1>
 
             {/* Uncomment these if want to add more details about */}
@@ -108,23 +108,26 @@ const Links = () => {
               </div>
             </LinkSection>
 
+
             <LinkSection>
-              <h3>NFTs</h3>
+              <h3>Install</h3>
+
+
               {
-                nfts.map((i) => {
+                installs.map((i) => {
                   return (
                     <Link href={i.url} passHref key={i.title}>
                       <LinkBox>
-
                         <LinkTitle><img src={i.icon} style={{ filter: 'var(--img)' }} /> {i.title}</LinkTitle> <NewUp />
                       </LinkBox>
                     </Link>
                   )
                 })
               }
             </LinkSection>
+
             <LinkSection>
-              <h3>Featured Projects</h3>
+              <h3>Other</h3>
               {/* New Section will render once newProduct == true */}
               {(newProduct) ? <NewSection>
                 <Link href={newProductUrl} passHref >
@@ -135,21 +138,6 @@ const Links = () => {
                 </Link>
               </NewSection> : ''
               }
-
-              {
-                projects.map((i) => {
-                  return (
-                    <Link href={i.url} passHref key={i.title}>
-                      <LinkBox>
-                        <LinkTitle><img src={i.icon} /> {i.title}</LinkTitle> <NewUp />
-                      </LinkBox>
-                    </Link>
-                  )
-                })
-              }
-            </LinkSection>
-            <LinkSection>
-              <h3>Other</h3>
               {
                 others.map((i) => {
                   return (
@@ -166,7 +154,7 @@ const Links = () => {
         </TopPart>
         <BottomPart>
           <LinkFoot>
-            <h4>©{username}<span>✦</span> {name}</h4>
+            <h4>made by <a href="https://twitter.com/realvjy">{username}</a> </h4>
           </LinkFoot>
         </BottomPart>
 
@@ -211,6 +199,7 @@ const Avatar = styled.div`
 const AvatarWrap = styled.div`
    height: 100%;
    width: 100%;
+   filter: drop-shadow(0px 1px 2px var(--avatar-shadow));
    img{
     height: calc(100% - 6px);
     width: calc(100% - 6px);
@@ -219,7 +208,7 @@ const AvatarWrap = styled.div`
         height: 100%;
         width: 100%;
         position: absolute;
-        background: ${({ theme }) => theme.text.primary};
+        background: ${({ theme }) => theme.bg.primary};
    }
    .avatar-fill{
         height: calc(100% - 6px);
@@ -256,10 +245,10 @@ const Title = styled.div`
       }
     }
     .handle{
-      width: 120px;
+      height: 32px;
       margin-top: 6px;
       @media screen and (max-width: ${({ theme }) => theme.deviceSize.tablet}) {
-        width: 92px;
+        height: 28px;
       }
     }
 `
@@ -268,13 +257,13 @@ const LinkBio = styled.div`
     display: flex;
     flex-direction: column;
     h1{
-      font-size: 22px;
+      font-size: 24px;
       line-height: 30px;
       font-weight: 500;
       letter-spacing: -0.6px;
       padding: 0 20px;
       @media screen and (max-width: ${({ theme }) => theme.deviceSize.tablet}) {
-        font-size: 16px;
+        font-size: 20px;
         line-height: 20px;
         padding: 0 8px;
 
@@ -295,11 +284,11 @@ const LinkBio = styled.div`
     h4{
       font-size: 20px;
       letter-spacing: -.5px;
-      margin: 16px 0;
+      margin: 12px 0;
       color: ${({ theme }) => theme.text.secondary};
       font-weight: 500;
         @media screen and (max-width: ${({ theme }) => theme.deviceSize.tablet}) {
-          font-size: 18px;
+          font-size: 15px;
           padding: 0 20px;
           line-height: 24px;
         }

data/BioData.js

@@ -3,12 +3,13 @@ const bioData = [
     {
         name: 'vijay verma',
         username: 'realvjy',
-        titleImg: '/realvjy.svg',
+        titleImg: '/title.svg',
         avatar: '/avatar.png',
         nftAvatar: true,
-        description: 'Design Wizard ✦ Making Open source designs 2D/3D ✦ Creating NFT arts ✦ Voyaging in the Metaverse',
-        current: 'Currently building what I love @overlayz',
-        type: 'other', icon: '/bmc.png',
+        description: 'Custom bio links for creatives who love coding',
+        current: 'Just use this template and deploy on vercel for free',
+        type: 'other',
+        icon: '/avatar.png',
         newProductUrl: 'https://www.figma.com/community/widget/1128028298799358676/Random-Hues',
         newProduct: true,
     },

data/LinksData.js

@@ -6,24 +6,7 @@ const webLinks = [
         type: 'social',
         icon: '/twitter.svg'
     },
-    {
-        title: 'Foundation',
-        url: 'https://foundation.app/@realvjy',
-        type: 'nft',
-        icon: '/foundation.svg'
-    },
-    {
-        title: 'OpenSea',
-        url: 'https://opensea.io/realvjy',
-        type: 'nft',
-        icon: '/opensea.svg'
-    },
-    {
-        title: 'Rarible',
-        url: 'https://rarible.com/realvjy',
-        type: 'nft',
-        icon: '/rarible.svg'
-    },
+
     {
         title: 'Figma',
         url: 'https://figma.com/@realvjy',
@@ -73,10 +56,10 @@ const webLinks = [
         icon: '/illlustrations.png'
     },
     {
-        title: 'Gumroad',
+        title: 'Use this template',
         url: 'https://realvjy.gumroad.com/',
-        type: 'other',
-        icon: '/gumroad.png'
+        type: 'install',
+        icon: '/use.png'
     },
     {
         title: 'Linkedin',
@@ -87,18 +70,25 @@ const webLinks = [
     {
         title: 'Github',
         url: 'https://www.github.com/realvjy/',
-        type: 'social',
+        type: 'install',
         icon: '/github.svg'
     },
+
     {
         title: 'Buy Me a Coffee',
         url: 'https://www.buymeacoffee.com/realvjy',
         type: 'other',
         icon: '/bmc.png'
     },
     {
-        title: 'Website',
-        url: 'https://vijayverma.co',
+        title: 'Documentation',
+        url: 'https://rarible.com/realvjy',
+        type: 'install',
+        icon: '/doc.png'
+    },
+    {
+        title: 'vjy.me/lnk',
+        url: 'https://opensea.io/realvjy',
         type: 'other',
         icon: '/vjy.png'
     }

next.config.js

@@ -5,8 +5,8 @@ const nextConfig = {
     optimizeFonts: false, async rewrites() {
         return [
             {
-                source: '/(tw|lnk|ins|fb|db|insta|be)',
-                destination: '/links',
+                source: '/(links|lnk|l)',
+                destination: '/',
             },
         ]
     },

pages/index.js

@@ -3,7 +3,6 @@ import Image from 'next/image'
 import styled from "styled-components";
 import { NextSeo } from 'next-seo';
 import WebLinks from '../components/WebLinks';
-import Header from '../components/Header';
 import { HexIcon, HomeIcon, NewUp } from '../components/icons';
 
 import vercel from '../public/vercel.svg';