several fixes, add new components

fix routing, headings display, add tags and new hero components
supra-modum · Jun 26, 2021 · 2d3d3be · 2d3d3be
1 parent 6ff446d
commit 2d3d3be
Show file tree

Hide file tree

Showing 15 changed files with 257 additions and 213 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -8,9 +8,9 @@ export const App: React.FC = () => {
   return (
     <>
       <Switch>
-        <Route exact path="/home" component={Home} />
-        <Route exact path="/">
-          <Redirect to="/home" />
+        <Route exact path="/" component={Home} />
+        <Route exact path="/home">
+          <Redirect to="/" />
         </Route>
         <Route exact path="/cv" component={CV} />
         <Route exact path="/projects-blog" component={ProjectsAndBlog} />

diff --git a/src/assets/index.tsx b/src/assets/index.tsx
diff --git a/src/contacts/contacts.tsx b/src/contacts/contacts.tsx
@@ -1,17 +1,22 @@
 import React from "react";
+import "cirrus-ui";
 
 export const Contacts: React.FC = () => {
   return (
-    <>
-      <div className="divider" data-content="Contacts" />
-      <div className="u-center w-80" style={{ height: "300px" }}>
-        <div className="col-12">
+    <div
+      className="u-flex u-items-center u-justify-center"
+      style={{ height: "300px" }}
+    >
+      <div className="py-2 mx-2">
+        <div className="col-5">
           <p className="lead">
             Email:{" "}
             <a href="mailto:" className="u u-LR text-indigo-400">
               3mfhognm5@relay.firefox.com
             </a>
           </p>
+        </div>
+        <div className="col-5">
           <p className="lead">
             Telegram:{" "}
             <a
@@ -22,7 +27,8 @@ export const Contacts: React.FC = () => {
             </a>
           </p>
         </div>
+        <div className="divider" />
       </div>
-    </>
+    </div>
   );
 };
diff --git a/src/cv/cv.tsx b/src/cv/cv.tsx
@@ -1,111 +1,94 @@
 import React from "react";
 import "cirrus-ui";
 
-import { Wrapper, SmallHeading, Footer, Header } from "../exports";
+import {
+  Wrapper,
+  SmallHeading,
+  Footer,
+  Header,
+  HeroCV,
+  H6Animated,
+} from "../exports";
 import { Contacts } from "~/contacts";
 
 export const CV: React.FC = () => {
   return (
     <>
       <Header />
+      <HeroCV />
       <Wrapper>
-        <div className="p-4 m-2">
-          <h3 className="headline-4 u-text-center text-indigo-500">
-            Work experience 👩🏻‍💻
-          </h3>
-        </div>
-        <div className="p-4 m-2">
-          <SmallHeading
-            h4={"Full stack engineer"}
-            h5={"МойСклад"}
-            children={"Moscow, Russia – (Aug 2020 - Present)"}
-          />
-          <article>
-            Full stack engineer with focus on front end development. I work in
-            the team responsible for developing POS software for small business.
-            <ul>
-              <li>
-                Refactoring a large <code>Scala.js/Scala-React</code> code base
-              </li>
-              <li>
-                Developing inventory management application with{" "}
-                <code>React</code> & <code>TypeScript</code> following the
-                functional programming approach
-              </li>
-              <li>
-                Actively using state manager <code>Effector.js</code>
-              </li>
-              <li>
-                Introduced unit testing with <code>Jest</code> for product
-                identifiers algorithms
-              </li>
-              <li>
-                Programming automated GUI tests using <code>Java</code> and{" "}
-                <code>JUnit</code>
-              </li>
-              <li>
-                Learned fundamentals of <code>Scala</code> and{" "}
-                <code>SQLite</code>
-              </li>
-              <li>
-                Using basic <code>Shell</code> scripting techniques
-              </li>
-            </ul>
-          </article>
-        </div>
-        <div className="p-4 m-2">
-          <SmallHeading
-            h4={"Web search evaluator"}
-            h5={"Yandex LLC"}
-            children={"Moscow, Russia – (Jan 2019 - Jul 2020)"}
-          />
-          <article>
-            <p>Quality Rater at Yandex Search.</p>
+        <SmallHeading
+          h4={"Full stack engineer"}
+          h5={"МойСклад"}
+          children={"Moscow, Russia – (Aug 2020 - Present)"}
+        />
+        <article className="px-4">
+          Full stack engineer with focus on front end development. I work in the
+          team responsible for developing POS software for small business.
+          <ul>
+            <li>
+              Refactoring a large <mark>Scala.js/Scala-React</mark> code base
+            </li>
+            <li>
+              Developing inventory management application with{" "}
+              <mark>React</mark> & <mark>TypeScript</mark> following the
+              functional programming approach
+            </li>
+            <li>
+              Actively using state manager <mark>Effector.js</mark>
+            </li>
+            <li>
+              Introduced unit testing with <mark>Jest</mark> for product
+              identifiers algorithms
+            </li>
+            <li>
+              Programming automated GUI tests using <mark>Java</mark> and{" "}
+              <mark>JUnit</mark>
+            </li>
+            <li>
+              Learned fundamentals of <mark>Scala</mark> and <mark>SQLite</mark>
+            </li>
+            <li>
+              Using basic <mark>Shell</mark> scripting techniques
+            </li>
+          </ul>
+        </article>
+        <SmallHeading
+          h4={"Web search evaluator"}
+          h5={"Yandex LLC"}
+          children={"Moscow, Russia – (Jan 2019 - Jul 2020)"}
+        />
+        <article className="px-4">
+          <p>Quality Rater at Yandex Search.</p>
+          <p>
+            Collected and analysed a vast amount of data, got better
+            understanding of user behavior and their goals.
+          </p>
+        </article>
+        <SmallHeading h4={"Skills"} children={"Technology & Languages"} />
+        <article className="px-4">
+          <section className="py-1">
+            <H6Animated>HTML & CSS</H6Animated>
+            <p>Sass, Tailwind CSS, Bootstrap</p>
+          </section>
+          <section className="py-1">
+            <H6Animated>JavaScript</H6Animated>
             <p>
-              Collected and analysed a vast amount of data, got better
-              understanding of user behavior and their goals.
+              TypeScript, React, Node.js, Effector.js, Scala.js, Material UI,
+              Jest
             </p>
-          </article>
-        </div>
-        <div className="p-4 m-2">
-          <SmallHeading h4={"Skills"} children={"Technology & Languages"} />
-          <div className="row u-items-baseline">
-            <div className="p-6 u-justify-center col-4">
-              <ul className="no-bullets">
-                <h6 className="text-indigo-500 u-text-center u u-LR my-2">
-                  HTML & CSS
-                </h6>
-                <li>Sass</li>
-                <li>Tailwind CSS</li>
-                <li>Bootstrap</li>
-              </ul>
-            </div>
-            <div className="p-6 u-justify-center col-4">
-              <ul className="no-bullets">
-                <h6 className="text-indigo-500 u-text-center u u-LR my-2">
-                  JavaScript
-                </h6>
-                <li>TypeScript</li>
-                <li>React</li>
-                <li>Material UI</li>
-                <li>Node.js</li>
-                <li>Effector.js</li>
-                <li>Scala.js</li>
-                <li>Jest</li>
-              </ul>
-            </div>
-            <div className="p-6 u-justify-center col-4">
-              <ul className="no-bullets">
-                <h6 className="text-indigo-500 u-text-center u u-LR">
-                  Languages
-                </h6>
-                <li>Russian 🇷🇺 — native speaker</li>
-                <li>English 🇬🇧 — B2</li>
-                <li>Hebrew 🇮🇱 and French 🇫🇷 — still learning!</li>
-              </ul>
-            </div>
-          </div>
-        </div>
+          </section>
+          <section className="py-1">
+            <H6Animated>Languages</H6Animated>
+            <p>
+              Russian 🇷🇺
+              <br />
+              English 🇬🇧
+              <br />
+              Hebrew 🇮🇱 and French 🇫🇷 — still learning!
+            </p>
+          </section>
+        </article>
       </Wrapper>
       <Contacts />
       <Footer />

diff --git a/src/exports.ts b/src/exports.ts
@@ -1,18 +1,24 @@
 import { Header } from "./ui/header";
 import { Footer } from "./ui/footer";
-import { Hero } from "./ui/hero";
+import { HeroMain } from "./ui/hero-main";
+import { HeroCV } from "./ui/hero-cv";
 import { SmallHeading } from "./ui/small-heading";
+import { Tags } from "./ui/tags";
+import { H6Animated } from "./ui/h6-animated";
 import { Wrapper } from "./ui/wrapper";
 import { Home } from "./home";
 import { CV } from "./cv";
 import { ProjectsAndBlog } from "./projects-blog";
 
 export {
   Header,
-  Hero,
+  HeroMain,
+  HeroCV,
   Footer,
+  H6Animated,
   Wrapper,
   SmallHeading,
+  Tags,
   Home,
   CV,
   ProjectsAndBlog,

diff --git a/src/home/home.tsx b/src/home/home.tsx
@@ -1,23 +1,45 @@
 import React from "react";
 import "cirrus-ui";
-import { Header, Hero, Footer } from "../exports";
-import { Contacts } from "~/contacts";
+import { Header, HeroMain, Footer } from "../exports";
 
 export const Home: React.FC = () => {
   return (
     <>
       <Header />
-      <Hero />
-      <div className="u-center w-80" style={{ height: "400px" }}>
-        <p style={{ fontSize: "1.5rem" }}>
-          Full stack developer with 1 year of experience in the industry.
-          <br />
-          Currently based in Moscow, Russia.
-          <br />
-          Always passionate about learning new things ✨📘
-        </p>
+      <HeroMain />
+      <div className="hero fullscreen" style={{ backgroundColor: "#212121" }}>
+        <div className="hero-body">
+          <div className="mx-auto">
+            <div className="py-2">
+              <p className="lead text-gray-100">
+                Full stack developer with 1 year of experience in the industry.
+                <br />
+                Always passionate about learning new things ✨📘
+              </p>
+              <p className="lead text-gray-100">
+                Currently based in Moscow, Russia.
+              </p>
+            </div>
+            <div className="py-2">
+              <p className="text-gray-100">
+                Email:{" "}
+                <a href="mailto:" className="u u-LR text-indigo-400">
+                  3mfhognm5@relay.firefox.com
+                </a>
+              </p>
+              <p className="text-gray-100">
+                Telegram:{" "}
+                <a
+                  href="https://t.me/supramodum"
+                  className="u u-LR text-indigo-400"
+                >
+                  supramodum
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
       </div>
-      <Contacts />
       <Footer />
     </>
   );

diff --git a/src/index.tsx b/src/index.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { render } from "react-dom";
 import { BrowserRouter as Router } from "react-router-dom";
 import "cirrus-ui";
-import { ScrollToTop } from "./assets";
+import { ScrollToTop } from "./scroll";
 import { App } from "./App";
 
 render(

diff --git a/src/scroll.tsx b/src/scroll.tsx
@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export const ScrollToTop = (): null => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+};