이세진 / dev-profile

Go to a project
Toggle navigation Toggle navigation pinning
JungSeungHyun
815f505d 2 parents 3dd97787 bd5da55a

Merge with 'develop' branch and correct conflict

Inline Side-by-side
Showing 17 changed files with 561 additions and 162 deletions
...@@ -121,3 +121,4 @@ package-lock.json ...@@ -121,3 +121,4 @@ package-lock.json
121 /uploads 121 /uploads
122 /assets 122 /assets
123 build 123 build
124 +.vscode
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -21,6 +21,19 @@ KHU-Hub repo: [khuhub.khu.ac.kr/2018102216/dev-profile](https://khuhub.khu.ac.kr ...@@ -21,6 +21,19 @@ KHU-Hub repo: [khuhub.khu.ac.kr/2018102216/dev-profile](https://khuhub.khu.ac.kr
21 21
22 ## <br> 22 ## <br>
23 23
24 +### Home Page
25 + 1. you can join or login with github.
26 + 2. you can search.
27 +![image](/uploads/f33744dd78985b881bfeff6162af0919/image.png)
28 +
29 +### Myprofile Page
30 + 1. You can see your profile information, github contributions, repositories, status at a glance.
31 +![image](/uploads/63eae503a0eb49b22bbe545c3c0c859a/image.png)
32 +
33 +### Editprofile Page
34 + 1. You can input or change your informations.
35 +![image](/uploads/55988a03a91f0dcd33656afe0ec04ff6/image.png)
36 +
24 ### test installation 37 ### test installation
25 38
26 This is the usage just for the being. 39 This is the usage just for the being.
...@@ -41,33 +54,34 @@ npm run dev:assets ...@@ -41,33 +54,34 @@ npm run dev:assets
41 ``` 54 ```
42 55
43 <br> 56 <br>
57 +
44 ### Installation MongoDB 58 ### Installation MongoDB
45 1. Access to the MongoDB homepage. 59 1. Access to the MongoDB homepage.
46 - ![image](/uploads/3d5d283732343d4c5ff4b5c7bd16c78f/image.png) 60 +![homepage](https://oss-2020105657.s3.amazonaws.com/MongoDB+homepage.png)
47 61
48 2. Select options and download MongoDB. 62 2. Select options and download MongoDB.
49 - ![image](/uploads/46038b5c881bb18074dd8e732804f5d7/image.png) 63 +![image](/uploads/46038b5c881bb18074dd8e732804f5d7/image.png)
50 64
51 3. If this screen appears when installing MongoDB, please select 'complete' and proceed. 65 3. If this screen appears when installing MongoDB, please select 'complete' and proceed.
52 - ![image](/uploads/510d184825d6eaf04dcb2d254f03b918/image.png) 66 +![image](/uploads/510d184825d6eaf04dcb2d254f03b918/image.png)
53 67
54 4. When you enter 'mongo' command in vsc terminal, it is installed well when the screen appears as below. 68 4. When you enter 'mongo' command in vsc terminal, it is installed well when the screen appears as below.
55 - ![image](/uploads/202bf8555f6842938d15c6e3b0e789c1/image.png) 69 +![image](/uploads/202bf8555f6842938d15c6e3b0e789c1/image.png)
56 70
57 ### To setting environment variable. 71 ### To setting environment variable.
58 ps. When entering 'mongo' command in vsc terminal, skip this part if it runs well. 72 ps. When entering 'mongo' command in vsc terminal, skip this part if it runs well.
59 73
60 1. Find folder where mongoDB is installed, and make a copy of the folder's route. 74 1. Find folder where mongoDB is installed, and make a copy of the folder's route.
61 - ![image](/uploads/93b13c8df931ef11781d21ad574ee441/image.png) 75 +![image](/uploads/93b13c8df931ef11781d21ad574ee441/image.png)
62 76
63 2. And you open the 'environment variable' page. If using window environment, you can use command (window + R) and input 'sysdm.cpl ,3'. And click 'environment variable'. 77 2. And you open the 'environment variable' page. If using window environment, you can use command (window + R) and input 'sysdm.cpl ,3'. And click 'environment variable'.
64 - ![image](/uploads/64278904603d6b3cdb78a0689695344a/image.png) 78 +![image](/uploads/64278904603d6b3cdb78a0689695344a/image.png)
65 79
66 3. You must find 'path' in 'system variable' categroy, not 'users variable'. If you find 'path' in 'system variable', then check 'path' and click 'Editing'. 80 3. You must find 'path' in 'system variable' categroy, not 'users variable'. If you find 'path' in 'system variable', then check 'path' and click 'Editing'.
67 - ![image](/uploads/9077ec8854585640dfb526e45cbcb3fb/image.png) 81 +![image](/uploads/9077ec8854585640dfb526e45cbcb3fb/image.png)
68 82
69 4. Create a new environmental variable path using the Mongo db address you copied earlier. 83 4. Create a new environmental variable path using the Mongo db address you copied earlier.
70 - ![image](/uploads/0018e1de51ae1c10cc9a5d5bc01fcf9d/image.png) 84 +![image](/uploads/0018e1de51ae1c10cc9a5d5bc01fcf9d/image.png)
71 85
72 5. Please check if Mongo Db is working well in fourth method of "Installation MongoDB". 86 5. Please check if Mongo Db is working well in fourth method of "Installation MongoDB".
73 87
...@@ -79,7 +93,7 @@ npm run dev:assets ...@@ -79,7 +93,7 @@ npm run dev:assets
79 ### How to fill .env file. 93 ### How to fill .env file.
80 1. If you clone our repository and downloads required modules, make new '.env' file. 94 1. If you clone our repository and downloads required modules, make new '.env' file.
81 2. Fill in the required values as shown below. 95 2. Fill in the required values as shown below.
82 - ![image](/uploads/cbdf2726a8b5c6326378cd5fa8295726/image.png) 96 +![image](/uploads/cbdf2726a8b5c6326378cd5fa8295726/image.png)
83 97
84 ### API reference 98 ### API reference
85 99
...@@ -90,7 +104,9 @@ npm run dev:assets ...@@ -90,7 +104,9 @@ npm run dev:assets
90 [GitHub Contributuions API](https://api.github.com/graphql/) 104 [GitHub Contributuions API](https://api.github.com/graphql/)
91 105
92 <br> 106 <br>
93 -\\<!--[GitHub Repositories API](https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2")--> 107 +\\<!--[GitHub Repositories API]
108 +
109 +### Libraries
94 110
95 ### License 111 ### License
96 112
......
...@@ -9,7 +9,7 @@ const handleRepo = (list) =>{ ...@@ -9,7 +9,7 @@ const handleRepo = (list) =>{
9 list.forEach(element => { 9 list.forEach(element => {
10 const anchor = document.createElement("a"); 10 const anchor = document.createElement("a");
11 anchor.href = element.url; 11 anchor.href = element.url;
12 - anchor.target = "_blank" 12 + anchor.target = "_blank";
13 anchor.innerHTML = `<span class="repoName">${element.name}</span> : ${element.description} - <span class="repoStar">${element.stars} stars</span>` 13 anchor.innerHTML = `<span class="repoName">${element.name}</span> : ${element.description} - <span class="repoStar">${element.stars} stars</span>`
14 trendRepoBox.appendChild(anchor); 14 trendRepoBox.appendChild(anchor);
15 }); 15 });
......
1 -const userContributionsBox = document.querySelector(".user-status__contributions"); 1 +const userContributionsBox = document.querySelector(
2 -const totalContributionIndicator = document.getElementById("jsTotalContributions"); 2 + ".user-status__contributions"
3 +);
4 +const totalContributionIndicator = document.getElementById(
5 + "jsTotalContributions"
6 +);
3 const userCharacterBox = document.querySelector(".user-status__character"); 7 const userCharacterBox = document.querySelector(".user-status__character");
4 const userRepoBox = document.querySelector(".user-repo"); 8 const userRepoBox = document.querySelector(".user-repo");
5 -const githubName = document.getElementById("jsGithubname").innerText; 9 +const githubNickname = document.getElementById("jsGithubNickname");
6 const URL = `https://api.github.com/users/${githubName}/repos?sort=updated&per_page=2`; 10 const URL = `https://api.github.com/users/${githubName}/repos?sort=updated&per_page=2`;
7 11
8 - 12 +const handleImage = () => {
9 -const handleImage = () =>{
10 const total = totalContributionIndicator.innerText; 13 const total = totalContributionIndicator.innerText;
11 const img = new Image(); 14 const img = new Image();
12 - if (total>=0 && total<200){ 15 + if (total >= 0 && total < 200) {
13 - img.src ="https://oss-2020105657.s3.amazonaws.com/first.png"; 16 + img.src = "https://oss-2020105657.s3.amazonaws.com/first.png";
14 img.alt = "1단계"; 17 img.alt = "1단계";
15 - }else if (total>=200 && total<600){ 18 + } else if (total >= 200 && total < 600) {
16 - img.src ="https://oss-2020105657.s3.amazonaws.com/second.png"; 19 + img.src = "https://oss-2020105657.s3.amazonaws.com/second.png";
17 img.alt = "2단계"; 20 img.alt = "2단계";
18 - }else if (total>=600 && total<1200){ 21 + } else if (total >= 600 && total < 1200) {
19 img.src = "https://oss-2020105657.s3.amazonaws.com/third.png"; 22 img.src = "https://oss-2020105657.s3.amazonaws.com/third.png";
20 img.alt = "3단계"; 23 img.alt = "3단계";
21 - }else if (total>=1200 && total<2000){ 24 + } else if (total >= 1200 && total < 2000) {
22 img.src = "https://oss-2020105657.s3.amazonaws.com/four.png"; 25 img.src = "https://oss-2020105657.s3.amazonaws.com/four.png";
23 img.alt = "4단계"; 26 img.alt = "4단계";
24 - }else{ 27 + } else {
25 img.src = "https://oss-2020105657.s3.amazonaws.com/fifth.png"; 28 img.src = "https://oss-2020105657.s3.amazonaws.com/fifth.png";
26 img.alt = "5단계"; 29 img.alt = "5단계";
27 } 30 }
28 userCharacterBox.appendChild(img); 31 userCharacterBox.appendChild(img);
29 }; 32 };
30 33
31 -const handleRepo = (list) =>{ 34 +const handleRepo = (list) => {
32 - list.forEach(element => { 35 + list.forEach((element) => {
33 const anchor = document.createElement("a"); 36 const anchor = document.createElement("a");
34 anchor.href = element.html_url; 37 anchor.href = element.html_url;
35 - anchor.target = "_blank" 38 + anchor.target = "_blank";
36 - anchor.innerHTML = `<div class =number><span class="repoName">${element.name}</span> : <span class="repoUrl">${element.html_url} </span></div>` 39 + anchor.innerHTML = `<div class =number><span class="repoName">${element.name}</span>:<span class="repoUrl">${element.html_url} </span></div>`;
37 userRepoBox.appendChild(anchor); 40 userRepoBox.appendChild(anchor);
38 }); 41 });
39 -
40 }; 42 };
41 43
42 const getGithubRepo = () =>{ 44 const getGithubRepo = () =>{
43 - const response = fetch(URL).then(function(response){ 45 + const nickname = githubNickname.innerText;
44 - return response.json(); 46 + const userId = window.location.href.split("/users/")[1];
47 + const response = fetch(`/users/${userId}/repo`,{headers:{nickname}}).then(function(reponse){
48 + const data = reponse.json();
49 + return data
45 }).then(function(data){ 50 }).then(function(data){
46 - const trendRepoList = data.slice(0,2); 51 + handleRepo(data);
47 - handleRepo(trendRepoList); 52 + })
48 - }); 53 +}
49 -};
50 54
51 -const init=()=>{ 55 +const init = () => {
52 handleImage(); 56 handleImage();
53 getGithubRepo(); 57 getGithubRepo();
54 }; 58 };
55 59
56 -if(userContributionsBox){ 60 +if (userContributionsBox) {
57 init(); 61 init();
58 -};
...\ No newline at end of file ...\ No newline at end of file
62 +}
......
...@@ -12,7 +12,7 @@ header { ...@@ -12,7 +12,7 @@ header {
12 .header__column { 12 .header__column {
13 ul { 13 ul {
14 display: flex; 14 display: flex;
15 - color: $blue; 15 + color: $lilac;
16 font-weight: 700; 16 font-weight: 700;
17 font-size: 20px; 17 font-size: 20px;
18 text-transform: uppercase; 18 text-transform: uppercase;
......
1 -$blue: #0063b2; 1 +$lilac: #8495ed;
2 -$skyblue: #9cc3d5; 2 +$navy: #00008b;
3 +$blue: #483d8b;
3 $star: #ffb700; 4 $star: #ffb700;
4 $space: 40px; 5 $space: 40px;
......
...@@ -4,26 +4,29 @@ ...@@ -4,26 +4,29 @@
4 flex-direction: column; 4 flex-direction: column;
5 padding: 30px; 5 padding: 30px;
6 img { 6 img {
7 - width: 100px; 7 + width: 176px;
8 - height: 100px; 8 + height: 220px;
9 - object-fit: cover; 9 + object-fit: contain;
10 } 10 }
11 .fileUpload { 11 .fileUpload {
12 display: flex; 12 display: flex;
13 flex-direction: column; 13 flex-direction: column;
14 + input {
15 + font-size: 13px;
16 + }
14 } 17 }
15 input { 18 input {
16 - padding: 10px;
17 display: block; 19 display: block;
18 border: none; 20 border: none;
19 border-bottom: 1px solid #ccc; 21 border-bottom: 1px solid #ccc;
20 width: 40%; 22 width: 40%;
21 - opacity: 0.6; 23 + padding: 10px;
22 margin-top: 19px; 24 margin-top: 19px;
23 font-family: "Roboto", sans-serif; 25 font-family: "Roboto", sans-serif;
24 font-size: 18px; 26 font-size: 18px;
25 } 27 }
26 label { 28 label {
29 + color: #6456bb;
27 font-family: "Raleway", sans-serif; 30 font-family: "Raleway", sans-serif;
28 font-size: 13px; 31 font-size: 13px;
29 font-weight: bold; 32 font-weight: bold;
...@@ -38,15 +41,29 @@ ...@@ -38,15 +41,29 @@
38 margin-top: 20px; 41 margin-top: 20px;
39 padding: 9px; 42 padding: 9px;
40 } 43 }
44 +
41 .box { 45 .box {
46 + margin-top: 50px;
42 input { 47 input {
43 - background-color: rgb(209, 219, 231); 48 + border-radius: 10px;
49 + background-color: #94a3ec;
44 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 50 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), 51 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); 52 0 8px 16px rgba(0, 0, 0, 0.11);
47 font-family: "Raleway", sans-serif; 53 font-family: "Raleway", sans-serif;
54 + text-transform: uppercase;
55 + font-weight: bold;
48 opacity: 1; 56 opacity: 1;
49 font-size: 20px; 57 font-size: 20px;
58 + color: white;
59 + }
60 + input:hover {
61 + border-radius: 10px;
62 + background-color: #6456bb;
63 + -webkit-transform: scale(0.8);
64 + -ms-transform: scale(0.95);
65 + transform: scale(0.95);
66 + transition: 0.2s ease-in;
50 } 67 }
51 } 68 }
52 } 69 }
......
...@@ -5,24 +5,124 @@ ...@@ -5,24 +5,124 @@
5 align-items: center; 5 align-items: center;
6 .home-title { 6 .home-title {
7 margin: 40px 0px; 7 margin: 40px 0px;
8 + width: 100%;
8 display: flex; 9 display: flex;
9 flex-direction: column; 10 flex-direction: column;
10 justify-content: center; 11 justify-content: center;
11 align-items: center; 12 align-items: center;
13 +
12 h2 { 14 h2 {
13 - font-size: 20px; 15 + font-size: 25px;
14 font-family: "Roboto", sans-serif; 16 font-family: "Roboto", sans-serif;
15 - font-weight: 400; 17 + font-weight: 700;
16 text-transform: uppercase; 18 text-transform: uppercase;
19 + color: rgb(30, 30, 150);
17 margin-bottom: 30px; 20 margin-bottom: 30px;
18 } 21 }
19 - h1 { 22 + span {
20 font-size: 50px; 23 font-size: 50px;
21 font-family: "Roboto", sans-serif; 24 font-family: "Roboto", sans-serif;
22 font-weight: 800; 25 font-weight: 800;
26 + width: 60%;
27 + text-align: center;
28 + text-transform: uppercase;
29 + background-image: linear-gradient(120deg, #acedff 0%, #ffaddd 100%);
30 + background-repeat: no-repeat;
31 + background-size: 100% 0.3em;
32 + background-position: 0 88%;
33 + transition: background-size 200ms ease-in;
34 + &:hover {
35 + background-size: 100% 88%;
36 + }
37 + }
38 + }
39 +
40 + .home-link {
41 + margin: 20px;
42 + font-family: "Roboto", sans-serif;
43 + font-size: 30px;
44 + font-weight: 700;
45 + display: flex;
46 + align-items: flex-end;
47 + align-content: flex-end;
48 + justify-items: flex-end;
49 + justify-content: center;
50 + align-items: center;
23 text-transform: uppercase; 51 text-transform: uppercase;
52 + a {
53 + color: $lilac;
54 + &:not(:last-child) {
55 + margin-right: 50px;
56 + }
57 + &:hover {
58 + color: rgb(106, 89, 233);
59 + }
60 + }
61 + }
62 +
63 + .home-search {
64 + margin-top: 30px;
65 + margin-bottom: 60px;
66 + display: flex;
67 + justify-content: space-evenly;
68 + align-items: center;
69 + background: #fff;
70 + border-radius: 500px;
71 + padding: 10px 25px 10px 25px;
72 +
73 + .home-search__form {
74 + display: flex;
75 + justify-content: space-evenly;
76 + align-items: center;
77 + background: #fff;
78 + border-radius: 500px;
79 + padding: 10px 25px 10px 25px;
80 + border: 1px solid #ccc;
81 +
82 + img {
83 + height: 30px;
84 + width: 30px;
85 + }
86 +
87 + input {
88 + padding: 5px;
89 + margin-left: 15px;
90 + margin-right: 15px;
91 + width: 300px;
92 + border-radius: 5px;
93 + background: transparent;
94 + border: 1px solid transparent;
95 + outline: none;
96 + font-size: 1.2rem;
97 + overflow-x: scroll;
98 + }
99 + button {
100 + border: none;
101 + background: none;
102 + padding: 0;
103 + i {
104 + background: transparent;
105 + border: none;
106 + i {
107 + font-size: 1.5rem;
108 + margin: 3px;
109 + }
110 + }
111 + i:hover {
112 + cursor: pointer;
113 + }
114 + }
24 } 115 }
116 + .home-search__form:hover {
117 + box-shadow: 0px 1px 4px -1px rgba(79, 78, 79, 1);
25 } 118 }
119 + }
120 +
121 + .boxShadow {
122 + box-shadow: 0 13px 10px -5px rgba(50, 50, 93, 0.25),
123 + 0 8px 10px -8px rgba(0, 0, 0, 0.3), 0 -6px 10px -6px rgba(0, 0, 0, 0.025);
124 + }
125 +
26 .home-quote { 126 .home-quote {
27 width: 100%; 127 width: 100%;
28 display: flex; 128 display: flex;
...@@ -30,9 +130,11 @@ ...@@ -30,9 +130,11 @@
30 flex-direction: column; 130 flex-direction: column;
31 justify-content: center; 131 justify-content: center;
32 align-items: center; 132 align-items: center;
33 - padding: 20px; 133 + background-color: #f8f9ff;
34 - box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 134 + padding: 30px;
35 - 0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025); 135 + @extend .boxShadow;
136 +
137 + border-top: 3pt double #7f8bd0;
36 h2 { 138 h2 {
37 font-size: 40px; 139 font-size: 40px;
38 font-family: "Vollkorn", serif; 140 font-family: "Vollkorn", serif;
...@@ -40,57 +142,49 @@ ...@@ -40,57 +142,49 @@
40 } 142 }
41 h3 { 143 h3 {
42 font-size: 25px; 144 font-size: 25px;
43 - opacity: 0.5; 145 + color: rgb(112, 114, 120);
44 font-family: "Vollkorn", serif; 146 font-family: "Vollkorn", serif;
45 - } 147 + font-weight: lighter;
46 - } 148 + margin-bottom: 10px;
47 - .home-search {
48 - display: flex;
49 - padding: 40px;
50 - justify-content: center;
51 - width: 100%;
52 - }
53 -
54 - .home-link {
55 - margin-top: 50px;
56 - font-family: "Roboto", sans-serif;
57 - font-size: 30px;
58 - font-weight: 700;
59 - display: flex;
60 - justify-content: center;
61 - align-items: center;
62 - a {
63 - color: $blue;
64 - &:not(:last-child) {
65 - margin-right: 50px;
66 - }
67 } 149 }
68 } 150 }
69 .gotoTrend { 151 .gotoTrend {
70 - margin-top: 50px;
71 display: flex; 152 display: flex;
72 - width: 120%; 153 + margin-top: 50px;
154 + width: 100%;
155 + padding: 40px;
73 text-align: center; 156 text-align: center;
74 flex-direction: column; 157 flex-direction: column;
75 justify-content: center; 158 justify-content: center;
76 align-items: center; 159 align-items: center;
77 - padding: 20px; 160 + background-color: #fffdf1;
78 - box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 161 + border-top: 3pt double #ffce72;
79 - 0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025); 162 +
163 + @extend .boxShadow;
80 h2 { 164 h2 {
81 color: #fb8500; 165 color: #fb8500;
82 - font-size: 25px; 166 + font-family: "Raleway", cursive;
167 + font-size: 30px;
83 font-weight: 700; 168 font-weight: 700;
84 - margin-bottom: 20px; 169 + margin-bottom: 30px;
170 + text-transform: uppercase;
171 + border-bottom: 3pt double $star;
172 + padding-bottom: 10px;
173 + width: 60%;
174 + i {
175 + color: $star;
176 + }
85 } 177 }
86 .gotoTrend-repos { 178 .gotoTrend-repos {
87 display: flex; 179 display: flex;
88 flex-direction: column; 180 flex-direction: column;
89 justify-content: center; 181 justify-content: center;
90 align-items: center; 182 align-items: center;
183 +
91 a { 184 a {
92 - font-size: 18px; 185 + font-size: 20px;
93 margin: 10px 0px; 186 margin: 10px 0px;
187 + font-family: "Raleway", cursive;
94 } 188 }
95 .repoName { 189 .repoName {
96 font-weight: 600; 190 font-weight: 600;
......
...@@ -9,32 +9,63 @@ ...@@ -9,32 +9,63 @@
9 9
10 h3 { 10 h3 {
11 display: flex; 11 display: flex;
12 - justify-content: center; 12 + justify-content: left;
13 align-items: center; 13 align-items: center;
14 - margin-top: 50px; 14 + margin: 50px 0px;
15 font-weight: 700; 15 font-weight: 700;
16 font-family: "Roboto", sans-serif; 16 font-family: "Roboto", sans-serif;
17 - font-size: 30px; 17 + font-size: 27px;
18 + color: rgb(15, 100, 142);
18 opacity: 0.8; 19 opacity: 0.8;
19 } 20 }
20 21
21 a { 22 a {
23 + .login-github::before {
24 + transform: scaleX(0);
25 + transform-origin: bottom right;
26 + }
27 +
28 + .login-github:hover::before {
29 + transform: scaleX(1);
30 + transform-origin: bottom left;
31 + }
32 +
33 + .login-github::before {
34 + content: " ";
35 + display: block;
36 + position: absolute;
37 + top: 0;
38 + right: 0;
39 + bottom: 0;
40 + left: 0;
41 + inset: 0 0 0 0;
42 + background: hsl(200 100% 80%);
43 + z-index: -1;
44 + transition: transform 0.3s ease;
45 + }
46 +
22 .login-github { 47 .login-github {
23 - display: flex; 48 + position: relative;
24 - justify-content: center; 49 + font-size: 5rem;
25 - border-radius: 25px; 50 + }
26 - align-items: center; 51 +
27 - margin-top: 30px; 52 + html {
28 - height: 80px; 53 + block-size: 100%;
29 - background-color: rgb(93, 32, 167); 54 + inline-size: 100%;
30 - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 55 + }
31 - 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 56 +
32 - 0 8px 16px rgba(0, 0, 0, 0.11); 57 + body {
33 - font-family: "Raleway", sans-serif; 58 + min-block-size: 100%;
34 - color: white; 59 + min-inline-size: 100%;
35 - font-size: 50px; 60 + margin: 0;
36 - font-weight: 500; 61 + box-sizing: border-box;
37 - font-family: "Roboto", sans-serif; 62 + display: grid;
38 - font-size: 25px; 63 + place-content: center;
64 + }
65 +
66 + @media (orientation: landscape) {
67 + body {
68 + grid-auto-flow: column;
69 + }
39 } 70 }
40 } 71 }
......
1 .user-quote { 1 .user-quote {
2 - margin-top: 20px;
3 h2 { 2 h2 {
4 font-size: 30px; 3 font-size: 30px;
5 font-family: "Vollkorn", serif; 4 font-family: "Vollkorn", serif;
6 - margin: 15px 0px; 5 + margin-top: 40px;
7 } 6 }
8 h3 { 7 h3 {
9 display: flex; 8 display: flex;
10 - margin-right: 100px;
11 flex-direction: row-reverse; 9 flex-direction: row-reverse;
10 + margin-top: 20px;
11 + margin-right: 80px;
12 font-size: 20px; 12 font-size: 20px;
13 - opacity: 0.5;
14 font-family: "Vollkorn", serif; 13 font-family: "Vollkorn", serif;
14 + color: #74828e;
15 + font-weight: lighter;
15 } 16 }
16 } 17 }
17 -label { 18 +
19 +.labelSetting {
20 + width: 100px;
21 + display: inline-flex;
22 + flex-direction: row;
23 + justify-content: flex-end;
18 font-family: "Raleway", sans-serif; 24 font-family: "Raleway", sans-serif;
19 font-size: 13px; 25 font-size: 13px;
20 font-weight: bold; 26 font-weight: bold;
21 - padding: 10px; 27 + margin: 2px;
28 + color: $blue;
22 } 29 }
30 +.infoSetting {
31 + display: inline-flex;
32 + flex-direction: row;
33 + justify-content: flex-end;
34 + font-family: "Roboto", sans-serif;
35 + font-size: 20px;
36 + font-weight: bold;
37 + padding: 2px;
38 + color: #1e1e1ed9;
39 + margin: 10px;
40 +}
41 +.mainText {
42 + display: inline-flex;
43 + font-family: "Raleway", sans-serif;
44 + font-size: 25px;
45 + font-weight: bolder;
46 + margin: 5px;
47 + color: #392f76;
48 +}
49 +
50 +.boxEffect {
51 + content: "";
52 + bottom: 15px;
53 + right: 10px;
54 + left: auto;
55 + background: #777;
56 + -webkit-box-shadow: 0 15px 10px #777;
57 + -moz-box-shadow: 0 15px 10px #777;
58 + box-shadow: 0 15px 10px #777;
59 + -webkit-transform: rotate(-1deg);
60 + -moz-transform: rotate(-1deg);
61 + -o-transform: rotate(-1deg);
62 + -ms-transform: rotate(-1deg);
63 + transform: rotate(-1deg);
64 +}
65 +
66 +//#fff5f6
67 +//#f8f8ff
68 +//#f2f3f8;
69 +//lavender
70 +//#ecedfc
71 +//#e3edf7
72 +//#ddeeff
73 +//#fff6c3
74 +
23 .user-profile { 75 .user-profile {
76 + margin-bottom: 50px;
77 + margin-top: 30px;
78 + margin-right: 23px;
79 + width: 600px;
80 + padding: 10px;
81 + padding-bottom: 50px;
82 + background-color: #fff6c3;
83 + @extend .boxEffect;
84 +
24 .user-profile__column { 85 .user-profile__column {
25 img { 86 img {
26 - width: 100px; 87 + width: 176px;
27 - height: 100px; 88 + height: 220px;
28 - object-fit: cover; 89 + object-fit: contain;
90 + margin: 5px;
29 } 91 }
30 .user-profile__link { 92 .user-profile__link {
31 display: flex; 93 display: flex;
32 font-family: "Raleway", sans-serif; 94 font-family: "Raleway", sans-serif;
33 - flex-wrap: wrap;
34 font-weight: bold; 95 font-weight: bold;
35 - width: 5px; 96 + font-size: 15px;
36 - color: rgb(92, 92, 221); 97 + color: rgb(70, 70, 216);
98 + margin: 5px;
99 + padding: 2px;
100 + a {
101 + margin: 5px;
102 + margin-right: 15px;
103 + }
37 } 104 }
105 + .user-profile__info {
106 + h3 {
107 + flex: 0 0 100px;
108 + @extend .labelSetting;
38 } 109 }
110 + h4 {
111 + @extend .infoSetting;
112 + }
113 + .user-profile__career {
114 + display: flex;
115 + }
116 + .user-profile__tech {
117 + display: flex;
118 + }
119 + .user-profile__introduction {
120 + width: 100%;
121 + overflow: hidden;
122 + word-wrap: break-word;
123 + word-break: break-all;
124 + }
125 + ul {
126 + display: flex;
127 + flex-direction: column;
128 + font-size: 20px;
129 + font-weight: bold;
130 + padding: 2px;
131 + color: rgba(0, 0, 0, 0.85);
132 + margin: 10px;
133 + }
134 + }
135 + }
136 +}
137 +
138 +.user-git {
139 + margin-left: 20px;
140 + .user-status {
141 + .user-status__contributions {
142 + margin-top: 40px;
143 + h3 {
144 + @extend .mainText;
145 + }
146 + span {
147 + color: orange;
148 + display: inline-flex;
149 + font-family: "Raleway", sans-serif;
150 + font-size: 40px;
151 + font-weight: bolder;
152 + margin: 5px;
153 + }
154 + img {
155 + width: 600px;
156 + height: auto;
157 + object-fit: cover;
158 + margin: 5px;
159 + }
160 + }
161 +
162 + .user-repositories {
163 + margin-top: 30px;
164 +
165 + h3 {
166 + margin-top: 15px;
167 + margin-bottom: 10px;
168 + text-transform: uppercase;
169 + @extend .mainText;
170 + }
171 + .user-repo {
172 + margin-top: 50px;
173 + .repoName {
174 + display: inline-flex;
175 + flex-direction: row;
176 + justify-content: flex-end;
177 + font-family: "Raleway", cursive;
178 + font-size: 18px;
179 + font-weight: bold;
180 + padding: 2px;
181 + text-transform: uppercase;
182 + color: #1e1e1ed9;
183 + margin: 5px;
184 + width: 150px;
185 + }
186 + .repoUrl {
187 + display: inline-flex;
188 + flex-direction: row;
189 + font-family: "Roboto", sans-serif;
190 + font-size: 20px;
191 + font-weight: 400;
192 + color: #6f6f6f;
193 + margin: 10px;
194 + }
195 + .repoUrl:hover {
196 + display: inline-flex;
197 + flex-direction: row;
198 + font-family: "Roboto", sans-serif;
199 + font-size: 20px;
200 + font-weight: 400;
201 + text-decoration: underline;
202 + color: #6868af;
203 + margin: 10px;
204 + }
205 + }
206 + }
207 +
208 + .user-status__character {
209 + margin-top: 60px;
210 + margin-left: 10px;
211 + display: flex;
212 + flex-direction: column;
213 + h3 {
214 + @extend .mainText;
215 + }
216 + img {
217 + max-width: 200px;
218 + height: auto;
219 + object-fit: cover;
220 + margin-top: 20px;
221 + }
222 + }
223 + }
224 +}
225 +
226 +.pageLayout {
227 + display: flex;
228 + flex-direction: row;
39 } 229 }
......
...@@ -13,18 +13,17 @@ const getQuote = async (req, res) => { ...@@ -13,18 +13,17 @@ const getQuote = async (req, res) => {
13 return { quote, author }; 13 return { quote, author };
14 }; 14 };
15 15
16 -
17 export const handleHome = async (req, res) => { 16 export const handleHome = async (req, res) => {
18 const quote = await getQuote(); 17 const quote = await getQuote();
19 res.render("home", { 18 res.render("home", {
20 pageTitle: "Home", 19 pageTitle: "Home",
21 quote: quote.quote, 20 quote: quote.quote,
22 - author: quote.author 21 + author: quote.author,
23 }); 22 });
24 }; 23 };
25 24
26 export const getUserDetail = async (req, res) => { 25 export const getUserDetail = async (req, res) => {
27 - try{ 26 + try {
28 const id = req.params.id; 27 const id = req.params.id;
29 const quote = await getQuote(); 28 const quote = await getQuote();
30 const user = await User.findById(id); 29 const user = await User.findById(id);
...@@ -34,15 +33,14 @@ export const getUserDetail = async (req, res) => { ...@@ -34,15 +33,14 @@ export const getUserDetail = async (req, res) => {
34 quote: quote.quote, 33 quote: quote.quote,
35 author: quote.author, 34 author: quote.author,
36 user, 35 user,
37 - totalContributions: totalCon, 36 + totalContributions: totalCon
38 }); 37 });
39 - } catch(error){ 38 + } catch (error) {
40 console.log(error); 39 console.log(error);
41 res.redirect("/"); 40 res.redirect("/");
42 } 41 }
43 }; 42 };
44 43
45 -
46 export const getEditProfile = async (req, res) => { 44 export const getEditProfile = async (req, res) => {
47 const { 45 const {
48 user: { _id: id }, 46 user: { _id: id },
...@@ -84,7 +82,7 @@ export const postEditProfile = async (req, res) => { ...@@ -84,7 +82,7 @@ export const postEditProfile = async (req, res) => {
84 ); 82 );
85 req.session.passport.user = updatedUser; 83 req.session.passport.user = updatedUser;
86 //console.log(updatedUser); 84 //console.log(updatedUser);
87 - res.redirect("/users/edit-profile"); 85 + res.redirect(`/users/${id}`);
88 } catch (error) { 86 } catch (error) {
89 console.log(error); 87 console.log(error);
90 res.redirect("/"); 88 res.redirect("/");
...@@ -132,7 +130,7 @@ export const githubLoginCallback = async (_, __, profile, done) => { ...@@ -132,7 +130,7 @@ export const githubLoginCallback = async (_, __, profile, done) => {
132 avatarUrl, 130 avatarUrl,
133 githubUrl, 131 githubUrl,
134 name, 132 name,
135 - email, 133 + email
136 }); 134 });
137 return done(null, newUser); 135 return done(null, newUser);
138 } 136 }
...@@ -151,16 +149,40 @@ export const logout = (req, res) => { ...@@ -151,16 +149,40 @@ export const logout = (req, res) => {
151 res.redirect("/"); 149 res.redirect("/");
152 }; 150 };
153 151
154 -const getContributions = async(username) =>{ 152 +const getContributions = async (username) => {
155 const token = process.env.GH_SECRET_SH; 153 const token = process.env.GH_SECRET_SH;
156 const headers = { 154 const headers = {
157 - 'Authorization': `bearer ${token}`, 155 + Authorization: `bearer ${token}`,
158 }; 156 };
159 const body = { 157 const body = {
160 - "query": `query {user(login: "${username}") {contributionsCollection {contributionCalendar {totalContributions}}}}` 158 + query: `query {user(login: "${username}") {contributionsCollection {contributionCalendar {totalContributions}}}}`,
161 }; 159 };
162 - const response = await fetch('https://api.github.com/graphql', { method: "POST", body: JSON.stringify(body), headers: headers }); 160 + const response = await fetch("https://api.github.com/graphql", {
161 + method: "POST",
162 + body: JSON.stringify(body),
163 + headers: headers,
164 + });
163 const totalContributions = await response.json(); 165 const totalContributions = await response.json();
164 - const total = totalContributions.data.user.contributionsCollection.contributionCalendar.totalContributions; 166 + const total =
167 + totalContributions.data.user.contributionsCollection.contributionCalendar
168 + .totalContributions;
165 return total; 169 return total;
166 }; 170 };
171 +
172 +export const getRepos = async(req,res) =>{
173 + try{
174 + const githubNickname = req.headers.nickname
175 + const URL = `https://api.github.com/users/${githubNickname}/repos?sort=updated&per_page=2`;
176 + const response = await fetch(URL,{
177 + headers: {
178 + authorization: `token ${process.env.GH_SECRET_SH}`
179 + }
180 + }).then(function (response) {
181 + return response.json();
182 + }).then(function (data) {
183 + return res.send(data);
184 + });
185 + }catch(error){
186 + console.log(error);
187 + }
188 +}
...\ No newline at end of file ...\ No newline at end of file
......
1 import express from "express"; 1 import express from "express";
2 import { 2 import {
3 getEditProfile, 3 getEditProfile,
4 + getRepos,
4 getUserDetail, 5 getUserDetail,
5 handleUsers, 6 handleUsers,
6 postEditProfile, 7 postEditProfile,
...@@ -20,5 +21,6 @@ userRouter.post( ...@@ -20,5 +21,6 @@ userRouter.post(
20 ); 21 );
21 22
22 userRouter.get("/:id", getUserDetail); 23 userRouter.get("/:id", getUserDetail);
24 +userRouter.get("/:id/repo", getRepos);
23 25
24 export default userRouter; 26 export default userRouter;
......
...@@ -4,13 +4,8 @@ block content ...@@ -4,13 +4,8 @@ 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 + span Developer Profile
8 - .home-quote 8 +
9 - h2=quote
10 - h3=author
11 - .home-search
12 - form.home-search__form
13 - input(type="text" id="jsInput" placeholder="Google 검색")
14 .home-link 9 .home-link
15 if !loggedUser 10 if !loggedUser
16 a(href="/join") Join 11 a(href="/join") Join
...@@ -18,8 +13,22 @@ block content ...@@ -18,8 +13,22 @@ block content
18 else 13 else
19 a(href=`/users/${loggedUser._id}`) My profile 14 a(href=`/users/${loggedUser._id}`) My profile
20 15
16 + .home-search
17 + form.home-search__form
18 + a(href="https://google.com" target="_blank")
19 + img(src="https://user-images.githubusercontent.com/48612525/86507657-d54fbd80-bd8e-11ea-866b-ac26496481ae.png" alt="google icon")
20 + input(type="text" id="jsInput" placeholder="Google 검색")
21 + button
22 + i.fa.fa-search(aria-hidden="true")
23 +
24 + .home-quote
25 + h2=quote
26 + h3=author
27 +
28 +
21 .gotoTrend#jsGotoTrend 29 .gotoTrend#jsGotoTrend
22 - h2 Today's Trending Repositories: 30 + h2 Today's Trending Repositories
31 + i.fas.fa-link
23 .gotoTrend-repos#jsGotoTrendRepos 32 .gotoTrend-repos#jsGotoTrendRepos
24 span#jsIndicator Waiting.... 33 span#jsIndicator Waiting....
25 block scripts 34 block scripts
......
1 extends layouts/main 1 extends layouts/main
2 2
3 block content 3 block content
4 - i.fas.fa-location-arrow 4 + h3 Click Below to Join Us!
5 - h3 Join Us!
6 a(href="/auth/github") 5 a(href="/auth/github")
7 .login-github 6 .login-github
8 i.fab.fa-github 7 i.fab.fa-github
9 span Join with GitHub 8 span Join with GitHub
10 9
11 10
11 +
12 +
...\ No newline at end of file ...\ No newline at end of file
......
1 extends layouts/main 1 extends layouts/main
2 2
3 block content 3 block content
4 - i.fas.fa-location-arrow 4 + h3 Click Below to Login with GitHub!
5 - h3 Login with GitHub!
6 a(href="/auth/github") 5 a(href="/auth/github")
7 .login-github 6 .login-github
8 i.fab.fa-github 7 i.fab.fa-github
......
...@@ -6,48 +6,69 @@ block content ...@@ -6,48 +6,69 @@ block content
6 h3=author 6 h3=author
7 7
8 hr 8 hr
9 + .pageLayout
9 .user-profile 10 .user-profile
10 .user-profile__column 11 .user-profile__column
11 img(src=`/${user.avatarUrl}`) 12 img(src=`/${user.avatarUrl}`)
12 .user-profile__link 13 .user-profile__link
13 - a(href=user.githubUrl target="_blank") Github 14 + a(href=user.githubUrl target="_blank") GitHub
15 + i.fab.fa-github
14 a(href=`//${user.blogUrl}` target="_blank") Blog 16 a(href=`//${user.blogUrl}` target="_blank") Blog
17 + i.fas.fa-link
15 .user-profile__column 18 .user-profile__column
16 .user-profile__info 19 .user-profile__info
17 .user-profile__name 20 .user-profile__name
18 - h3 NAME: 21 + h3 NAME
19 h4=user.name 22 h4=user.name
20 .user-profile__github 23 .user-profile__github
21 - h3 GITHUB NICKNAME: 24 + h3 &nbsp; &nbsp; &nbsp;&nbsp;GITHUB
22 - h4#jsGithubname=user.githubName 25 + br
26 + |NICKNAME
27 + h4#jsGithubNickname=user.githubName
23 .user-profile__email 28 .user-profile__email
24 - h3 EMAIL: 29 + h3 EMAIL
25 h4=user.email 30 h4=user.email
26 .user-profile__school 31 .user-profile__school
27 - h3 SCHOOL: 32 + h3 SCHOOL
28 h4=user.school 33 h4=user.school
29 .user-profile__tech 34 .user-profile__tech
30 - h3 TECH: 35 + h3 TECH
31 ul 36 ul
32 each tech in user.tech 37 each tech in user.tech
33 li=tech 38 li=tech
34 .user-profile__career 39 .user-profile__career
35 - h3 CAREER: 40 + h3 CAREER
36 ul 41 ul
37 each career in user.career 42 each career in user.career
38 - li=career 43 + li.career_list=career
39 .user-profile__introduction 44 .user-profile__introduction
40 - h3 SELF-INTRODUCTION: 45 + h3 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; SELF
46 + br
47 + |INTRODUCTION
41 h4=user.introduction 48 h4=user.introduction
42 - hr 49 +
50 + .user-git
43 .user-status 51 .user-status
44 .user-status__contributions 52 .user-status__contributions
53 + h3 YOU'VE MADE
45 span#jsTotalContributions=totalContributions 54 span#jsTotalContributions=totalContributions
55 + h3 CONTRIBUTIONS!
46 img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart") 56 img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart")
47 - .user-status__character 57 +
48 - h3 Your step 58 +
49 .user-repositories 59 .user-repositories
50 .user-repo 60 .user-repo
51 - h3 Repositories 61 + h3 Your recent updated repositories:
62 +
63 +
64 + .user-status__character
65 + h3 YOUR STATUS
66 +
67 +
68 +
69 +
70 +
71 +
72 +
52 block scripts 73 block scripts
53 script(src="/static/js/githubInfo.js") 74 script(src="/static/js/githubInfo.js")
......
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