Skip to content

Commit 8d82dd6

Browse files
alphatrlalphatrl
authored
feat(design): Header support (#28)
1 parent 42a5565 commit 8d82dd6

7 files changed

Lines changed: 334 additions & 134 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"dependencies": {
1212
"@tailwindcss/vite": "^4.1.18",
1313
"classnames": "^2.5.1",
14+
"framer-motion": "^12.33.0",
1415
"lodash": "^4.17.23",
1516
"react": "^19.0.0",
1617
"react-dom": "^19.0.0",

‎src/pages/HomePage/components/GridLayout/constants/dashboard.ts‎

Lines changed: 130 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,138 +1,151 @@
11
import { Breakpoint, ResponsiveLayouts } from 'react-grid-layout';
22

3-
import { PortfolioKeyEnum } from '../types';
3+
import { FilterType, PortfolioKeyEnum } from '../types';
44

55
export const DashboardLayout: ResponsiveLayouts<Breakpoint> = {
66
lg: [
7-
{
8-
i: PortfolioKeyEnum.ME,
9-
x: 0,
10-
y: 0,
11-
w: 2,
12-
h: 1,
13-
},
14-
{
15-
i: PortfolioKeyEnum.RACE_COUNTDOWN,
16-
x: 2,
17-
y: 0,
18-
w: 1,
19-
h: 1,
20-
},
21-
{
22-
i: PortfolioKeyEnum.TASKADE,
23-
x: 3,
24-
y: 0,
25-
w: 1,
26-
h: 2,
27-
},
7+
{ i: PortfolioKeyEnum.ME, x: 0, y: 0, w: 2, h: 1 },
8+
{ i: PortfolioKeyEnum.RACE_COUNTDOWN, x: 2, y: 0, w: 1, h: 1 },
9+
{ i: PortfolioKeyEnum.TASKADE, x: 3, y: 0, w: 1, h: 2 },
2810
// Row 2
29-
{
30-
i: PortfolioKeyEnum.CONTACT,
31-
x: 0,
32-
y: 2,
33-
w: 1,
34-
h: 1,
35-
},
36-
{
37-
i: PortfolioKeyEnum.CV,
38-
x: 1,
39-
y: 2,
40-
w: 1,
41-
h: 1,
42-
},
43-
{
44-
i: PortfolioKeyEnum.CLASSMAID,
45-
x: 2,
46-
y: 2,
47-
w: 1,
48-
h: 2,
49-
},
11+
{ i: PortfolioKeyEnum.CONTACT, x: 0, y: 2, w: 1, h: 1 },
12+
{ i: PortfolioKeyEnum.CV, x: 1, y: 2, w: 1, h: 1 },
13+
{ i: PortfolioKeyEnum.CLASSMAID, x: 2, y: 2, w: 1, h: 2 },
5014
// Row 3
51-
{
52-
i: PortfolioKeyEnum.HUAT,
53-
x: 0,
54-
y: 4,
55-
w: 2,
56-
h: 1,
57-
},
58-
{
59-
i: PortfolioKeyEnum.PEBBLE_MINIMAL,
60-
x: 3,
61-
y: 4,
62-
w: 1,
63-
h: 1,
64-
},
15+
{ i: PortfolioKeyEnum.HUAT, x: 0, y: 4, w: 2, h: 1 },
16+
{ i: PortfolioKeyEnum.PEBBLE_MINIMAL, x: 3, y: 4, w: 1, h: 1 },
6517
],
6618
md: [
67-
{
68-
i: PortfolioKeyEnum.ME,
69-
x: 0,
70-
y: 0,
71-
w: 2,
72-
h: 2,
73-
},
74-
{
75-
i: PortfolioKeyEnum.RACE_COUNTDOWN,
76-
x: 2,
77-
y: 0,
78-
w: 1,
79-
h: 1,
80-
},
81-
{
82-
i: PortfolioKeyEnum.TASKADE,
83-
x: 3,
84-
y: 0,
85-
w: 1,
86-
h: 2,
87-
},
19+
{ i: PortfolioKeyEnum.ME, x: 0, y: 0, w: 2, h: 2 },
20+
{ i: PortfolioKeyEnum.RACE_COUNTDOWN, x: 2, y: 0, w: 1, h: 1 },
21+
{ i: PortfolioKeyEnum.TASKADE, x: 3, y: 0, w: 1, h: 2 },
8822
// Row 2
89-
{
90-
i: PortfolioKeyEnum.CONTACT,
91-
x: 0,
92-
y: 2,
93-
w: 1,
94-
h: 1,
95-
},
96-
{
97-
i: PortfolioKeyEnum.CV,
98-
x: 1,
99-
y: 2,
100-
w: 1,
101-
h: 1,
102-
},
103-
{
104-
i: PortfolioKeyEnum.CLASSMAID,
105-
x: 2,
106-
y: 2,
107-
w: 1,
108-
h: 2,
109-
},
23+
{ i: PortfolioKeyEnum.CONTACT, x: 0, y: 2, w: 1, h: 1 },
24+
{ i: PortfolioKeyEnum.CV, x: 1, y: 2, w: 1, h: 1 },
25+
{ i: PortfolioKeyEnum.CLASSMAID, x: 2, y: 2, w: 1, h: 2 },
11026
// Row 3
111-
{
112-
i: PortfolioKeyEnum.HUAT,
113-
x: 0,
114-
y: 4,
115-
w: 2,
116-
h: 1,
117-
},
118-
{
119-
i: PortfolioKeyEnum.PEBBLE_MINIMAL,
120-
x: 3,
121-
y: 4,
122-
w: 1,
123-
h: 1,
124-
},
27+
{ i: PortfolioKeyEnum.HUAT, x: 0, y: 4, w: 2, h: 1 },
28+
{ i: PortfolioKeyEnum.PEBBLE_MINIMAL, x: 3, y: 4, w: 1, h: 1 },
12529
],
12630
sm: [
12731
{ i: PortfolioKeyEnum.ME, x: 0, y: 0, w: 2, h: 2 },
128-
{ i: PortfolioKeyEnum.CONTACT, x: 0, y: 2, w: 2, h: 1 },
32+
{ i: PortfolioKeyEnum.CONTACT, x: 0, y: 2, w: 1, h: 1 },
33+
{ i: PortfolioKeyEnum.CV, x: 1, y: 2, w: 1, h: 1 },
12934
{ i: PortfolioKeyEnum.TASKADE, x: 0, y: 3, w: 1, h: 2 },
130-
{ i: PortfolioKeyEnum.CV, x: 1, y: 3, w: 1, h: 2 },
13135
{ i: PortfolioKeyEnum.RACE_COUNTDOWN, x: 1, y: 3, w: 1, h: 1 },
132-
{ i: PortfolioKeyEnum.CLASSMAID, x: 0, y: 4, w: 1, h: 2 },
133-
{ i: PortfolioKeyEnum.HUAT, x: 2, y: 4, w: 1, h: 2 },
36+
{ i: PortfolioKeyEnum.CLASSMAID, x: 1, y: 4, w: 1, h: 2 },
37+
{ i: PortfolioKeyEnum.HUAT, x: 0, y: 6, w: 2, h: 1 },
38+
{ i: PortfolioKeyEnum.PEBBLE_MINIMAL, x: 0, y: 5, w: 1, h: 1 },
39+
],
40+
};
41+
42+
const AboutLayout: ResponsiveLayouts<Breakpoint> = {
43+
lg: [
44+
{ i: PortfolioKeyEnum.ME, x: 0, y: 0, w: 2, h: 1 },
45+
{ i: PortfolioKeyEnum.CONTACT, x: 2, y: 0, w: 1, h: 1 },
46+
{ i: PortfolioKeyEnum.CV, x: 3, y: 0, w: 1, h: 1 },
47+
{ i: PortfolioKeyEnum.TASKADE, x: 0, y: 1, w: 1, h: 2 },
48+
{ i: PortfolioKeyEnum.CLASSMAID, x: 1, y: 1, w: 1, h: 2 },
49+
{ i: PortfolioKeyEnum.HUAT, x: 2, y: 1, w: 2, h: 1 },
50+
{ i: PortfolioKeyEnum.RACE_COUNTDOWN, x: 2, y: 2, w: 1, h: 1 },
51+
{ i: PortfolioKeyEnum.PEBBLE_MINIMAL, x: 3, y: 2, w: 1, h: 1 },
52+
],
53+
md: [
54+
{ i: PortfolioKeyEnum.ME, x: 0, y: 0, w: 2, h: 2 },
55+
{ i: PortfolioKeyEnum.CONTACT, x: 2, y: 0, w: 1, h: 1 },
56+
{ i: PortfolioKeyEnum.CV, x: 3, y: 0, w: 1, h: 1 },
57+
{ i: PortfolioKeyEnum.TASKADE, x: 0, y: 1, w: 1, h: 2 },
58+
{ i: PortfolioKeyEnum.CLASSMAID, x: 1, y: 1, w: 1, h: 2 },
59+
{ i: PortfolioKeyEnum.HUAT, x: 2, y: 1, w: 2, h: 1 },
60+
{ i: PortfolioKeyEnum.RACE_COUNTDOWN, x: 2, y: 2, w: 1, h: 1 },
61+
{ i: PortfolioKeyEnum.PEBBLE_MINIMAL, x: 3, y: 2, w: 1, h: 1 },
62+
],
63+
sm: [
64+
{ i: PortfolioKeyEnum.ME, x: 0, y: 0, w: 2, h: 2 },
65+
{ i: PortfolioKeyEnum.CONTACT, x: 0, y: 2, w: 1, h: 1 },
66+
{ i: PortfolioKeyEnum.CV, x: 1, y: 2, w: 1, h: 1 },
67+
{ i: PortfolioKeyEnum.TASKADE, x: 0, y: 3, w: 1, h: 2 },
68+
{ i: PortfolioKeyEnum.RACE_COUNTDOWN, x: 2, y: 3, w: 1, h: 1 },
69+
{ i: PortfolioKeyEnum.CLASSMAID, x: 1, y: 4, w: 1, h: 2 },
13470
{ i: PortfolioKeyEnum.PEBBLE_MINIMAL, x: 0, y: 5, w: 1, h: 1 },
71+
{ i: PortfolioKeyEnum.HUAT, x: 0, y: 7, w: 2, h: 1 },
72+
],
73+
};
74+
75+
const ProjectsLayout: ResponsiveLayouts<Breakpoint> = {
76+
lg: [
77+
{ i: PortfolioKeyEnum.HUAT, x: 0, y: 0, w: 2, h: 1 },
78+
{ i: PortfolioKeyEnum.TASKADE, x: 2, y: 0, w: 1, h: 2 },
79+
{ i: PortfolioKeyEnum.CLASSMAID, x: 3, y: 0, w: 1, h: 2 },
80+
{ i: PortfolioKeyEnum.PEBBLE_MINIMAL, x: 0, y: 1, w: 1, h: 1 },
81+
{ i: PortfolioKeyEnum.CONTACT, x: 1, y: 1, w: 1, h: 1 },
82+
{ i: PortfolioKeyEnum.ME, x: 0, y: 2, w: 2, h: 1 },
83+
{ i: PortfolioKeyEnum.CV, x: 2, y: 2, w: 1, h: 1 },
84+
{ i: PortfolioKeyEnum.RACE_COUNTDOWN, x: 3, y: 2, w: 1, h: 1 },
85+
],
86+
md: [
87+
{ i: PortfolioKeyEnum.HUAT, x: 0, y: 0, w: 2, h: 1 },
88+
{ i: PortfolioKeyEnum.TASKADE, x: 2, y: 0, w: 1, h: 2 },
89+
{ i: PortfolioKeyEnum.CLASSMAID, x: 3, y: 0, w: 1, h: 2 },
90+
{ i: PortfolioKeyEnum.PEBBLE_MINIMAL, x: 0, y: 1, w: 2, h: 1 },
91+
{ i: PortfolioKeyEnum.ME, x: 0, y: 2, w: 2, h: 2 },
92+
{ i: PortfolioKeyEnum.CONTACT, x: 2, y: 2, w: 1, h: 1 },
93+
{ i: PortfolioKeyEnum.CV, x: 3, y: 2, w: 1, h: 1 },
94+
{ i: PortfolioKeyEnum.RACE_COUNTDOWN, x: 2, y: 3, w: 1, h: 1 },
95+
],
96+
sm: [
97+
{ i: PortfolioKeyEnum.TASKADE, x: 0, y: 0, w: 1, h: 2 },
98+
{ i: PortfolioKeyEnum.CLASSMAID, x: 1, y: 0, w: 1, h: 2 },
99+
{ i: PortfolioKeyEnum.HUAT, x: 0, y: 2, w: 2, h: 1 },
100+
{ i: PortfolioKeyEnum.PEBBLE_MINIMAL, x: 0, y: 3, w: 1, h: 1 },
101+
{ i: PortfolioKeyEnum.RACE_COUNTDOWN, x: 1, y: 3, w: 1, h: 1 },
102+
{ i: PortfolioKeyEnum.ME, x: 0, y: 4, w: 2, h: 2 },
103+
{ i: PortfolioKeyEnum.CONTACT, x: 0, y: 6, w: 1, h: 1 },
104+
{ i: PortfolioKeyEnum.CV, x: 1, y: 6, w: 1, h: 1 },
105+
],
106+
};
107+
108+
const HobbiesLayout: ResponsiveLayouts<Breakpoint> = {
109+
lg: [
110+
{ i: PortfolioKeyEnum.RACE_COUNTDOWN, x: 0, y: 0, w: 1, h: 1 },
111+
{ i: PortfolioKeyEnum.ME, x: 1, y: 0, w: 2, h: 1 },
112+
{ i: PortfolioKeyEnum.CONTACT, x: 3, y: 0, w: 1, h: 1 },
113+
{ i: PortfolioKeyEnum.TASKADE, x: 0, y: 1, w: 1, h: 2 },
114+
{ i: PortfolioKeyEnum.CLASSMAID, x: 1, y: 1, w: 1, h: 2 },
115+
{ i: PortfolioKeyEnum.HUAT, x: 2, y: 1, w: 2, h: 1 },
116+
{ i: PortfolioKeyEnum.CV, x: 2, y: 2, w: 1, h: 1 },
117+
{ i: PortfolioKeyEnum.PEBBLE_MINIMAL, x: 3, y: 2, w: 1, h: 1 },
118+
],
119+
md: [
120+
{ i: PortfolioKeyEnum.RACE_COUNTDOWN, x: 0, y: 0, w: 1, h: 1 },
121+
{ i: PortfolioKeyEnum.ME, x: 1, y: 0, w: 2, h: 2 },
122+
{ i: PortfolioKeyEnum.CONTACT, x: 3, y: 0, w: 1, h: 1 },
123+
{ i: PortfolioKeyEnum.CV, x: 3, y: 1, w: 1, h: 1 },
124+
{ i: PortfolioKeyEnum.TASKADE, x: 0, y: 1, w: 1, h: 2 },
125+
{ i: PortfolioKeyEnum.CLASSMAID, x: 1, y: 1, w: 1, h: 2 },
126+
{ i: PortfolioKeyEnum.HUAT, x: 2, y: 1, w: 2, h: 1 },
127+
{ i: PortfolioKeyEnum.PEBBLE_MINIMAL, x: 3, y: 2, w: 2, h: 1 },
135128
],
129+
sm: [
130+
{ i: PortfolioKeyEnum.RACE_COUNTDOWN, x: 0, y: 0, w: 1, h: 1 },
131+
{ i: PortfolioKeyEnum.CONTACT, x: 1, y: 0, w: 1, h: 1 },
132+
{ i: PortfolioKeyEnum.ME, x: 0, y: 1, w: 2, h: 2 },
133+
{ i: PortfolioKeyEnum.CV, x: 0, y: 3, w: 1, h: 1 },
134+
{ i: PortfolioKeyEnum.TASKADE, x: 0, y: 4, w: 1, h: 2 },
135+
{ i: PortfolioKeyEnum.CLASSMAID, x: 1, y: 4, w: 1, h: 2 },
136+
{ i: PortfolioKeyEnum.PEBBLE_MINIMAL, x: 1, y: 5, w: 1, h: 1 },
137+
{ i: PortfolioKeyEnum.HUAT, x: 0, y: 6, w: 2, h: 1 },
138+
],
139+
};
140+
141+
export const DashboardLayouts: Record<
142+
FilterType,
143+
ResponsiveLayouts<Breakpoint>
144+
> = {
145+
[FilterType.ALL]: DashboardLayout,
146+
[FilterType.ABOUT]: AboutLayout,
147+
[FilterType.PROJECTS]: ProjectsLayout,
148+
[FilterType.HOBBIES]: HobbiesLayout,
136149
};
137150

138151
export const DashboardBreakpoints: Record<Breakpoint, number> = {

0 commit comments

Comments
 (0)