Skip to content

Commit

Permalink
Introduce Crude Rework (#4)
Browse files Browse the repository at this point in the history
  • Loading branch information
lucemans committed Dec 3, 2023
1 parent b53f2ff commit c52039e
Show file tree
Hide file tree
Showing 14 changed files with 374 additions and 136 deletions.
30 changes: 18 additions & 12 deletions app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,30 @@
@tailwind utilities;

:root {
/* font-family: 'Hack', monospace; */
font-size: 16px;
@apply text-notblack;
}

body {
@apply bg-white text-notblack dark:bg-notblack dark:text-white;
}

header {
font-family: 'Hack', monospace;
font-size: 18px;
@apply text-notblack;
}

.font-inter {
font-family: 'Inter', sans-serif;
.prose {
font-size: 16px;
}

.dagrid {
grid-template-rows: masonry;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
.prose h1 {
font-size: 1em;
}

@media (max-width: 800px) {
.dagrid {
grid-auto-rows: repeat(auto-fit, auto);
grid-template-columns: repeat(2, auto);
}
.prose h2 {
font-size: 1.2em;
font-weight: bold;
@apply border-b border-gray-300 pb-1 mt-4 first:mt-0;
}
4 changes: 0 additions & 4 deletions app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,6 @@ export default function RootLayout({
name="viewport"
content="width=device-width, initial-scale=1"
/>
<style>
@import
url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500&display=swap');
</style>
</head>
<body className="w-full min-h-screen">
<NavBar />
Expand Down
133 changes: 19 additions & 114 deletions app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,124 +1,29 @@
import { ProjectBox } from '../components/ProjectBox/ProjectBox';
import { RecentContributors } from '../components/sections/contributors/RecentContributors';
import { ChatDiscord } from '../components/sections/discord/ChatDiscord';
import { Projects } from '../components/sections/projects/Projects';
import { README } from '../components/sections/readme/README';

export default function App() {
return (
<div className="mx-auto flex items-center justify-center px-4 md:px-8">
<div className="grid w-full max-w-full dagrid">
<div className="relative w-full h-72 lg:h-auto bg-blue-400 col-span-2 lg:col-span-7 row-span-1 lg:row-span-3 rounded-md">
<div className="absolute inset-0 bg-gradient-to-tr from-black/5 to-white/20"></div>
<div className="absolute left-8 top-8 right-8 flex justify-between">
<div className="grow">
<h2 className="text-2xl lg:text-7xl text-white font-bold font-inter">
ENS Cards
</h2>
<p className="text-base lg:text-2xl text-white font-inter">
Swag Printing w Magical Powers
</p>
</div>
<div className="mx-auto flex flex-col gap-4 items-center justify-center px-4 md:px-8 pt-8">
<div className="w-full h-full max-w-4xl space-y-4 font-sans">
<div className="border rounded-md prose">
<div className="px-6 py-3 flex gap-2">
<h1>V3X Labs</h1>
<span className="text-neutral-400">
- Empowering Opensource
</span>
</div>
<img
src="/cards.svg"
alt=""
className="absolute bottom-0 left-0 right-0"
/>
</div>
<div className="text-sm md:text-base row-start-1 col-start-1 w-full bg-white border col-span-2 lg:col-span-5 lg:min-h-[420px] row-span-1 lg:row-span-2 rounded-md p-4 md:p-8">
<h2 className="text-base md:text-2xl">Hey there 👋</h2>
<p className="mt-2">
We are V3X Labs, a community of{' '}
<b>open-source developers</b> driven to{' '}
<b>make a difference</b>.
</p>
<p className="mt-2">
You might know us from some of our <b>projects</b>; such
as ENS Cards, ENS Tools, Scyllo & More
</p>

<README />

<div className="grid w-full gap-4 grid-cols-1 md:grid-cols-2">
<RecentContributors />
<ChatDiscord />
</div>
<div className="hidden md:flex w-full bg-gray-200 h-48 col-span-2 lg:col-span-5 row-span-1 rounded-md" />

<ProjectBox
img="https://github.com/v3xlabs/.github/raw/master/projects/ens-tools-small.png#1"
url="https://github.com/v3xlabs/ens-tools"
title="ENS Tools"
className="col-span-2 lg:col-span-4"
/>
<ProjectBox
img="https://github.com/v3xlabs/.github/raw/master/projects/scyllo-small.png#1"
url="https://github.com/v3xlabs/scyllo"
title="Scyllo"
className="col-span-2 lg:col-span-4"
/>
<ProjectBox
img="https://github.com/v3xlabs/.github/raw/master/projects/edgeserver-small.png#1"
url="https://github.com/v3xlabs/edgeserver"
title="EdgeServer"
className="col-span-2 lg:col-span-4"
/>
<ProjectBox
img="https://github.com/v3xlabs/.github/raw/master/projects/signed-rsvp-small.png#1"
url="https://github.com/v3xlabs/signed-rsvp"
title="Signed RSVP"
/>
<ProjectBox
img="https://github.com/v3xlabs/.github/raw/master/projects/worldname-small.png#1"
url="https://github.com/v3xlabs/worldcoin.name"
title="Worldcoin.name"
/>
<ProjectBox
img="https://github.com/v3xlabs/.github/raw/master/projects/sunflake-small.png#1"
url="https://github.com/v3xlabs/sunflake"
title="Sunflake"
/>
<ProjectBox
img="https://github.com/v3xlabs/.github/raw/master/projects/logger-small.png#1"
url="https://github.com/v3xlabs/logger"
title="Logger"
/>
<ProjectBox
img="https://github.com/v3xlabs/.github/raw/master/projects/redeez-small.png#1"
url="https://github.com/v3xlabs/redeez"
title="Redeez"
/>
<ProjectBox
img="https://github.com/v3xlabs/.github/raw/master/projects/permissio-small.png#1"
url="https://github.com/v3xlabs/permissio"
title="Permissio"
/>
<ProjectBox
img="https://github.com/v3xlabs/.github/raw/master/projects/eslint-small.png#1"
url="https://github.com/v3xlabs/eslint-v3xlabs"
title="ESLint"
/>
<ProjectBox
img="https://github.com/v3xlabs/.github/raw/master/projects/node-fullykiosk-small.png#1"
url="https://github.com/v3xlabs/node-fullykiosk"
title="Node FullyKiosk"
/>
<ProjectBox
img="https://github.com/v3xlabs/.github/raw/master/projects/eth-classify-small.png#1"
url="https://github.com/v3xlabs/eth-classify"
title="ETH Classify"
/>
<ProjectBox
img="https://github.com/v3xlabs/.github/raw/master/projects/cache-fns-small.png#1"
url="https://github.com/v3xlabs/cache-fns"
title="Cache Fns"
/>
<ProjectBox
img="https://github.com/v3xlabs/.github/raw/master/projects/error-fns-small.png#1"
url="https://github.com/v3xlabs/error-fns"
title="Error Fns"
/>
<ProjectBox
img="https://github.com/v3xlabs/.github/raw/master/projects/key-computer-small.png#1"
url="https://key.computer"
title="Key Computer"
/>
<ProjectBox
img="https://github.com/v3xlabs/.github/raw/master/projects/ghchart-small.png#1"
url="https://github.com/v3xlabs/ghchart"
title="Github Chart"
/>
<Projects />
</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion components/Footer/Footer.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export const Footer = () => {
return (
<footer className="w-full flex justify-center p-4">
<footer className="w-full flex justify-center p-4 pb-48">
<div className="mx-auto">V3X Labs BV.</div>
</footer>
);
Expand Down
16 changes: 11 additions & 5 deletions components/NavBar/NavBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,34 @@ import { FC } from 'react';

export const NavBar: FC = () => {
return (
<header className="w-full p-4 md:pt-6 md:pb-4 md:px-8 flex justify-between items-start">
<div className="flex flex-col justify-center mt-2">
<header className="lg:absolute lg:left-0 w-auto p-8 flex flex-col gap-4 max-w-xs">
<div className="flex flex-col justify-center whitespace-nowrap">
<div className="bg-notblack w-fit font-bold">
<span className="text-white -1 mx-3">v3xlabs</span>
</div>
<div>Empowering open-source</div>
</div>
<nav className="md:flex hidden">
<ul className="grid grid-rows-3 grid-flow-col gap-x-4">
<nav className="flex">
<ul className="">
{[
['.company', 'https://v3x.company'],
['.contact', 'https://v3x.contact'],
['.domains', 'https://v3x.domains'],
['.health', 'https://v3x.health'],
['.store', 'https://v3x.store'],
['.team', 'https://v3x.team'],
['.chat', 'https://v3x.chat'],
['.wiki', 'https://v3x.wiki'],
].map(([label, href]) => (
<li key={label}>
<a
href={href}
className="hover:text-blue-500 hover:underline text-notblack"
className={[
'hover:text-blue-500 hover:underline',
label == '.page'
? 'text-blue-500'
: 'text-notblack',
].join(' ')}
>
{label}
</a>
Expand Down
49 changes: 49 additions & 0 deletions components/sections/contributors/RecentContributors.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
const contributors_a = [
'lucemans',
'svemat01',
'antony1060',
'harryet',
'jontes-tech',
'robiot',
'prokopschield',
'm1guelpf',
'anaarsonist',
'hattorius',
'thejoshuahendrix',
'ItzDerock',
'visenp',
'imvlan',
'loidnoir',
'TG-Techie',
'M-Desormeaux',
'chalkedgoose',
'0xEquinox',
'KristofKekesi',
'milkedcow',
'joelimgu',
'oguzeray',
];

export const RecentContributors = () => {
return (
<div className="border w-full p-4 rounded-md space-y-2">
<h2>Recent Contributors</h2>
<ul className="flex gap-1 flex-wrap">
{contributors_a.map((contributor) => (
<li key={contributor}>
<a
href={`https://github.com/${contributor}`}
target="_blank"
>
<img
src={`https://github.com/${contributor}.png`}
className="w-7 h-7 aspect-square rounded-full"
alt={contributor}
/>
</a>
</li>
))}
</ul>
</div>
);
};
23 changes: 23 additions & 0 deletions components/sections/discord/ChatDiscord.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { FiExternalLink } from 'react-icons/fi';

export const ChatDiscord = () => {
return (
<div className="w-full border rounded-md p-4 space-y-1">
<h2 className="font-bold">
Join us on <span className="text-[#8498FB]">Discord</span>
</h2>
<p>
We chat everday about random stuff and build cool things, just
don't look in #vc-text
</p>
<a
href="https://discord.gg/v3x"
target="_blank"
className="flex text-center font-bold items-center gap-2 bg-[#8498FB] text-white px-4 ml-auto mt-2 py-2 rounded-md drop-shadow text-sm"
>
Open Discord
<FiExternalLink />
</a>
</div>
);
};
Loading

0 comments on commit c52039e

Please sign in to comment.