feat(initialization): WIP page.

Adds a WIP page while the rest of the application is fleshed out.
mango-habanero · Apr 18, 2024 · 2a7225a · 2a7225a
1 parent af067e6
commit 2a7225a
Show file tree

Hide file tree

Showing 7 changed files with 149 additions and 0 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -0,0 +1,24 @@
+import type {Metadata} from "next";
+import "./globals.css";
+import {baiJamjuree} from "./ui/fonts";
+
+
+export const metadata: Metadata = {
+  applicationName: "Mango Habanero",
+  authors: [{ name: "Philip Wafula", url: "https://mango-habanero.dev/"}],
+  generator: "Next.js",
+  title: "Mango Habanero",
+  description: "A portfolio app for Philip Wafula.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${baiJamjuree.className} anti-aliased bg-black`}>{children}</body>
+    </html>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -0,0 +1,24 @@
+import {WorkInProgress} from "@/app/ui/maintenance/workInProgress";
+
+export default function Home() {
+    const links = [{
+        label: 'Github',
+        name: 'Philip Wafula',
+        url: 'https://github.com/PhilipWafula'
+    }, {
+        label: 'LinkedIn',
+        name: 'Philip Wafula',
+        url: 'https://www.linkedin.com/in/philip-w-304664116/'
+    }]
+    const technologies = [ 'Digital Ocean','Fast API', 'Git', 'Github Actions', 'Next.js', 'Postgres', 'Python', 'Typescript'];
+  return (
+    <main className='flex flex-col gap-6 min-h-screen min-w-screen p-6'>
+        <WorkInProgress
+            links={links}
+            role='Software Engineer'
+            technologies={technologies}
+            title='Work in progress'
+        />
+    </main>
+  );
+}
diff --git a/src/app/ui/cards.tsx b/src/app/ui/cards.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+export function Card({ children }: { children: React.ReactNode }) {
+    return (
+        <div className="bg-neutral-900 flex-col gap-6 items-start p-4 lg:w-max md:w-maxq">{children}</div>
+    );
+}
diff --git a/src/app/ui/fonts.ts b/src/app/ui/fonts.ts
@@ -0,0 +1,6 @@
+import {Bai_Jamjuree} from "next/font/google";
+
+export const baiJamjuree = Bai_Jamjuree({
+    weight: ['200', '300', '400', '500', '600', '700'],
+    subsets: ['latin']
+})
diff --git a/src/app/ui/maintenance/workInProgress.tsx b/src/app/ui/maintenance/workInProgress.tsx
@@ -0,0 +1,59 @@
+import {Card} from "@/app/ui/cards";
+import {TitleWithLogo} from "@/app/ui/titles";
+import {Label, CardSectionText} from "@/app/ui/typography";
+import {ArrowUpRightIcon} from "@heroicons/react/24/solid";
+import Link from "next/link";
+import React from "react";
+
+
+interface WorkInProgressProps {
+    links: {
+        label: string;
+        name: string;
+        url: string;
+    }[];
+    role: string;
+    technologies: string[];
+    title: string;
+}
+
+function CardSection({ content, icon, label, link }: { content: React.ReactNode; icon?: React.ReactNode; label: string;  link?: string;  }) {
+    return (
+        <div className='bg-neutral-800 border-l-2 border-neutral-500 flex items-center justify-between lg:min-w-40 min-h-3 my-2'>
+            <div className='flex flex-col items-start justify-center min-h-14 px-3 py-2'>
+                <Label label={label} />
+                <CardSectionText text={content} />
+            </div>
+            {link && (
+                <Link href={link} rel='noopener noreferrer' target='_blank' className='flex h-14 items-center justify-center shrink-0 text-zima-blue w-14'>
+                    {icon}
+                </Link>
+            )}
+        </div>
+    );
+}
+
+export function WorkInProgress({ links, role, technologies, title }: WorkInProgressProps) {
+    return (
+        <Card>
+            <TitleWithLogo label='Website revamp' title={title} />
+            <CardSection content={role} label='Role' />
+            {links.map((link, index) => (
+                <CardSection
+                    content={link.name}
+                    icon={<ArrowUpRightIcon className='h-6 w-6 text-zima-blue'/>}
+                    key={index}
+                    label={link.label}
+                    link={link.url}
+                />
+            ))}
+            <CardSection content={
+                <div className='grid grid-cols-2 gap-1'>
+                    {technologies.map((technology, index) => (
+                        <span key={index} className='text-sm text-neutral-50'>{technology}</span>
+                    ))}
+                </div>
+            } label='Stack & Technologies'/>
+        </Card>
+    );
+}
diff --git a/src/app/ui/titles.tsx b/src/app/ui/titles.tsx
@@ -0,0 +1,16 @@
+import {Label} from "@/app/ui/typography";
+
+
+export function TitleWithLogo({label, title}: { label: string, title: string }) {
+    return (
+        < div className='flex flex-row gap-3 items-center mb-4'>
+            <div className='flex flex-col items-start'>
+                <div className='w-12 h-12 bg-zima-blue flex-shrink-0'></div>
+            </div>
+            <div className='flex flex-col items-start'>
+                <Label label={label}/>
+                <div className='not-italic text-center text-neutral-50 lg:text-3xl'>{title}</div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/app/ui/typography.tsx b/src/app/ui/typography.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+export function CardSectionText({ text }: { text: React.ReactNode }) {
+    return (
+        <span className='font-medium not-italic text-neutral-50 text-sm'>{text}</span>
+    )
+}
+
+export function Label({ label }: { label: string }) {
+    return (
+        <span className='font-medium overflow-hidden text-neutral-500 text-ellipsis text-xs'>{label}</span>
+    );
+}