From 4b927f256f6887bd50f9a9455bfbb9673f08ad5a Mon Sep 17 00:00:00 2001 From: Noah Paige Date: Fri, 10 Mar 2023 21:35:09 -0700 Subject: [PATCH] create page, component structure --- src/App.tsx | 207 +------------------------------------- src/Components/About.tsx | 12 +++ src/Components/Footer.tsx | 14 +++ src/Components/Splash.tsx | 11 ++ src/Components/Work.tsx | 12 +++ src/Pages/Home.tsx | 28 ++++++ 6 files changed, 79 insertions(+), 205 deletions(-) create mode 100644 src/Components/About.tsx create mode 100644 src/Components/Footer.tsx create mode 100644 src/Components/Splash.tsx create mode 100644 src/Components/Work.tsx create mode 100644 src/Pages/Home.tsx diff --git a/src/App.tsx b/src/App.tsx index 3e9fdca..2171c3a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,212 +1,9 @@ import { useState } from "react"; import "./App.css"; +import Home from "./Pages/Home"; function App() { - const [count, setCount] = useState(0); - const curves = [ - "M0,192L48,176C96,160,192,128,288,112C384,96,480,96,576,101.3C672,107,768,117,864,138.7C960,160,1056,192,1152,181.3C1248,171,1344,117,1392,90.7L1440,64L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z", - "M0,192L48,202.7C96,213,192,235,288,213.3C384,192,480,128,576,122.7C672,117,768,171,864,181.3C960,192,1056,160,1152,170.7C1248,181,1344,235,1392,261.3L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z", - "M0,256L48,261.3C96,267,192,277,288,245.3C384,213,480,139,576,101.3C672,64,768,64,864,85.3C960,107,1056,149,1152,160C1248,171,1344,149,1392,138.7L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z", - "M0,32L48,64C96,96,192,160,288,165.3C384,171,480,117,576,112C672,107,768,149,864,176C960,203,1056,213,1152,192C1248,171,1344,117,1392,90.7L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z", - "M0,96L48,122.7C96,149,192,203,288,229.3C384,256,480,256,576,240C672,224,768,192,864,165.3C960,139,1056,117,1152,144C1248,171,1344,245,1392,282.7L1440,320L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z", - "M0,160L48,170.7C96,181,192,203,288,186.7C384,171,480,117,576,112C672,107,768,149,864,186.7C960,224,1056,256,1152,250.7C1248,245,1344,203,1392,181.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z", - "M0,64L48,101.3C96,139,192,213,288,218.7C384,224,480,160,576,128C672,96,768,96,864,133.3C960,171,1056,245,1152,250.7C1248,256,1344,192,1392,160L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z", - "M0,192L48,181.3C96,171,192,149,288,154.7C384,160,480,192,576,186.7C672,181,768,139,864,149.3C960,160,1056,224,1152,234.7C1248,245,1344,203,1392,181.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z", - "M0,192L48,202.7C96,213,192,235,288,213.3C384,192,480,128,576,122.7C672,117,768,171,864,181.3C960,192,1056,160,1152,170.7C1248,181,1344,235,1392,261.3L1440,288L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z", - ]; - - return ( -
-
-
-
-
- - - - - - -
-
-
-
-
-

- It's over Anakin! I have the high ground. -

-

- Provident cupiditate voluptatem et in. Quaerat fugiat ut - assumenda excepturi exercitationem quasi. In deleniti eaque - aut repudiandae et a id nisi. -

- -
-
-
-
-
-
-
- - - - - - -
-
-
-
-
-

- YoU uNdErEsTiMaTe My PoWeR!! -

-

- Provident cupiditate voluptatem et in. Quaerat fugiat ut - assumenda excepturi exercitationem quasi. In deleniti eaque - aut repudiandae et a id nisi. -

- -
-
-
-
-
-
-
- - - - - - -
-
-
-
-
-

- It was said that you would, destroy the Sith, not join them. -

-

- Provident cupiditate voluptatem et in. Quaerat fugiat ut - assumenda excepturi exercitationem quasi. In deleniti eaque - aut repudiandae et a id nisi. -

- -
-
-
-
-
-
-
- - - - - - -
-
-
-
-
-

- You were my brother, Anakin. -

-

- Provident cupiditate voluptatem et in. Quaerat fugiat ut - assumenda excepturi exercitationem quasi. In deleniti eaque - aut repudiandae et a id nisi. -

- -
-
-
-
- -
-
- ); + return ; } export default App; diff --git a/src/Components/About.tsx b/src/Components/About.tsx new file mode 100644 index 0000000..d8cab87 --- /dev/null +++ b/src/Components/About.tsx @@ -0,0 +1,12 @@ +import { useState } from "react"; +import "../App.css"; + +function About() { + return ( +
+

About

+
+ ); +} + +export default About; diff --git a/src/Components/Footer.tsx b/src/Components/Footer.tsx new file mode 100644 index 0000000..0cd62d9 --- /dev/null +++ b/src/Components/Footer.tsx @@ -0,0 +1,14 @@ +import { useState } from "react"; + +function MyFooter() { + return ( + + ); +} + +export default MyFooter; diff --git a/src/Components/Splash.tsx b/src/Components/Splash.tsx new file mode 100644 index 0000000..b45d421 --- /dev/null +++ b/src/Components/Splash.tsx @@ -0,0 +1,11 @@ +import "../App.css"; + +function Splash() { + return ( +
+

Splash

+
+ ); +} + +export default Splash; diff --git a/src/Components/Work.tsx b/src/Components/Work.tsx new file mode 100644 index 0000000..60e1207 --- /dev/null +++ b/src/Components/Work.tsx @@ -0,0 +1,12 @@ +import { useState } from "react"; +import "../App.css"; + +function Work() { + return ( +
+

Work

+
+ ); +} + +export default Work; diff --git a/src/Pages/Home.tsx b/src/Pages/Home.tsx new file mode 100644 index 0000000..eaedfd9 --- /dev/null +++ b/src/Pages/Home.tsx @@ -0,0 +1,28 @@ +import { useState } from "react"; +import "../App.css"; +import Splash from "../Components/Splash"; +import Work from "../Components/Work"; +import About from "../Components/About"; +import MyFooter from "../Components/Footer"; + +//todo: +// - create 'screen' component that occupies a full screen + +function App() { + return ( +
+
+
+ +
+
+ +
+
About
+ +
+
+ ); +} + +export default App;