diff --git a/src/App.js b/src/App.js
index f1819896067b86319c4a9f67db3fa85fb4efba0d..ceb5408ce96ac97c5e43bc33fbcb4b50f131b8e2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -53,9 +53,9 @@ componentDidMount() {
let scrollPos = document.documentElement.scrollTop || document.body.scrollTop;
// This line gets the current scroll position of the page.
- if (scrollPos <= window.innerHeight) {
+ /*if (scrollPos <= window.innerHeight) {
forest.style.bottom = `${parseInt(forestInitPos + scrollPos / 6)}px`;
- }
+ }*/
// If the scroll position is within the viewport height, this code updates the bottom position of the forest element with a parallax effect.
if (scrollPos - 100 <= window.innerHeight)
diff --git a/src/Components/About/About.css b/src/Components/About/About.css
index c935693d34624e768e5c77bc90978671ae655796..244f18ae2eac5f36275a184e0c5d9c1154370437 100644
--- a/src/Components/About/About.css
+++ b/src/Components/About/About.css
@@ -63,10 +63,10 @@
}
#about .desc {
- grid-column-end: span 2;
+ grid-column-end: span 4;
background: #ffffffaa;
padding: 2rem;
- text-align: justify;
+ text-align: center;
}
@media only screen and (max-width: 1149px) {
diff --git a/src/Components/About/About.jsx b/src/Components/About/About.jsx
index 6b86e404bbe6b000682a20e96415cfceb257934d..fb0c83346b982864fe418f68ecc14be64451de12 100644
--- a/src/Components/About/About.jsx
+++ b/src/Components/About/About.jsx
@@ -7,21 +7,23 @@ const About = props => {
<div className="wrapper">
<article>
<div className="title">
- <h3>Project name goes here</h3>
+ <h3>This is project is not what you think it is</h3>
<p className="separator" />
</div>
<div className="desc">
- <h4 className="subtitle">About my project here </h4>
+ <h4 className="subtitle">I want to create some choas, will you help me in doing so? </h4>
<p>
- Some info about project here
+ If you agree then we'll have some fun! you'll be given some option and you just need to pick whichever one attracts you more. <br />
+ This experinace might be a bit uncomfortable but then again all the best ones are. <br />
+ Scroll on if you're ready.......
</p>
</div>
- <div className="desc">
+ {/*<div className="desc">
<h4 className="subtitle">Another subheading here</h4>
<p>
And some more info here
</p>
- </div>
+ </div>*/}
</article>
</div>
</section>
diff --git a/src/Components/Ending/Ending.css b/src/Components/Ending/Ending.css
index ecf1d06660f7672439d0b3640a7b0bfd0924d86a..3467751e223f7a249a02f02297e5e47e23bcab4f 100644
--- a/src/Components/Ending/Ending.css
+++ b/src/Components/Ending/Ending.css
@@ -17,6 +17,7 @@
width: 70%;
max-width: 1200px;
padding: 25vh 0;
+
}
#ending .container .heading-wrapper {
@@ -27,7 +28,7 @@
.heading-wrapper .heading .title {
font-size: 3rem;
- line-height: 2.4rem;
+ line-height: 4rem;
}
.heading-wrapper .heading .separator {
@@ -48,4 +49,24 @@
clip-path: polygon(0 0, 20% 5%, 100% 0, 100% 100%, 0 100%);
padding: 0;
}
-}
\ No newline at end of file
+}
+
+.circle {
+ border-radius: 50%;
+ background-color: red;
+ border: 2px solid white;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+
+#my-image {
+ width: 50%; /* Make the image fill its container */
+ border-radius: 1px; /* Add a rounded border */
+ align-content: center;
+
+}
+
+
diff --git a/src/Components/Ending/Ending.jsx b/src/Components/Ending/Ending.jsx
index 9cf1b7b215d117028a1f66e9c0a27491a5096b05..14e944dca88cf8ad499b9b73892ad0859d195018 100644
--- a/src/Components/Ending/Ending.jsx
+++ b/src/Components/Ending/Ending.jsx
@@ -1,20 +1,73 @@
-import React from 'react';
-import './Ending.css';
-
-const Ending = props => {
- return (
- <section id="ending">
- <div className="container">
- <div className="heading-wrapper">
- <div className="heading">
- <p className="title">
- Extra text space here
- </p>
- </div>
- </div>
- </div>
- </section>
- );
-};
+import React, { useState, useEffect } from "react";
+import "./Ending.css";
+import * as Tone from "tone";
+import Pics from './Images/munch.jpg';
+
+function Circle() {
+ const [size, setSize] = useState(400);
+
+ useEffect(() => {
+ const analyser = new Tone.Analyser("fft", 1024);
+ const mic = new Tone.UserMedia();
+ mic.open();
+ mic.connect(analyser);
+ analyser.connect(Tone.Destination);
+
+ const loop = new Tone.Loop((time) => {
+ const data = analyser.getValue();
+ console.log(data);
+ const sum = data.reduce((acc, val) => acc + val);
+ const avg = sum / data.length;
+ //const newSize = Math.max(10, 50 - avg * 1000);
+ //const newSize = Math.max(10, Math.min(100, size + avg * 50));
+ //const newSize = Math.max(10, Math.min(100, size + avg * 2000));
+ const newSize = Math.max(1, 100 - avg * 1);
+
+
+ const limitedSize = Math.min(newSize, 400); // limit the size to 400 pixels
+ setSize(limitedSize);
+
+ /*const newSize = Math.max(10, 50 - avg * 50);
+ setSize(newSize);*/
+ }, "16n");
+ loop.start();
+ loop.start(0);
+ Tone.Transport.start();
+
+ const handleClick = () => {
+ Tone.start();
+ document.removeEventListener("click", handleClick);
+ };
+ document.addEventListener("click", handleClick);
+
+ return () => {
+ mic.close();
+ loop.stop();
+ analyser.dispose();
+ };
+ }, []);
+
+ return <div className="circle" style={{ width: size, height: size }}></div>;
+}
+
+
+const Ending = (props) => {
+ return (
+ <section id="ending">
+ <div className="container">
+ <div className="heading-wrapper">
+ <div className="heading">
+ <p className="title">Get ready to scream</p>
+ <img src={Pics}
+ alt="Image description"
+ id="my-image" />
+ </div>
+ </div>
+ <Circle />
+ </div>
+ </section>
+ );
+};
export default Ending;
+
diff --git a/src/Components/Ending/Images/WaterLily.jpg b/src/Components/Ending/Images/WaterLily.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cc6e25216cff4e38c01dfa968dbf74ca1bc5aec4
Binary files /dev/null and b/src/Components/Ending/Images/WaterLily.jpg differ
diff --git a/src/Components/Ending/Images/banksy.jpeg b/src/Components/Ending/Images/banksy.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..9924d3630530261c330558a1d09de9bf886dfefa
Binary files /dev/null and b/src/Components/Ending/Images/banksy.jpeg differ
diff --git a/src/Components/Ending/Images/munch.jpg b/src/Components/Ending/Images/munch.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..96ec586313653cd78ac272b6dfe019cd2a0c79ee
Binary files /dev/null and b/src/Components/Ending/Images/munch.jpg differ
diff --git a/src/Components/Ending/Images/van_gogh.jpg b/src/Components/Ending/Images/van_gogh.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..475111406280934eabbe5e0afa11f4500420b96e
Binary files /dev/null and b/src/Components/Ending/Images/van_gogh.jpg differ
diff --git a/src/Components/Header/Header.css b/src/Components/Header/Header.css
index 225cc714fbfd414ac69aec9e3b666812c9821267..4d4414beaf1dcca04733d784c4bfb7b31b5050ff 100644
--- a/src/Components/Header/Header.css
+++ b/src/Components/Header/Header.css
@@ -32,13 +32,13 @@
}
}
-.forest {
+/*.forest {
position: absolute;
bottom: -300px;
left: 0;
- background: url(../../Images/Trees.png) bottom left repeat-x;
+ background: url(../../Images/Trees.png) bottom left repeat-x;*/
/* background-position-x: 100px; */
- background-size: contain;
+ /*background-size: contain;
width: 100%;
height: 80%;
opacity: 0;
@@ -54,9 +54,9 @@
opacity: 1;
background-position-y: 100%;
}
-}
+}*/
-.moon {
+/*.moon {
position: absolute;
top: 0;
right: 0;
@@ -80,7 +80,7 @@
opacity: 1;
background-position: top right;
}
-}
+}*/
/* Copy and CTA */
#welcome-section .container {
@@ -100,7 +100,7 @@
}
to {
opacity: 1;
- right: 25%;
+ right: 20%;
}
}
@@ -110,6 +110,7 @@
font-style: italic;
color: #fafafa;
line-height: 3rem;
+ text-align: center;
}
#welcome-section .container h1 .line:first-child {
diff --git a/src/Components/Header/Header.jsx b/src/Components/Header/Header.jsx
index 708cfa59f51ec2fa89807426e519696ea67d659b..859719bc3e4b181af7832a0d17cc02d2cc520ef2 100644
--- a/src/Components/Header/Header.jsx
+++ b/src/Components/Header/Header.jsx
@@ -4,18 +4,18 @@ import './Header.css';
const Header = props => {
return (
<header id="welcome-section">
- <div className="forest" />
+ {/*<div className="forest" />
- <div className="moon" />
+ <div className="moon" />*/}
<div className="container">
<h1>
- This is my prototype
+ Welcome To The Scream Project
</h1>
<div className="buttons">
- <a href="#projects">Go down 2 sections</a>
- <a href="#ending" className="cta">
+ <a href="#projects">Are you ready to begin?</a>
+ {/* <a href="#ending" className="cta">
bottom of page
- </a>
+ </a>*/}
</div>
</div>
</header>
diff --git a/src/Components/Menu/Menu.css b/src/Components/Menu/Menu.css
index 0f7c099309b3c3904fa66438d1d35c15b4291294..557bbd50c4033e9c6a9ebdc503d857b3e6fbfbb2 100644
--- a/src/Components/Menu/Menu.css
+++ b/src/Components/Menu/Menu.css
@@ -221,4 +221,4 @@
width: 100vw;
}
}
-}
\ No newline at end of file
+}
diff --git a/src/Components/Projects/Images/banksy.jpeg b/src/Components/Projects/Images/banksy.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..9924d3630530261c330558a1d09de9bf886dfefa
Binary files /dev/null and b/src/Components/Projects/Images/banksy.jpeg differ
diff --git a/src/Components/Projects/Images/munch.jpg b/src/Components/Projects/Images/munch.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..96ec586313653cd78ac272b6dfe019cd2a0c79ee
Binary files /dev/null and b/src/Components/Projects/Images/munch.jpg differ
diff --git a/src/Components/Projects/Images/van_gogh.jpg b/src/Components/Projects/Images/van_gogh.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..475111406280934eabbe5e0afa11f4500420b96e
Binary files /dev/null and b/src/Components/Projects/Images/van_gogh.jpg differ
diff --git a/src/Components/Projects/Project.jsx b/src/Components/Projects/Project.jsx
index e4092597b9b87fa6de3c37fd9be06da5ce1b01da..f83eb6b3a6f14b521025e4fbc978e47227b415d5 100644
--- a/src/Components/Projects/Project.jsx
+++ b/src/Components/Projects/Project.jsx
@@ -3,7 +3,7 @@ import React from 'react';
const Project = props => {
- const link = props.link || 'http://';
+ const link = props.link || '';
return (
<div className="project">
@@ -17,8 +17,8 @@ const Project = props => {
</div>
{props.children}
<div className="buttons">
- <a >
- Take me to theme
+ <a href="#ending" className="cta">
+ This is my decision
</a>
</div>
</div>
diff --git a/src/Components/Projects/Projects.css b/src/Components/Projects/Projects.css
index 69e8d1a72dbd1d99057ccf6d5cf6a7e950d299f4..844febf2d553691b97b05cf7ae4b63135762dfa7 100644
--- a/src/Components/Projects/Projects.css
+++ b/src/Components/Projects/Projects.css
@@ -45,7 +45,7 @@
text-align: center;
width: 70%;
margin: 0 auto;
- text-align: justify;
+ text-align: center;
}
/* Single Project */
@@ -168,4 +168,4 @@
#projects .project {
padding: 2rem 0;
}
-}
\ No newline at end of file
+}
diff --git a/src/Components/Projects/Projects.jsx b/src/Components/Projects/Projects.jsx
index 37e57421860428c14ddd471511b569cb5cf9de56..ab4010d4a90ddfc6572cfd4db5cd583debdacf4c 100644
--- a/src/Components/Projects/Projects.jsx
+++ b/src/Components/Projects/Projects.jsx
@@ -1,7 +1,9 @@
import React from 'react';
import Project from './Project';
import './Projects.css';
-import WaterLilyImg from './Images/WaterLily.jpg';
+import Artist1Img from './Images/van_gogh.jpg';
+import Artist2Img from './Images/banksy.jpeg';
+import Artist3Img from './Images/munch.jpg';
const Projects = props => {
@@ -9,30 +11,32 @@ const Projects = props => {
<section id="projects">
<div className="projects-container">
<div className="heading">
- <h3 className="title">Pick project theme here</h3>
+ <h3 className="title">Pick whichever of the artist screams at you the most... <br />
+ maybe you'll even scream back</h3>
<p className="separator" />
<p className="subtitle">
- Last bit of project info here
+ The artist you pick will be who's work you'll see, be brave and be bold and don't be afraid, for there is never any reward for those who shy away
</p>
</div>
<div className="projects-wrapper">
<Project
- title="Theme 1"
- img={WaterLilyImg}
+ title="Artist 1"
+ img={Artist1Img}
tech=""
link=""
+
>
</Project>
<Project
- title="Theme 2"
- img={WaterLilyImg}
+ title="Artist 2"
+ img={Artist2Img}
tech=""
- link=""
+ link="Artist/artist1.jsx"
>
</Project>
<Project
- title="Theme 3"
- img={WaterLilyImg}
+ title="Artist 3"
+ img={Artist3Img}
tech=""
link=""
>
diff --git a/src/Images/Stars.png b/src/Images/Stars.png
index 95e83ec354cb8ac4915b835425facf5e1615827b..9c38672a364d5516cdd4213102cdf876193a2722 100644
Binary files a/src/Images/Stars.png and b/src/Images/Stars.png differ
diff --git a/src/index.css b/src/index.css
index 8052c1bca34f69107c587e2477db4f1ae71e1c6e..f5d7b5207552ddf7d55375fd197e12f0c4b2c65f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -32,4 +32,4 @@ a:visited {
a:hover,
a:active {
color: #f300b4;
-}
\ No newline at end of file
+}
diff --git a/src/index.js b/src/index.js
index 3236fd058a2e4cfab482b5e0c5570a2a916c1bd2..6abeb410ccc43ac6c387b8f43bc3c84f6cb66fd8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
+//import { createRoot } from "react-dom";
+
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';