Completely gut and repopulate with my content

.vitepress/config.ts

@@ -6,23 +6,35 @@ export default defineConfig({
   description: "Software Engineer",
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
+    siteTitle: "mjfs.us",
     nav: [
       { text: "Home", link: "/" },
-      { text: "Examples", link: "/markdown-examples" },
+      { text: "Experience", link: "/mystro" },
+      { text: "Contact", link: "/contact" },
     ],
 
     sidebar: [
       {
-        text: "Examples",
+        text: "Work Experience",
         items: [
-          { text: "Markdown Examples", link: "/markdown-examples" },
+          { text: "Mystro", link: "/mystro" },
-          { text: "Runtime API Examples", link: "/api-examples" },
+          { text: "Rotabull", link: "/rotabull" },
+          { text: "TV Time", link: "/tv-time" },
+          { text: "Hypremium", link: "/hypremium" },
         ],
       },
+      {
+        text: "Personal Projects",
+        items: [{ text: "mjfs.us", link: "/mjfs-us" }],
+      },
     ],
 
     socialLinks: [
-      { icon: "github", link: "https://github.com/vuejs/vitepress" },
+      { icon: "github", link: "https://github.com/mitchell" },
+      {
+        icon: "linkedin",
+        link: "https://www.linkedin.com/in/mitchelljfsimon/",
+      },
     ],
   },
 });

.vitepress/theme/style.css

@@ -49,10 +49,10 @@
   --vp-c-default-3: var(--vp-c-gray-3);
   --vp-c-default-soft: var(--vp-c-gray-soft);
 
-  --vp-c-brand-1: var(--vp-c-indigo-1);
+  --vp-c-brand-1: var(--vp-c-green-1);
-  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-2: var(--vp-c-green-2);
-  --vp-c-brand-3: var(--vp-c-indigo-3);
+  --vp-c-brand-3: var(--vp-c-green-3);
-  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+  --vp-c-brand-soft: var(--vp-c-green-soft);
 
   --vp-c-tip-1: var(--vp-c-brand-1);
   --vp-c-tip-2: var(--vp-c-brand-2);
@@ -94,8 +94,8 @@
   --vp-home-hero-name-color: transparent;
   --vp-home-hero-name-background: -webkit-linear-gradient(
     120deg,
-    #bd34fe 30%,
+    #3880a8 30%,
-    #41d1ff
+    #32b141
   );
 
   --vp-home-hero-image-background-image: linear-gradient(

README.md

@@ -9,7 +9,7 @@ bun install
 To run:
 
 ```bash
-bun run index.md
+bun run dev
 ```
 
 This project was created using `bun init` in bun v1.1.12. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.

api-examples.md

@@ -1,55 +0,0 @@
----
-outline: deep
----
-
-# Runtime API Examples
-
-This page demonstrates usage of some of the runtime APIs provided by VitePress.
-
-The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
-
-```md
-<script setup>
-import { useData } from 'vitepress'
-
-const { theme, page, frontmatter } = useData()
-</script>
-
-## Results
-
-### Theme Data
-
-<pre>{{ theme }}</pre>
-
-### Page Data
-
-<pre>{{ page }}</pre>
-
-### Page Frontmatter
-
-<pre>{{ frontmatter }}</pre>
-```
-
-<script setup>
-import { useData } from 'vitepress'
-
-const { site, theme, page, frontmatter } = useData()
-</script>
-
-## Results
-
-### Theme Data
-
-<pre>{{ theme }}</pre>
-
-### Page Data
-
-<pre>{{ page }}</pre>
-
-### Page Frontmatter
-
-<pre>{{ frontmatter }}</pre>
-
-## More
-
-Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).

contact.md

@@ -0,0 +1,63 @@
+---
+layout: home
+
+hero:
+  name: "Mitchell Simon"
+  text: "Software Engineer"
+  tagline: Specializing in web, mobile, and dev-ops
+---
+
+<script setup lang="ts">
+import { VPButton } from "vitepress/theme";
+import { useClipboard } from "@vueuse/core";
+
+const formattedPhone = "+1 (949) 872 7279";
+const formattedDiscord = "zettam on Discord";
+const discordLink = "https://discord.com/users/145338365133193226/";
+
+const email = "m@mjfs.us";
+const phone = "+19498727279";
+const discord = "zettam";
+const { text, copy, copied, isSupported } = useClipboard();
+</script>
+
+<div v-if="isSupported">
+  <VPButton
+    style="margin: 6px"
+    theme="brand"
+    @click="copy(email)"
+    :text="text === email ? `Copied ${email}` : email"
+  />
+  <VPButton
+    style="margin: 6px"
+    theme="alt"
+    @click="copy(phone)"
+    :text="text === phone ? `Copied ${phone}` : formattedPhone"
+  />
+  <VPButton
+    style="margin: 6px"
+    theme="alt"
+    @click="copy(discord)"
+    :text="text === discord ? `Copied ${discord}` : formattedDiscord"
+  />
+</div>
+<div v-else>
+  <VPButton
+    style="margin: 6px"
+    theme="brand"
+    :href="`mailto:${email}`"
+    :text="email"
+  />
+  <VPButton
+    style="margin: 6px"
+    theme="alt"
+    :href="`tel:${phone}`"
+    :text="formattedPhone"
+  />
+  <VPButton
+    style="margin: 6px"
+    theme="alt"
+    :href="discordLink"
+    :text="formattedDiscord"
+  />
+</div>

hypremium.md

@@ -0,0 +1,22 @@
+# Hypremium.
+
+## Software Engineer, Backend Lead
+
+#### May 2018 - February 2019 (10 months)
+
+Lead the backend team in designing and developing the platform's web infrastructure. Serve as primary systems and developer operations engineer.
+
+## Software Engineer
+
+#### January 2018 - April 2018 (4 months)
+
+Maintain and improve platform's, formerly used, monolithic web API and application.
+
+## Technologies
+
+- Golang
+- Serverless (AWS Lambda)
+- TravisCI
+- PostgreSQL
+- Redis
+- Ruby on Rails

index.md

@@ -5,20 +5,19 @@ layout: home
 hero:
   name: "Mitchell Simon"
   text: "Software Engineer"
-  tagline: My great project tagline
+  tagline: Specializing in web, mobile, and dev-ops
-  actions:
-    - theme: brand
-      text: Markdown Examples
-      link: /markdown-examples
-    - theme: alt
-      text: API Examples
-      link: /api-examples
 
 features:
-  - title: Feature A
+  - title: Web
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+    details:
-  - title: Feature B
+      Designed, developed, and deployed multiple full-stack web applications. Using
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+      technologies like React.js, Ruby on Rails, Phoenix (Elixir), and Golang.
-  - title: Feature C
+  - title: Mobile
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+    details:
+      Extensive React-Native experience through production-level projects used by
+      thousands of users to this day.
+  - title: DevOps
+    details:
+      A love of automation and a start in system administration helps me stay interested in
+      the latest dev-ops practices and tooling used by companies, both large and small.
 ---

markdown-examples.md

@@ -1,85 +0,0 @@
-# Markdown Extension Examples
-
-This page demonstrates some of the built-in markdown extensions provided by VitePress.
-
-## Syntax Highlighting
-
-VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
-
-**Input**
-
-````md
-```js{4}
-export default {
-  data () {
-    return {
-      msg: 'Highlighted!'
-    }
-  }
-}
-```
-````
-
-**Output**
-
-```js{4}
-export default {
-  data () {
-    return {
-      msg: 'Highlighted!'
-    }
-  }
-}
-```
-
-## Custom Containers
-
-**Input**
-
-```md
-::: info
-This is an info box.
-:::
-
-::: tip
-This is a tip.
-:::
-
-::: warning
-This is a warning.
-:::
-
-::: danger
-This is a dangerous warning.
-:::
-
-::: details
-This is a details block.
-:::
-```
-
-**Output**
-
-::: info
-This is an info box.
-:::
-
-::: tip
-This is a tip.
-:::
-
-::: warning
-This is a warning.
-:::
-
-::: danger
-This is a dangerous warning.
-:::
-
-::: details
-This is a details block.
-:::
-
-## More
-
-Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).

mjfs-us.md

@@ -0,0 +1,7 @@
+# mjfs.us
+
+This website is simple but effective and powered by [VitePress](https://vitepress.dev/). A static
+site generator that uses Vite and Vue under the hood.
+
+The content is composed with Markdown then staticly rendered and deployed to AWS S3/Cloudfront for
+max performance and SEO optimization.

mystro.md

@@ -0,0 +1,23 @@
+# Mystro
+
+## Lead Developer
+
+#### July 2022 - Present
+
+Fully develop and deploy user-ready port of original Mystro iOS and Android native apps into a
+single React-Native codebase. Support the application while implementing advanced features, like
+real-time filtering and native modules for automation and networking features. Develop supporting
+web services for things like tracking user rewards and data ingestion for analytics.
+
+Additionally, I help to onboard/mentor new engineers to the team and plan development. As well as,
+spending time improving the ease of development by configuring and maintaining developer tooling and
+semi-automated deployment via OTA updates.
+
+## Technologies
+
+- React-Native
+- TypeScript
+- Swift iOS Native Modules
+- Java Android Native Modules
+- Serverless (AWS Lambda)
+- AWS DynamoDB & AppConfig

package.json

@@ -5,6 +5,8 @@
   "devDependencies": {
     "@eslint/js": "^9.5.0",
     "@types/bun": "latest",
+    "@vueuse/components": "^10.11.0",
+    "@vueuse/core": "^10.11.0",
     "eslint": "9.x",
     "eslint-plugin-vue": "^9.26.0",
     "globals": "^15.6.0",
@@ -17,9 +19,9 @@
     "typescript": "^5.0.0"
   },
   "scripts": {
-    "dev": "vitepress dev",
+    "dev": "bunx --bun vitepress dev",
-    "build": "vitepress build",
+    "build": "bunx --bun vitepress build",
-    "preview": "vitepress preview",
+    "preview": "bunx --bun vitepress preview",
     "format": "prettier -w .",
     "lint": "eslint ."
   }

rotabull.md

@@ -0,0 +1,20 @@
+# Rotabull
+
+## Software Engineer
+
+#### July 2019 - January 2022 (2 years 7 months)
+
+Design, develop, and deploy critical application features for B2B application. Design and
+implement custom dev-ops tools and deployment pipelines. Lead several project-based teams as
+engineering lead and primary architect.
+
+## Technologies
+
+- Elixir
+- C#
+- Typescript
+- React.js
+- Phoenix Framework
+- PostgreSQL
+- OracleDB
+- SQL Server

tv-time.md

@@ -0,0 +1,17 @@
+# TV Time
+
+## Backend Engineer
+
+#### February 2019 - October 2019 (9 months)
+
+Design, develop, and deploy web services for primary consumer application. Design APIs and
+key-value database strategies/schemas. Help establish architectural and style standards for the
+backend team.
+
+## Technologies
+
+- Golang
+- Serverless (AWS Lambda)
+- Docker
+- gRPC
+- AWS DynamoDB