add contributors

Eugene · Eugene · commit b6e9d52873c3 · 2022-01-03T16:41:17.000+02:00
diff --git a/src/assets/images/projects/quick-color-picker/1.png b/src/assets/images/projects/quick-color-picker/1.png
diff --git a/src/assets/images/projects/quick-color-picker/2.png b/src/assets/images/projects/quick-color-picker/2.png
diff --git a/src/assets/images/projects/quick-color-picker/icon.png b/src/assets/images/projects/quick-color-picker/icon.png
diff --git a/src/assets/scss/animations.scss b/src/assets/scss/animations.scss
@@ -1,3 +1,5 @@
+@import "./variables.scss";
+
 @keyframes lds-ellipsis1 {
   0% {
     transform: scale(0);
@@ -24,3 +26,14 @@
     transform: translate(24px, 0);
   }
 }
+
+@keyframes mount-slide {
+  from {
+    transform: translateY(-$size-lg);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss
@@ -31,3 +31,8 @@ img {
 a {
   color: inherit;
 }
+
+ul,
+ol {
+  list-style: none;
+}
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
@@ -8,6 +8,7 @@ import Footer from "../Footer";
 import HomePage from "../../pages/HomePage";
 import ProjectPage from "../../pages/ProjectPage";
 import NotFoundPage from "../../pages/NotFoundPage";
+import AboutPage from "../../pages/AboutPage";
 import WidthLimiter, { WidthLimiterSlot } from "../../components/WidthLimiter";
 import "./index.scss";
 
@@ -21,6 +22,7 @@ const App: FunctionComponent = () => {
             <Routes>
               <Route path="*" element={<NotFoundPage />} />
               <Route path="/" element={<HomePage />} />
+              <Route path="/about" element={<AboutPage />} />
               {mainConfig.projects.map((project, projectIndex) => {
                 return (
                   <Route
@@ -36,7 +38,7 @@ const App: FunctionComponent = () => {
         </WidthLimiterSlot>
       </WidthLimiter>
       <div className="app__effects">
-        <Snow size="8px"/>
+        <Snow size="8px" />
       </div>
     </div>
   );
diff --git a/src/components/Contributors/Props.ts b/src/components/Contributors/Props.ts
@@ -0,0 +1,11 @@
+interface Contributor {
+  login: string;
+  profileUrl: string;
+  avatarUrl: string;
+}
+
+interface Props {
+  contributors: Contributor[];
+}
+
+export default Props;
diff --git a/src/components/Contributors/index.scss b/src/components/Contributors/index.scss
@@ -0,0 +1,24 @@
+@import "../../assets/scss/variables.scss";
+
+.contributors {
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    width: 33.3%;
+    margin: $size-md 0;
+  }
+
+  &__item-image {
+    border-radius: 50%;
+    width: $size-xl;
+  }
+
+  &__item-link {
+    margin: 0 $size-lg;
+  }
+}
diff --git a/src/components/Contributors/index.tsx b/src/components/Contributors/index.tsx
@@ -0,0 +1,32 @@
+import { FunctionComponent } from "react";
+
+import Props from "./Props";
+import "./index.scss";
+import Link from "../Link";
+
+const Contributors: FunctionComponent<Props> = ({ contributors }) => {
+  return (
+    <div className="contributors">
+      <ul className="contributors__list">
+        {contributors.map((c, cIndex) => {
+          return (
+            <li className="contributors__item" key={cIndex}>
+              <img
+                className="contributors__item-image"
+                src={c.avatarUrl}
+                alt={c.login}
+              />
+              <Link
+                href={c.profileUrl}
+                className="contributors__item-link"
+                text={c.login}
+              />
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+export default Contributors;
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -1,6 +1,7 @@
-import "./index.scss";
 import { FunctionComponent } from "react";
 
+import "./index.scss";
+
 const Footer: FunctionComponent = () => {
   return (
     <footer className="footer">
diff --git a/src/components/ProjectCard/index.scss b/src/components/ProjectCard/index.scss
@@ -21,22 +21,20 @@
     overflow: hidden;
     background: $color-substrate;
     border-radius: $size-lg;
-    position: relative;
     height: 300px;
+    padding: #{$size-mx + $size-xl} $size-mx 0;
+    text-align: center;
   }
 
   &__image {
-    position: absolute;
-    left: $size-mx;
-    width: calc(100% - #{$size-mx2});
-    top: 96px;
-    transition: top $duration-t, box-shadow $duration-t;
+    max-width: 100%;
+    transition: box-shadow $duration-t, transform $duration-t;
     border-radius: $size-md;
     box-shadow: $shadow-lg;
   }
 
   &--clickable &__tile:hover &__image {
-    top: $size-mx;
+    transform: translateY(-$size-xl);
     box-shadow: $shadow-xl;
   }
 }
diff --git a/src/components/ScrollToTop/index.tsx b/src/components/ScrollToTop/index.tsx
@@ -0,0 +1,14 @@
+import { useEffect, FunctionComponent } from "react";
+import { useLocation } from "react-router";
+
+const ScrollToTop: FunctionComponent = ({ children }) => {
+  const location = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [location]);
+
+  return <>{children}</>;
+};
+
+export default ScrollToTop;
diff --git a/src/components/Slider/index.scss b/src/components/Slider/index.scss
@@ -68,15 +68,14 @@
       &::before {
         content: "";
         position: absolute;
-        bottom: 0;
         left: calc(50% - #{($size-xs + $size-md) / 2});
         width: $size-md;
         height: $size-md;
         border-radius: 50%;
         background: #fff;
         opacity: 0;
         transition: opacity $duration-t, transform $duration-t;
-        top: calc(100% - #{$size-xs + $size-md});
+        top: calc(100% - #{$size-lg});
         pointer-events: none;
         box-shadow: $shadow-lg;
         border: $size-xs solid $color-primary;
@@ -85,7 +84,7 @@
       &.selected {
         &::before {
           opacity: 1;
-          transform: translateY($size-sm);
+          transform: translateY(#{$size-xs + $size-md});
         }
       }
 
diff --git a/src/config/Main.ts b/src/config/Main.ts
@@ -1,16 +1,20 @@
 import Platform from "../enums/Platform";
 import MainConfig from "../interfaces/MainConfig";
 
-import SzContextIcon from "../assets/images/projects/sz-context/icon.png";
-import SzContextImage1 from "../assets/images/projects/sz-context/1.png";
-import SzContextImage2 from "../assets/images/projects/sz-context/2.png";
-import SzContextImage3 from "../assets/images/projects/sz-context/3.png";
-import SzContextImage4 from "../assets/images/projects/sz-context/4.png";
-
 import QpvIcon from "../assets/images/projects/quick-picture-viewer/icon.png";
 import QpvImage1 from "../assets/images/projects/quick-picture-viewer/1.png";
 import QpvImage2 from "../assets/images/projects/quick-picture-viewer/2.png";
 
+// import SzContextIcon from "../assets/images/projects/sz-context/icon.png";
+// import SzContextImage1 from "../assets/images/projects/sz-context/1.png";
+// import SzContextImage2 from "../assets/images/projects/sz-context/2.png";
+// import SzContextImage3 from "../assets/images/projects/sz-context/3.png";
+// import SzContextImage4 from "../assets/images/projects/sz-context/4.png";
+
+import QcpIcon from "../assets/images/projects/quick-color-picker/icon.png";
+import QcpImage1 from "../assets/images/projects/quick-color-picker/1.png";
+import QcpImage2 from "../assets/images/projects/quick-color-picker/2.png";
+
 const mainConfig: MainConfig = {
   title: "Module Art",
   projects: [
@@ -29,36 +33,36 @@ const mainConfig: MainConfig = {
       authorUrl: "https://github.com/Beelink",
     },
     {
-      title: "SzContext",
+      title: "Quick Color Picker",
       shortDescription:
-        "Open files or folders using your favorite app from Finder® context menu",
-      href: "/sz-context",
-      appIcon: SzContextIcon,
-      images: [
-        SzContextImage1,
-        SzContextImage2,
-        SzContextImage3,
-        SzContextImage4,
-      ],
-      githubPath: "RoadToDream/SzContext",
-      platform: Platform.mac,
-      os: "macOS 10.15+",
-      authorName: "Duan Jiawei",
-      authorUrl: "https://github.com/RoadToDream",
+        "Lightweight desktop color picker and color editor utility for Windows",
+      href: "/quick-color-picker",
+      appIcon: QcpIcon,
+      images: [QcpImage1, QcpImage2],
+      githubPath: "ModuleArt/quick-color-picker",
+      platform: Platform.win,
+      os: "Windows 7+",
+      roadmapUrl: "https://trello.com/b/ocDxuOLf/quick-color-picker-v2",
+      authorName: "Eugene Volynko",
+      authorUrl: "https://github.com/Beelink",
     },
     // {
-    //   title: "Quick Color Picker",
+    //   title: "SzContext",
     //   shortDescription:
-    //     "Lightweight desktop color picker and color editor utility for Windows",
-    //   href: "/quick-color-picker",
-    //   appIcon:
-    //     "https://raw.githubusercontent.com/ModuleArt/quick-picture-viewer/master/quick-picture-viewer/resources/imgs/picture512.png",
+    //     "Open files or folders using your favorite app from Finder® context menu",
+    //   href: "/sz-context",
+    //   appIcon: SzContextIcon,
     //   images: [
-    //     "https://github.com/ModuleArt/quick-color-picker/raw/v2/docs/screenshots/main.png",
+    //     SzContextImage1,
+    //     SzContextImage2,
+    //     SzContextImage3,
+    //     SzContextImage4,
     //   ],
-    //   githubUrl: "https://github.com/quick-color-picker",
-    //   platform: Platform.win,
-    //   os: "Windows 7+",
+    //   githubPath: "RoadToDream/SzContext",
+    //   platform: Platform.mac,
+    //   os: "macOS 10.15+",
+    //   authorName: "Duan Jiawei",
+    //   authorUrl: "https://github.com/RoadToDream",
     // },
   ],
 };
diff --git a/src/index.js b/src/index.js
@@ -3,13 +3,16 @@ import ReactDOM from "react-dom";
 import { HashRouter } from "react-router-dom";
 
 import App from "./components/App";
+import ScrollToTop from "./components/ScrollToTop";
 import "./assets/scss/fonts.scss";
 import "./assets/scss/index.scss";
 
 ReactDOM.render(
   <React.StrictMode>
     <HashRouter>
-      <App />
+      <ScrollToTop>
+        <App />
+      </ScrollToTop>
     </HashRouter>
   </React.StrictMode>,
   document.getElementById("root")
diff --git a/src/pages/AboutPage/index.scss b/src/pages/AboutPage/index.scss
@@ -0,0 +1,10 @@
+@import "../../assets/scss/variables.scss";
+
+.about-page {
+  text-align: center;
+
+  &__heading {
+    font-size: $font-size-mx;
+    font-weight: $font-weight-lg;
+  }
+}
diff --git a/src/pages/AboutPage/index.tsx b/src/pages/AboutPage/index.tsx
@@ -0,0 +1,15 @@
+import { FunctionComponent } from "react";
+import DocumentTitle from "react-document-title";
+
+import "./index.scss";
+
+const AboutPage: FunctionComponent = () => {
+  return (
+    <div className="about-page">
+      <DocumentTitle title="404" />
+      <h1 className="not-found-page__heading">About us</h1>
+    </div>
+  );
+};
+
+export default AboutPage;
diff --git a/src/pages/NotFoundPage/index.scss b/src/pages/NotFoundPage/index.scss
@@ -0,0 +1,16 @@
+@import "../../assets/scss/variables.scss";
+
+.not-found-page {
+  text-align: center;
+
+  &__heading {
+    font-size: $font-size-mx;
+    font-weight: $font-weight-lg;
+  }
+
+  &__text {
+    font-size: $font-size-md;
+    font-weight: $font-weight-md;
+    margin-top: $size-xl;
+  }
+}
diff --git a/src/pages/NotFoundPage/index.tsx b/src/pages/NotFoundPage/index.tsx
@@ -1,11 +1,18 @@
 import { FunctionComponent } from "react";
 import DocumentTitle from "react-document-title";
 
+import "./index.scss";
+
 const NotFoundPage: FunctionComponent = () => {
   return (
     <div className="not-found-page">
       <DocumentTitle title="404" />
-      <h1>404</h1>
+      <h1 className="not-found-page__heading">404</h1>
+      <h2 className="not-found-page__text">
+        The page you’re looking
+        <br />
+        for can’t be found.
+      </h2>
     </div>
   );
 };
diff --git a/src/pages/ProjectPage/index.scss b/src/pages/ProjectPage/index.scss
@@ -1,4 +1,5 @@
 @import "../../assets/scss/variables.scss";
+@import "../../assets/scss/animations.scss";
 
 .project-page {
   &__head {
@@ -24,6 +25,8 @@
     display: flex;
     justify-content: center;
     padding: $size-mx;
+    animation-name: mount-slide;
+    animation-duration: $duration-t;
 
     & > * {
       margin-right: $size-lg;
diff --git a/src/pages/ProjectPage/index.tsx b/src/pages/ProjectPage/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -31,3 +31,8 @@ img {`
`31`	`31`	`a {`
`32`	`32`	`color: inherit;`
`33`	`33`	`}`
	`34`	`+`
	`35`	`+ul,`
	`36`	`+ol {`
	`37`	`+ list-style: none;`
	`38`	`+}`