Skip to content

Commit ddb2b1a

Browse files
author
贺子良
committed
💫 workflow(/projects): basical layout
1 parent 9f9a293 commit ddb2b1a

File tree

19 files changed

+458
-163
lines changed

19 files changed

+458
-163
lines changed

‎src/App.css

Lines changed: 96 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,104 @@
1-
.App {
2-
text-align: center;
1+
@font-face {
2+
font-family: "Andale Mono";
3+
src: url("./assets/fonts/AndaleMono.otf");
4+
}
5+
@font-face {
6+
font-family: "Archivo Black";
7+
src: url("./assets/fonts/ArchivoBlack.woff2");
38
}
49

510
div,
611
span,
712
a {
8-
/*outline: 1px solid #00cec9;*/
9-
}
10-
.App-logo {
11-
height: 40vmin;
12-
pointer-events: none;
13-
}
14-
15-
@media (prefers-reduced-motion: no-preference) {
16-
.App-logo {
17-
animation: App-logo-spin infinite 20s linear;
18-
}
19-
}
20-
21-
.App-header {
22-
background-color: #282c34;
23-
min-height: 100vh;
24-
display: flex;
25-
flex-direction: column;
26-
align-items: center;
27-
justify-content: center;
28-
font-size: calc(10px + 2vmin);
29-
color: white;
30-
}
31-
32-
.App-link {
33-
color: #61dafb;
13+
outline: 1px solid #00cec9;
3414
}
3515

36-
@keyframes App-logo-spin {
37-
from {
38-
transform: rotate(0deg);
39-
}
40-
to {
41-
transform: rotate(360deg);
42-
}
16+
a,
17+
abbr,
18+
acronym,
19+
address,
20+
applet,
21+
article,
22+
aside,
23+
audio,
24+
b,
25+
big,
26+
blockquote,
27+
body,
28+
canvas,
29+
caption,
30+
center,
31+
cite,
32+
code,
33+
dd,
34+
del,
35+
details,
36+
dfn,
37+
div,
38+
dl,
39+
dt,
40+
em,
41+
embed,
42+
fieldset,
43+
figcaption,
44+
figure,
45+
footer,
46+
form,
47+
h1,
48+
h2,
49+
h3,
50+
h4,
51+
h5,
52+
h6,
53+
header,
54+
hgroup,
55+
html,
56+
i,
57+
iframe,
58+
img,
59+
ins,
60+
kbd,
61+
label,
62+
legend,
63+
li,
64+
main,
65+
mark,
66+
menu,
67+
nav,
68+
object,
69+
ol,
70+
output,
71+
p,
72+
pre,
73+
q,
74+
ruby,
75+
s,
76+
samp,
77+
section,
78+
small,
79+
span,
80+
strike,
81+
strong,
82+
sub,
83+
summary,
84+
sup,
85+
table,
86+
tbody,
87+
td,
88+
tfoot,
89+
th,
90+
thead,
91+
time,
92+
tr,
93+
tt,
94+
u,
95+
ul,
96+
var,
97+
video {
98+
margin: 0;
99+
padding: 0;
100+
border: 0;
101+
font-size: 100%;
102+
font: inherit;
103+
vertical-align: baseline;
43104
}

‎src/App.js renamed to ‎src/App.jsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import "./App.css";
44
import Layout from "./layout";
55
import Home from "./pages/home";
66
import Projects from "./pages/projects";
7+
import ProjectsList from "./pages/projects/list";
8+
import ProjectsDetail from "./pages/projects/detail";
79
import Work from "./pages/work";
810
import NoMatch from "./pages/nomatch";
911

@@ -12,7 +14,10 @@ function App() {
1214
<Routes>
1315
<Route path="/" element={<Layout />}>
1416
<Route index element={<Home />} />
15-
<Route path="projects" element={<Projects />} />
17+
<Route path="projects" element={<Projects />}>
18+
<Route index element={<ProjectsList />} />
19+
<Route path=":pid" element={<ProjectsDetail />} />
20+
</Route>
1621
<Route path="work" element={<Work />} />
1722

1823
{/* Using path="*"" means "match anything", so this route

‎src/assets/fonts/AndaleMono.otf

101 KB
Binary file not shown.

‎src/assets/fonts/ArchivoBlack.woff2

18.2 KB
Binary file not shown.

‎src/assets/images/p-1.jpg

27.1 KB
Loading

‎src/components/CustomeLink.jsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/*
2+
* @Date: 2022-02-26
3+
* @Description:
4+
*/
5+
import { Link, useMatch, useResolvedPath } from "react-router-dom";
6+
7+
export default function CustomLink({ children, to, ...props }) {
8+
let resolved = useResolvedPath(to);
9+
let match = useMatch({ path: resolved.pathname, end: false });
10+
11+
return (
12+
<Link
13+
style={{ filter: match ? "none" : "blur(1.5px)", color: "inherit" }}
14+
to={to}
15+
{...props}
16+
>
17+
{children}
18+
</Link>
19+
);
20+
}

‎src/layout/index.js

Lines changed: 0 additions & 104 deletions
This file was deleted.

‎src/layout/index.jsx

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/*
2+
* @Date: 2022-02-25
3+
* @Description:
4+
*/
5+
import { LayoutWrapper } from "./styles";
6+
import { useNavigate, Outlet, useLocation } from "react-router";
7+
import { Link } from "react-router-dom";
8+
import { useEffect, useState } from "react";
9+
import CustomLink from "../components/CustomeLink";
10+
11+
export default function Layout() {
12+
const navigate = useNavigate();
13+
14+
const [logoTransform, setLogoTransform] = useState(false);
15+
16+
const onMouseEnterAndLeave = () => setLogoTransform(!logoTransform);
17+
18+
return (
19+
<LayoutWrapper>
20+
<div className="layout">
21+
<div className=" container header">
22+
<header className="header-inner">
23+
<h1
24+
className="header-logo"
25+
onClick={() => navigate("/")}
26+
>
27+
<a className="header-logo__link">
28+
<span
29+
className={[
30+
"ziliang",
31+
logoTransform ? "active" : null,
32+
].join(" ")}
33+
onMouseEnter={onMouseEnterAndLeave}
34+
onMouseLeave={onMouseEnterAndLeave}
35+
>
36+
ZILIANG
37+
</span>
38+
39+
<span
40+
className={[
41+
"he",
42+
!logoTransform ? "active" : null,
43+
].join(" ")}
44+
onMouseEnter={onMouseEnterAndLeave}
45+
onMouseLeave={onMouseEnterAndLeave}
46+
>
47+
HE
48+
</span>
49+
</a>
50+
</h1>
51+
<div className="header-nav">
52+
<CustomLink to="/projects">projects</CustomLink>
53+
<CustomLink to="/work">work</CustomLink>
54+
</div>
55+
</header>
56+
</div>
57+
<div className=" container main">
58+
<Outlet />
59+
</div>
60+
<div className=" container footer">
61+
<div className="footer-left">
62+
<div className="footer__copyright">
63+
{"@coderzi"} {"2022"}
64+
</div>
65+
</div>
66+
<div className="footer-nav">
67+
<a className="footer-nav__link">contact</a>
68+
<a className="footer-nav__link">github</a>
69+
<a className="footer-nav__link">dribbble</a>
70+
<a className="footer-nav__link">stack overflow</a>
71+
</div>
72+
</div>
73+
</div>
74+
</LayoutWrapper>
75+
);
76+
}

0 commit comments

Comments
 (0)