diff --git a/src/App.js b/src/App.js index 79a7e9f..cfa8a10 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import Welcome from './pages/Welcome'; import Projects from './pages/Projects'; import Technologies from './pages/Technologies'; import Links from './pages/Links'; +import CreativeWorks from './pages/CreativeWorks'; import InProgress from './pages/InProgress'; import './App.scss'; @@ -10,7 +11,7 @@ function App() { return (
-
+

Mikayla Dobson

Web Design Contractor

@@ -23,6 +24,7 @@ function App() { } /> } /> } /> + } /> diff --git a/src/App.scss b/src/App.scss index f88ec4f..81db8d7 100644 --- a/src/App.scss +++ b/src/App.scss @@ -44,4 +44,9 @@ header { @keyframes gallery-animation-right { -} \ No newline at end of file +} + +// .welcome-page { +// // background-image: url('./media/max-harlynking-_QcLpud-gD0-unsplash.jpg'); +// background: url('./media/max-harlynking-_QcLpud-gD0-unsplash.jpg'); +// } \ No newline at end of file diff --git a/src/media/elliott-mason-WxVBGtvyIMA-unsplash.jpg b/src/media/elliott-mason-WxVBGtvyIMA-unsplash.jpg new file mode 100644 index 0000000..c50115d Binary files /dev/null and b/src/media/elliott-mason-WxVBGtvyIMA-unsplash.jpg differ diff --git a/src/media/max-harlynking-_QcLpud-gD0-unsplash.jpg b/src/media/max-harlynking-_QcLpud-gD0-unsplash.jpg new file mode 100644 index 0000000..f2b4726 Binary files /dev/null and b/src/media/max-harlynking-_QcLpud-gD0-unsplash.jpg differ diff --git a/src/pages/CreativeWorks.js b/src/pages/CreativeWorks.js new file mode 100644 index 0000000..d9ed5e0 --- /dev/null +++ b/src/pages/CreativeWorks.js @@ -0,0 +1,8 @@ +export default function CreativeWorks() { + return ( + <> +

Creative works

+ Home + + ) +} \ No newline at end of file diff --git a/src/pages/Projects.js b/src/pages/Projects.js index 4b9de65..1aba405 100644 --- a/src/pages/Projects.js +++ b/src/pages/Projects.js @@ -9,7 +9,7 @@ const { headerCard, projectCards, cardDimensions } = ProjectsPage; export default function Projects() { return ( - +
What I Do: @@ -18,6 +18,13 @@ export default function Projects() {

I am comfortable conceptualizing and organizing complex structures, and as such, my projects tend to be natural in their structure and easy to maintain.

 + +

Creative minded problem solver

+

My rich creative background as a musician, composer, producer, and artistic collaborator provide me with a unique frame of reference for + solving technical problems and adapting to dynamic environments.

+ See some of my creative works for examples of my aptitudes, as well as some thoughts on how they apply to work as a developer! + +

Database Operations and Management

My projects have featured both relational and non-relational databases, in particular PostgreSQL and MongoDB.

@@ -25,6 +32,6 @@ export default function Projects() { Go home - +
) } \ No newline at end of file diff --git a/src/pages/Welcome.js b/src/pages/Welcome.js index 6f1cf30..b83af92 100644 --- a/src/pages/Welcome.js +++ b/src/pages/Welcome.js @@ -13,8 +13,13 @@ import profile from '../media/profile.jpeg'; import { DocumentStyle, WelcomePage } from '../styles/Style'; -const { pageTheme, galleryTheme, galleryRow, galleryPages, galleryPage, welcomeFooter } = WelcomePage; -const { buttonStyle, galleryArrowStyle, galleryCards } = DocumentStyle; +const { + pageTheme, galleryTheme, galleryRow, + galleryPages, galleryPage, welcomeFooter, + mainHeaderCard +} = WelcomePage; + +const { buttonStyle, galleryArrowStyle, galleryCards, dividerStyle } = DocumentStyle; // Web page logic @@ -22,6 +27,7 @@ export default function Welcome() { const [gallery, setGallery] = useState([0,1]); const [rendered, setRendered] = useState(); + // identifiers const cardOne = useRef(); const cardTwo = useRef(); const cardThree = useRef(); @@ -45,22 +51,25 @@ export default function Welcome() { ]; - // handle gallery debug + // change active page indicator beneath gallery useEffect(() => { setRendered([ galleryButtons[gallery[0]], galleryButtons[gallery[1]] ]); for (let each of allCardRefs) { + // inactive style each.current.style.backgroundColor = '#ede7f6'; } for (let each of gallery) { - allCardRefs[each].current.style.backgroundColor = "#283593"; + // active style + allCardRefs[each].current.style.backgroundColor = "#673ab7"; } }, [gallery]); + // gallery page change logic const handleDecrement = () => { let newState = []; for (let each of gallery) { @@ -82,19 +91,19 @@ export default function Welcome() { 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:

+ -

Thanks for visiting! Feel free to peruse below:

- - +
@@ -111,7 +120,7 @@ export default function Welcome() {
- +