transferring components from old project
This commit is contained in:
Mikayla Dobson
27
src/App.jsx
27
src/App.jsx
@@ -10,33 +10,6 @@ function App() {
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>Hello Vite + React!</p>
|
||||
<p>
|
||||
<button type="button" onClick={() => setCount((count) => count + 1)}>
|
||||
count is: {count}
|
||||
</button>
|
||||
</p>
|
||||
<p>
|
||||
Edit <code>App.jsx</code> and save to test HMR updates.
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
{' | '}
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://vitejs.dev/guide/features.html"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Vite Docs
|
||||
</a>
|
||||
</p>
|
||||
</header>
|
||||
</div>
|
||||
)
|
||||
|
||||
94
src/components/Navbar.js
Normal file
94
src/components/Navbar.js
Normal file
@@ -0,0 +1,94 @@
|
||||
import { Button, Drawer, List, ListItem } from "@mui/material"
|
||||
import { useEffect, useState } from "react"
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import MenuIcon from '@material-ui/icons/Menu';
|
||||
|
||||
export default function Navbar() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [selected, setSelected] = useState(null);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
switch (selected) {
|
||||
case 0:
|
||||
navigate('/');
|
||||
break;
|
||||
case 1:
|
||||
navigate('/about-me');
|
||||
break;
|
||||
case 2:
|
||||
navigate('/projects');
|
||||
break;
|
||||
case 3:
|
||||
navigate('/technologies');
|
||||
break;
|
||||
case 4:
|
||||
navigate('/links');
|
||||
break;
|
||||
case 5:
|
||||
navigate('/creative-works');
|
||||
break;
|
||||
default:
|
||||
navigate('/');
|
||||
break;
|
||||
}
|
||||
}, [selected, navigate]);
|
||||
|
||||
return (
|
||||
<header className="app-navbar">
|
||||
<div className="navbar-left">
|
||||
<a href="/" className="my-name">Mikayla Dobson</a>
|
||||
<h2>Web Design Contractor</h2>
|
||||
</div>
|
||||
|
||||
<div className="navbar-right">
|
||||
<Button onClick={() => setOpen(!open)}>
|
||||
<MenuIcon />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Drawer anchor="right" open={open} onClose={() => setOpen(false)}>
|
||||
<List component="nav">
|
||||
|
||||
<ListItem button
|
||||
selected={selected===0}
|
||||
onClick={() => setSelected(0)}>
|
||||
Home
|
||||
</ListItem>
|
||||
|
||||
<ListItem button
|
||||
selected={selected===1}
|
||||
onClick={() => setSelected(1)}>
|
||||
About me
|
||||
</ListItem>
|
||||
|
||||
<ListItem button
|
||||
selected={selected===2}
|
||||
onClick={() => setSelected(2)}>
|
||||
My Projects
|
||||
</ListItem>
|
||||
|
||||
<ListItem button
|
||||
selected={selected===3}
|
||||
onClick={() => setSelected(3)}>
|
||||
My Technologies
|
||||
</ListItem>
|
||||
|
||||
<ListItem button
|
||||
selected={selected===4}
|
||||
onClick={() => setSelected(4)}>
|
||||
Links
|
||||
</ListItem>
|
||||
|
||||
<ListItem button
|
||||
selected={selected===5}
|
||||
onClick={() => setSelected(5)}>
|
||||
My Creative Work
|
||||
</ListItem>
|
||||
</List>
|
||||
</Drawer>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
136
src/components/ProjectsArray.js
Normal file
136
src/components/ProjectsArray.js
Normal file
@@ -0,0 +1,136 @@
|
||||
import { Card } from "@mui/material";
|
||||
|
||||
export const projectsArray = [
|
||||
{
|
||||
name: "Mikayla's E-Commerce Store",
|
||||
languages: ["TypeScript", "React", "PERN", "REST_API"],
|
||||
inProgress: true,
|
||||
jsx: (
|
||||
<Card>
|
||||
<h1>Mikayla's E-Commerce Store</h1>
|
||||
<p>A 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>IN PROGRESS</p>
|
||||
</Card>
|
||||
)
|
||||
},
|
||||
{
|
||||
name: "Procedural Drones",
|
||||
languages: ["JavaScript", "HTML/CSS"],
|
||||
inProgress: true,
|
||||
deployed: true,
|
||||
jsx: (
|
||||
<Card>
|
||||
<h1>Procedural Drones</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>
|
||||
<div className="links">
|
||||
<a target="_blank" rel="noreferrer" href="https://github.com/innocuous-symmetry/procedural-drones-01">GitHub Repo</a>
|
||||
<a target="_blank" rel="noreferrer" href="https://innocuous-symmetry.github.io/procedural-drones-01/">Deployed version</a>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
},
|
||||
{
|
||||
name: "Reddit, but it's all cats",
|
||||
languages: ["React", "Redux"],
|
||||
inProgress: false,
|
||||
deployed: true,
|
||||
jsx: (
|
||||
<Card>
|
||||
<h1>Reddit, but it's all cats</h1>
|
||||
<p>A read-only Reddit client -- this site fetches data from Reddit and displays a curated feed.</p>
|
||||
<p>This was built on Reddit's JSON API, using React/Redux and CSS.</p>
|
||||
<p>And yes, it's all cats.</p>
|
||||
<div className="links">
|
||||
<a target="_blank" rel="noreferrer" href="https://github.com/innocuous-symmetry/cat-reddit">GitHub Repo</a>
|
||||
<a target="_blank" rel="noreferrer" href="https://reddit-but-all-cats.netlify.app/">Deployed version</a>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
},
|
||||
{
|
||||
name: "Personal Timestamp Generator",
|
||||
languages: ["Python", "SQLite"],
|
||||
inProgress: false,
|
||||
jsx: (
|
||||
<Card>
|
||||
<h1>Personal Timestamp Generator</h1>
|
||||
<p>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.
|
||||
</p>
|
||||
<p>Command-line interface built on Python with a SQLite Database.</p>
|
||||
<a href="https://github.com/innocuous-symmetry/timestamp_project" target="_blank" rel="noreferrer">View the repo here!</a>
|
||||
</Card>
|
||||
)
|
||||
},
|
||||
{
|
||||
name: "Musical Counterpoint Bot",
|
||||
languages: ["HTML/CSS", "JavaScript"],
|
||||
inProgress: true,
|
||||
jsx: (
|
||||
<Card>
|
||||
<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>This project is intended to be used as a practical application of linked lists and
|
||||
other compound data structures in JavaScript.</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"],
|
||||
inProgress: true,
|
||||
jsx: (
|
||||
<Card>
|
||||
<h1>Password Game</h1>
|
||||
<p>As part of a mentorship program hosted by Metazu Studio</p>
|
||||
<p>Implemented using MongoDB, React, and Node/Express, styled with Material UI/SCSS.</p>
|
||||
<p>In progress, building in collaboration with others at Metazu Studio.</p>
|
||||
</Card>
|
||||
)
|
||||
},
|
||||
{
|
||||
name: "Splinter",
|
||||
languages: ["React", "PERN", "Socket.io"],
|
||||
inProgress: true,
|
||||
jsx: (
|
||||
<Card>
|
||||
<h1>Splinter</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>
|
||||
</Card>
|
||||
)
|
||||
},
|
||||
{
|
||||
name: "Carenest",
|
||||
languages: ["React"],
|
||||
inProgress: false,
|
||||
jsx: (
|
||||
<Card>
|
||||
<h1>Carenest</h1>
|
||||
<p>Designed in collaboration with Faith Magras, Elvis Hernandez, and Daytreon Dean
|
||||
as a submission for #HACKTN 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>
|
||||
</Card>
|
||||
)
|
||||
},
|
||||
{
|
||||
name: "This Site",
|
||||
languages: ["React", "Sass", "MaterialUI"],
|
||||
inProgress: true,
|
||||
jsx: (
|
||||
<Card>
|
||||
<h1>And, last but not least, the site you see here!</h1>
|
||||
<p>This site is built using React, Material UI, and SCSS, and is hosted with Netlify.</p>
|
||||
<a target="_blank" rel="noreferrer" href="https://github.com/innocuous-symmetry/about-mikayla">View the site repo here!</a>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
]
|
||||
BIN
src/media/elliott-mason-WxVBGtvyIMA-unsplash.jpg
Normal file
BIN
src/media/elliott-mason-WxVBGtvyIMA-unsplash.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
BIN
src/media/max-harlynking-_QcLpud-gD0-unsplash.jpg
Normal file
BIN
src/media/max-harlynking-_QcLpud-gD0-unsplash.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
BIN
src/media/profile.jpeg
Normal file
BIN
src/media/profile.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 272 KiB |
39
src/pages/AboutMe.js
Normal file
39
src/pages/AboutMe.js
Normal file
@@ -0,0 +1,39 @@
|
||||
import '../App.scss';
|
||||
import { DocumentStyle, AboutMePage } from '../styles/Style';
|
||||
|
||||
import Card from '@mui/material/Card';
|
||||
|
||||
const { htmlTheme } = DocumentStyle;
|
||||
const { projectCards, cardDimensions, aboutGallery } = AboutMePage;
|
||||
|
||||
export default function AboutMe() {
|
||||
return (
|
||||
<div style={htmlTheme} className="about-me-page">
|
||||
<h1 className="what-i-do-header">What I Do:</h1>
|
||||
|
||||
<div style={aboutGallery}>
|
||||
<Card sx={[projectCards, cardDimensions]} className="fade one">
|
||||
<h2 className="card-title">Create full stack web applications</h2>
|
||||
<p>I have experience building web applications with and without back-end integrations.</p>
|
||||
<p>I am comfortable conceptualizing and organizing complex structures, and as such, my projects tend to be
|
||||
natural in their structure and easy to maintain.</p>
|
||||
</Card>
|
||||
|
||||
<Card sx={[projectCards, cardDimensions]} className="fade two">
|
||||
<h2 className="card-title">Creative minded problem solver</h2>
|
||||
<p>My <a href="/creative-projects">rich creative background as a musician, composer, producer,
|
||||
and artistic collaborator</a> provide me with a unique frame of reference for
|
||||
solving technical problems and adapting to dynamic environments.</p>
|
||||
</Card>
|
||||
|
||||
<Card sx={[projectCards, cardDimensions]} className="fade three">
|
||||
<h2 className="card-title">Database Operations and Management</h2>
|
||||
<p>My projects have featured both relational and non-relational databases, in particular
|
||||
PostgreSQL and MongoDB.</p>
|
||||
<p>I also have experience with various technologies for connecting these to front-end applications,
|
||||
including Prisma and Supabase.</p>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
32
src/pages/CreativeWorks.js
Normal file
32
src/pages/CreativeWorks.js
Normal file
@@ -0,0 +1,32 @@
|
||||
export default function CreativeWorks() {
|
||||
return (
|
||||
<>
|
||||
<h1>Creative works</h1>
|
||||
|
||||
<p>I would be remiss not to take the opportunity to speak about how I feel my experience as a musician informs my work as a developer.</p>
|
||||
<p>Working as a musician helped me to develop invaluable skills that provide me with a unique frame of reference in regards to my approach to technical problems.</p>
|
||||
<p>See below some of the relevant applications of my musical experience:</p>
|
||||
<ul>
|
||||
<li>Modular synthesis, which heavily involves fundamentals of arithmetic and data flow</li>
|
||||
<li>Orchestration; ensuring all instrumental parts are executable and comfortable to play within a given set of parameters</li>
|
||||
<li>Learning to play new instruments, and adapt my pre-existing knowledge to apply to new frames of reference</li>
|
||||
<li>Audio engineering, and the associated practices of learning/using music technology</li>
|
||||
<li>Proper interaction of related components within a larger context</li>
|
||||
<li>Conceptualizing long-form, well-designed structures</li>
|
||||
<li>Managing proportional integrity in musical forms</li>
|
||||
</ul>
|
||||
|
||||
<div className="soundcloud-tracks">
|
||||
<iframe
|
||||
title="Perception"
|
||||
width="100%" height="300" scrolling="no"
|
||||
frameBorder="no" allow="autoplay"
|
||||
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/118763533&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true">
|
||||
</iframe>
|
||||
<div><a href="https://soundcloud.com/mikaylamusic" title="mikayla claire" target="_blank" rel="noreferrer">mikayla claire</a> · <a href="https://soundcloud.com/mikaylamusic/perception" title="Perception" target="_blank" rel="noreferrer" style={{color: '#cccccc', textDecoration: 'none'}}>Perception</a></div>
|
||||
</div>
|
||||
|
||||
<a href='/'>Home</a>
|
||||
</>
|
||||
)
|
||||
}
|
||||
27
src/pages/Links.js
Normal file
27
src/pages/Links.js
Normal file
@@ -0,0 +1,27 @@
|
||||
import Card from '@mui/material/Card';
|
||||
|
||||
import { DocumentStyle } from '../styles/Style';
|
||||
|
||||
const { htmlTheme, stockGallery } = DocumentStyle;
|
||||
|
||||
export default function Links() {
|
||||
return (
|
||||
<div style={htmlTheme}>
|
||||
<h1>Find more about my work at the links below!</h1>
|
||||
|
||||
<div style={stockGallery}>
|
||||
<Card>
|
||||
{/* An image here for a Github logo? */}
|
||||
<a href="https://github.com/innocuous-symmetry">My Github</a>
|
||||
</Card>
|
||||
<Card>
|
||||
{/* LinkedIn image? */}
|
||||
<a href="https://www.linkedin.com/in/mikayla-dobson/">My LinkedIn Profile</a>
|
||||
</Card>
|
||||
<Card>
|
||||
<a href="https://codepen.io/innocuous-symmetry">My CodePen</a>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
121
src/pages/Projects.js
Normal file
121
src/pages/Projects.js
Normal file
@@ -0,0 +1,121 @@
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { DocumentStyle } from '../styles/Style';
|
||||
import { projectsArray } from '../components/ProjectsArray';
|
||||
import { Divider } from '@mui/material';
|
||||
import '../App.scss';
|
||||
|
||||
const { htmlTheme, dividerStyle } = DocumentStyle;
|
||||
|
||||
const defaultFilter = {
|
||||
language: '',
|
||||
searchTerm: '',
|
||||
inProgress: false
|
||||
}
|
||||
|
||||
export default function Projects() {
|
||||
const [results, setResults] = useState();
|
||||
const [filter, setFilter] = useState(defaultFilter);
|
||||
const [panelStyle, setPanelStyle] = useState('');
|
||||
|
||||
const searchInput = useRef();
|
||||
const languageFilter = useRef();
|
||||
const projectPage = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
if (!filter) setResults(projectsArray.map(each => each.jsx));
|
||||
|
||||
if (filter) {
|
||||
let result = projectsArray;
|
||||
if (filter.searchTerm) {
|
||||
let termLower = filter.searchTerm.toLowerCase();
|
||||
result = result.filter(obj => obj.name.toLowerCase().includes(termLower));
|
||||
}
|
||||
if (filter.language) {
|
||||
let adjustedLang = ((filter.language === 'PostgreSQL' || filter.language === "Express") ? "PERN" : filter.language);
|
||||
result = result.filter(obj => obj.languages.includes(adjustedLang));
|
||||
}
|
||||
|
||||
if (filter.inProgress) result = result.filter(obj => !obj.inProgress);
|
||||
|
||||
setResults(result.map(each => each.jsx));
|
||||
}
|
||||
}, [filter]);
|
||||
|
||||
const handleChange = (e) => {
|
||||
e.preventDefault();
|
||||
setFilter({
|
||||
...filter,
|
||||
language: e.target.value
|
||||
})
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
setFilter(defaultFilter);
|
||||
searchInput.current.value = '';
|
||||
languageFilter.current.value = '';
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = (e) => {
|
||||
let position = window.scrollY;
|
||||
|
||||
if (position > 150) {
|
||||
setPanelStyle("filter-anim-one");
|
||||
} else {
|
||||
setPanelStyle("");
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
console.log(panelStyle);
|
||||
}, [panelStyle]);
|
||||
|
||||
return (
|
||||
<div className="projects-page" style={htmlTheme}>
|
||||
<h1>Check out these projects from my portfolio!</h1>
|
||||
|
||||
<section className={`filter-panel ${panelStyle}`}>
|
||||
<h2>Filter by:</h2>
|
||||
<div className="filter-controls">
|
||||
<input
|
||||
ref={searchInput} type="text"
|
||||
onChange={(e) => setFilter({...filter, searchTerm: e.target.value})}
|
||||
placeholder="Enter a search term">
|
||||
</input>
|
||||
<select ref={languageFilter} onChange={handleChange} name="language" id="language">
|
||||
<option value="">- Language -</option>
|
||||
<option value="Express">Express</option>
|
||||
<option value="JavaScript">JavaScript</option>
|
||||
<option value="MaterialUI">Material UI</option>
|
||||
<option value="MongoDB">MongoDB</option>
|
||||
<option value="PostgreSQL">PostgreSQL</option>
|
||||
<option value="Python">Python</option>
|
||||
<option value="React">React</option>
|
||||
<option value="Redux">Redux</option>
|
||||
<option value="REST_API">REST API</option>
|
||||
<option value="Sass">Sass</option>
|
||||
<option value="SQLite">SQLite</option>
|
||||
<option value="TypeScript">TypeScript</option>
|
||||
</select>
|
||||
<button onClick={() => setFilter({...filter, inProgress: !filter.inProgress})}>
|
||||
{filter.inProgress ? "Show" : "Hide"} in-progress
|
||||
</button>
|
||||
<button onClick={handleReset}>Reset</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Divider orientation="horizontal" sx={dividerStyle} />
|
||||
|
||||
<div className="project-cards">
|
||||
{results}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
79
src/pages/Technologies.js
Normal file
79
src/pages/Technologies.js
Normal file
@@ -0,0 +1,79 @@
|
||||
import '../App.scss';
|
||||
|
||||
import Card from '@mui/material/Card';
|
||||
import Chip from '@mui/material/Chip';
|
||||
|
||||
import { TechnologiesPage, DocumentStyle } from '../styles/Style';
|
||||
|
||||
const { technologyCard } = TechnologiesPage;
|
||||
const { htmlTheme } = DocumentStyle;
|
||||
|
||||
export default function Technologies() {
|
||||
return (
|
||||
<div className="technologies-page" style={htmlTheme}>
|
||||
<Card sx={{padding: '2rem'}}>
|
||||
<h1>What technologies do I use?</h1>
|
||||
</Card>
|
||||
|
||||
<h2>These are my most often-used technologies:</h2>
|
||||
<Card sx={technologyCard}>
|
||||
<div className="tech-scrollbar">
|
||||
<Chip label="React" className="tech-bar-item"/>
|
||||
<Chip label="Redux" className="tech-bar-item"/>
|
||||
<Chip label="Express" className="tech-bar-item"/>
|
||||
<Chip label="PostgreSQL" className="tech-bar-item"/>
|
||||
<Chip label="Supabase" className="tech-bar-item"/>
|
||||
<Chip label="MongoDB" className="tech-bar-item"/>
|
||||
</div>
|
||||
|
||||
<div className="tech-scrollbar backup-bar">
|
||||
<Chip label="React" className="tech-bar-item"/>
|
||||
<Chip label="Redux" className="tech-bar-item"/>
|
||||
<Chip label="Express" className="tech-bar-item"/>
|
||||
<Chip label="PostgreSQL" className="tech-bar-item"/>
|
||||
<Chip label="Supabase" className="tech-bar-item"/>
|
||||
<Chip label="MongoDB" className="tech-bar-item"/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<h2>Here are some I use relatively often:</h2>
|
||||
<Card sx={technologyCard}>
|
||||
|
||||
<div className="tech-scrollbar from-right">
|
||||
<Chip className="tech-bar-item variant-2" label="Sass" />
|
||||
<Chip className="tech-bar-item variant-2" label="Material UI" />
|
||||
<Chip className="tech-bar-item variant-2" label="Python" />
|
||||
<Chip className="tech-bar-item variant-2" label="Figma" />
|
||||
<Chip className="tech-bar-item variant-2" label="TypeScript" />
|
||||
</div>
|
||||
|
||||
<div className="tech-scrollbar backup-from-right">
|
||||
<Chip className="tech-bar-item variant-2" label="Sass" />
|
||||
<Chip className="tech-bar-item variant-2" label="Material UI" />
|
||||
<Chip className="tech-bar-item variant-2" label="Python" />
|
||||
<Chip className="tech-bar-item variant-2" label="TypeScript" />
|
||||
</div>
|
||||
|
||||
</Card>
|
||||
|
||||
<h2>And here are some things I'm working on learning:</h2>
|
||||
<Card sx={technologyCard}>
|
||||
|
||||
<div className="tech-scrollbar">
|
||||
<Chip className="tech-bar-item variant-3" label="Prisma" />
|
||||
<Chip className="tech-bar-item variant-3" label="Figma" />
|
||||
<Chip className="tech-bar-item variant-3" label="C# / ASP.NET" />
|
||||
<Chip className="tech-bar-item variant-3" label="Next.js" />
|
||||
</div>
|
||||
|
||||
<div className="tech-scrollbar backup-bar">
|
||||
<Chip className="tech-bar-item variant-3" label="Prisma" />
|
||||
<Chip className="tech-bar-item variant-3" label="Figma" />
|
||||
<Chip className="tech-bar-item variant-3" label="C# / ASP.NET" />
|
||||
<Chip className="tech-bar-item variant-3" label="Next.js" />
|
||||
</div>
|
||||
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
39
src/pages/Welcome.js
Normal file
39
src/pages/Welcome.js
Normal file
@@ -0,0 +1,39 @@
|
||||
import '../App.scss';
|
||||
import { useEffect, useState, useRef } from 'react';
|
||||
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 { buttonStyle, galleryArrowStyle, galleryCards, dividerStyle } = DocumentStyle;
|
||||
|
||||
// Web page logic
|
||||
|
||||
export default function Welcome() {
|
||||
return (
|
||||
<div className="welcome-page" style={pageTheme}>
|
||||
<Card id="header-card" sx={mainHeaderCard} elevation={5}>
|
||||
<Avatar alt="Mikayla Dobson" src={profile} sx={{width: 110, height: 110}} />
|
||||
<h3>Hi, my name is Mikayla! I'm a junior-level full stack web developer.</h3>
|
||||
<h4 className="do-stuff">Thanks for visiting! Feel free to peruse below:</h4>
|
||||
</Card>
|
||||
|
||||
<Divider orientation="horizontal" sx={dividerStyle} />
|
||||
|
||||
<Card id="welcome-info">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Divider orientation="horizontal" sx={dividerStyle} />
|
||||
|
||||
<footer sx={welcomeFooter}>
|
||||
<p>© Mikayla Dobson 2022</p>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
162
src/styles/Style.js
Normal file
162
src/styles/Style.js
Normal file
@@ -0,0 +1,162 @@
|
||||
import { indigo, pink, deepPurple, purple } from '@mui/material/colors';
|
||||
|
||||
export const DocumentStyle = {
|
||||
htmlTheme: {
|
||||
backgroundColor: purple[100],
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
minHeight: '100vh',
|
||||
height: '100%',
|
||||
},
|
||||
linkStyle: {
|
||||
color: deepPurple[300],
|
||||
textDecoration: 'none'
|
||||
},
|
||||
buttonStyle: {
|
||||
backgroundColor: deepPurple[200],
|
||||
color: deepPurple[500],
|
||||
'&:hover': {
|
||||
backgroundColor: purple[400],
|
||||
color: deepPurple[50],
|
||||
},
|
||||
width: '25vw',
|
||||
height: '10rem',
|
||||
margin: '2rem',
|
||||
},
|
||||
galleryArrowStyle: {
|
||||
width: '8vw',
|
||||
height: '10rem',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
color: deepPurple[50],
|
||||
backgroundColor: deepPurple[400],
|
||||
'&:hover': {
|
||||
backgroundColor: deepPurple[500],
|
||||
}
|
||||
},
|
||||
galleryCards: {
|
||||
width: '3rem',
|
||||
height: '1rem',
|
||||
margin: '0.8rem'
|
||||
},
|
||||
dividerStyle: {
|
||||
width: '80%',
|
||||
color: '#000000',
|
||||
borderWidth: '2px'
|
||||
},
|
||||
|
||||
stockGallery: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
width: '85vw',
|
||||
height: '45vh',
|
||||
}
|
||||
}
|
||||
|
||||
export const WelcomePage = {
|
||||
pageTheme: {
|
||||
display: 'flex',
|
||||
backgroundColor: purple[100],
|
||||
height: '100vh',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
overflowX: 'hidden'
|
||||
},
|
||||
mainHeaderCard: {
|
||||
display: 'flex',
|
||||
margin: '2rem',
|
||||
width: '35vw',
|
||||
padding: '1rem',
|
||||
flexDirection: 'column',
|
||||
backgroundColor: pink[50],
|
||||
alignItems: 'center',
|
||||
fontSize: '1.2rem',
|
||||
borderRadius: '12px'
|
||||
},
|
||||
galleryTheme: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
backgroundColor: indigo[800],
|
||||
border: '1px solid purple',
|
||||
width: '70vw',
|
||||
height: '18rem',
|
||||
padding: '3rem',
|
||||
margin: '2rem',
|
||||
},
|
||||
galleryRow: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center'
|
||||
},
|
||||
galleryPages: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
galleryPage: {
|
||||
inactive: {
|
||||
backgroundColor: deepPurple[50],
|
||||
},
|
||||
active: {
|
||||
backgroundColor: indigo[800]
|
||||
}
|
||||
},
|
||||
welcomeFooter: {
|
||||
display: 'block',
|
||||
textAlign: 'right'
|
||||
}
|
||||
}
|
||||
|
||||
export const AboutMePage = {
|
||||
headerCard: {
|
||||
backgroundColor: purple[700],
|
||||
color: indigo[50],
|
||||
fontSize: '1.5rem',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '12rem',
|
||||
width: '12rem',
|
||||
marginTop: '2rem',
|
||||
marginBottom: '3rem',
|
||||
},
|
||||
projectCards: {
|
||||
backgroundColor: indigo[800],
|
||||
color: indigo[50],
|
||||
width: '300px',
|
||||
height: '300px',
|
||||
padding: '2rem',
|
||||
},
|
||||
cardDimensions: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
borderRadius: '12px',
|
||||
textAlign: 'center',
|
||||
},
|
||||
aboutGallery: {
|
||||
display: 'flex',
|
||||
height: '70vh',
|
||||
width: '80vw',
|
||||
justifyContent: 'space-around',
|
||||
margin: '2rem',
|
||||
}
|
||||
}
|
||||
|
||||
export const TechnologiesPage = {
|
||||
technologyCard: {
|
||||
backgroundColor: indigo[50],
|
||||
width: '40vw',
|
||||
margin: '2rem',
|
||||
borderRadius: '15px',
|
||||
}
|
||||
}
|
||||
|
||||
export const ProjectsPage = {
|
||||
projectsButton: {
|
||||
backgroundColor: purple[500],
|
||||
color: indigo[50],
|
||||
height: '45%',
|
||||
width: '5%',
|
||||
},
|
||||
}
|
||||
Reference in New Issue
Block a user