이세진 / 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 613 additions and 214 deletions
...@@ -120,4 +120,5 @@ dist ...@@ -120,4 +120,5 @@ dist
120 package-lock.json 120 package-lock.json
121 /uploads 121 /uploads
122 /assets 122 /assets
123 -build
...\ No newline at end of file ...\ No newline at end of file
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 = () =>{ 13 + const total = totalContributionIndicator.innerText;
10 - const total = totalContributionIndicator.innerText; 14 + const img = new Image();
11 - const img = new Image(); 15 + if (total >= 0 && total < 200) {
12 - if (total>=0 && total<200){ 16 + img.src = "https://oss-2020105657.s3.amazonaws.com/first.png";
13 - img.src ="https://oss-2020105657.s3.amazonaws.com/first.png"; 17 + img.alt = "1단계";
14 - img.alt = "1단계"; 18 + } else if (total >= 200 && total < 600) {
15 - }else if (total>=200 && total<600){ 19 + img.src = "https://oss-2020105657.s3.amazonaws.com/second.png";
16 - img.src ="https://oss-2020105657.s3.amazonaws.com/second.png"; 20 + img.alt = "2단계";
17 - img.alt = "2단계"; 21 + } else if (total >= 600 && total < 1200) {
18 - }else if (total>=600 && total<1200){ 22 + img.src = "https://oss-2020105657.s3.amazonaws.com/third.png";
19 - img.src = "https://oss-2020105657.s3.amazonaws.com/third.png"; 23 + img.alt = "3단계";
20 - img.alt = "3단계"; 24 + } else if (total >= 1200 && total < 2000) {
21 - }else if (total>=1200 && total<2000){ 25 + img.src = "https://oss-2020105657.s3.amazonaws.com/four.png";
22 - img.src = "https://oss-2020105657.s3.amazonaws.com/four.png"; 26 + img.alt = "4단계";
23 - img.alt = "4단계"; 27 + } else {
24 - }else{ 28 + img.src = "https://oss-2020105657.s3.amazonaws.com/fifth.png";
25 - img.src = "https://oss-2020105657.s3.amazonaws.com/fifth.png"; 29 + img.alt = "5단계";
26 - img.alt = "5단계"; 30 + }
27 - } 31 + userCharacterBox.appendChild(img);
28 - 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];
45 - }).then(function(data){ 47 + const response = fetch(`/users/${userId}/repo`,{headers:{nickname}}).then(function(reponse){
46 - const trendRepoList = data.slice(0,2); 48 + const data = reponse.json();
47 - handleRepo(trendRepoList); 49 + return data
48 - }); 50 + }).then(function(data){
49 -}; 51 + handleRepo(data);
52 + })
53 +}
50 54
51 -const init=()=>{ 55 +const init = () => {
52 - handleImage(); 56 + handleImage();
53 - getGithubRepo(); 57 + getGithubRepo();
54 }; 58 };
55 59
56 -if(userContributionsBox){
57 - init();
58 -};
...\ No newline at end of file ...\ No newline at end of file
60 +if (userContributionsBox) {
61 + init();
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;
23 text-transform: uppercase; 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;
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 + }
115 + }
116 + .home-search__form:hover {
117 + box-shadow: 0px 1px 4px -1px rgba(79, 78, 79, 1);
24 } 118 }
25 } 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;
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);
22 } 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 + }
104 + }
105 + .user-profile__info {
106 + h3 {
107 + flex: 0 0 100px;
108 + @extend .labelSetting;
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 + }
37 } 134 }
38 } 135 }
39 } 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;
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 -};
...\ No newline at end of file ...\ No newline at end of file
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,22 +4,31 @@ block content ...@@ -4,22 +4,31 @@ 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
17 a(href="/login") Login 12 a(href="/login") Login
18 else 13 else
19 a(href=`/users/${loggedUser._id}`) My profile 14 a(href=`/users/${loggedUser._id}`) My profile
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 +
20 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
9 +
10 +
10 11
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 - .user-profile 9 + .pageLayout
10 - .user-profile__column 10 + .user-profile
11 - img(src=`/${user.avatarUrl}`) 11 + .user-profile__column
12 - .user-profile__link 12 + img(src=`/${user.avatarUrl}`)
13 - a(href=user.githubUrl target="_blank") Github 13 + .user-profile__link
14 - a(href=`//${user.blogUrl}` target="_blank") Blog 14 + a(href=user.githubUrl target="_blank") GitHub
15 - .user-profile__column 15 + i.fab.fa-github
16 - .user-profile__info 16 + a(href=`//${user.blogUrl}` target="_blank") Blog
17 - .user-profile__name 17 + i.fas.fa-link
18 - h3 NAME: 18 + .user-profile__column
19 - h4=user.name 19 + .user-profile__info
20 - .user-profile__github 20 + .user-profile__name
21 - h3 GITHUB NICKNAME: 21 + h3 NAME
22 - h4#jsGithubname=user.githubName 22 + h4=user.name
23 - .user-profile__email 23 + .user-profile__github
24 - h3 EMAIL: 24 + h3 &nbsp; &nbsp; &nbsp;&nbsp;GITHUB
25 - h4=user.email 25 + br
26 - .user-profile__school 26 + |NICKNAME
27 - h3 SCHOOL: 27 + h4#jsGithubNickname=user.githubName
28 - h4=user.school 28 + .user-profile__email
29 - .user-profile__tech 29 + h3 EMAIL
30 - h3 TECH: 30 + h4=user.email
31 - ul 31 + .user-profile__school
32 - each tech in user.tech 32 + h3 SCHOOL
33 - li=tech 33 + h4=user.school
34 - .user-profile__career 34 + .user-profile__tech
35 - h3 CAREER: 35 + h3 TECH
36 - ul 36 + ul
37 - each career in user.career 37 + each tech in user.tech
38 - li=career 38 + li=tech
39 - .user-profile__introduction 39 + .user-profile__career
40 - h3 SELF-INTRODUCTION: 40 + h3 CAREER
41 - h4=user.introduction 41 + ul
42 - hr 42 + each career in user.career
43 - .user-status 43 + li.career_list=career
44 - .user-status__contributions 44 + .user-profile__introduction
45 - span#jsTotalContributions=totalContributions 45 + h3 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; SELF
46 - img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart") 46 + br
47 - .user-status__character 47 + |INTRODUCTION
48 - h3 Your step 48 + h4=user.introduction
49 - .user-repositories 49 +
50 - .user-repo 50 + .user-git
51 - h3 Repositories 51 + .user-status
52 + .user-status__contributions
53 + h3 YOU'VE MADE
54 + span#jsTotalContributions=totalContributions
55 + h3 CONTRIBUTIONS!
56 + img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart")
57 +
58 +
59 + .user-repositories
60 + .user-repo
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