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
## <br>
### Developers
### test installation
This is the usage just for the being.
......@@ -51,7 +53,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
......
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 URL =
"https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2";
const handleImage = () =>{
const total = totalContributionIndicator.innerText;
console.log(total);
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";
img.alt = "1단계";
} 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) {
img.src = "https://oss-2020105657.s3.amazonaws.com/third.png";
img.alt = "3단계";
} else if (total >= 1200 && total < 2000) {
img.src = "https://oss-2020105657.s3.amazonaws.com/four.png";
img.alt = "4단계";
} else {
img.src = "https://oss-2020105657.s3.amazonaws.com/fifth.png";
img.alt = "5단계";
}
userCharacterBox.appendChild(img);
};
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>`;
userRepoBox.appendChild(anchor);
});
};
const getGithubRepo = () =>{
console.log("Get Api here");
const getGithubRepo = () => {
const response = fetch(URL)
.then(function (response) {
return response.json();
})
.then(function (data) {
const trendRepoList = data.slice(0, 2);
handleRepo(trendRepoList);
});
};
const init=()=>{
handleImage();
getGithubRepo();
const init = () => {
handleImage();
getGithubRepo();
};
if(userContributionsBox){
init();
};
\ No newline at end of file
if (userContributionsBox) {
init();
}
......
......@@ -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;
......
......@@ -11,19 +11,22 @@
.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,119 @@
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;
}
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 +125,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 +137,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 {
z-index: -1;
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;
width: 120px;
height: 120px;
object-fit: cover;
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;
}
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: px;
}
}
}
}
.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);
......@@ -41,13 +40,12 @@ export const getUserDetail = async (req, res) => {
secondRepoUrl: repo.secondRepoUrl,
totalContributions: totalCon,
});
} catch(error){
} catch (error) {
console.log(error);
res.redirect("/");
}
};
export const getEditProfile = async (req, res) => {
const {
user: { _id: id },
......@@ -156,10 +154,11 @@ export const logout = (req, res) => {
res.redirect("/");
};
const getRepos = async() =>{
const url = "https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2";
const latelyRepos = await axios.get(url).then(function(response){
return response.data;
const getRepos = async () => {
const url =
"https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2";
const latelyRepos = await axios.get(url).then(function (response) {
return response.data;
});
const fitstRepoName = latelyRepos[0].name;
const secondRepoName = latelyRepos[1].name;
......@@ -174,16 +173,22 @@ const getRepos = async() =>{
};
};
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;
};
\ No newline at end of file
};
......
......@@ -4,22 +4,30 @@ 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
a(href="/login") Login
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 검색")
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
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,55 +6,69 @@ block content
h3=author
hr
.user-profile
.user-profile__column
img(src=`/${user.avatarUrl}`)
.user-profile__link
a(href=user.githubUrl target="_blank") Github
a(href=`//${user.blogUrl}` target="_blank") Blog
.user-profile__column
.user-profile__info
.user-profile__name
h3 NAME:
h4=user.name
.user-profile__github
h3 GITHUB NICKNAME:
h4=user.githubName
.user-profile__email
h3 EMAIL:
h4=user.email
.user-profile__school
h3 SCHOOL:
h4=user.school
.user-profile__tech
h3 TECH:
ul
each tech in user.tech
li=tech
.user-profile__career
h3 CAREER:
ul
each career in user.career
li=career
.user-profile__introduction
h3 SELF-INTRODUCTION:
h4=user.introduction
hr
.user-status
.user-status__contributions
span#jsTotalContributions=totalContributions
img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart")
.user-status__character
h3 Your step
img(src="https://preview.free3d.com/img/2019/12/2269306250288170045/1oe8ymrc-900.jpg" alt="character" style="height:200px; width:250px;")
.user-repositories
.user-repo
a(href=firstRepoUrl)
h3 REPO 1
p=fitstRepoName
br
a(href=secondRepoUrl)
h3 REPO 2
p=secondRepoName
.pageLayout
.user-profile
.user-profile__column
img(src=`/${user.avatarUrl}`)
.user-profile__link
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
h4=user.name
.user-profile__github
h3 &nbsp; &nbsp; &nbsp;&nbsp;GITHUB
br
|NICKNAME
h4=user.githubName
.user-profile__email
h3 EMAIL
h4=user.email
.user-profile__school
h3 SCHOOL
h4=user.school
.user-profile__tech
h3 TECH
ul
each tech in user.tech
li=tech
.user-profile__career
h3 CAREER
ul
each career in user.career
li.career_list=career
.user-profile__introduction
h3 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; SELF
br
|INTRODUCTION
h4=user.introduction
.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-repositories
.user-repo
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