Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit761189b

Browse files
author
贺子良
committed
🎉 init(init my resume):
1 parent5481bcf commit761189b

File tree

19 files changed

+634
-82
lines changed

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 aboutcustomizing 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 infinite20s linear;
13-
}
16+
.App-logo {
17+
animation: App-logo-spin infinite20s 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-
importlogofrom'./logo.svg';
2-
import'./App.css';
1+
import{Routes,Route}from"react-router-dom";
2+
import"./App.css";
3+
4+
importLayoutfrom"./layout";
5+
importHomefrom"./pages/home";
6+
importProjectsfrom"./pages/projects";
7+
importWorkfrom"./pages/work";
8+
importNoMatchfrom"./pages/nomatch";
39

410
functionApp(){
5-
return(
6-
<divclassName="App">
7-
<headerclassName="App-header">
8-
<imgsrc={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+
<Routepath="/"element={<Layout/>}>
14+
<Routeindexelement={<Home/>}/>
15+
<Routepath="projects"element={<Projects/>}/>
16+
<Routepath="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+
<Routepath="*"element={<NoMatch/>}/>
22+
</Route>
23+
</Routes>
24+
);
2325
}
2426

2527
exportdefaultApp;

‎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-
importReactfrom'react';
2-
importReactDOMfrom'react-dom';
3-
import'./index.css';
4-
importAppfrom'./App';
5-
importreportWebVitalsfrom'./reportWebVitals';
1+
importReactfrom"react";
2+
importReactDOMfrom"react-dom";
3+
import{BrowserRouter}from"react-router-dom";
4+
5+
import"./index.css";
6+
importAppfrom"./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+
exportdefaultfunctionLayout(){
11+
constnavigate=useNavigate();
12+
13+
constlocation=useLocation();
14+
15+
const{ pathname}=location;
16+
17+
const[state,setState]=useState({isActive:false});
18+
19+
const[logoTransform,setLogoTransform]=useState(false);
20+
21+
constonMouseEnterAndLeave=()=>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+
<divclassName="layout">
34+
<divclassName=" container header">
35+
<headerclassName="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+
<divclassName="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+
<Linkto={"/projects"}></Link>
82+
</div>
83+
</header>
84+
</div>
85+
<divclassName=" container main">
86+
<Outlet/>
87+
</div>
88+
<divclassName=" container footer">
89+
<divclassName="footer-left">
90+
<divclassName="footer__copyright">
91+
{"@coderzi"}{"2022"}
92+
</div>
93+
</div>
94+
<divclassName="footer-nav">
95+
<aclassName="footer-nav__link">contact</a>
96+
<aclassName="footer-nav__link">github</a>
97+
<aclassName="footer-nav__link">dribbble</a>
98+
<aclassName="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+
importstyledfrom"styled-components";
7+
8+
exportconstLayoutWrapper=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+
exportdefaultfunctionHome(){
8+
return(
9+
<HomeWrapper>
10+
<h1>about me</h1>
11+
</HomeWrapper>
12+
);
13+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp