new content, maintenance on project browser

This commit is contained in:
Mikayla Dobson
2023-01-10 13:05:59 -06:00
parent 2a4843ae29
commit d979318632
6 changed files with 88 additions and 59 deletions

View File

@@ -13,9 +13,14 @@ export const WhatIDo = {
</Card>
<Card>
<h2 className="card-title">Web Design Consulting</h2>
<p>I consult on small teams at <a target="_blank" rel="noreferrer" href="https://www.metazu.studio/">Metazu Studio</a>, a Nashville-based startup connecting clients with services in video production, AR/VR, social media, photography, and web design.</p>
<p>I have worked on projects focused on full stack web engineering, real time communications, and designing beautiful user experiences.</p>
<h2 className="card-title">Collaborative software engineering</h2>
<p>I have consulted on small teams with:</p>
<div>
<p><a target="_blank" rel="noreferrer" href="https://dization.com">Dization</a>, a Pittsburgh-based company developing an enterprise resource planning solution for small businesses</p>
<p><a target="_blank" rel="noreferrer" href="https://www.metazu.studio/">Metazu Studio</a>, a Nashville-based startup connecting clients with services in video production, AR/VR, social media, photography, and web design.</p>
</div>
<p> My work on these projects deals with managing the complexities of full-stack web engineering, as well as delivering beautiful user experiences to end customers.</p>
</Card>
<Card>
@@ -59,7 +64,7 @@ export const Education = {
}
const MetazuConcepts = [
"UI/UX design", "Pair Programming", "REST APIs", "Database management", "Consulting with Clients"
"Enterprise Resource Planning", "UI/UX design", "Pair Programming", "REST APIs", "Database management", "Consulting with Clients"
]
const MusicExperiences = [
@@ -105,12 +110,4 @@ export const Employment = {
</Card>
</div>
)
}
export const Community = {
title: "Community",
jsx: (
<>
</>
)
}

View File

@@ -3,16 +3,16 @@ import { v4 } from 'uuid';
export const projectsArray = [
{
name: "Mikayla's E-Commerce Store",
name: "Express Spice Shop",
languages: ["TypeScript", "React", "PERN", "REST_API"],
inProgress: true,
jsx: (
<Card key={v4()}>
<h1>Mikayla's E-Commerce Store</h1>
<p>A fully-featured e-commerce platform</p>
<h1><a target="_blank" rel="noreferrer" href="https://github.com/innocuous-symmetry/e-commerce">Express Spice Shop</a></h1>
<p>A sample, fully-featured e-commerce platform</p>
<p>Built in React with TypeScript, Node/Express, and PostgreSQL</p>
<p>Payment processing supported through Stripe</p>
<p>REST API fully documented in Swagger</p>
<p>Payment processing supported through Stripe (in progress)</p>
<p>API documentation with Swagger</p>
<p>IN PROGRESS</p>
</Card>
)
@@ -24,7 +24,7 @@ export const projectsArray = [
deployed: true,
jsx: (
<Card key={v4()}>
<h1>Procedural Drones</h1>
<h1>Procedural Music Generation</h1>
<p>An experimental space for building out procedural music generation using vanilla JavaScript</p>
<p>Uses Tone.js to interact with the Web Audio API</p>
<p>Features a plain HTML/CSS front end to interact with the program</p>
@@ -68,19 +68,6 @@ export const projectsArray = [
</Card>
)
},
{
name: "Musical Counterpoint Bot",
languages: ["HTML/CSS", "JavaScript"],
inProgress: true,
jsx: (
<Card key={v4()}>
<h1>Musical Counterpoint Bot</h1>
<p>A web-based program with functionality to evaluate sample solutions of problems in
species-based counterpoint, as detailed by Johann Fux in <em>Gradus ad Parnassum.</em></p>
<p>In progress. Using vanilla HTML/CSS/JS.</p>
</Card>
)
},
{
name: "Password Game",
languages: ["React", "MongoDB", "MERN", "React", "REST_API", "Socket.io", "Sass", "MaterialUI"],
@@ -95,12 +82,12 @@ export const projectsArray = [
)
},
{
name: "Splinter",
languages: ["React", "PERN", "Socket.io"],
name: "Splendor Clone",
languages: ["React", "TypeScript"],
inProgress: true,
jsx: (
<Card key={v4()}>
<h1>Splinter</h1>
<h1><a target="_blank" rel="noreferrer" href="https://github.com/innocuous-symmetry/splendor-clone">Splendor</a> -- a clone of the board game by Marc André</h1>
<p>A clone of a popular card-based resource gathering game</p>
<p>Local multiplayer, with plans to build out online multiplayer and solo vs. CPU</p>
<p>In progress. Using React, Node/Express, and PostgreSQL.</p>
@@ -108,15 +95,29 @@ export const projectsArray = [
)
},
{
name: "Carenest",
languages: ["React"],
inProgress: false,
name: "Recipin",
languages: ["React", "TypeScript", "PERN"],
inProgress: true,
jsx: (
<Card key={v4()}>
<h1>Carenest</h1>
<p>Designed in collaboration with Faith Magras, Elvis Hernandez, and Daytreon Dean
as a submission for #HACKTN with <a href="https://www.hackathonsinternational.com/">Hackathons International</a> in March 2022.</p>
<p>Produced using React. View the repo <a target="_blank" rel="noreferrer" href="https://github.com/Team-Carenest/carenest">here!</a></p>
<h1><a target="_blank" rel="noreferrer" href="https://github.com/innocuous-symmetry/recipe-manager">Recipin</a> -- a home recipe management solution</h1>
<p>Manage a collection of your own commonly-used recipes</p>
<p>Features a full user-auth workflow and enables the sharing of recipes between users</p>
<p>Allows the user to build shopping lists from collections of their recipes</p>
<p>Built using full end-to-end TypeScript for the React front end and the Express server</p>
</Card>
)
},
{
name: "Photosorting with VGG16",
languages: ["Python", "TensorFlow", "PostgreSQL"],
inProgress: true,
jsx: (
<Card key={v4()}>
<h1>Photosorting with VGG16</h1>
<p>A tool written in Python for sorting photos based on the output of VGG16, the pre-trained image recognition model included with TensorFlow.</p>
<p>The user may also integrate the results of their photo sort into a PostgreSQL database.</p>
<p>The repository may be found <a target="_blank" rel="noreferrer" href="https://github.com/innocuous-symmetry/vgg16-image-recognition">here!</a></p>
</Card>
)
},

View File

@@ -6,6 +6,8 @@ export const techList = [
topic: "JavaScript",
subtopics: [
"TypeScript",
"React",
"Redux",
"NodeJS",
"Express",
"ToneJS",
@@ -17,14 +19,19 @@ export const techList = [
subtopics: [
"Pandas",
"Beautiful Soup",
"TensorFlow, Keras",
"Flet"
]
},
{
topic: "C#",
subtopics: [],
topic: "Java",
subtopics: [
"Spring Boot",
"Swing"
]
},
{
topic: "Java",
topic: "PHP",
subtopics: []
}
]
@@ -61,6 +68,8 @@ export const techList = [
topic: "SQL",
subtopics: [
"PostgreSQL",
"MySQL",
"Apache Web Server",
"MongoDB",
"Supabase"
]
@@ -70,6 +79,8 @@ export const techList = [
subtopics: [
"Express.js",
"Express-Session",
"PHP",
"Spring Boot",
"API Documentation with Swagger",
"MVC Architecture"
]

View File

@@ -6,7 +6,7 @@ import linkedin from "../media/LI-In-Bug.png";
export default function Links() {
return (
<div className="page links-page">
<h1>Connect with me and get a closer look at my work!</h1>
<h1>Check out the links below to get a better look at my work!</h1>
<div className="links-container">
<Card>

View File

@@ -39,6 +39,26 @@ export default function Projects() {
}, [search]);
useEffect(() => {
function unpack(element) {
if (typeof element == "string") return element;
if (typeof element.props.children != "string") {
if (Array.isArray(element.props.children)) {
let composite = "";
for (let each of element.props.children) {
composite += unpack(each);
}
return composite;
}
return unpack(element.props.children);
}
return element.props.children;
}
let projectText = [];
let i = 0;
while (i < projectsArray.length) {
@@ -47,26 +67,17 @@ export default function Projects() {
text: []
}
let newText;
for (let each of projectsArray[i].jsx.props.children) {
if (Array.isArray(each.props.children)) {
for (let nested of each.props.children) {
if (typeof nested === 'string') {
const newText = nested.toLowerCase();
project.text.push(newText);
} else {
const newText = nested.props.children.toLowerCase();
project.text.push(newText);
}
}
} else {
const newText = each.props.children.toLowerCase();
project.text.push(newText);
}
newText = unpack(each);
project.text.push(newText);
}
projectText.push(project);
i++;
}
setText(projectText);
}, [])

View File

@@ -1,12 +1,21 @@
@import "../helper/variables";
@import "../helper/mixins";
.links-page {
background-color: $lilac;
justify-content: center;
padding-top: 5rem;
.links-container {
display: flex;
flex-flow: row wrap;
.MuiCard-root {
@include step-entry(2);
opacity: 0;
transition: 0.5s transform ease;
display: inline-flex;
flex-direction: column;
align-items: center;