이세진 / dev-profile

Go to a project
Toggle navigation Toggle navigation pinning
이세진
78125a9f 2 parents aa98d150 6ada939f

Merge branch 'cher' into 'master' 

updated readMe, CSS(editProfile)



See merge request !12
Inline Side-by-side
Showing 12 changed files with 208 additions and 33 deletions
...@@ -7,9 +7,9 @@ KHU-Hub repo: [khuhub.khu.ac.kr/2018102216/dev-profile](https://khuhub.khu.ac.kr ...@@ -7,9 +7,9 @@ KHU-Hub repo: [khuhub.khu.ac.kr/2018102216/dev-profile](https://khuhub.khu.ac.kr
7 7
8 ## Main Features 8 ## Main Features
9 9
10 -- [ ] your basic profile 10 +- [x] your basic profile
11 - [x] random quotes **_for developers_** to motivate you :sparkles: 11 - [x] random quotes **_for developers_** to motivate you :sparkles:
12 -- [ ] the amount of commits you've done on [GitHub](https://github.com/) at a glance 12 +- [x] the amount of commits you've done on [GitHub](https://github.com/) at a glance
13 - [ ] your most-contributed project on GitHub 13 - [ ] your most-contributed project on GitHub
14 - [x] today's trending repositories on GitHub 14 - [x] today's trending repositories on GitHub
15 <br> 15 <br>
...@@ -36,15 +36,23 @@ To run server, ...@@ -36,15 +36,23 @@ To run server,
36 npm run dev:server 36 npm run dev:server
37 ``` 37 ```
38 38
39 +```bash
40 +npm run dev:assets
41 +```
42 +
39 <br> 43 <br>
40 44
41 ### API reference 45 ### API reference
42 46
43 [Programming Quotes API](quotes.stormconsultancy.co.uk/random.json) 47 [Programming Quotes API](quotes.stormconsultancy.co.uk/random.json)
44 -<br>
45 48
46 [Trending-GitHub API](https://docs.trending-github.com/) 49 [Trending-GitHub API](https://docs.trending-github.com/)
47 50
51 +[GitHub Contributuions API](https://api.github.com/graphql/)
52 +
53 +<br>
54 +\\<!--[GitHub Repositories API](https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2")-->
55 +
48 ### License 56 ### License
49 57
50 [MIT](https://choosealicense.com/licenses/mit/) 58 [MIT](https://choosealicense.com/licenses/mit/)
......
1 +.form-container {
2 + margin: 20px 0px;
3 + display: flex;
4 + flex-direction: column;
5 + padding: 30px;
6 + img {
7 + width: 100px;
8 + height: 100px;
9 + object-fit: cover;
10 + }
11 + .fileUpload {
12 + display: flex;
13 + flex-direction: column;
14 + }
15 + input {
16 + padding: 10px;
17 + display: block;
18 + border: none;
19 + border-bottom: 1px solid #ccc;
20 + width: 40%;
21 + opacity: 0.6;
22 + margin-top: 19px;
23 + font-family: "Roboto", sans-serif;
24 + font-size: 18px;
25 + }
26 + label {
27 + font-family: "Raleway", sans-serif;
28 + font-size: 13px;
29 + font-weight: bold;
30 + padding: 10px;
31 + }
32 + textarea {
33 + font-family: "Roboto", sans-serif;
34 + font-size: 15px;
35 + width: 40%;
36 + opacity: 0.7;
37 + display: block;
38 + margin-top: 20px;
39 + padding: 9px;
40 + }
41 + .box {
42 + input {
43 + background-color: rgb(209, 219, 231);
44 + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11),
45 + 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11),
46 + 0 8px 16px rgba(0, 0, 0, 0.11);
47 + font-family: "Raleway", sans-serif;
48 + opacity: 1;
49 + font-size: 20px;
50 + }
51 + }
52 +}
...@@ -10,13 +10,15 @@ ...@@ -10,13 +10,15 @@
10 justify-content: center; 10 justify-content: center;
11 align-items: center; 11 align-items: center;
12 h2 { 12 h2 {
13 - font-size: 30px; 13 + font-size: 20px;
14 - font-weight: 600; 14 + font-family: "Roboto", sans-serif;
15 + font-weight: 400;
15 text-transform: uppercase; 16 text-transform: uppercase;
16 margin-bottom: 30px; 17 margin-bottom: 30px;
17 } 18 }
18 h1 { 19 h1 {
19 font-size: 50px; 20 font-size: 50px;
21 + font-family: "Roboto", sans-serif;
20 font-weight: 800; 22 font-weight: 800;
21 text-transform: uppercase; 23 text-transform: uppercase;
22 } 24 }
...@@ -32,18 +34,26 @@ ...@@ -32,18 +34,26 @@
32 box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 34 box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
33 0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025); 35 0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
34 h2 { 36 h2 {
35 - font-size: 30px; 37 + font-size: 40px;
36 - font-family: "Pattaya", sans-serif; 38 + font-family: "Vollkorn", serif;
37 margin: 10px 0px; 39 margin: 10px 0px;
38 } 40 }
39 h3 { 41 h3 {
40 font-size: 25px; 42 font-size: 25px;
41 opacity: 0.5; 43 opacity: 0.5;
42 - font-family: "Pattaya", sans-serif; 44 + font-family: "Vollkorn", serif;
45 + }
43 } 46 }
47 + .home-search {
48 + display: flex;
49 + padding: 40px;
50 + justify-content: center;
51 + width: 100%;
44 } 52 }
53 +
45 .home-link { 54 .home-link {
46 margin-top: 50px; 55 margin-top: 50px;
56 + font-family: "Roboto", sans-serif;
47 font-size: 30px; 57 font-size: 30px;
48 font-weight: 700; 58 font-weight: 700;
49 display: flex; 59 display: flex;
...@@ -59,6 +69,7 @@ ...@@ -59,6 +69,7 @@
59 .gotoTrend { 69 .gotoTrend {
60 margin-top: 50px; 70 margin-top: 50px;
61 display: flex; 71 display: flex;
72 + width: 120%;
62 text-align: center; 73 text-align: center;
63 flex-direction: column; 74 flex-direction: column;
64 justify-content: center; 75 justify-content: center;
......
1 +// i.fas.fa-location-arrow {
2 +// display: flex;
3 +// justify-content: center;
4 +// align-items: center;
5 +// width: 30px;
6 +// height: auto;
7 +// object-fit: cover;
8 +// }
9 +
10 +h3 {
11 + display: flex;
12 + justify-content: center;
13 + align-items: center;
14 + margin-top: 50px;
15 + font-weight: 700;
16 + font-family: "Roboto", sans-serif;
17 + font-size: 30px;
18 + opacity: 0.8;
19 +}
20 +
21 +a {
22 + .login-github {
23 + display: flex;
24 + justify-content: center;
25 + border-radius: 25px;
26 + align-items: center;
27 + margin-top: 30px;
28 + height: 80px;
29 + background-color: rgb(93, 32, 167);
30 + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11),
31 + 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11),
32 + 0 8px 16px rgba(0, 0, 0, 0.11);
33 + font-family: "Raleway", sans-serif;
34 + color: white;
35 + font-size: 50px;
36 + font-weight: 500;
37 + font-family: "Roboto", sans-serif;
38 + font-size: 25px;
39 + }
40 +}
1 +.user-quote {
2 + margin-top: 20px;
3 + h2 {
4 + font-size: 30px;
5 + font-family: "Vollkorn", serif;
6 + margin: 15px 0px;
7 + }
8 + h3 {
9 + display: flex;
10 + margin-right: 100px;
11 + flex-direction: row-reverse;
12 + font-size: 20px;
13 + opacity: 0.5;
14 + font-family: "Vollkorn", serif;
15 + }
16 +}
17 +label {
18 + font-family: "Raleway", sans-serif;
19 + font-size: 13px;
20 + font-weight: bold;
21 + padding: 10px;
22 +}
23 +.user-profile {
24 + .user-profile__column {
25 + img {
26 + width: 100px;
27 + height: 100px;
28 + object-fit: cover;
29 + }
30 + .user-profile__link {
31 + display: flex;
32 + font-family: "Raleway", sans-serif;
33 + flex-wrap: wrap;
34 + font-weight: bold;
35 + width: 5px;
36 + color: rgb(92, 92, 221);
37 + }
38 + }
39 +}
1 // Config 1 // Config
2 -@import url("https://fonts.googleapis.com/css2?family=Pattaya&display=swap"); 2 +@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@500&family=Roboto+Condensed:ital,wght@0,400;0,700;1,300&family=Roboto:wght@100;900&family=Vollkorn:ital@1&display=swap");
3 @import "./config/_variables.scss"; 3 @import "./config/_variables.scss";
4 @import "./config/_reset.scss"; 4 @import "./config/_reset.scss";
5 5
...@@ -8,6 +8,9 @@ ...@@ -8,6 +8,9 @@
8 @import "./components/footer.scss"; 8 @import "./components/footer.scss";
9 // Screens 9 // Screens
10 @import "./screens/home.scss"; 10 @import "./screens/home.scss";
11 +@import "./screens/editProfile.scss";
12 +@import "./screens/userDetail.scss";
13 +@import "./screens/join.scss";
11 14
12 // Defaults 15 // Defaults
13 16
......
...@@ -5,20 +5,28 @@ block content ...@@ -5,20 +5,28 @@ block content
5 form(action="/users/edit-profile", method="POST", enctype="multipart/form-data") 5 form(action="/users/edit-profile", method="POST", enctype="multipart/form-data")
6 img(src=`/${loggedUser.avatarUrl}`) 6 img(src=`/${loggedUser.avatarUrl}`)
7 .fileUpload 7 .fileUpload
8 - label(for="photo") Photo
9 input(type="file", id="photo", name="photo", accept="image/*") 8 input(type="file", id="photo", name="photo", accept="image/*")
10 - label(for="name") Name 9 + label(for="photo") Photo
10 + .name
11 input(type="text", id="name",placeholder="Name", name="name", value=user.name) 11 input(type="text", id="name",placeholder="Name", name="name", value=user.name)
12 - label(for="email") Email 12 + label(for="name") Name
13 + .email
13 input(type="email", id="email", placeholder="Email", name="email", value=user.email) 14 input(type="email", id="email", placeholder="Email", name="email", value=user.email)
14 - label(for="school") School 15 + label(for="email") Email
16 + .school
15 input(type="text", id="school",placeholder="School", name="school", value=user.school) 17 input(type="text", id="school",placeholder="School", name="school", value=user.school)
16 - label(for="blogUrl") Blog Url 18 + label(for="school") School
19 + .blog
17 input(type="text", id="blogUrl", placeholder="Blog url", name="blogUrl", value=user.blogUrl) 20 input(type="text", id="blogUrl", placeholder="Blog url", name="blogUrl", value=user.blogUrl)
18 - label(for="tech") Enter your tech skills seperated by comma. ex)react,node 21 + label(for="blogUrl") Blog Url
22 + .tech
19 textarea(name="tech", id="tech", placeholder="Add Tech you can use")=user.tech 23 textarea(name="tech", id="tech", placeholder="Add Tech you can use")=user.tech
20 - label(for="career") Enter your careers seperated by comma. ex)A company, B competition 24 + label(for="tech") Enter your tech skills seperated by comma. ex)react,node
25 + .career
21 textarea(name="career", id="career", placeholder="Add your Career")=user.career 26 textarea(name="career", id="career", placeholder="Add your Career")=user.career
22 - label(for="introduction") Self introduction 27 + label(for="career") Enter your careers seperated by comma. ex)A company, B competition
28 + .intro
23 textarea(name="introduction", id="introduction", placeholder="Self introduction", maxlength=200)=user.introduction 29 textarea(name="introduction", id="introduction", placeholder="Self introduction", maxlength=200)=user.introduction
30 + label(for="introduction") Self introduction
31 + .box
24 input(type="submit", value="Update Profile") 32 input(type="submit", value="Update Profile")
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,7 +3,7 @@ extends layouts/main ...@@ -3,7 +3,7 @@ extends layouts/main
3 block content 3 block content
4 .home 4 .home
5 .home-title 5 .home-title
6 - h2 Develop your value 6 + h2 "Develop your value"
7 h1 Developer Profile 7 h1 Developer Profile
8 .home-quote 8 .home-quote
9 h2=quote 9 h2=quote
...@@ -19,7 +19,7 @@ block content ...@@ -19,7 +19,7 @@ block content
19 a(href=`/users/${loggedUser._id}`) My profile 19 a(href=`/users/${loggedUser._id}`) My profile
20 20
21 .gotoTrend#jsGotoTrend 21 .gotoTrend#jsGotoTrend
22 - h2 Today's Trending Repositories 22 + h2 Today's Trending Repositories:
23 .gotoTrend-repos#jsGotoTrendRepos 23 .gotoTrend-repos#jsGotoTrendRepos
24 span#jsIndicator Waiting.... 24 span#jsIndicator Waiting....
25 block scripts 25 block scripts
......
...@@ -2,7 +2,7 @@ extends layouts/main ...@@ -2,7 +2,7 @@ extends layouts/main
2 2
3 block content 3 block content
4 i.fas.fa-location-arrow 4 i.fas.fa-location-arrow
5 - h3 Start with GitHub! 5 + h3 Join Us!
6 a(href="/auth/github") 6 a(href="/auth/github")
7 .login-github 7 .login-github
8 i.fab.fa-github 8 i.fab.fa-github
......
...@@ -4,6 +4,7 @@ block content ...@@ -4,6 +4,7 @@ block content
4 .user-quote 4 .user-quote
5 h2=quote 5 h2=quote
6 h3=author 6 h3=author
7 +
7 hr 8 hr
8 .user-profile 9 .user-profile
9 .user-profile__column 10 .user-profile__column
...@@ -13,27 +14,31 @@ block content ...@@ -13,27 +14,31 @@ block content
13 a(href=`//${user.blogUrl}` target="_blank") Blog 14 a(href=`//${user.blogUrl}` target="_blank") Blog
14 .user-profile__column 15 .user-profile__column
15 .user-profile__info 16 .user-profile__info
16 - h3(style="display: inline;") NAME: 17 + .user-profile__name
17 - h4(style="display: inline;")=user.name 18 + h3 NAME:
18 - br 19 + h4=user.name
19 - h3(style="display: inline;") GITHUB NICKNAME: 20 + .user-profile__github
20 - h4(style="display: inline;")=user.githubName 21 + h3 GITHUB NICKNAME:
21 - br 22 + h4=user.githubName
22 - h3(style="display: inline;") EMAIL: 23 + .user-profile__email
23 - h4(style="display: inline;")=user.email 24 + h3 EMAIL:
24 - br 25 + h4=user.email
25 - h3(style="display: inline;") SCHOOL: 26 + .user-profile__school
26 - h4(style="display: inline;")=user.school 27 + h3 SCHOOL:
28 + h4=user.school
29 + .user-profile__tech
27 h3 TECH: 30 h3 TECH:
28 ul 31 ul
29 each tech in user.tech 32 each tech in user.tech
30 li=tech 33 li=tech
34 + .user-profile__career
31 h3 CAREER: 35 h3 CAREER:
32 ul 36 ul
33 each career in user.career 37 each career in user.career
34 li=career 38 li=career
35 - h3(style="display: inline;") SELF-INTRODUCTION: 39 + .user-profile__introduction
36 - h4(style="display: inline;")=user.introduction 40 + h3 SELF-INTRODUCTION:
41 + h4=user.introduction
37 hr 42 hr
38 .user-status 43 .user-status
39 .user-status__contributions 44 .user-status__contributions
......
1 +scss -> screens/assets둘다
2 +사진 크기 설정하기
3 +
4 +youtube와 구글에 scss나 sass 검색마니하기
5 +
6 +pug 파일 안에 이미 있는 css 다 지워버리기
7 +css하다보면 pug파일 많이 수정해야할거임
8 +
9 +아직 세진님께 불러와지네요..? 최근 repos
...\ No newline at end of file ...\ No newline at end of file