Start FGC component

public/assets/translations/en.json

@@ -1,9 +1,9 @@
 {
   "lang": "en",
 
-  "home.menu": "Home",
-  "projects.menu": "Projects",
-  "contact.menu": "Contact",
+  "menu.home": "Home",
+  "menu.projects": "Projects",
+  "menu.contact": "Contact",
 
   "contact.title": "Contact",
   "contact.about.desc": "Backend web developer, pragmatic, competent, adaptable. Always creating practical solutions to inquiries; characterized by being a responsible, enthusiastic person, with sense of leadership and teamwork. Permanent searching to acquire new knowledge and experiences.",
@@ -29,6 +29,24 @@
 
   "projects.title": "Projects",
 
+  "projects.fgc.title": "Fixed Gear Calculator",
+  "projects.fgc.desc": "",
+  "projects.fgc.chainring": "Chain Ring",
+  "projects.fgc.rearsproket": "Rear Sproket",
+  "projects.fgc.tire": "Tire",
+  "projects.fgc.ambiskid": "Ambidextrous Skid",
+  "projects.fgc.ratio": "Ratio",
+  "projects.fgc.skidpatch": "Skid Patch",
+  "projects.fgc.development": "Development",
+  "projects.fgc.equivalentgear": "Equivalent Gear",
+  "projects.fgc.cadence": "Cadence",
+  "projects.fgc.speed": "Speed",
+  "projects.fgc.unit": "Unit Type",
+  "projects.fgc.metric": "Metric",
+  "projects.fgc.imperial": "Imperial",
+
+  "analysis": "Analysis",
+  "settings": "Settings",
   "share": "Share",
   "name": "Name",
   "email": "Email",

public/assets/translations/es.json

@@ -1,9 +1,9 @@
 {
   "lang": "es",
 
-  "home.menu": "Inicio",
-  "projects.menu": "Proyectos",
-  "contact.menu": "Contacto",
+  "menu.home": "Inicio",
+  "menu.projects": "Proyectos",
+  "menu.contact": "Contacto",
 
   "contact.title": "Contacto",
   "contact.about.desc": "Desarrollador backend de servicios web, pragmático, competente, adaptablealmedio,creando soluciones prácticas a problemas planteados; caracterizado por ser una persona responsable, entusiasta, con un amplio sentido de liderazgo y trabajo en equipo, en la búsqueda permanente de adquirir nuevos conocimientos y experiencias.",
@@ -29,6 +29,22 @@
 
   "projects.title": "Proyectos",
 
+  "projects.fgc.title": "Calculadora de piñón fijo",
+  "projects.fgc.desc": "",
+  "projects.fgc.chainring": "Coronilla",
+  "projects.fgc.rearsproket": "Piñón",
+  "projects.fgc.tire": "Cubierta",
+  "projects.fgc.ambiskid": "Skid ambidiestro",
+  "projects.fgc.ratio": "Proporción",
+  "projects.fgc.skidpatch": "Skid Patch",
+  "projects.fgc.development": "Desarrollo",
+  "projects.fgc.equivalentgear": "Cambio equivalente",
+  "projects.fgc.cadence": "Cadencia",
+  "projects.fgc.speed": "Velocidad",
+  "projects.fgc.unit": "Sistema de medida",
+  "projects.fgc.metric": "Métrico",
+  "projects.fgc.imperial": "Imperial",
+
   "share": "Compartir",
   "name": "Nombre",
   "email": "Correo Electrónico",

src/App.tsx

@@ -28,8 +28,8 @@ const App: React.FC<RouteComponentProps> = (props) => {
       </Helmet>
       <Switch>
         {params.locale in AppLangs ? '' : <Redirect to={`/${defaultLang + '/' + params.locale}`} />}
-        {Routes.map(({ id, path, component }) => (
-          <Route key={id} path={`${props.match.url}${path}`} component={component} exact />
+        {Routes().map(({ id, path, Component }) => (
+          <Route key={id} path={`${props.match.url}${path}`} component={Component} exact />
         ))}
         <Route component={NotFound} />
       </Switch>

src/components/Canvas/index.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+
+interface CanvasProps {
+  width: number;
+  height: number;
+  draw: Function;
+  className?: string;
+}
+
+const Canvas = ({ width, height, draw, className }: CanvasProps) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    if (canvasRef.current) {
+      const canvas = canvasRef.current;
+      const context = canvas.getContext('2d');
+      if (context && draw) {
+        draw(context);
+      }
+    }
+    // eslint-disable-next-line
+  }, [canvasRef]);
+
+  return <canvas ref={canvasRef} height={height} width={width} className={className} />;
+};
+
+Canvas.defaultProps = {
+  width: window.innerWidth,
+  height: window.innerHeight,
+  draw: () => {},
+  className: '',
+};
+
+export default Canvas;

src/components/Contact/index.tsx

@@ -52,7 +52,7 @@ const Contact: React.FC = () => {
       classNames="modal-contact"
       unmountOnExit
     >
-      <div className="modal-container">
+      <div className={`${styles.modalContainer} modal-container`}>
         <div ref={nodeRef} className="container modal-contact">
           <div className="highlight">
             <div>

src/components/Contact/styles.module.scss

@@ -0,0 +1,2 @@
+.modalContainer {
+}

src/components/Navbar/components/NavItem/index.tsx

@@ -29,12 +29,7 @@ const NavItem: React.FC<INavItemProps> = (props) => {
           {props.content}
         </button>
       ) : (
-        <Link
-          exact={true}
-          activeClassName={styles.active}
-          className={props.className}
-          to={props.to}
-        >
+        <Link activeClassName={styles.active} className={props.className} to={props.to}>
           {props.icon}
           {props.content}
         </Link>

src/components/Navbar/index.tsx

@@ -17,11 +17,11 @@ const Navbar: React.FC = () => {
   return (
     <nav className={styles.navbar}>
       <ul>
-        {/* <NavItem to={`/${t('lang')}`} content={t('home.menu')} /> */}
-        {/* <NavItem to={`/${t('lang')}/projects`} content={t('projects.menu')} /> */}
+        {/* <NavItem to={`/${t('lang')}`} content={t('menu.home')} /> */}
+        {/* <NavItem to={`/${t('lang')}/projects`} content={t('menu.projects')} /> */}
         <NavItem
           to={null}
-          content={t('contact.menu')}
+          content={t('menu.contact')}
           clickHandler={() => {
             if (setContactShow) setContactShow(true);
           }}

src/config/Routes.ts

@@ -2,17 +2,25 @@ import { lazy } from 'react';
 
 const Home = lazy(() => import('pages/Home'));
 const Projects = lazy(() => import('pages/Projects'));
+const ProjectsFGC = lazy(() => import('pages/Projects/pages/FixedGearCalculator'));
 export const NotFound = lazy(() => import('pages/NotFound'));
 
-export const Routes = [
-  {
-    id: 'home',
-    path: '/',
-    component: Home,
-  },
-  {
-    id: 'projects',
-    path: '/projects',
-    component: Projects,
-  },
-];
+export const Routes = () => {
+  return [
+    {
+      id: 'home',
+      path: '/',
+      Component: Home,
+    },
+    {
+      id: 'projects',
+      path: '/projects',
+      Component: Projects,
+    },
+    {
+      id: 'projectsFGC',
+      path: '/projects/fixed-gear-calculator',
+      Component: ProjectsFGC,
+    },
+  ];
+};

src/pages/NotFound/index.tsx

@@ -22,7 +22,7 @@ const NotFound: React.FC = () => {
           <h1>{t('notfound.title')}</h1>
           <p>{t('notfound.desc')}</p>
           <Link className="btn" to={`/${t('lang')}`}>
-            {t('home.menu')}
+            {t('menu.home')}
           </Link>
         </div>
       </AppLayout>

src/pages/Projects/pages/FixedGearCalculator/components/BikeCanvas/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import Canvas from 'components/Canvas';
+
+import styles from './styles.module.scss';
+
+const BikeCanvas: React.FC = () => {
+  const draw = (ctx: CanvasRenderingContext2D) => {
+    const wheelPosX = 150;
+    const wheelPosY = 150;
+
+    // Tire
+    ctx.beginPath();
+    ctx.strokeStyle = '#111111';
+    ctx.lineWidth = 7;
+    ctx.arc(wheelPosX, wheelPosY, 120, 0, Math.PI * 2, true);
+    ctx.stroke();
+    // Rim
+    ctx.beginPath();
+    ctx.strokeStyle = '#888888';
+    ctx.lineWidth = 6;
+    ctx.arc(wheelPosX, wheelPosY, 113, 0, Math.PI * 2, true);
+    ctx.stroke();
+    // Radius
+    ctx.strokeStyle = '#BBBBBB';
+    ctx.lineWidth = 1;
+    for (var i = 0; i < 24; i++) {
+      ctx.beginPath();
+      ctx.arc(
+        wheelPosX,
+        wheelPosX,
+        110,
+        i * ((Math.PI * 2) / 24),
+        ((i + 0.1) * Math.PI * 2) / 24,
+        false
+      );
+      ctx.lineTo(wheelPosX, wheelPosX);
+      ctx.stroke();
+    }
+  };
+
+  return <Canvas width={500} height={300} draw={draw} className={styles.bikeCanvas} />;
+};
+
+export default BikeCanvas;

src/pages/Projects/pages/FixedGearCalculator/components/BikeCanvas/styles.module.scss

@@ -0,0 +1,3 @@
+.bikeCanvas {
+  background-color: #9d9d9da3;
+}

src/pages/Projects/pages/FixedGearCalculator/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { Helmet } from 'react-helmet-async';
+import { useTranslation } from 'react-i18next';
+
+import { AppLayout } from 'layouts/AppLayout';
+
+import BikeCanvas from './components/BikeCanvas';
+import styles from './styles.module.scss';
+
+const FixedGearCalculator: React.FC = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Helmet>
+        <title>
+          {t('projects.fgc.title')} | {process.env.REACT_APP_SITE_TITLE}
+        </title>
+∆      </Helmet>
+      <AppLayout className={`${styles.FGC} container`}>
+        <div className={styles.container}>
+          <h1>{t('projects.fgc.title')}</h1>
+        </div>
+        <BikeCanvas />
+      </AppLayout>
+    </>
+  );
+};
+
+export default FixedGearCalculator;

src/pages/Projects/pages/FixedGearCalculator/styles.module.scss

@@ -0,0 +1,4 @@
+.FGC {
+  .container {
+  }
+}