diff --git a/public/assets/pointer_down.svg b/public/assets/pointer_down.svg
new file mode 100644
index 0000000..e743ce3
--- /dev/null
+++ b/public/assets/pointer_down.svg
@@ -0,0 +1,21 @@
+
+
+
+
diff --git a/src/App.tsx b/src/App.tsx
index dd011b4..bab2e37 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,7 +7,12 @@ function App() {
-
+
+
+
);
}
diff --git a/src/main_page/Greeting.tsx b/src/main_page/Greeting.tsx
index bb52e90..94f19c5 100644
--- a/src/main_page/Greeting.tsx
+++ b/src/main_page/Greeting.tsx
@@ -2,12 +2,14 @@ import { FunctionComponent } from "react";
import './greeting.css';
import WelcomeText from './WelcomeText';
import Socials from './Socials';
+import ScrollHint from './ScrollHint';
const Greeting: FunctionComponent = () => {
return (
-
+
+
);
}
diff --git a/src/main_page/ScrollHint.tsx b/src/main_page/ScrollHint.tsx
new file mode 100644
index 0000000..660257a
--- /dev/null
+++ b/src/main_page/ScrollHint.tsx
@@ -0,0 +1,22 @@
+import { FunctionComponent, useEffect, useState } from "react";
+import './greeting.css';
+
+const ScrollHint: FunctionComponent = () => {
+ const [arrowHidden, setArrowHidden] = useState(true);
+ const [textHidden, setTextHidden] = useState(true);
+
+ useEffect(() => {
+ setTimeout(() => setArrowHidden(false), 2000);
+ setTimeout(() => setTextHidden(false), 3000);
+ });
+
+ return (
+
+
Scroll down
+
+
+
-
-
-
-
-
+
+
+
+
+
);
}
diff --git a/src/main_page/SocialsEntry.tsx b/src/main_page/SocialsEntry.tsx
index b630121..e821d49 100644
--- a/src/main_page/SocialsEntry.tsx
+++ b/src/main_page/SocialsEntry.tsx
@@ -1,24 +1,37 @@
-import { FunctionComponent, useState } from "react";
+import { FunctionComponent, useEffect, useState } from "react";
import './greeting.css';
-type Params = { image: string, link: string, text: string, redactUntilClick?: boolean };
+function reverse(value: string) {
+ return Array.from(
+ String(value || '')
+ ).reverse().join('');
+}
+
+type Params = { image: string, link: string, text: string, redactUntilClick?: boolean, index: number };
const SocialsEntry: FunctionComponent = (params: Params) => {
const [ content, setContent ] = useState(params.redactUntilClick ? 'Click to reveal' : params.text);
const [ href, setHref ] = useState(params.redactUntilClick ? '#' : params.link);
const [ allowClick, setAllowClick ] = useState(!params.redactUntilClick);
+ const [ hidden, setHidden ] = useState(true);
+
+ useEffect(() => {
+ setTimeout(() => setHidden(false), 100 * params.index + 500);
+ });
return (
-