2021_dev-profile / dev-profile

Go to a project
Toggle navigation Toggle navigation pinning
이세진
06d58532 2 parents 78125a9f 8aeb0c1b

Merge branch 'cher' into 'master' 

CSS update of "



See merge request !14
Inline Side-by-side
Showing 14 changed files with 560 additions and 176 deletions
...@@ -21,6 +21,8 @@ KHU-Hub repo: [khuhub.khu.ac.kr/2018102216/dev-profile](https://khuhub.khu.ac.kr ...@@ -21,6 +21,8 @@ KHU-Hub repo: [khuhub.khu.ac.kr/2018102216/dev-profile](https://khuhub.khu.ac.kr
21 21
22 ## <br> 22 ## <br>
23 23
24 +### Developers
25 +
24 ### test installation 26 ### test installation
25 27
26 This is the usage just for the being. 28 This is the usage just for the being.
...@@ -51,7 +53,9 @@ npm run dev:assets ...@@ -51,7 +53,9 @@ npm run dev:assets
51 [GitHub Contributuions API](https://api.github.com/graphql/) 53 [GitHub Contributuions API](https://api.github.com/graphql/)
52 54
53 <br> 55 <br>
54 -\\<!--[GitHub Repositories API](https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2")--> 56 +\\<!--[GitHub Repositories API]
57 +
58 +### Libraries
55 59
56 ### License 60 ### License
57 61
......
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 +);
7 +const userCharacterBox = document.querySelector(".user-status__character");
8 +const userRepoBox = document.querySelector(".user-repo");
9 +const URL =
10 + "https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2";
3 11
4 - 12 +const handleImage = () => {
5 - 13 + const total = totalContributionIndicator.innerText;
6 -const handleImage = () =>{ 14 + const img = new Image();
7 - const total = totalContributionIndicator.innerText; 15 + if (total >= 0 && total < 200) {
8 - console.log(total); 16 + img.src = "https://oss-2020105657.s3.amazonaws.com/first.png";
17 + img.alt = "1단계";
18 + } else if (total >= 200 && total < 600) {
19 + img.src = "https://oss-2020105657.s3.amazonaws.com/second.png";
20 + img.alt = "2단계";
21 + } else if (total >= 600 && total < 1200) {
22 + img.src = "https://oss-2020105657.s3.amazonaws.com/third.png";
23 + img.alt = "3단계";
24 + } else if (total >= 1200 && total < 2000) {
25 + img.src = "https://oss-2020105657.s3.amazonaws.com/four.png";
26 + img.alt = "4단계";
27 + } else {
28 + img.src = "https://oss-2020105657.s3.amazonaws.com/fifth.png";
29 + img.alt = "5단계";
30 + }
31 + userCharacterBox.appendChild(img);
9 }; 32 };
10 33
34 +const handleRepo = (list) => {
35 + list.forEach((element) => {
36 + const anchor = document.createElement("a");
37 + anchor.href = element.html_url;
38 + anchor.target = "_blank";
39 + anchor.innerHTML = `<div class =number><span class="repoName">${element.name}</span>:<span class="repoUrl">${element.html_url} </span></div>`;
40 + userRepoBox.appendChild(anchor);
41 + });
42 +};
11 43
12 -const getGithubRepo = () =>{ 44 +const getGithubRepo = () => {
13 - console.log("Get Api here"); 45 + const response = fetch(URL)
46 + .then(function (response) {
47 + return response.json();
48 + })
49 + .then(function (data) {
50 + const trendRepoList = data.slice(0, 2);
51 + handleRepo(trendRepoList);
52 + });
14 }; 53 };
15 54
16 -const init=()=>{ 55 +const init = () => {
17 - handleImage(); 56 + handleImage();
18 - getGithubRepo(); 57 + getGithubRepo();
19 }; 58 };
20 59
21 -if(userContributionsBox){
22 - init();
23 -};
...\ 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;
......
...@@ -11,19 +11,22 @@ ...@@ -11,19 +11,22 @@
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,119 @@ ...@@ -5,24 +5,119 @@
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 + i {
100 + background: transparent;
101 + border: none;
102 + i {
103 + font-size: 1.5rem;
104 + margin: 3px;
105 + }
106 + }
107 + i:hover {
108 + cursor: pointer;
109 + }
110 + }
111 + .home-search__form:hover {
112 + box-shadow: 0px 1px 4px -1px rgba(79, 78, 79, 1);
24 } 113 }
25 } 114 }
115 +
116 + .boxShadow {
117 + box-shadow: 0 13px 10px -5px rgba(50, 50, 93, 0.25),
118 + 0 8px 10px -8px rgba(0, 0, 0, 0.3), 0 -6px 10px -6px rgba(0, 0, 0, 0.025);
119 + }
120 +
26 .home-quote { 121 .home-quote {
27 width: 100%; 122 width: 100%;
28 display: flex; 123 display: flex;
...@@ -30,9 +125,11 @@ ...@@ -30,9 +125,11 @@
30 flex-direction: column; 125 flex-direction: column;
31 justify-content: center; 126 justify-content: center;
32 align-items: center; 127 align-items: center;
33 - padding: 20px; 128 + background-color: #f8f9ff;
34 - box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 129 + padding: 30px;
35 - 0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025); 130 + @extend .boxShadow;
131 +
132 + border-top: 3pt double #7f8bd0;
36 h2 { 133 h2 {
37 font-size: 40px; 134 font-size: 40px;
38 font-family: "Vollkorn", serif; 135 font-family: "Vollkorn", serif;
...@@ -40,57 +137,49 @@ ...@@ -40,57 +137,49 @@
40 } 137 }
41 h3 { 138 h3 {
42 font-size: 25px; 139 font-size: 25px;
43 - opacity: 0.5; 140 + color: rgb(112, 114, 120);
44 font-family: "Vollkorn", serif; 141 font-family: "Vollkorn", serif;
45 - } 142 + font-weight: lighter;
46 - } 143 + 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 } 144 }
68 } 145 }
69 .gotoTrend { 146 .gotoTrend {
70 - margin-top: 50px;
71 display: flex; 147 display: flex;
72 - width: 120%; 148 + margin-top: 50px;
149 + width: 100%;
150 + padding: 40px;
73 text-align: center; 151 text-align: center;
74 flex-direction: column; 152 flex-direction: column;
75 justify-content: center; 153 justify-content: center;
76 align-items: center; 154 align-items: center;
77 - padding: 20px; 155 + background-color: #fffdf1;
78 - box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 156 + 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); 157 +
158 + @extend .boxShadow;
80 h2 { 159 h2 {
81 color: #fb8500; 160 color: #fb8500;
82 - font-size: 25px; 161 + font-family: "Raleway", cursive;
162 + font-size: 30px;
83 font-weight: 700; 163 font-weight: 700;
84 - margin-bottom: 20px; 164 + margin-bottom: 30px;
165 + text-transform: uppercase;
166 + border-bottom: 3pt double $star;
167 + padding-bottom: 10px;
168 + width: 60%;
169 + i {
170 + color: $star;
171 + }
85 } 172 }
86 .gotoTrend-repos { 173 .gotoTrend-repos {
87 display: flex; 174 display: flex;
88 flex-direction: column; 175 flex-direction: column;
89 justify-content: center; 176 justify-content: center;
90 align-items: center; 177 align-items: center;
178 +
91 a { 179 a {
92 - font-size: 18px; 180 + font-size: 20px;
93 margin: 10px 0px; 181 margin: 10px 0px;
182 + font-family: "Raleway", cursive;
94 } 183 }
95 .repoName { 184 .repoName {
96 font-weight: 600; 185 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 + z-index: -1;
52 + content: "";
53 + bottom: 15px;
54 + right: 10px;
55 + left: auto;
56 + background: #777;
57 + -webkit-box-shadow: 0 15px 10px #777;
58 + -moz-box-shadow: 0 15px 10px #777;
59 + box-shadow: 0 15px 10px #777;
60 + -webkit-transform: rotate(-1deg);
61 + -moz-transform: rotate(-1deg);
62 + -o-transform: rotate(-1deg);
63 + -ms-transform: rotate(-1deg);
64 + transform: rotate(-1deg);
22 } 65 }
66 +
67 +//#fff5f6
68 +//#f8f8ff
69 +//#f2f3f8;
70 +//lavender
71 +//#ecedfc
72 +//#e3edf7
73 +//#ddeeff
74 +//#fff6c3
75 +
23 .user-profile { 76 .user-profile {
77 + margin-bottom: 50px;
78 + margin-top: 30px;
79 + margin-right: 23px;
80 + width: 600px;
81 + padding: 10px;
82 + padding-bottom: 50px;
83 + background-color: #fff6c3;
84 + @extend .boxEffect;
85 +
24 .user-profile__column { 86 .user-profile__column {
25 img { 87 img {
26 - width: 100px; 88 + width: 120px;
27 - height: 100px; 89 + height: 120px;
28 object-fit: cover; 90 object-fit: cover;
91 + margin: 5px;
29 } 92 }
30 .user-profile__link { 93 .user-profile__link {
31 display: flex; 94 display: flex;
32 font-family: "Raleway", sans-serif; 95 font-family: "Raleway", sans-serif;
33 - flex-wrap: wrap;
34 font-weight: bold; 96 font-weight: bold;
35 - width: 5px; 97 + font-size: 15px;
36 - color: rgb(92, 92, 221); 98 + color: rgb(70, 70, 216);
99 + margin: 5px;
100 + padding: 2px;
101 + a {
102 + margin: 5px;
103 + margin-right: 15px;
104 + }
105 + }
106 + .user-profile__info {
107 + h3 {
108 + flex: 0 0 100px;
109 + @extend .labelSetting;
110 + }
111 + h4 {
112 + @extend .infoSetting;
113 + }
114 + .user-profile__career {
115 + display: flex;
116 + }
117 + .user-profile__tech {
118 + display: flex;
119 + }
120 + ul {
121 + display: flex;
122 + flex-direction: column;
123 + font-size: 20px;
124 + font-weight: bold;
125 + padding: 2px;
126 + color: rgba(0, 0, 0, 0.85);
127 + margin: 10px;
128 + }
37 } 129 }
38 } 130 }
39 } 131 }
132 +
133 +.user-git {
134 + margin-left: 20px;
135 + .user-status {
136 + .user-status__contributions {
137 + margin-top: 40px;
138 + h3 {
139 + @extend .mainText;
140 + }
141 + span {
142 + color: orange;
143 + display: inline-flex;
144 + font-family: "Raleway", sans-serif;
145 + font-size: 40px;
146 + font-weight: bolder;
147 + margin: 5px;
148 + }
149 + img {
150 + width: 600px;
151 + height: auto;
152 + object-fit: cover;
153 + margin: 5px;
154 + }
155 + }
156 +
157 + .user-repositories {
158 + margin-top: 30px;
159 +
160 + h3 {
161 + margin-top: 15px;
162 + margin-bottom: 10px;
163 + text-transform: uppercase;
164 + @extend .mainText;
165 + }
166 + .user-repo {
167 + margin-top: 50px;
168 + .repoName {
169 + display: inline-flex;
170 + flex-direction: row;
171 + justify-content: flex-end;
172 + font-family: "Raleway", cursive;
173 + font-size: 18px;
174 + font-weight: bold;
175 + padding: 2px;
176 + text-transform: uppercase;
177 + color: #1e1e1ed9;
178 + margin: 5px;
179 + width: 150px;
180 + }
181 + .repoUrl {
182 + display: inline-flex;
183 + flex-direction: row;
184 + font-family: "Roboto", sans-serif;
185 + font-size: 20px;
186 + font-weight: 400;
187 + color: #6f6f6f;
188 + margin: 10px;
189 + }
190 + .repoUrl:hover {
191 + display: inline-flex;
192 + flex-direction: row;
193 + font-family: "Roboto", sans-serif;
194 + font-size: 20px;
195 + font-weight: 400;
196 + text-decoration: underline;
197 + color: #6868af;
198 + margin: 10px;
199 + }
200 + }
201 + }
202 +
203 + .user-status__character {
204 + margin-top: 60px;
205 + margin-left: 10px;
206 + display: flex;
207 + flex-direction: column;
208 + h3 {
209 + @extend .mainText;
210 + }
211 + img {
212 + max-width: 200px;
213 + height: auto;
214 + object-fit: cover;
215 + margin-top: px;
216 + }
217 + }
218 + }
219 +}
220 +
221 +.pageLayout {
222 + display: flex;
223 + flex-direction: row;
224 +}
......
...@@ -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);
...@@ -41,13 +40,12 @@ export const getUserDetail = async (req, res) => { ...@@ -41,13 +40,12 @@ export const getUserDetail = async (req, res) => {
41 secondRepoUrl: repo.secondRepoUrl, 40 secondRepoUrl: repo.secondRepoUrl,
42 totalContributions: totalCon, 41 totalContributions: totalCon,
43 }); 42 });
44 - } catch(error){ 43 + } catch (error) {
45 console.log(error); 44 console.log(error);
46 res.redirect("/"); 45 res.redirect("/");
47 } 46 }
48 }; 47 };
49 48
50 -
51 export const getEditProfile = async (req, res) => { 49 export const getEditProfile = async (req, res) => {
52 const { 50 const {
53 user: { _id: id }, 51 user: { _id: id },
...@@ -156,10 +154,11 @@ export const logout = (req, res) => { ...@@ -156,10 +154,11 @@ export const logout = (req, res) => {
156 res.redirect("/"); 154 res.redirect("/");
157 }; 155 };
158 156
159 -const getRepos = async() =>{ 157 +const getRepos = async () => {
160 - const url = "https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2"; 158 + const url =
161 - const latelyRepos = await axios.get(url).then(function(response){ 159 + "https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2";
162 - return response.data; 160 + const latelyRepos = await axios.get(url).then(function (response) {
161 + return response.data;
163 }); 162 });
164 const fitstRepoName = latelyRepos[0].name; 163 const fitstRepoName = latelyRepos[0].name;
165 const secondRepoName = latelyRepos[1].name; 164 const secondRepoName = latelyRepos[1].name;
...@@ -174,16 +173,22 @@ const getRepos = async() =>{ ...@@ -174,16 +173,22 @@ const getRepos = async() =>{
174 }; 173 };
175 }; 174 };
176 175
177 -const getContributions = async(username) =>{ 176 +const getContributions = async (username) => {
178 const token = process.env.GH_SECRET_SH; 177 const token = process.env.GH_SECRET_SH;
179 const headers = { 178 const headers = {
180 - 'Authorization': `bearer ${token}`, 179 + Authorization: `bearer ${token}`,
181 }; 180 };
182 const body = { 181 const body = {
183 - "query": `query {user(login: "${username}") {contributionsCollection {contributionCalendar {totalContributions}}}}` 182 + query: `query {user(login: "${username}") {contributionsCollection {contributionCalendar {totalContributions}}}}`,
184 }; 183 };
185 - const response = await fetch('https://api.github.com/graphql', { method: "POST", body: JSON.stringify(body), headers: headers }); 184 + const response = await fetch("https://api.github.com/graphql", {
185 + method: "POST",
186 + body: JSON.stringify(body),
187 + headers: headers,
188 + });
186 const totalContributions = await response.json(); 189 const totalContributions = await response.json();
187 - const total = totalContributions.data.user.contributionsCollection.contributionCalendar.totalContributions; 190 + const total =
191 + totalContributions.data.user.contributionsCollection.contributionCalendar
192 + .totalContributions;
188 return total; 193 return total;
189 -};
...\ No newline at end of file ...\ No newline at end of file
194 +};
......
...@@ -4,22 +4,30 @@ block content ...@@ -4,22 +4,30 @@ 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 + i.fa.fa-search(aria-hidden="true")
22 +
23 + .home-quote
24 + h2=quote
25 + h3=author
26 +
20 27
21 .gotoTrend#jsGotoTrend 28 .gotoTrend#jsGotoTrend
22 - h2 Today's Trending Repositories: 29 + h2 Today's Trending Repositories
30 + i.fas.fa-link
23 .gotoTrend-repos#jsGotoTrendRepos 31 .gotoTrend-repos#jsGotoTrendRepos
24 span#jsIndicator Waiting.... 32 span#jsIndicator Waiting....
25 block scripts 33 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,55 +6,69 @@ block content ...@@ -6,55 +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=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=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 - img(src="https://preview.free3d.com/img/2019/12/2269306250288170045/1oe8ymrc-900.jpg" alt="character" style="height:200px; width:250px;") 49 +
50 - .user-repositories 50 + .user-git
51 - .user-repo 51 + .user-status
52 - a(href=firstRepoUrl) 52 + .user-status__contributions
53 - h3 REPO 1 53 + h3 YOU'VE MADE
54 - p=fitstRepoName 54 + span#jsTotalContributions=totalContributions
55 - br 55 + h3 CONTRIBUTIONS!
56 - a(href=secondRepoUrl) 56 + img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart")
57 - h3 REPO 2 57 +
58 - p=secondRepoName 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 +
59 block scripts 73 block scripts
60 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