Skip to content

Commit e881c22

Browse files
AseWhyAseWhy
authored
Merge pull request #4 from AseWhy/claude/improve-website-design-SKuze
2 parents bcfd697 + edf00ea commit e881c22

8 files changed

Lines changed: 69 additions & 112 deletions

File tree

‎dist/assets/index-002bf224.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/assets/index-7202ed4a.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

dist/assets/index-96b85804.js renamed to dist/assets/index-c6999c68.js

Lines changed: 10 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
<link rel="manifest" href="data:application/json;base64,ewogICJzaG9ydF9uYW1lIjogIlJlYWN0IEFwcCIsCiAgIm5hbWUiOiAiQ3JlYXRlIFJlYWN0IEFwcCBTYW1wbGUiLAogICJpY29ucyI6IFsKICAgIHsKICAgICAgInNyYyI6ICJmYXZpY29uLmljbyIsCiAgICAgICJzaXplcyI6ICI2NHg2NCAzMngzMiAyNHgyNCAxNngxNiIsCiAgICAgICJ0eXBlIjogImltYWdlL3gtaWNvbiIKICAgIH0sCiAgICB7CiAgICAgICJzcmMiOiAibG9nbzE5Mi5wbmciLAogICAgICAidHlwZSI6ICJpbWFnZS9wbmciLAogICAgICAic2l6ZXMiOiAiMTkyeDE5MiIKICAgIH0sCiAgICB7CiAgICAgICJzcmMiOiAibG9nbzUxMi5wbmciLAogICAgICAidHlwZSI6ICJpbWFnZS9wbmciLAogICAgICAic2l6ZXMiOiAiNTEyeDUxMiIKICAgIH0KICBdLAogICJzdGFydF91cmwiOiAiLiIsCiAgImRpc3BsYXkiOiAic3RhbmRhbG9uZSIsCiAgInRoZW1lX2NvbG9yIjogIiMwMDAwMDAiLAogICJiYWNrZ3JvdW5kX2NvbG9yIjogIiNmZmZmZmYiCn0K" />
1818

1919
<title>AseWhy/Astecom</title>
20-
<script type="module" crossorigin src="/assets/index-96b85804.js"></script>
21-
<link rel="stylesheet" href="/assets/index-7202ed4a.css">
20+
<script type="module" crossorigin src="/assets/index-c6999c68.js"></script>
21+
<link rel="stylesheet" href="/assets/index-002bf224.css">
2222
</head>
2323
<body>
2424
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/components/content/about/AboutContent.module.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
.AboutContent {
22
width: 100%;
33
background: var(--color-bg);
4-
padding-top: var(--header-h);
54
overflow: hidden;
65

76
> .sides {

‎src/components/content/work/StackView.module.scss‎

Lines changed: 38 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,53 @@
11
.container {
22
position: relative;
33
overflow: hidden;
4-
display: flex;
5-
flex-direction: row;
6-
height: 150px;
74
width: 100%;
8-
margin: var(--space-6) 0;
9-
10-
&::before,
11-
&::after {
12-
content: '';
13-
position: absolute;
14-
top: 0;
15-
bottom: 0;
16-
width: clamp(40px, 10%, 140px);
17-
z-index: 2;
18-
pointer-events: none;
19-
}
5+
max-width: var(--content-max);
6+
margin: var(--space-6) auto;
7+
padding: var(--space-2) 0;
8+
-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
9+
mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
10+
}
2011

21-
&::before {
22-
left: 0;
23-
background: linear-gradient(to right, var(--color-bg), transparent);
24-
}
12+
.track {
13+
display: flex;
14+
width: max-content;
15+
align-items: center;
16+
animation: stackMarquee 36s linear infinite;
17+
}
2518

26-
&::after {
27-
right: 0;
28-
background: linear-gradient(to left, var(--color-bg), transparent);
29-
}
19+
.container:hover .track {
20+
animation-play-state: paused;
3021
}
3122

3223
.logo {
33-
position: absolute;
34-
transition: left 0.5s ease-in-out;
35-
margin: auto;
24+
flex: 0 0 auto;
25+
display: flex;
26+
align-items: center;
27+
justify-content: center;
28+
width: clamp(110px, 13vw, 170px);
29+
height: 64px;
30+
padding: 0 var(--space-5);
3631
}
3732

3833
.sponsor {
34+
max-width: 100%;
35+
max-height: 100%;
3936
object-fit: contain;
4037
object-position: center;
41-
opacity: 0.9;
38+
opacity: 0.72;
39+
transition: opacity var(--transition);
40+
}
41+
42+
.logo:hover .sponsor {
43+
opacity: 1;
44+
}
45+
46+
@keyframes stackMarquee {
47+
from {
48+
transform: translateX(0);
49+
}
50+
to {
51+
transform: translateX(-50%);
52+
}
4253
}

‎src/components/content/work/StackView.tsx‎

Lines changed: 11 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,23 @@
1-
import { useEffect, useMemo, useRef, useState } from "react";
2-
import { useSize } from "../../../hooks";
31
import { Stack } from "./stack";
42

53
import StackViewModule from "./StackView.module.scss";
64

7-
export interface StackViewPorps {
8-
height: number;
9-
}
10-
115
export function StackView() {
12-
const { ref, width, height } = useSize();
13-
const [ slide, setSlide ] = useState(0);
14-
const [ direction, setDirection ] = useState(1);
15-
const [ offset, setOffset ] = useState(0);
16-
17-
const blocks = useMemo(() => Math.min(Math.floor(width / 144), 5), [ width ]);
18-
const intervalRef = useRef<any>();
19-
const imageWidth = useMemo(() => width / blocks, [ blocks, width ]);
20-
const imageHeight = useMemo(() => height * .6, [ height ]);
21-
22-
useEffect(
23-
() => {
24-
if(intervalRef.current) {
25-
clearInterval(intervalRef.current);
26-
}
27-
28-
intervalRef.current = setInterval(
29-
() => {
30-
let newIndex = slide + direction;
31-
32-
if(newIndex <= 0) {
33-
newIndex = slide + 1;
34-
} else if(newIndex >= Stack.length / 2) {
35-
newIndex = slide - 1;
36-
}
37-
38-
setDirection(newIndex - slide);
39-
setSlide(newIndex);
40-
41-
setOffset(-imageWidth * newIndex);
42-
},
43-
2500
44-
);
45-
46-
return () => clearInterval(intervalRef.current);
47-
},
48-
[ imageWidth, slide ]
49-
);
50-
51-
return <div
52-
className={StackViewModule.container}
53-
ref={ref}
54-
>
55-
{
56-
isNaN(imageWidth) || isNaN(imageHeight) ? null : Stack.map(
57-
(item, i) => <div
58-
key={item}
6+
return <div className={StackViewModule.container}>
7+
<div className={StackViewModule.track}>
8+
{
9+
[ ...Stack, ...Stack ].map((item, i) => <div
10+
key={i}
5911
className={StackViewModule.logo}
60-
style={
61-
{
62-
position: 'relative',
63-
left: offset,
64-
width: imageWidth,
65-
height: imageHeight
66-
}
67-
}
6812
>
6913
<img
7014
src={item}
71-
width={imageWidth}
7215
className={StackViewModule.sponsor}
73-
style={
74-
{
75-
height: imageHeight
76-
}
77-
}
16+
alt=""
17+
aria-hidden={i >= Stack.length}
7818
/>
79-
</div>
80-
)
81-
}
19+
</div>)
20+
}
21+
</div>
8222
</div>;
83-
}
23+
}

‎src/index.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,13 @@
6262
--transition: 0.3s var(--ease-out);
6363
}
6464

65+
@media (max-width: 750px) {
66+
:root {
67+
--space-section: 2.25rem;
68+
--space-7: 2rem;
69+
}
70+
}
71+
6572
*,
6673
*::before,
6774
*::after {

0 commit comments

Comments
 (0)