JungSeungHyun

Merge with 'develop' branch and correct conflict

......@@ -121,3 +121,4 @@ package-lock.json
/uploads
/assets
build
.vscode
\ 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
## <br>
### Home Page
1. you can join or login with github.
2. you can search.
![image](/uploads/f33744dd78985b881bfeff6162af0919/image.png)
### Myprofile Page
1. You can see your profile information, github contributions, repositories, status at a glance.
![image](/uploads/63eae503a0eb49b22bbe545c3c0c859a/image.png)
### Editprofile Page
1. You can input or change your informations.
![image](/uploads/55988a03a91f0dcd33656afe0ec04ff6/image.png)
### test installation
This is the usage just for the being.
......@@ -41,33 +54,34 @@ npm run dev:assets
```
<br>
### Installation MongoDB
1. Access to the MongoDB homepage.
![image](/uploads/3d5d283732343d4c5ff4b5c7bd16c78f/image.png)
![homepage](https://oss-2020105657.s3.amazonaws.com/MongoDB+homepage.png)
2. Select options and download MongoDB.
![image](/uploads/46038b5c881bb18074dd8e732804f5d7/image.png)
![image](/uploads/46038b5c881bb18074dd8e732804f5d7/image.png)
3. If this screen appears when installing MongoDB, please select 'complete' and proceed.
![image](/uploads/510d184825d6eaf04dcb2d254f03b918/image.png)
![image](/uploads/510d184825d6eaf04dcb2d254f03b918/image.png)
4. When you enter 'mongo' command in vsc terminal, it is installed well when the screen appears as below.
![image](/uploads/202bf8555f6842938d15c6e3b0e789c1/image.png)
![image](/uploads/202bf8555f6842938d15c6e3b0e789c1/image.png)
### To setting environment variable.
ps. When entering 'mongo' command in vsc terminal, skip this part if it runs well.
1. Find folder where mongoDB is installed, and make a copy of the folder's route.
![image](/uploads/93b13c8df931ef11781d21ad574ee441/image.png)
![image](/uploads/93b13c8df931ef11781d21ad574ee441/image.png)
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'.
![image](/uploads/64278904603d6b3cdb78a0689695344a/image.png)
![image](/uploads/64278904603d6b3cdb78a0689695344a/image.png)
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'.
![image](/uploads/9077ec8854585640dfb526e45cbcb3fb/image.png)
![image](/uploads/9077ec8854585640dfb526e45cbcb3fb/image.png)
4. Create a new environmental variable path using the Mongo db address you copied earlier.
![image](/uploads/0018e1de51ae1c10cc9a5d5bc01fcf9d/image.png)
![image](/uploads/0018e1de51ae1c10cc9a5d5bc01fcf9d/image.png)
5. Please check if Mongo Db is working well in fourth method of "Installation MongoDB".
......@@ -79,7 +93,7 @@ npm run dev:assets
### How to fill .env file.
1. If you clone our repository and downloads required modules, make new '.env' file.
2. Fill in the required values as shown below.
![image](/uploads/cbdf2726a8b5c6326378cd5fa8295726/image.png)
![image](/uploads/cbdf2726a8b5c6326378cd5fa8295726/image.png)
### API reference
......@@ -90,7 +104,9 @@ npm run dev:assets
[GitHub Contributuions API](https://api.github.com/graphql/)
<br>
\\<!--[GitHub Repositories API](https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2")-->
\\<!--[GitHub Repositories API]
### Libraries
### License
......
......@@ -9,7 +9,7 @@ const handleRepo = (list) =>{
list.forEach(element => {
const anchor = document.createElement("a");
anchor.href = element.url;
anchor.target = "_blank"
anchor.target = "_blank";
anchor.innerHTML = `<span class="repoName">${element.name}</span> : ${element.description} - <span class="repoStar">${element.stars} stars</span>`
trendRepoBox.appendChild(anchor);
});
......
const userContributionsBox = document.querySelector(".user-status__contributions");
const totalContributionIndicator = document.getElementById("jsTotalContributions");
const userContributionsBox = document.querySelector(
".user-status__contributions"
);
const totalContributionIndicator = document.getElementById(
"jsTotalContributions"
);
const userCharacterBox = document.querySelector(".user-status__character");
const userRepoBox = document.querySelector(".user-repo");
const githubName = document.getElementById("jsGithubname").innerText;
const githubNickname = document.getElementById("jsGithubNickname");
const URL = `https://api.github.com/users/${githubName}/repos?sort=updated&per_page=2`;
const handleImage = () =>{
const handleImage = () => {
const total = totalContributionIndicator.innerText;
const img = new Image();
if (total>=0 && total<200){
img.src ="https://oss-2020105657.s3.amazonaws.com/first.png";
if (total >= 0 && total < 200) {
img.src = "https://oss-2020105657.s3.amazonaws.com/first.png";
img.alt = "1단계";
}else if (total>=200 && total<600){
img.src ="https://oss-2020105657.s3.amazonaws.com/second.png";
} else if (total >= 200 && total < 600) {
img.src = "https://oss-2020105657.s3.amazonaws.com/second.png";
img.alt = "2단계";
}else if (total>=600 && total<1200){
} else if (total >= 600 && total < 1200) {
img.src = "https://oss-2020105657.s3.amazonaws.com/third.png";
img.alt = "3단계";
}else if (total>=1200 && total<2000){
} else if (total >= 1200 && total < 2000) {
img.src = "https://oss-2020105657.s3.amazonaws.com/four.png";
img.alt = "4단계";
}else{
} else {
img.src = "https://oss-2020105657.s3.amazonaws.com/fifth.png";
img.alt = "5단계";
}
userCharacterBox.appendChild(img);
};
const handleRepo = (list) =>{
list.forEach(element => {
const handleRepo = (list) => {
list.forEach((element) => {
const anchor = document.createElement("a");
anchor.href = element.html_url;
anchor.target = "_blank"
anchor.innerHTML = `<div class =number><span class="repoName">${element.name}</span> : <span class="repoUrl">${element.html_url} </span></div>`
anchor.target = "_blank";
anchor.innerHTML = `<div class =number><span class="repoName">${element.name}</span>:<span class="repoUrl">${element.html_url} </span></div>`;
userRepoBox.appendChild(anchor);
});
};
const getGithubRepo = () =>{
const response = fetch(URL).then(function(response){
return response.json();
const nickname = githubNickname.innerText;
const userId = window.location.href.split("/users/")[1];
const response = fetch(`/users/${userId}/repo`,{headers:{nickname}}).then(function(reponse){
const data = reponse.json();
return data
}).then(function(data){
const trendRepoList = data.slice(0,2);
handleRepo(trendRepoList);
});
};
handleRepo(data);
})
}
const init=()=>{
const init = () => {
handleImage();
getGithubRepo();
};
if(userContributionsBox){
if (userContributionsBox) {
init();
};
\ No newline at end of file
}
......
......@@ -12,7 +12,7 @@ header {
.header__column {
ul {
display: flex;
color: $blue;
color: $lilac;
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
......
$blue: #0063b2;
$skyblue: #9cc3d5;
$lilac: #8495ed;
$navy: #00008b;
$blue: #483d8b;
$star: #ffb700;
$space: 40px;
......
......@@ -4,26 +4,29 @@
flex-direction: column;
padding: 30px;
img {
width: 100px;
height: 100px;
object-fit: cover;
width: 176px;
height: 220px;
object-fit: contain;
}
.fileUpload {
display: flex;
flex-direction: column;
input {
font-size: 13px;
}
}
input {
padding: 10px;
display: block;
border: none;
border-bottom: 1px solid #ccc;
width: 40%;
opacity: 0.6;
padding: 10px;
margin-top: 19px;
font-family: "Roboto", sans-serif;
font-size: 18px;
}
label {
color: #6456bb;
font-family: "Raleway", sans-serif;
font-size: 13px;
font-weight: bold;
......@@ -38,15 +41,29 @@
margin-top: 20px;
padding: 9px;
}
.box {
margin-top: 50px;
input {
background-color: rgb(209, 219, 231);
border-radius: 10px;
background-color: #94a3ec;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11),
0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11),
0 8px 16px rgba(0, 0, 0, 0.11);
font-family: "Raleway", sans-serif;
text-transform: uppercase;
font-weight: bold;
opacity: 1;
font-size: 20px;
color: white;
}
input:hover {
border-radius: 10px;
background-color: #6456bb;
-webkit-transform: scale(0.8);
-ms-transform: scale(0.95);
transform: scale(0.95);
transition: 0.2s ease-in;
}
}
}
......
......@@ -5,24 +5,124 @@
align-items: center;
.home-title {
margin: 40px 0px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
h2 {
font-size: 20px;
font-size: 25px;
font-family: "Roboto", sans-serif;
font-weight: 400;
font-weight: 700;
text-transform: uppercase;
color: rgb(30, 30, 150);
margin-bottom: 30px;
}
h1 {
span {
font-size: 50px;
font-family: "Roboto", sans-serif;
font-weight: 800;
width: 60%;
text-align: center;
text-transform: uppercase;
background-image: linear-gradient(120deg, #acedff 0%, #ffaddd 100%);
background-repeat: no-repeat;
background-size: 100% 0.3em;
background-position: 0 88%;
transition: background-size 200ms ease-in;
&:hover {
background-size: 100% 88%;
}
}
}
.home-link {
margin: 20px;
font-family: "Roboto", sans-serif;
font-size: 30px;
font-weight: 700;
display: flex;
align-items: flex-end;
align-content: flex-end;
justify-items: flex-end;
justify-content: center;
align-items: center;
text-transform: uppercase;
a {
color: $lilac;
&:not(:last-child) {
margin-right: 50px;
}
&:hover {
color: rgb(106, 89, 233);
}
}
}
.home-search {
margin-top: 30px;
margin-bottom: 60px;
display: flex;
justify-content: space-evenly;
align-items: center;
background: #fff;
border-radius: 500px;
padding: 10px 25px 10px 25px;
.home-search__form {
display: flex;
justify-content: space-evenly;
align-items: center;
background: #fff;
border-radius: 500px;
padding: 10px 25px 10px 25px;
border: 1px solid #ccc;
img {
height: 30px;
width: 30px;
}
input {
padding: 5px;
margin-left: 15px;
margin-right: 15px;
width: 300px;
border-radius: 5px;
background: transparent;
border: 1px solid transparent;
outline: none;
font-size: 1.2rem;
overflow-x: scroll;
}
button {
border: none;
background: none;
padding: 0;
i {
background: transparent;
border: none;
i {
font-size: 1.5rem;
margin: 3px;
}
}
i:hover {
cursor: pointer;
}
}
}
.home-search__form:hover {
box-shadow: 0px 1px 4px -1px rgba(79, 78, 79, 1);
}
}
.boxShadow {
box-shadow: 0 13px 10px -5px rgba(50, 50, 93, 0.25),
0 8px 10px -8px rgba(0, 0, 0, 0.3), 0 -6px 10px -6px rgba(0, 0, 0, 0.025);
}
.home-quote {
width: 100%;
display: flex;
......@@ -30,9 +130,11 @@
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
background-color: #f8f9ff;
padding: 30px;
@extend .boxShadow;
border-top: 3pt double #7f8bd0;
h2 {
font-size: 40px;
font-family: "Vollkorn", serif;
......@@ -40,57 +142,49 @@
}
h3 {
font-size: 25px;
opacity: 0.5;
color: rgb(112, 114, 120);
font-family: "Vollkorn", serif;
}
}
.home-search {
display: flex;
padding: 40px;
justify-content: center;
width: 100%;
}
.home-link {
margin-top: 50px;
font-family: "Roboto", sans-serif;
font-size: 30px;
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
a {
color: $blue;
&:not(:last-child) {
margin-right: 50px;
}
font-weight: lighter;
margin-bottom: 10px;
}
}
.gotoTrend {
margin-top: 50px;
display: flex;
width: 120%;
margin-top: 50px;
width: 100%;
padding: 40px;
text-align: center;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
background-color: #fffdf1;
border-top: 3pt double #ffce72;
@extend .boxShadow;
h2 {
color: #fb8500;
font-size: 25px;
font-family: "Raleway", cursive;
font-size: 30px;
font-weight: 700;
margin-bottom: 20px;
margin-bottom: 30px;
text-transform: uppercase;
border-bottom: 3pt double $star;
padding-bottom: 10px;
width: 60%;
i {
color: $star;
}
}
.gotoTrend-repos {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
a {
font-size: 18px;
font-size: 20px;
margin: 10px 0px;
font-family: "Raleway", cursive;
}
.repoName {
font-weight: 600;
......
......@@ -9,32 +9,63 @@
h3 {
display: flex;
justify-content: center;
justify-content: left;
align-items: center;
margin-top: 50px;
margin: 50px 0px;
font-weight: 700;
font-family: "Roboto", sans-serif;
font-size: 30px;
font-size: 27px;
color: rgb(15, 100, 142);
opacity: 0.8;
}
a {
.login-github::before {
transform: scaleX(0);
transform-origin: bottom right;
}
.login-github:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
.login-github::before {
content: " ";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0 0 0 0;
background: hsl(200 100% 80%);
z-index: -1;
transition: transform 0.3s ease;
}
.login-github {
display: flex;
justify-content: center;
border-radius: 25px;
align-items: center;
margin-top: 30px;
height: 80px;
background-color: rgb(93, 32, 167);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11),
0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11),
0 8px 16px rgba(0, 0, 0, 0.11);
font-family: "Raleway", sans-serif;
color: white;
font-size: 50px;
font-weight: 500;
font-family: "Roboto", sans-serif;
font-size: 25px;
position: relative;
font-size: 5rem;
}
html {
block-size: 100%;
inline-size: 100%;
}
body {
min-block-size: 100%;
min-inline-size: 100%;
margin: 0;
box-sizing: border-box;
display: grid;
place-content: center;
}
@media (orientation: landscape) {
body {
grid-auto-flow: column;
}
}
}
......
.user-quote {
margin-top: 20px;
h2 {
font-size: 30px;
font-family: "Vollkorn", serif;
margin: 15px 0px;
margin-top: 40px;
}
h3 {
display: flex;
margin-right: 100px;
flex-direction: row-reverse;
margin-top: 20px;
margin-right: 80px;
font-size: 20px;
opacity: 0.5;
font-family: "Vollkorn", serif;
color: #74828e;
font-weight: lighter;
}
}
label {
.labelSetting {
width: 100px;
display: inline-flex;
flex-direction: row;
justify-content: flex-end;
font-family: "Raleway", sans-serif;
font-size: 13px;
font-weight: bold;
padding: 10px;
margin: 2px;
color: $blue;
}
.infoSetting {
display: inline-flex;
flex-direction: row;
justify-content: flex-end;
font-family: "Roboto", sans-serif;
font-size: 20px;
font-weight: bold;
padding: 2px;
color: #1e1e1ed9;
margin: 10px;
}
.mainText {
display: inline-flex;
font-family: "Raleway", sans-serif;
font-size: 25px;
font-weight: bolder;
margin: 5px;
color: #392f76;
}
.boxEffect {
content: "";
bottom: 15px;
right: 10px;
left: auto;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
}
//#fff5f6
//#f8f8ff
//#f2f3f8;
//lavender
//#ecedfc
//#e3edf7
//#ddeeff
//#fff6c3
.user-profile {
margin-bottom: 50px;
margin-top: 30px;
margin-right: 23px;
width: 600px;
padding: 10px;
padding-bottom: 50px;
background-color: #fff6c3;
@extend .boxEffect;
.user-profile__column {
img {
width: 100px;
height: 100px;
object-fit: cover;
width: 176px;
height: 220px;
object-fit: contain;
margin: 5px;
}
.user-profile__link {
display: flex;
font-family: "Raleway", sans-serif;
flex-wrap: wrap;
font-weight: bold;
width: 5px;
color: rgb(92, 92, 221);
font-size: 15px;
color: rgb(70, 70, 216);
margin: 5px;
padding: 2px;
a {
margin: 5px;
margin-right: 15px;
}
}
.user-profile__info {
h3 {
flex: 0 0 100px;
@extend .labelSetting;
}
h4 {
@extend .infoSetting;
}
.user-profile__career {
display: flex;
}
.user-profile__tech {
display: flex;
}
.user-profile__introduction {
width: 100%;
overflow: hidden;
word-wrap: break-word;
word-break: break-all;
}
ul {
display: flex;
flex-direction: column;
font-size: 20px;
font-weight: bold;
padding: 2px;
color: rgba(0, 0, 0, 0.85);
margin: 10px;
}
}
}
}
.user-git {
margin-left: 20px;
.user-status {
.user-status__contributions {
margin-top: 40px;
h3 {
@extend .mainText;
}
span {
color: orange;
display: inline-flex;
font-family: "Raleway", sans-serif;
font-size: 40px;
font-weight: bolder;
margin: 5px;
}
img {
width: 600px;
height: auto;
object-fit: cover;
margin: 5px;
}
}
.user-repositories {
margin-top: 30px;
h3 {
margin-top: 15px;
margin-bottom: 10px;
text-transform: uppercase;
@extend .mainText;
}
.user-repo {
margin-top: 50px;
.repoName {
display: inline-flex;
flex-direction: row;
justify-content: flex-end;
font-family: "Raleway", cursive;
font-size: 18px;
font-weight: bold;
padding: 2px;
text-transform: uppercase;
color: #1e1e1ed9;
margin: 5px;
width: 150px;
}
.repoUrl {
display: inline-flex;
flex-direction: row;
font-family: "Roboto", sans-serif;
font-size: 20px;
font-weight: 400;
color: #6f6f6f;
margin: 10px;
}
.repoUrl:hover {
display: inline-flex;
flex-direction: row;
font-family: "Roboto", sans-serif;
font-size: 20px;
font-weight: 400;
text-decoration: underline;
color: #6868af;
margin: 10px;
}
}
}
.user-status__character {
margin-top: 60px;
margin-left: 10px;
display: flex;
flex-direction: column;
h3 {
@extend .mainText;
}
img {
max-width: 200px;
height: auto;
object-fit: cover;
margin-top: 20px;
}
}
}
}
.pageLayout {
display: flex;
flex-direction: row;
}
......
......@@ -13,18 +13,17 @@ const getQuote = async (req, res) => {
return { quote, author };
};
export const handleHome = async (req, res) => {
const quote = await getQuote();
res.render("home", {
pageTitle: "Home",
quote: quote.quote,
author: quote.author
author: quote.author,
});
};
export const getUserDetail = async (req, res) => {
try{
try {
const id = req.params.id;
const quote = await getQuote();
const user = await User.findById(id);
......@@ -34,15 +33,14 @@ export const getUserDetail = async (req, res) => {
quote: quote.quote,
author: quote.author,
user,
totalContributions: totalCon,
totalContributions: totalCon
});
} catch(error){
} catch (error) {
console.log(error);
res.redirect("/");
}
};
export const getEditProfile = async (req, res) => {
const {
user: { _id: id },
......@@ -84,7 +82,7 @@ export const postEditProfile = async (req, res) => {
);
req.session.passport.user = updatedUser;
//console.log(updatedUser);
res.redirect("/users/edit-profile");
res.redirect(`/users/${id}`);
} catch (error) {
console.log(error);
res.redirect("/");
......@@ -132,7 +130,7 @@ export const githubLoginCallback = async (_, __, profile, done) => {
avatarUrl,
githubUrl,
name,
email,
email
});
return done(null, newUser);
}
......@@ -151,16 +149,40 @@ export const logout = (req, res) => {
res.redirect("/");
};
const getContributions = async(username) =>{
const getContributions = async (username) => {
const token = process.env.GH_SECRET_SH;
const headers = {
'Authorization': `bearer ${token}`,
Authorization: `bearer ${token}`,
};
const body = {
"query": `query {user(login: "${username}") {contributionsCollection {contributionCalendar {totalContributions}}}}`
query: `query {user(login: "${username}") {contributionsCollection {contributionCalendar {totalContributions}}}}`,
};
const response = await fetch('https://api.github.com/graphql', { method: "POST", body: JSON.stringify(body), headers: headers });
const response = await fetch("https://api.github.com/graphql", {
method: "POST",
body: JSON.stringify(body),
headers: headers,
});
const totalContributions = await response.json();
const total = totalContributions.data.user.contributionsCollection.contributionCalendar.totalContributions;
const total =
totalContributions.data.user.contributionsCollection.contributionCalendar
.totalContributions;
return total;
};
export const getRepos = async(req,res) =>{
try{
const githubNickname = req.headers.nickname
const URL = `https://api.github.com/users/${githubNickname}/repos?sort=updated&per_page=2`;
const response = await fetch(URL,{
headers: {
authorization: `token ${process.env.GH_SECRET_SH}`
}
}).then(function (response) {
return response.json();
}).then(function (data) {
return res.send(data);
});
}catch(error){
console.log(error);
}
}
\ No newline at end of file
......
import express from "express";
import {
getEditProfile,
getRepos,
getUserDetail,
handleUsers,
postEditProfile,
......@@ -20,5 +21,6 @@ userRouter.post(
);
userRouter.get("/:id", getUserDetail);
userRouter.get("/:id/repo", getRepos);
export default userRouter;
......
......@@ -4,13 +4,8 @@ block content
.home
.home-title
h2 "Develop your value"
h1 Developer Profile
.home-quote
h2=quote
h3=author
.home-search
form.home-search__form
input(type="text" id="jsInput" placeholder="Google 검색")
span Developer Profile
.home-link
if !loggedUser
a(href="/join") Join
......@@ -18,8 +13,22 @@ block content
else
a(href=`/users/${loggedUser._id}`) My profile
.home-search
form.home-search__form
a(href="https://google.com" target="_blank")
img(src="https://user-images.githubusercontent.com/48612525/86507657-d54fbd80-bd8e-11ea-866b-ac26496481ae.png" alt="google icon")
input(type="text" id="jsInput" placeholder="Google 검색")
button
i.fa.fa-search(aria-hidden="true")
.home-quote
h2=quote
h3=author
.gotoTrend#jsGotoTrend
h2 Today's Trending Repositories:
h2 Today's Trending Repositories
i.fas.fa-link
.gotoTrend-repos#jsGotoTrendRepos
span#jsIndicator Waiting....
block scripts
......
extends layouts/main
block content
i.fas.fa-location-arrow
h3 Join Us!
h3 Click Below to Join Us!
a(href="/auth/github")
.login-github
i.fab.fa-github
span Join with GitHub
\ No newline at end of file
......
extends layouts/main
block content
i.fas.fa-location-arrow
h3 Login with GitHub!
h3 Click Below to Login with GitHub!
a(href="/auth/github")
.login-github
i.fab.fa-github
......
......@@ -6,48 +6,69 @@ block content
h3=author
hr
.pageLayout
.user-profile
.user-profile__column
img(src=`/${user.avatarUrl}`)
.user-profile__link
a(href=user.githubUrl target="_blank") Github
a(href=user.githubUrl target="_blank") GitHub
i.fab.fa-github
a(href=`//${user.blogUrl}` target="_blank") Blog
i.fas.fa-link
.user-profile__column
.user-profile__info
.user-profile__name
h3 NAME:
h3 NAME
h4=user.name
.user-profile__github
h3 GITHUB NICKNAME:
h4#jsGithubname=user.githubName
h3 &nbsp; &nbsp; &nbsp;&nbsp;GITHUB
br
|NICKNAME
h4#jsGithubNickname=user.githubName
.user-profile__email
h3 EMAIL:
h3 EMAIL
h4=user.email
.user-profile__school
h3 SCHOOL:
h3 SCHOOL
h4=user.school
.user-profile__tech
h3 TECH:
h3 TECH
ul
each tech in user.tech
li=tech
.user-profile__career
h3 CAREER:
h3 CAREER
ul
each career in user.career
li=career
li.career_list=career
.user-profile__introduction
h3 SELF-INTRODUCTION:
h3 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; SELF
br
|INTRODUCTION
h4=user.introduction
hr
.user-git
.user-status
.user-status__contributions
h3 YOU'VE MADE
span#jsTotalContributions=totalContributions
h3 CONTRIBUTIONS!
img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart")
.user-status__character
h3 Your step
.user-repositories
.user-repo
h3 Repositories
h3 Your recent updated repositories:
.user-status__character
h3 YOUR STATUS
block scripts
script(src="/static/js/githubInfo.js")
......
scss -> screens/assets둘다
사진 크기 설정하기
youtube와 구글에 scss나 sass 검색마니하기
pug 파일 안에 이미 있는 css 다 지워버리기
css하다보면 pug파일 많이 수정해야할거임
아직 세진님께 불러와지네요..? 최근 repos
\ No newline at end of file