Skip to content

Commit 761189b

Browse files
author
贺子良
committed
🎉 init(init my resume):
1 parent 5481bcf commit 761189b

19 files changed

+634
-82
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@
88
"@testing-library/user-event": "^13.5.0",
99
"react": "^17.0.2",
1010
"react-dom": "^17.0.2",
11+
"react-router": "^6.2.1",
12+
"react-router-dom": "^6.2.1",
1113
"react-scripts": "5.0.0",
14+
"styled-components": "^5.3.3",
1215
"web-vitals": "^2.1.4"
1316
},
1417
"scripts": {

‎src/App.css

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,43 @@
11
.App {
2-
text-align: center;
2+
text-align: center;
33
}
44

5+
div,
6+
span,
7+
a {
8+
/*outline: 1px solid #00cec9;*/
9+
}
510
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
11+
height: 40vmin;
12+
pointer-events: none;
813
}
914

1015
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
16+
.App-logo {
17+
animation: App-logo-spin infinite 20s linear;
18+
}
1419
}
1520

1621
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
19-
display: flex;
20-
flex-direction: column;
21-
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
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;
2530
}
2631

2732
.App-link {
28-
color: #61dafb;
33+
color: #61dafb;
2934
}
3035

3136
@keyframes App-logo-spin {
32-
from {
33-
transform: rotate(0deg);
34-
}
35-
to {
36-
transform: rotate(360deg);
37-
}
37+
from {
38+
transform: rotate(0deg);
39+
}
40+
to {
41+
transform: rotate(360deg);
42+
}
3843
}

‎src/App.js

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
1-
import logo from './logo.svg';
2-
import './App.css';
1+
import { Routes, Route } from "react-router-dom";
2+
import "./App.css";
3+
4+
import Layout from "./layout";
5+
import Home from "./pages/home";
6+
import Projects from "./pages/projects";
7+
import Work from "./pages/work";
8+
import NoMatch from "./pages/nomatch";
39

410
function App() {
5-
return (
6-
<div className="App">
7-
<header className="App-header">
8-
<img src={logo} className="App-logo" alt="logo" />
9-
<p>
10-
Edit <code>src/App.js</code> and save to reload.
11-
</p>
12-
<a
13-
className="App-link"
14-
href="https://reactjs.org"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
Learn React
19-
</a>
20-
</header>
21-
</div>
22-
);
11+
return (
12+
<Routes>
13+
<Route path="/" element={<Layout />}>
14+
<Route index element={<Home />} />
15+
<Route path="projects" element={<Projects />} />
16+
<Route path="work" element={<Work />} />
17+
18+
{/* Using path="*"" means "match anything", so this route
19+
acts like a catch-all for URLs that we don't have explicit
20+
routes for. */}
21+
<Route path="*" element={<NoMatch />} />
22+
</Route>
23+
</Routes>
24+
);
2325
}
2426

2527
export default App;

‎src/App.test.js

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

‎src/index.js

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
import './index.css';
4-
import App from './App';
5-
import reportWebVitals from './reportWebVitals';
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import { BrowserRouter } from "react-router-dom";
4+
5+
import "./index.css";
6+
import App from "./App";
67

78
ReactDOM.render(
8-
<React.StrictMode>
9-
<App />
10-
</React.StrictMode>,
11-
document.getElementById('root')
9+
<React.StrictMode>
10+
<BrowserRouter>
11+
<App />
12+
</BrowserRouter>
13+
</React.StrictMode>,
14+
document.getElementById("root")
1215
);
13-
14-
// If you want to start measuring performance in your app, pass a function
15-
// to log results (for example: reportWebVitals(console.log))
16-
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17-
reportWebVitals();

‎src/layout/index.js

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
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+
10+
export default function Layout() {
11+
const navigate = useNavigate();
12+
13+
const location = useLocation();
14+
15+
const { pathname } = location;
16+
17+
const [state, setState] = useState({ isActive: false });
18+
19+
const [logoTransform, setLogoTransform] = useState(false);
20+
21+
const onMouseEnterAndLeave = () => setLogoTransform(!logoTransform);
22+
23+
useEffect(() => {
24+
setState({
25+
...state,
26+
isProjectsActive: pathname === "/projects",
27+
isWorkActive: pathname === "/work",
28+
});
29+
}, [pathname]);
30+
31+
return (
32+
<LayoutWrapper>
33+
<div className="layout">
34+
<div className=" container header">
35+
<header className="header-inner">
36+
<h1
37+
className="header-logo"
38+
onClick={() => navigate("/")}
39+
>
40+
<a
41+
className={[
42+
"ziliang",
43+
logoTransform ? "active" : null,
44+
].join(" ")}
45+
onMouseEnter={onMouseEnterAndLeave}
46+
onMouseLeave={onMouseEnterAndLeave}
47+
>
48+
ZILIANG
49+
</a>
50+
51+
<a
52+
className={[
53+
"he",
54+
!logoTransform ? "active" : null,
55+
].join(" ")}
56+
onMouseEnter={onMouseEnterAndLeave}
57+
onMouseLeave={onMouseEnterAndLeave}
58+
>
59+
HE
60+
</a>
61+
</h1>
62+
<div className="header-nav">
63+
<a
64+
className={[
65+
"header-nav__link",
66+
state.isProjectsActive ? "active" : null,
67+
].join(" ")}
68+
onClick={() => navigate("/projects")}
69+
>
70+
projects
71+
</a>
72+
<a
73+
className={[
74+
"header-nav__link",
75+
state.isWorkActive ? "active" : null,
76+
].join(" ")}
77+
onClick={() => navigate("/work")}
78+
>
79+
work
80+
</a>
81+
<Link to={"/projects"}></Link>
82+
</div>
83+
</header>
84+
</div>
85+
<div className=" container main">
86+
<Outlet />
87+
</div>
88+
<div className=" container footer">
89+
<div className="footer-left">
90+
<div className="footer__copyright">
91+
{"@coderzi"} {"2022"}
92+
</div>
93+
</div>
94+
<div className="footer-nav">
95+
<a className="footer-nav__link">contact</a>
96+
<a className="footer-nav__link">github</a>
97+
<a className="footer-nav__link">dribbble</a>
98+
<a className="footer-nav__link">stack overflow</a>
99+
</div>
100+
</div>
101+
</div>
102+
</LayoutWrapper>
103+
);
104+
}

‎src/layout/styles.js

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
/*
2+
* @Date: 2022-02-25
3+
* @Description:
4+
*/
5+
6+
import styled from "styled-components";
7+
8+
export const LayoutWrapper = styled.div`
9+
.layout {
10+
display: flex;
11+
flex-direction: column;
12+
min-height: 100vh;
13+
font-family: Andale Mono, monospace;
14+
color: #4a4a4a;
15+
16+
.container {
17+
width: 100%;
18+
max-width: 720px;
19+
margin: 0 auto;
20+
padding: 0 24px;
21+
box-sizing: border-box;
22+
}
23+
24+
.header {
25+
margin-top: 40px;
26+
-webkit-filter: none !important;
27+
filter: none !important;
28+
.header-inner {
29+
position: relative;
30+
display: flex;
31+
align-items: flex-end;
32+
margin-bottom: 50px;
33+
background: #fff;
34+
}
35+
.header-logo {
36+
flex: 1 1 auto;
37+
margin: 0;
38+
39+
.ziliang,
40+
.he {
41+
transition: all 0.25s;
42+
font-size: 25px;
43+
font-family: Archivo Black;
44+
text-transform: uppercase;
45+
text-decoration: none;
46+
cursor: pointer;
47+
48+
&.active {
49+
color: #4a4a4a;
50+
}
51+
&:not(.active) {
52+
color: #f5a623;
53+
}
54+
}
55+
}
56+
.header-nav {
57+
flex: 0 0 auto;
58+
font-family: Andale Mono;
59+
transition: all 0.25s;
60+
61+
.header-nav__link {
62+
margin-left: 24px;
63+
filter: blur(1.5px);
64+
color: inherit;
65+
text-decoration: none;
66+
cursor: pointer;
67+
68+
transition: all 0.25s;
69+
}
70+
71+
.header-nav__link.active,
72+
.header-nav__link:hover {
73+
filter: none;
74+
}
75+
}
76+
}
77+
78+
.footer {
79+
display: flex;
80+
margin-top: 100px;
81+
padding-top: 20px;
82+
padding-bottom: 20px;
83+
font-size: 12.8px;
84+
font-family: Andale Mono;
85+
color: #9b9b9b;
86+
87+
.footer-left {
88+
flex: 1 1 auto;
89+
}
90+
91+
.footer-nav {
92+
flex: 0 0 auto;
93+
.footer-nav__link {
94+
position: relative;
95+
margin: 0 12px;
96+
padding-right: 6px;
97+
cursor: pointer;
98+
color: inherit;
99+
text-decoration: none;
100+
transition: all 0.25s;
101+
}
102+
.footer-nav__link:hover {
103+
color: #4a4a4a !important;
104+
}
105+
}
106+
}
107+
}
108+
`;

‎src/logo.svg

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

‎src/pages/home/index.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/*
2+
* @Date: 2022-02-25
3+
* @Description:
4+
*/
5+
import { HomeWrapper } from "./styles";
6+
7+
export default function Home() {
8+
return (
9+
<HomeWrapper>
10+
<h1>about me</h1>
11+
</HomeWrapper>
12+
);
13+
}

0 commit comments

Comments
 (0)