New structure and upgrade to typescript (#2)

.github/workflows/node.js.yml

@@ -26,4 +26,4 @@ jobs:
       - run: npm ci
       - run: npm run lint
       - run: npm run prettier-check
-      - run: npm run build --if-present
+

package.json

@@ -1,6 +1,6 @@
 {
   "name": "portfolio",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.7.1",
@@ -14,9 +14,13 @@
     "react": "^17.0.2",
     "react-dark-mode-toggle-2": "^2.0.2",
     "react-dom": "^17.0.2",
+    "react-error-boundary": "^3.1.4",
+    "react-lazily": "^0.9.1",
     "react-scripts": "4.0.3",
     "react-spinners-kit": "^1.9.1",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.3",
+    "typescript": "^4.6.4",
+    "zustand": "^4.0.0-rc.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -46,6 +50,11 @@
     ]
   },
   "devDependencies": {
+    "@types/jest": "^27.5.1",
+    "@types/node": "^17.0.34",
+    "@types/react": "^17.0.40",
+    "@types/react-dom": "^17.0.12",
+    "@types/styled-components": "^5.1.25",
     "@typescript-eslint/eslint-plugin": "^5.25.0",
     "@typescript-eslint/parser": "^5.25.0",
     "eslint": "^7.32.0",
@@ -54,4 +63,4 @@
     "eslint-plugin-react": "^7.29.4",
     "prettier": "2.6.2"
   }
-}
+}

src/App.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import './App.css';
+import MainLayout from './components/layout';
+import CssBaseline from '@mui/material/CssBaseline';
+// import roboto font
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+import { ColorModeProvider } from './hooks/useColorMode';
+
+/**
+ * App main component
+ *
+ * @return {React.ReactElement}
+ */
+export default function App(): React.ReactElement {
+  return (
+    <div className="App">
+      <ColorModeProvider>
+        <CssBaseline />
+        <MainLayout />
+      </ColorModeProvider>
+    </div>
+  );
+}

src/assets/styles/background.css

@@ -0,0 +1,27 @@
+#home {
+  min-height: 80vh;
+}
+
+.spacer {
+  aspect-ratio: 16/4;
+  width: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+
+.layer1 {
+  background-image: url('../images/layered-waves-1.svg');
+}
+
+.layer2 {
+  background-image: url('../images/wave-1.svg');
+}
+
+.layer3 {
+  background-image: url('../images/layered-waves-2.svg');
+}
+
+.layer4 {
+  background-image: url('../images/wave-2.svg');
+}

src/assets/styles/globalStyle.ts

@@ -0,0 +1,189 @@
+import styled from 'styled-components';
+import { keyframes } from 'styled-components';
+
+export const AboutMeContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+`;
+
+export const AboutMeDescription = styled.p`
+  font-size: 1.1rem;
+  font-weight: 300;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+`;
+
+export const SiteContent = styled.div`
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: flex-start;
+`;
+
+interface SectionProps {
+  readonly backgroundColor: string;
+  readonly color: string;
+}
+
+export const Section = styled.div<SectionProps>`
+  background-color: ${(props) => props.backgroundColor};
+  color: ${(props) => props.color};
+  min-height: 200px;
+  padding: 20px 10px;
+`;
+
+const scroll = keyframes`
+  0%{
+    opacity: 1;
+  }
+  100%{
+    opacity: 0;
+    transform: translateY(2rem);
+  }
+`;
+
+interface ScrollIndicatorProps {
+  readonly color: string;
+  readonly opacity: number;
+}
+
+export const ScrollIndicator = styled.div<ScrollIndicatorProps>`
+  &:before {
+    position: absolute;
+    left: 50%;
+    content: '';
+    width: 8px;
+    height: 8px;
+    background: ${(props) => props.color};
+    margin-left: -4px;
+    top: 0.5rem;
+    border-radius: 4px;
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+    animation-name: ${scroll};
+  }
+  width: 2rem;
+  height: 3rem;
+  margin-left: -20px;
+  top: 50%;
+  margin-top: -0.7rem;
+  box-shadow: 0px 0px 1px ${(props) => props.color};
+  border-radius: 525px;
+  position: fixed;
+  left: 50%;
+  top: 90%;
+  opacity: ${(props) => props.opacity};
+`;
+
+export const ProjectList = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 1rem;
+  font-size: 1.1rem;
+  font-weight: 300;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+  width: 100%;
+`;
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+`;
+
+export const SourceDescription = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 1rem;
+  font-size: 1.1rem;
+  font-weight: 300;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+`;
+
+export const SourceItem = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-grow: 1;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const SourceImage = styled.img`
+  width: 5rem;
+  height: 5rem;
+`;
+
+export const SourceImageContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 6rem;
+  width: 6rem;
+  background-color: #fafafa;
+  border-radius: 12px;
+  padding: 5px;
+`;
+
+interface ColoredTextProps {
+  readonly color: string;
+}
+
+export const ColoredText = styled.span<ColoredTextProps>`
+  color: ${(props) => props.color};
+`;
+
+export const ProfilePicture = styled.img`
+  width: 12rem;
+  height: 12rem;
+  border-radius: 50%;
+`;
+
+export const ProfilePictureContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 12rem;
+  height: 12rem;
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    transform: translate(120%, 150%);
+    background-color: #378d54;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    z-index: 200;
+  }
+`;
+
+export const ProfileDescription = styled.div`
+  text-align: right;
+  font-weight: 300;
+  font-size: 1.5rem;
+  line-height: 1.5;
+`;