Added possibility to stop radius elements

elPandaFriki · Sep 27, 2023 · be881e3 · be881e3
1 parent 3426a69
commit be881e3
Show file tree

Hide file tree

Showing 10 changed files with 172 additions and 58 deletions.
diff --git a/src/components/App/Component.tsx b/src/components/App/Component.tsx
@@ -11,9 +11,17 @@ export default class App extends Component<Props, State> {
     render() {
         return (
             <div className={styles.root}>
-                <div className={styles.presentation}>
+                <div className={styles.presentation} id={'home'}>
                     <Presentation />
                 </div>
+                {/*
+                <div className={styles.presentation} id={'languages'}></div>
+                <div className={styles.presentation} id={'frontend'}></div>
+                <div className={styles.presentation} id={'backend'}></div>
+                <div className={styles.presentation} id={'databases'}></div>
+                <div className={styles.presentation} id={'deployment'}></div>
+                <div className={styles.presentation} id={'communications'}></div>
+                 */}
             </div>
         );
     }

diff --git a/src/components/App/styles.module.scss b/src/components/App/styles.module.scss
@@ -10,4 +10,17 @@
 .presentation {
     width: 100vw;
     height: 100vh;
+    position: relative;
+    &:not(:last-child) {
+        &::before {
+            content: '';
+            position: absolute;
+            left: 25%;
+            bottom: 0;
+            height: 1px;
+            width: 50%;
+            background: linear-gradient(to right, transparent, white, transparent) border-box;
+            border: 1px solid transparent;
+        }
+    }
 }
diff --git a/src/components/Carrousel/Component.tsx b/src/components/Carrousel/Component.tsx
@@ -1,5 +1,6 @@
 import { Component } from 'react';
 import { Props, State } from './types';
+import styles from './styles.module.scss';
 
 export default class Carrousel extends Component<Props, State> {
     state: State = {
@@ -20,7 +21,7 @@ export default class Carrousel extends Component<Props, State> {
         });
     };
 
-    interval: NodeJS.Timer | null = null;
+    interval: ReturnType<typeof setInterval> | null = null;
 
     componentDidMount() {
         const { interval } = this.props;
@@ -36,7 +37,18 @@ export default class Carrousel extends Component<Props, State> {
     }
 
     render() {
+        const { onElementClick } = this.props;
         const { Element, name } = this.state;
-        return <div id={name}>{Element}</div>;
+        return (
+            <div
+                id={name}
+                className={styles.root}
+                onClick={() => {
+                    onElementClick(name);
+                }}
+            >
+                {Element}
+            </div>
+        );
     }
 }
diff --git a/src/components/Carrousel/styles.module.scss b/src/components/Carrousel/styles.module.scss
@@ -0,0 +1,13 @@
+.root {
+    pointer-events: all;
+    width: auto;
+    height: auto;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgb(50,50,50);
+    & * {
+        font-size: 5rem;
+    }
+}
diff --git a/src/components/Carrousel/types.d.ts b/src/components/Carrousel/types.d.ts
@@ -6,6 +6,7 @@ export type State = {
 }
 
 export type Props=  {
+    onElementClick(element: CarrouselElement['name']): void;
     interval?: number;
     elements: Array<CarrouselElement>;
 }

diff --git a/src/components/Presentation/Component.tsx b/src/components/Presentation/Component.tsx
@@ -42,122 +42,122 @@ export default class App extends Component<Props, State> {
     getLanguagesIcons = (): Array<CarrouselElement> => [
         {
             name: 'html',
-            Element: <SiHtml5 className={styles.icon} />
+            Element: <SiHtml5 />
         },
         {
             name: 'css3',
-            Element: <SiCss3 className={styles.icon} />
+            Element: <SiCss3 />
         },
         {
             name: 'javascript',
-            Element: <SiJavascript className={styles.icon} />
+            Element: <SiJavascript />
         },
         {
             name: 'typescript',
-            Element: <SiTypescript className={styles.icon} />
+            Element: <SiTypescript />
         },
         {
             name: 'python',
-            Element: <SiPython className={styles.icon} />
+            Element: <SiPython />
         },
         {
             name: 'cplusplus',
-            Element: <SiCplusplus className={styles.icon} />
+            Element: <SiCplusplus />
         },
         {
             name: 'csharp',
-            Element: <SiCsharp className={styles.icon} />
+            Element: <SiCsharp />
         }
     ];
 
     getFrontEndIcons = (): Array<CarrouselElement> => [
         {
             name: 'react',
-            Element: <SiReact className={styles.icon} />
+            Element: <SiReact />
         },
         {
             name: 'vuejs',
-            Element: <SiVuedotjs className={styles.icon} />
+            Element: <SiVuedotjs />
         },
         {
             name: 'angular',
-            Element: <SiAngular className={styles.icon} />
+            Element: <SiAngular />
         },
         {
             name: 'sass',
-            Element: <SiSass className={styles.icon} />
+            Element: <SiSass />
         }
     ];
 
     getBackEndIcons = (): Array<CarrouselElement> => [
         {
             name: 'nodejs',
-            Element: <SiNodedotjs className={styles.icon} />
+            Element: <SiNodedotjs />
         },
         {
             name: 'express',
-            Element: <SiExpress className={styles.icon} />
+            Element: <SiExpress />
         },
         {
             name: 'django',
-            Element: <SiDjango className={styles.icon} />
+            Element: <SiDjango />
         },
         {
             name: 'flask',
-            Element: <SiFlask className={styles.icon} />
+            Element: <SiFlask />
         }
     ];
 
     getCommunicationsIcons = (): Array<CarrouselElement> => [
         {
             name: 'socketio',
-            Element: <SiSocketdotio className={styles.icon} />
+            Element: <SiSocketdotio />
         },
         {
             name: 'graphql',
-            Element: <SiGraphql className={styles.icon} />
+            Element: <SiGraphql />
         }
     ];
 
     getDatabasesIcons = (): Array<CarrouselElement> => [
         {
             name: 'mysql',
-            Element: <SiMysql className={styles.icon} />
+            Element: <SiMysql />
         },
         {
             name: 'mongodb',
-            Element: <SiMongodb className={styles.icon} />
+            Element: <SiMongodb />
         },
         {
             name: 'sqlite',
-            Element: <SiSqlite className={styles.icon} />
+            Element: <SiSqlite />
         },
         {
             name: 'postgresql',
-            Element: <SiPostgresql className={styles.icon} />
+            Element: <SiPostgresql />
         },
         {
             name: 'mariadb',
-            Element: <SiMariadb className={styles.icon} />
+            Element: <SiMariadb />
         },
         {
             name: 'sqlserver',
-            Element: <SiMicrosoftsqlserver className={styles.icon} />
+            Element: <SiMicrosoftsqlserver />
         }
     ];
 
     getDeploymentIcons = (): Array<CarrouselElement> => [
         {
             name: 'github',
-            Element: <SiGithub className={styles.icon} />
+            Element: <SiGithub />
         },
         {
             name: 'docker',
-            Element: <SiDocker className={styles.icon} />
+            Element: <SiDocker />
         },
         {
             name: 'aws',
-            Element: <SiAmazonaws className={styles.icon} />
+            Element: <SiAmazonaws />
         }
     ];
 
@@ -184,6 +184,47 @@ export default class App extends Component<Props, State> {
         }
     };
 
+    scrollTo = (category: string, element: string) => {
+        const htmlElement = document.getElementById(category);
+        if (htmlElement == null) return;
+        const position = htmlElement.getBoundingClientRect();
+        console.log(element);
+        window.scrollTo({
+            behavior: 'smooth',
+            top: position.top,
+            left: 0
+        });
+    };
+
+    onCategoryClick = (category: Categories, element: string) => {
+        switch (category) {
+            case Categories.LANGUAGES: {
+                this.scrollTo('languages', element);
+                return;
+            }
+            case Categories.FRONTEND: {
+                this.scrollTo('frontend', element);
+                return;
+            }
+            case Categories.BACKEND: {
+                this.scrollTo('backend', element);
+                return;
+            }
+            case Categories.DATABASES: {
+                this.scrollTo('databases', element);
+                return;
+            }
+            case Categories.DEPLOYMENT: {
+                this.scrollTo('deployment', element);
+                return;
+            }
+            case Categories.COMMUNICATIONS: {
+                this.scrollTo('communications', element);
+                return;
+            }
+        }
+    };
+
     render() {
         const categories = Object.values(Categories).filter(
             o => typeof o !== 'string'
@@ -201,12 +242,17 @@ export default class App extends Component<Props, State> {
                                 data-speed={index}
                             />
                             <div
-                                className={styles.message}
+                                className={styles.carrousel}
                                 data-radius={radius}
                                 data-speed={speed}
                                 data-direction={index % 2 === 0 ? 'normal' : 'reverse'}
                             >
-                                <Carrousel elements={this.getIcons(category)} />
+                                <Carrousel
+                                    elements={this.getIcons(category)}
+                                    onElementClick={element => {
+                                        this.onCategoryClick(category, element);
+                                    }}
+                                />
                             </div>
                         </div>
                     );

diff --git a/src/components/Presentation/styles.module.scss b/src/components/Presentation/styles.module.scss
@@ -47,17 +47,19 @@
     border-radius: calc(var(--size) / 2);
 }
 
-.message {
+.carrousel {
+    pointer-events: all;
+    cursor: pointer;
+    &:hover {
+        animation-play-state: paused;
+    }
     @include rotation(orbit);
     @include animation(orbit);
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     position: absolute;
-    border: 1px solid white;
-    border-radius: 50%;
-    background-color: rgb(50, 50, 50);
     @include var-from-queries(
         --size,
         min-width,
@@ -83,7 +85,3 @@
     width: var(--size);
     height: var(--size);
 }
-
-.icon {
-    font-size: 5rem;
-}
diff --git a/src/components/Version/index.tsx b/src/components/Version/index.tsx
@@ -8,12 +8,12 @@ export default class Version extends Component<Props, State> {
         const { children } = this.props;
         return (
             <div className={styles.root}>
-                <div className={styles.children}>{children}</div>
                 <div className={styles.version}>
                     <div className={styles.message}>
                         {packageJson.version} @ {packageJson.date}
                     </div>
                 </div>
+                <div className={styles.children}>{children}</div>
             </div>
         );
     }