feat: first draft

Ri0n72Y · Jul 20, 2024 · e3256c3 · e3256c3
1 parent d016831
commit e3256c3
Show file tree

Hide file tree

Showing 16 changed files with 1,410 additions and 151 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.1",
     "styled-components": "^6.1.11"
   },
   "devDependencies": {
@@ -39,4 +40,4 @@
     "typescript": "^5.2.2",
     "vite": "^5.3.1"
   }
-}
+}
diff --git a/src/components/Column/Column.tsx b/src/components/Column/Column.tsx
@@ -3,24 +3,41 @@ import styled from "styled-components";
 interface ColumnProps extends React.HTMLAttributes<HTMLDivElement> {
   title: string;
 }
-export function ColumnComponent({ title, children }: ColumnProps) {
+export function ColumnComponent({ title, children, ...rest }: ColumnProps) {
   return (
-    <Container>
+    <Container {...rest}>
       <Header>{title}</Header>
-      {children}
+      <InnerContainer>{children}</InnerContainer>
     </Container>
   );
 }
 
-const Container = styled.div`
-  position: relative;
-  background-color: #f5f6f7;
+const InnerContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
+
+  @media screen and (max-width: 960px) {
+    flex-direction: row;
+    flex-flow: wrap;
+    gap: 1rem;
+  }
+`;
+
+const Container = styled.div`
+  position: relative;
+  height: fit-content;
+  background-color: #f5f6f7;
   padding: 1rem;
   border-radius: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
   box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
+
+  @media screen and (max-width: 960px) {
+    width: 100%;
+  }
 `;
 
 const Header = styled.div`

diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx
@@ -1,37 +1,56 @@
 import styled from "styled-components";
 import { Circle } from "./Progress/Circle";
+import { useMedia } from "../utils/useMedia";
+import { useMemo } from "react";
+import { useCssRemSize } from "../utils/useCssRemSize";
 
 export function Profile() {
+  const rem = useCssRemSize();
+  const bold = useMedia("(max-width: 960px)");
+  const thin = useMedia("(max-width: 768px)");
+  const narrow = useMedia("(max-width: 572px)");
+  const ringSize = useMemo(() => {
+    if (narrow) return 4 * rem;
+    if (thin) return 6 * rem;
+    if (bold) return 8 * rem;
+    return 4 * rem;
+  }, [bold, narrow, rem, thin]);
   return (
     <Wrapper>
-      <Icon
-        src="https://avatars.githubusercontent.com/u/16500109?v=4&size=128"
-        alt="Icon"
-      />
-      <Text>
-        Ziyu "Rion" Tao
-        <br />
-        <Sub>Software Engineer</Sub>
-        <br />
-        <Third>Undergraduate: ANU</Third>
-      </Text>
-      <SkillContainer>
-        <Circle progress={0.6} label="JSX" />
-        <Circle progress={0.9} label="TS" />
-        <Circle progress={0.2} label="Python" />
-      </SkillContainer>
-      <SkillContainer>
-        <Circle progress={0.5} label="Agile" />
-        <Circle progress={0.8} label="Steam" />
-        <Circle progress={1} label="Sincere" />
-      </SkillContainer>
+      <SubContainer>
+        <Icon
+          src="https://avatars.githubusercontent.com/u/16500109?v=4&size=128"
+          alt="Icon"
+        />
+        <Text>
+          Ziyu "Rion" Tao
+          <br />
+          <Sub>Software Engineer</Sub>
+          <br />
+          <Third>Undergraduate: ANU</Third>
+        </Text>
+      </SubContainer>
+      <SubContainer>
+        <SkillContainer style={{ marginBottom: "0.4rem" }}>
+          <Circle size={ringSize} progress={0.6} label="JSX" />
+          <Circle size={ringSize} progress={0.9} label="TS" />
+          <Circle size={ringSize} progress={0.2} label="Python" />
+        </SkillContainer>
+        <SkillContainer>
+          <Circle size={ringSize} progress={0.5} label="Agile" />
+          <Circle size={ringSize} progress={0.8} label="Steam" />
+          <Circle size={ringSize} progress={1} label="Sincere" />
+        </SkillContainer>
+      </SubContainer>
     </Wrapper>
   );
 }
 
+const SubContainer = styled.div``;
+
 const SkillContainer = styled.div`
   display: flex;
-  gap: 0.5rem;
+  gap: 1rem;
   font-size: 0.8rem;
   padding: 0.3rem;
 `;
@@ -73,8 +92,21 @@ const Wrapper = styled.div`
   padding: 1rem;
   background-color: rgb(39, 33, 46);
 
-  @media screen and (max-width: 768px) {
+  @media screen and (max-width: 960px) {
+    position: relative;
+    width: fit-content;
+    flex-direction: row;
+    padding-bottom: 1rem;
+    gap: 2rem;
+    height: fit-content;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 1rem;
+    justify-content: space-around;
+  }
+
+  @media screen and (max-width: 572px) {
     position: relative;
+    flex-direction: column;
     width: 16rem;
     padding-bottom: 2rem;
     height: fit-content;

diff --git a/src/components/Progress/Circle.tsx b/src/components/Progress/Circle.tsx
@@ -4,47 +4,61 @@ interface Props {
   style?: React.CSSProperties;
   progress: number;
   label?: React.ReactNode;
+  /** @unit px */
+  size?: number;
 }
-export function Circle({ style, progress, label }: Props) {
-  const angle = 360 - progress * 208;
+// reference: https://nikitahl.github.io/svg-circle-progress-generator/
+export function Circle({ style, progress, label, size = 50 }: Props) {
+  const realSize = size + 2;
+  const y = size * Math.PI;
+  const prog = y * (1 - progress);
   return (
-    <Wrapper style={style}>
-      <svg width="4rem" height="4rem" style={{ position: "absolute" }}>
+    <Wrapper $size={realSize} style={style}>
+      <svg
+        width={size + 20}
+        height={size + 20}
+        style={{ position: "absolute", transition: "all 0.3s ease-out" }}
+      >
         <circle
-          cx="2rem"
-          cy="2rem"
-          r="1.8rem"
+          cx={size / 2 + 10}
+          cy={size / 2 + 10}
+          r={size / 2}
           fill="transparent"
           stroke="white"
+          style={{
+            transition: "all 0.3s ease-out",
+          }}
           opacity={0.6}
-          strokeWidth="4"
+          strokeWidth="3"
         />
         <circle
-          cx="2rem"
-          cy="2rem"
-          r="1.8rem"
+          cx={size / 2 + 10}
+          cy={size / 2 + 10}
+          r={size / 2}
           fill="transparent"
           stroke="white"
-          strokeWidth="5"
+          strokeWidth="4"
           strokeLinecap="round"
           style={{
             transformOrigin: "center",
             transform: `rotate(${-90}deg)`,
+            transition: "all 0.3s ease-out",
           }}
-          strokeDasharray={100 * Math.PI}
-          strokeDashoffset={((100 * Math.PI) / 360) * angle}
+          strokeDasharray={`${y}px`}
+          strokeDashoffset={`${prog}px`}
         />
       </svg>
       {label ?? `${(progress * 100).toFixed(0)}%`}
     </Wrapper>
   );
 }
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{ $size?: number }>`
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 4rem;
-  height: 4rem;
+  width: ${({ $size: size = 4 }) => `${size}`}px;
+  height: ${({ $size: size = 4 }) => `${size}`}px;
+  transition: all 0.3s ease-out;
 `;
diff --git a/src/components/StoryCard/StoryCard.tsx b/src/components/StoryCard/StoryCard.tsx
@@ -8,28 +8,40 @@ export function StoryCardComponent({
   title,
   description,
   ...props
-}: StoryCardProps) {
+}: StoryCardProps & { $cardSize?: number }) {
+  const color = hex2rgba(colors[status as StatusType], 1);
   return (
     <Container
       {...props}
       style={{
-        backgroundColor: hex2rgba(colors[status as StatusType], 1),
+        backgroundColor: color,
         ...(!description ? { height: "auto" } : {}),
         ...props.style,
       }}
     >
       <Title>{title}</Title>
       {!!description && <Desc>{description}</Desc>}
+      <Gradient $color={color} />
       <SideBar style={{ backgroundColor: colors[type as CardType] }} />
     </Container>
   );
 }
 
+const Gradient = styled.div<{ $color?: string }>`
+  position: absolute;
+  bottom: 0.4rem;
+  left: 0;
+  width: 100%;
+  height: 3rem;
+  background: ${({ $color }) =>
+    `linear-gradient(0deg, ${$color || "#ffffff"} 0%, #00000000 100%)`};
+`;
+
 const CARD_SIZE = 200;
-const Container = styled.div`
+const Container = styled.div<{ $cardSize?: number }>`
   position: relative;
-  width: ${CARD_SIZE}px;
-  height: ${CARD_SIZE * 0.618}px;
+  width: ${({ $cardSize = CARD_SIZE }) => $cardSize}px;
+  height: ${({ $cardSize = CARD_SIZE }) => $cardSize * 0.6}px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -42,9 +54,11 @@ const Container = styled.div`
   overflow: hidden;
   cursor: pointer;
   opacity: 0.6;
+  flex-shrink: 0;
   transition:
-    opacity,
-    0.15s ease-out;
+    opacity 0.15s ease-out,
+    width 0.3s ease-out,
+    height 0.3s ease-out;
 
   &:hover {
     opacity: 1;