website

git clone https://pyrossh.dev/repos/website.git

木 Personal website of pyrossh. Built with astrojs, shiki, vite.

2b22eec3 — pyrossh

finish remaining pages

Files changed (11) hide show

components/Header.tsx +4 -7
components/icons/HardwareIcon.tsx +15 -0
components/icons/SoftwareIcon.tsx +20 -0
fresh.gen.ts +4 -4
routes/_404.tsx +10 -7
routes/api/joke.ts +0 -21
routes/cv.tsx +274 -0
routes/greet/[name].tsx +0 -5
routes/index.tsx +112 -32
routes/posts.tsx +13 -0
tailwind.config.ts +0 -2

components/Header.tsx CHANGED Viewed

@@ -12,16 +12,13 @@ export default function Header() {
             <span class="mr-1 font-logo font-bold">木</span> pyros.sh
           </a>
           <div class="flex flex-row flex-1 items-center text-white sm:[&>a]:mx-1 [&>a]:px-2 [&>a:hover]:bg-gray-600 data-current:child:bg-gray-600">
-            <a href="/dev" rel="prefetch">
-              dev
-            </a>
             <div>|</div>
-            <a href="/ref" rel="prefetch">
+            <a href="/cv" rel="prefetch">
-              ref
+              cv
             </a>
             <div>|</div>
-            <a href="/blog" rel="prefetch">
+            <a href="/posts" rel="prefetch">
-              blog
+              posts
             </a>
           </div>
           <SocialLinks />

components/icons/HardwareIcon.tsx ADDED Viewed

@@ -0,0 +1,15 @@
+export default function HardwareIcon({ size = "32" }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        d="M22 0H2a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2ZM6 16a1 1 0 1 1 1-1a1.001 1.001 0 0 1-1 1ZM22 6h-2.184a3 3 0 1 0 0 2H22v4h-4v2h4v2h-2v2h2v4h-8v-1.184a3 3 0 1 0-2 0V22H7v-4.184a3 3 0 1 0-2 0V22H2V2h4v6h2V2h2v10h2V2h10Zm-4 1a1 1 0 1 1-1-1a1.001 1.001 0 0 1 1 1Z"
+      />
+    </svg>
+  );
+}

components/icons/SoftwareIcon.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+export default function SoftwareIcon({ size = "32" }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        d="M14 18.315A7.037 7.037 0 0 1 11.263 16H3V4h18v2.264a7.046 7.046 0 0 1 2 2.15V4a2.006 2.006 0 0 0-2-2H3a2.006 2.006 0 0 0-2 2v12a2.006 2.006 0 0 0 2 2h7v2H8v2h8v-2h-2Z"
+      />
+      <path
+        fill="currentColor"
+        d="M17 6a6 6 0 1 0 6 6a5.998 5.998 0 0 0-6-6Zm0 10a4 4 0 1 1 4-4a4.005 4.005 0 0 1-4 4Z"
+      />
+      <circle cx="17" cy="12" r="1" fill="currentColor" />
+    </svg>
+  );
+}

fresh.gen.ts CHANGED Viewed

@@ -5,9 +5,9 @@
 import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
 import * as $_middleware from "./routes/_middleware.ts";
-import * as $api_joke from "./routes/api/joke.ts";
+import * as $cv from "./routes/cv.tsx";
-import * as $greet_name_ from "./routes/greet/[name].tsx";
 import * as $index from "./routes/index.tsx";
+import * as $posts from "./routes/posts.tsx";
 import * as $Counter from "./islands/Counter.tsx";
 import * as $LemonDrop from "./islands/LemonDrop.tsx";
 import { type Manifest } from "$fresh/server.ts";
@@ -17,9 +17,9 @@ const manifest = {
     "./routes/_404.tsx": $_404,
     "./routes/_app.tsx": $_app,
     "./routes/_middleware.ts": $_middleware,
-    "./routes/api/joke.ts": $api_joke,
+    "./routes/cv.tsx": $cv,
-    "./routes/greet/[name].tsx": $greet_name_,
     "./routes/index.tsx": $index,
+    "./routes/posts.tsx": $posts,
   },
   islands: {
     "./islands/Counter.tsx": $Counter,

routes/_404.tsx CHANGED Viewed

@@ -1,12 +1,14 @@
 import { Head } from "$fresh/runtime.ts";
+import { PageProps } from "$fresh/server.ts";
-export default function Error404() {
+export default function Error404({ url }: PageProps) {
   return (
     <>
       <Head>
-        <title>404 - Page not found</title>
+        <title slot="head">pyros.sh | Page Not Found</title>
+        <meta name="description" content="Page Not Found" />
       </Head>
-      <div class="px-4 py-8 mx-auto bg-[#86efac]">
+      <div class="px-4 py-8 mx-auto">
         <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
           <img
             class="my-6"
@@ -16,10 +18,11 @@ export default function Error404() {
             alt="the Fresh logo: a sliced lemon dripping with juice"
           />
           <h1 class="text-4xl font-bold">404 - Page not found</h1>
-          <p class="my-4">
-            The page you were looking for doesn't exist.
+          <p class="my-4">The page you were looking for doesn't exist.</p>
+          <pre>Path: {url.pathname}</pre>
+          <a href="/" class="underline mt-4">
+            Go back home
-          </p>
+          </a>
-          <a href="/" class="underline">Go back home</a>
         </div>
       </div>
     </>

routes/api/joke.ts DELETED Viewed

@@ -1,21 +0,0 @@
-import { HandlerContext } from "$fresh/server.ts";
-// Jokes courtesy of https://punsandoneliners.com/randomness/programmer-jokes/
-const JOKES = [
-  "Why do Java developers often wear glasses? They can't C#.",
-  "A SQL query walks into a bar, goes up to two tables and says “can I join you?”",
-  "Wasn't hard to crack Forrest Gump's password. 1forrest1.",
-  "I love pressing the F5 key. It's refreshing.",
-  "Called IT support and a chap from Australia came to fix my network connection.  I asked “Do you come from a LAN down under?”",
-  "There are 10 types of people in the world. Those who understand binary and those who don't.",
-  "Why are assembly programmers often wet? They work below C level.",
-  "My favourite computer based band is the Black IPs.",
-  "What programme do you use to predict the music tastes of former US presidential candidates? An Al Gore Rhythm.",
-  "An SEO expert walked into a bar, pub, inn, tavern, hostelry, public house.",
-];
-export const handler = (_req: Request, _ctx: HandlerContext): Response => {
-  const randomIndex = Math.floor(Math.random() * JOKES.length);
-  const body = JOKES[randomIndex];
-  return new Response(body);
-};

routes/cv.tsx ADDED Viewed

@@ -0,0 +1,274 @@
+import { asset, Head } from "$fresh/runtime.ts";
+export default function CV() {
+  return (
+    <div class="mx-auto">
+      <Head>
+        <title>pyros.sh | CV</title>
+        <meta name="description" content="Peter John's CV" />
+      </Head>
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+        .container {
+          font-family: system-ui;
+        }
+        b {
+          font-weight: 700;
+        }
+        ul {
+          margin: 0.5rem;
+          padding-left: 2rem;
+          @media (--mobile) {
+            margin: 0.5rem;
+            padding-left: 1rem;
+          }
+        }
+        li {
+          list-style-type: disc;
+          list-style-position: outside;
+        }
+        h3 {
+          font-weight: 700;
+          margin-top: 0.5rem;
+        }
+        h4 {
+          font-weight: 500;
+          margin-top: 0.5rem;
+        }
+        h5 {
+          font-size: 1.25rem;
+          line-height: 1.75rem;
+          font-weight: 400;
+          margin-top: 0.5rem;
+          margin-bottom: 1rem;
+        }
+        `,
+        }}
+      />
+      <div>
+        <section>
+          <h3>Equal Experts</h3>
+          <h4>Software Developer, Oct 2018 - present</h4>
+          <h5>
+            Making Software. Better. Equal Experts is a network of talented,
+            experienced software consultants, specialising in agile delivery.
+          </h5>
+          <div>
+            These are the client projects I worked on,
+            <ul>
+              <li>
+                <b>John Lewis</b>
+                <ul>
+                  <li>
+                    Built the new Product Description Page (PDP) for Simple
+                    Carpets using nextjs in home interiors
+                  </li>
+                  <li>
+                    Helped build, improve, and run AB experiments in the
+                    customer services and my orders pages in customer hub
+                  </li>
+                </ul>
+              </li>
+              <li>
+                <b>iOWNA</b>
+                <ul>
+                  <li>
+                    Built a content editor for curators to create content on our
+                    platform
+                  </li>
+                  <li>
+                    Built the iOWNA crossplatform app in react-native that works
+                    in android, ios, and web using one codebase.
+                  </li>
+                  <li>
+                    Implemented admin specific functionalities in the web app
+                  </li>
+                  <li>
+                    Implemented an in-app OTA update method using expo and
+                    semantic versionin
+                  </li>
+                  <li>Built the iOWNA marketing website</li>
+                  <li>
+                    Built the Health Questionnaire clinician/patient feedback
+                    form feature with push notifications
+                  </li>
+                </ul>
+              </li>
+              <li>
+                <b>Zeta</b>
+                <ul>
+                  <li>
+                    Added multiple download formats (pdf,html,xlsx) for reports
+                    in the Reporting Center
+                  </li>
+                  <li>
+                    Created a Groovy Script to automate creating ACL's in
+                    sandbox authorization framework
+                  </li>
+                  <li>
+                    Integrated Camunda Workflow Engine into Zeta services in
+                    Operations Center
+                  </li>
+                  <li>
+                    Built a few workflows on Camunda and integrated it with some
+                    internal services
+                  </li>
+                  <li>
+                    Built a custom k8s CRD using the operator framework to
+                    automate creating ACL's in sandbox using custom resources
+                  </li>
+                </ul>
+              </li>
+              <li>
+                <b>Lifebox</b>
+                <ul>
+                  <li>
+                    Added search functionality to the hospital procedure codes
+                  </li>
+                  <li>
+                    Converted the Health Questionnaire from json to native go
+                    code making it easier to make changes to it
+                  </li>
+                  <li>
+                    Integrated with SAP using HL7 message format to create
+                    patients, episodes, schedule/cancel procedures
+                  </li>
+                  <li>
+                    Built the Patient Document repository for uploading,
+                    downloading patient files
+                  </li>
+                  <li>
+                    Built the patients online reports view using the data from
+                    SAP
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+        </section>
+        <section>
+          <h3>Numberz</h3>
+          <h4>Full Stack Developer, Sept 2016 - Oct 2018</h4>
+          <h5>
+            Numberz integrates banking with your day-2-day business work-flows
+            freeing up a lot of effort, time and heart-burn, to help your
+            business grow! You’ll never have to spend time syncing information
+            between different systems. Save and record receipts &amp; spends
+            with a single tap, automatically categorise transactions for
+            book-keeping and easily share information with your accountant.
+          </h5>
+          <ul>
+            <li>
+              Implemented new features and fixed bugs on the numberz android app
+            </li>
+            <li>Integrated numberz with Tally ERP</li>
+            <li>
+              Implemented CI and Devops within out system to ease our deployment
+              process using docker and docker-compose
+            </li>
+            <li>
+              Created a slack bot called deploybot which was used to deploy our
+              microservices to our servers
+            </li>
+            <li>
+              Started tech talks on Thursdays to discuss cutting edge
+              technologies
+            </li>
+            <li>
+              Architected and built the Notification Service using rabbitmq and
+              nodejs
+            </li>
+            <li>Built the Multi-User and Multi-Company Features</li>
+            <li>
+              Implemented and lead a team on integration with the GSTN System so
+              that customers could file their GST Taxes within our product
+            </li>
+            <li>
+              Architected and built the numberz Identity Management Service(IMS)
+            </li>
+            <li>
+              Architected our new product called the Numberz Accounts Receivable
+              (AR)
+            </li>
+            <li>Laid down the architecture for the frontend and backend</li>
+            <li>
+              Built these core features for our new AR Product - Auto Reminders,
+              Manual Reminders, User Management, Cash Discounting, CFO Dashboard
+              Metrics
+            </li>
+          </ul>
+        </section>
+        <section>
+          <h3>Playlyfe</h3>
+          <h4>Full Stack Developer, Apr 2014 - Sept 2016</h4>
+          <h5>
+            Playlyfe is an online Gamification Platform which empowers anyone to
+            design and implement a gamified system.This platform allows a normal
+            user to convert a gamified system's design into a fully functional
+            web-application complete with teams, real-time notifications,
+            leaderboards and many more features. Made Critical decisions on what
+            tech stack to switch to for our gamification product Catalyst.
+          </h5>
+          <ul>
+            <li>
+              Built the Playlyfe Hybrid Mobile app using Phonegap for Android
+              and iOS
+            </li>
+            <li>
+              Built the leaderboard system using Mongodb, Redis and Couchbase as
+              the datastore
+            </li>
+            <li>Migration of data from v1 to v2 of the API</li>
+            <li>
+              Built SDKs for the Playlyfe v2 API in C#, Java, Python, Ruby, PHP,
+              Nodejs, Gos
+            </li>
+            <li>
+              Maintained the job server and wrote most of the background jobs
+            </li>
+            <li>
+              Added documentation to most of the REST API and created the
+              Developer Console which was Like Swagger UI
+            </li>
+            <li>Integrated our REST API in Leanosphere's LMS</li>
+            <li>
+              Integrated the REST API in Knolskape's product Aktivlearn LMS
+            </li>
+            <li>Integrated the REST API in Linkstreet's LMS</li>
+            <li>
+              Integrated the REST API in Moodle LMS by creating an admin plugin
+              to add Gamification features
+            </li>
+            <li>
+              Rebuilt the core platform in golang for performance and
+              developement speed
+            </li>
+            <li>Built the GraphQL API for our cutting edge product Catalyst</li>
+            <li>
+              Convinced the boss to create our own scripting language plscript
+              for our rule engine.
+            </li>
+            <li>
+              Build a REST API for our product catalyst for a POC with Vodafone
+            </li>
+            <li>
+              Built the Quiz, Review, Match, Tournament features in Catalyst for
+              a major project with HP
+            </li>
+            <li>
+              Added gamification features to Saudi Matches a popular game
+              tracking app
+            </li>
+          </ul>
+        </section>
+      </div>
+    </div>
+  );
+}

routes/greet/[name].tsx DELETED Viewed

@@ -1,5 +0,0 @@
-import { PageProps } from "$fresh/server.ts";
-export default function Greet(props: PageProps) {
-  return <div>Hello {props.params.name}</div>;
-}

routes/index.tsx CHANGED Viewed

@@ -1,19 +1,12 @@
-import { useSignal } from "@preact/signals";
-import { Handlers } from "$fresh/server.ts";
 import Slide from "../components/Slide.tsx";
 import ProjectsIcon from "../components/icons/ProjectsIcon.tsx";
 import TreeIcon from "../components/icons/TreeIcon.tsx";
 import ContactIcon from "../components/icons/ContactIcon.tsx";
+import HardwareIcon from "../components/icons/HardwareIcon.tsx";
+import SoftwareIcon from "../components/icons/SoftwareIcon.tsx";
 import { asset, Head } from "$fresh/runtime.ts";
-export const handler: Handlers = {
-  async GET(req, ctx) {
-    return await ctx.render();
-  },
-};
 export default function Home() {
-  const count = useSignal(5);
   return (
     <div class="mx-auto">
       <Head>
@@ -48,7 +41,7 @@ export default function Home() {
           </p>
         </div>
         <div>
-          <div class="flex items-center mt-8 mb-4 [&>svg]:mr-2">
+          <div class="flex items-center mt-8 mb-4 child-svg:mr-2 child-svg:text-pink-800">
             <ProjectsIcon size="36" />
             <h2 class="my-0 text-3xl font-bold">Projects</h2>
           </div>
@@ -117,11 +110,115 @@ export default function Home() {
               </p>
             </Slide>
             <section class="flex flex-col flex-1">
+              <div class="flex text-3xl font-bold child-svg:mr-2 child-svg:text-green-800">
+                <HardwareIcon size="36" />
+                Hardware Setup
+              </div>
+              <div class="ml-1 mt-6 mb-2">My current hardware setup is</div>
+              <ul class="ml-1.5">
+                <li>
+                  <strong>Laptop:</strong> M2 Macbook Air
+                </li>
+                <li>
+                  <strong>CPU:</strong> Apple M2 (8 cores, 8 threads)
+                </li>
+                <li>
+                  <strong>RAM:</strong> 16GB
+                </li>
+                <li>
+                  <strong>SSD:</strong> 512GB
+                </li>
+              </ul>
+            </section>
+            <section class="flex flex-col flex-1">
-              <div class="flex text-3xl font-bold child-svg:mr-2">
+              <div class="flex text-3xl font-bold child-svg:mr-2 child-svg:text-red-800">
+                <SoftwareIcon size="36" />
+                Software Setup
+              </div>
+              <div class="ml-1 mt-6 mb-2">
+                My current list of daily applications
+              </div>
+              <ul class="grid gap-2 grid-cols-3 ml-4 child:list-disc child:px-0 child:py-1 heir-a:text-blue-800">
+                <li>
+                  <a
+                    href="https://github.com/exelban/stats"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Menubar Stats
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="https://github.com/brave/brave-browser"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Brave Browser
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="https://github.com/microsoft/vscode"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    VS Code IDE
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="https://github.com/helix-editor/helix"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Helix
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="https://github.com/fish-shell/fish-shell"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Fish Shell
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="https://github.com/gnachman/iTerm2"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    iTerm2
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="https://colorslurp.com"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Color Slurp
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="https://www.vectornator.io"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Curve
+                  </a>
+                </li>
+              </ul>
+            </section>
+            <section class="flex flex-col flex-1">
+              <div class="flex text-3xl font-bold child-svg:mr-2 child-svg:text-amber-900">
                 <TreeIcon size="36" />
                 Interests
               </div>
-              <div class="ml-1 mt-6 mb-4">
+              <div class="ml-1 mt-6 mb-2">
                 These are some of the stuff I work on
               </div>
               <ul class="grid gap-2 grid-cols-3 ml-4 [&>li]:list-disc [&>li]:px-0 [&>li]:py-1 [&>li:marker]:text-black">
@@ -140,14 +237,14 @@ export default function Home() {
               </ul>
             </section>
             <section class="flex flex-col flex-1">
-              <div class="flex text-3xl font-bold child-svg:mr-2">
+              <div class="flex text-3xl font-bold child-svg:mr-2 child-svg:text-cyan-950">
                 <ContactIcon size="36" />
                 Contact
               </div>
-              <div class="ml-1 mt-6 mb-4">
+              <div class="ml-1 mt-6 mb-2">
                 You can contact me through any of these methods
               </div>
-              <div class="child:flex child:mb-3 child:ml-2 heir-a:ml-4 heir-a:text-blue">
+              <div class="child:flex child:mb-3 child:ml-2 heir-a:ml-4 heir-a:text-blue-800">
                 <div>
                   Email:
                   <a href="mailto:pyros2097@gmail.com">pyros2097@gmail.com</a>
@@ -167,23 +264,6 @@ export default function Home() {
           </div>
         </div>
       </div>
-      {
-        /* <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
-        <img
-          class="my-6"
-          src="/logo.svg"
-          width="128"
-          height="128"
-          alt="the Fresh logo: a sliced lemon dripping with juice"
-        />
-        <h1 class="text-4xl font-bold">Welcome to Fresh</h1>
-        <p class="my-4">
-          Try updating this message in the
-          <code class="mx-2">./routes/index.tsx</code> file, and refresh.
-        </p>
-        <Counter count={count} />
-      </div> */
-      }
     </div>
   );
 }

routes/posts.tsx ADDED Viewed

@@ -0,0 +1,13 @@
+import { Head } from "$fresh/runtime.ts";
+export default function Posts() {
+  return (
+    <div class="mx-auto">
+      <Head>
+        <title>pyros.sh | Posts</title>
+        <meta name="description" content="Peter John's Posts" />
+      </Head>
+      <div class="px-4 py-40 mx-auto">TBD</div>
+    </div>
+  );
+}

tailwind.config.ts CHANGED Viewed

@@ -21,8 +21,6 @@ export default {
         "black-lighter": "#1f1f1f",
         "black-light": "#313a3d",
         "yellow-dark": "#858579",
-        blue: "#0645ad",
-        "blue-light": "#0e81c7",
         "slider-bg": "#f0ede2",
       },
     },

~repos /website

git clone https://pyrossh.dev/repos/website.git

木 Personal website of pyrossh. Built with astrojs, shiki, vite.