이세진 / dev-profile

Go to a project
Toggle navigation Toggle navigation pinning
김채리
59f811fa 1 parent aa98d150

updated readMe, CSS(editProfile>>>Home)

Inline Side-by-side
Showing 10 changed files with 138 additions and 32 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 +.user-quote {
2 + h2 {
3 + font-size: 30px;
4 + font-family: "Vollkorn", serif;
5 + margin: 15px 0px;
6 + }
7 + h3 {
8 + font-size: 15px;
9 + opacity: 0.5;
10 + font-family: "Vollkorn", serif;
11 + }
12 +}
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,8 @@ ...@@ -8,6 +8,8 @@
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";
11 13
12 // Defaults 14 // Defaults
13 15
......
...@@ -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
......
...@@ -13,27 +13,31 @@ block content ...@@ -13,27 +13,31 @@ block content
13 a(href=`//${user.blogUrl}` target="_blank") Blog 13 a(href=`//${user.blogUrl}` target="_blank") Blog
14 .user-profile__column 14 .user-profile__column
15 .user-profile__info 15 .user-profile__info
16 - h3(style="display: inline;") NAME: 16 + .user-profile__name
17 - h4(style="display: inline;")=user.name 17 + h3 NAME:
18 - br 18 + h4=user.name
19 - h3(style="display: inline;") GITHUB NICKNAME: 19 + .user-profile__github
20 - h4(style="display: inline;")=user.githubName 20 + h3 GITHUB NICKNAME:
21 - br 21 + h4=user.githubName
22 - h3(style="display: inline;") EMAIL: 22 + .user-profile__email
23 - h4(style="display: inline;")=user.email 23 + h3 EMAIL:
24 - br 24 + h4=user.email
25 - h3(style="display: inline;") SCHOOL: 25 + .user-profile__school
26 - h4(style="display: inline;")=user.school 26 + h3 SCHOOL:
27 + h4=user.school
28 + .user-profile__tech
27 h3 TECH: 29 h3 TECH:
28 ul 30 ul
29 each tech in user.tech 31 each tech in user.tech
30 li=tech 32 li=tech
33 + .user-profile__career
31 h3 CAREER: 34 h3 CAREER:
32 ul 35 ul
33 each career in user.career 36 each career in user.career
34 li=career 37 li=career
35 - h3(style="display: inline;") SELF-INTRODUCTION: 38 + .user-profile__introduction
36 - h4(style="display: inline;")=user.introduction 39 + h3 SELF-INTRODUCTION:
40 + h4=user.introduction
37 hr 41 hr
38 .user-status 42 .user-status
39 .user-status__contributions 43 .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