A small-scale timestamp/productivity management tool for individual use and logging of
+ time, including compartmentalization by task and some aggregate functions based on queries.
+
+
Command-line interface built on Python with a SQLite Database.
A web-based program with functionality to evaluate sample solutions of problems in
+ species-based counterpoint, as detailed by Johann Fux in Gradus ad Parnassum.
+
This project is intended to be used as a practical application of linked lists and
+ other compound data structures in JavaScript.
A small-scale timestamp/productivity management tool for individual use and logging of
- time, including compartmentalization by task and some aggregate functions based on queries.
-
-
Command-line interface built on Python with a SQLite Database.
A web-based program with functionality to evaluate sample solutions of problems in
- species-based counterpoint, as detailed by Johann Fux in Gradus ad Parnassum.
-
This project is intended to be used as a practical application of linked lists and
- other compound data structures in JavaScript.
-
In progress. Using vanilla HTML/CSS/JS.
-
- ),
- (
-
-
(untitled) Online Guess-the-Word Game
-
As part of a mentorship program hosted by Metazu Studio
-
Implemented using MongoDB, React, and Node/Express, styled with Material UI/SCSS.
-
In progress, building in collaboration with others at Metazu Studio.
-
- ),
- (
-
-
Splinter
-
A clone of a popular card-based resource gathering game
-
Local multiplayer, with plans to build out online multiplayer and solo vs. CPU
-
In progress. Using React, Node/Express, and PostgreSQL.
-
- ),
- (
-
-
Carenest
-
Designed in collaboration with Faith Magras, Elvis Hernandez, and Daytreon Dean
- as a submission for #HACKTN in March 2022.
)
diff --git a/src/pages/Welcome.js b/src/pages/Welcome.js
index 928cacc..42b330c 100644
--- a/src/pages/Welcome.js
+++ b/src/pages/Welcome.js
@@ -1,140 +1,33 @@
import '../App.scss';
import { useEffect, useState, useRef } from 'react';
-
-// MUI components
-
-import Avatar from '@mui/material/Avatar';
-import Button from '@mui/material/Button';
-import Card from '@mui/material/Card';
-import Divider from '@mui/material/Divider';
+import { Avatar, Button, Card, Divider } from '@mui/material';
import profile from '../media/profile.jpeg';
// SX style object imports
import { DocumentStyle, WelcomePage } from '../styles/Style';
-const {
- pageTheme, galleryTheme, galleryRow,
- galleryPages, welcomeFooter,
- mainHeaderCard
-} = WelcomePage;
-
+const { pageTheme, galleryTheme, galleryRow, galleryPages, welcomeFooter, mainHeaderCard } = WelcomePage;
const { buttonStyle, galleryArrowStyle, galleryCards, dividerStyle } = DocumentStyle;
// Web page logic
export default function Welcome() {
- const [gallery, setGallery] = useState([0,1]);
- const [rendered, setRendered] = useState();
-
- // identifiers
- const cardOne = useRef();
- const cardTwo = useRef();
- const cardThree = useRef();
- const cardFour = useRef();
- const cardFive = useRef();
-
- const buttonOne = useRef();
- const buttonTwo = useRef();
- const buttonThree = useRef();
- const buttonFour = useRef();
- const buttonFive = useRef();
-
-
- // change active page indicator beneath gallery
- useEffect(() => {
-
- const allCardRefs = [cardOne, cardTwo, cardThree, cardFour, cardFive];
- const galleryButtons = [
- ,
- ,
- ,
- ,
-
- ];
-
- setRendered([
- galleryButtons[gallery[0]], galleryButtons[gallery[1]]
- ]);
-
- for (let each of allCardRefs) {
- // inactive style
- each.current.style.backgroundColor = '#ede7f6';
- }
-
- for (let each of gallery) {
- // active style
- allCardRefs[each].current.style.backgroundColor = "#673ab7";
- }
-
- }, [gallery, setRendered]);
-
- // gallery page change logic
-
- /**
- *
- * TO DO: port these functions to external utils
- * these will need to take parameters: array as state, callback function to set state
- * @param1 = array (stateful object)
- * @param2 = array of React components to map through
- * @param3 = callback function to set state
- *
- * In below:
- * @param1 = gallery
- * @param2 = galleryButtons
- * @param3 = setGallery
- *
- */
-
- const handleDecrement = () => {
- let newState = [];
- for (let each of gallery) {
- let newNum = each - 1;
- if (newNum === -1) {
- newNum = 4;
- }
- newState.push(newNum);
- }
- setGallery(newState);
- }
-
- const handleIncrement = () => {
- let newState = [];
- for (let each of gallery) {
- let newNum = (each + 1) % 5;
- newState.push(newNum);
- }
- setGallery(newState);
- }
-
- // render
return (
-
+
Hi, my name is Mikayla! I'm a junior-level full stack web developer.
-
I excel in building well-structured and maintainable web applications, managing algorithmic complexity,
- and adapting my workflow to fit the needs of any environment I should find myself in.
-
Thanks for visiting! Feel free to peruse below:
-
-
-
-
- {rendered}
-
-
-
-
-
-
-
-
-
-
+
+
+
+ I am a junior-level full stack web developer based in Nashville, Tennessee. I build responsive, well-designed web applications with emphasis on concise solutions to problems, self-documenting code, and elegance of design. Some of my most frequently used technologies include React, Redux, Node.js, Express, TypeScript, Vite, PostgreSQL, MongoDB, and Sass, among others.
+