이세진 / dev-profile

Go to a project
Toggle navigation Toggle navigation pinning
이세진
78125a9f 2 parents aa98d150 6ada939f

Merge branch 'cher' into 'master' 

updated readMe, CSS(editProfile)



See merge request !12
Inline Side-by-side
Showing 12 changed files with 226 additions and 51 deletions
......@@ -7,9 +7,9 @@ KHU-Hub repo: [khuhub.khu.ac.kr/2018102216/dev-profile](https://khuhub.khu.ac.kr
## Main Features
- [ ] your basic profile
- [x] your basic profile
- [x] random quotes **_for developers_** to motivate you :sparkles:
- [ ] the amount of commits you've done on [GitHub](https://github.com/) at a glance
- [x] the amount of commits you've done on [GitHub](https://github.com/) at a glance
- [ ] your most-contributed project on GitHub
- [x] today's trending repositories on GitHub
<br>
......@@ -36,15 +36,23 @@ To run server,
npm run dev:server
```
```bash
npm run dev:assets
```
<br>
### API reference
[Programming Quotes API](quotes.stormconsultancy.co.uk/random.json)
<br>
[Trending-GitHub API](https://docs.trending-github.com/)
[GitHub Contributuions API](https://api.github.com/graphql/)
<br>
\\<!--[GitHub Repositories API](https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2")-->
### License
[MIT](https://choosealicense.com/licenses/mit/)
......
import "../scss/styles.scss";
console.log("main");
\ No newline at end of file
console.log("main");
......
.form-container {
margin: 20px 0px;
display: flex;
flex-direction: column;
padding: 30px;
img {
width: 100px;
height: 100px;
object-fit: cover;
}
.fileUpload {
display: flex;
flex-direction: column;
}
input {
padding: 10px;
display: block;
border: none;
border-bottom: 1px solid #ccc;
width: 40%;
opacity: 0.6;
margin-top: 19px;
font-family: "Roboto", sans-serif;
font-size: 18px;
}
label {
font-family: "Raleway", sans-serif;
font-size: 13px;
font-weight: bold;
padding: 10px;
}
textarea {
font-family: "Roboto", sans-serif;
font-size: 15px;
width: 40%;
opacity: 0.7;
display: block;
margin-top: 20px;
padding: 9px;
}
.box {
input {
background-color: rgb(209, 219, 231);
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;
opacity: 1;
font-size: 20px;
}
}
}
......@@ -10,13 +10,15 @@
justify-content: center;
align-items: center;
h2 {
font-size: 30px;
font-weight: 600;
font-size: 20px;
font-family: "Roboto", sans-serif;
font-weight: 400;
text-transform: uppercase;
margin-bottom: 30px;
}
h1 {
font-size: 50px;
font-family: "Roboto", sans-serif;
font-weight: 800;
text-transform: uppercase;
}
......@@ -32,18 +34,26 @@
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);
h2 {
font-size: 30px;
font-family: "Pattaya", sans-serif;
font-size: 40px;
font-family: "Vollkorn", serif;
margin: 10px 0px;
}
h3 {
font-size: 25px;
opacity: 0.5;
font-family: "Pattaya", sans-serif;
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;
......@@ -59,6 +69,7 @@
.gotoTrend {
margin-top: 50px;
display: flex;
width: 120%;
text-align: center;
flex-direction: column;
justify-content: center;
......
// i.fas.fa-location-arrow {
// display: flex;
// justify-content: center;
// align-items: center;
// width: 30px;
// height: auto;
// object-fit: cover;
// }
h3 {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
font-weight: 700;
font-family: "Roboto", sans-serif;
font-size: 30px;
opacity: 0.8;
}
a {
.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;
}
}
.user-quote {
margin-top: 20px;
h2 {
font-size: 30px;
font-family: "Vollkorn", serif;
margin: 15px 0px;
}
h3 {
display: flex;
margin-right: 100px;
flex-direction: row-reverse;
font-size: 20px;
opacity: 0.5;
font-family: "Vollkorn", serif;
}
}
label {
font-family: "Raleway", sans-serif;
font-size: 13px;
font-weight: bold;
padding: 10px;
}
.user-profile {
.user-profile__column {
img {
width: 100px;
height: 100px;
object-fit: cover;
}
.user-profile__link {
display: flex;
font-family: "Raleway", sans-serif;
flex-wrap: wrap;
font-weight: bold;
width: 5px;
color: rgb(92, 92, 221);
}
}
}
// Config
@import url("https://fonts.googleapis.com/css2?family=Pattaya&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@500&family=Roboto+Condensed:ital,wght@0,400;0,700;1,300&family=Roboto:wght@100;900&family=Vollkorn:ital@1&display=swap");
@import "./config/_variables.scss";
@import "./config/_reset.scss";
......@@ -8,6 +8,9 @@
@import "./components/footer.scss";
// Screens
@import "./screens/home.scss";
@import "./screens/editProfile.scss";
@import "./screens/userDetail.scss";
@import "./screens/join.scss";
// Defaults
......
......@@ -5,20 +5,28 @@ block content
form(action="/users/edit-profile", method="POST", enctype="multipart/form-data")
img(src=`/${loggedUser.avatarUrl}`)
.fileUpload
label(for="photo") Photo
input(type="file", id="photo", name="photo", accept="image/*")
label(for="name") Name
input(type="text", id="name",placeholder="Name", name="name", value=user.name)
label(for="email") Email
input(type="email", id="email", placeholder="Email", name="email", value=user.email)
label(for="school") School
input(type="text", id="school",placeholder="School", name="school", value=user.school)
label(for="blogUrl") Blog Url
input(type="text", id="blogUrl", placeholder="Blog url", name="blogUrl", value=user.blogUrl)
label(for="tech") Enter your tech skills seperated by comma. ex)react,node
textarea(name="tech", id="tech", placeholder="Add Tech you can use")=user.tech
label(for="career") Enter your careers seperated by comma. ex)A company, B competition
textarea(name="career", id="career", placeholder="Add your Career")=user.career
label(for="introduction") Self introduction
textarea(name="introduction", id="introduction", placeholder="Self introduction", maxlength=200)=user.introduction
input(type="submit", value="Update Profile")
\ No newline at end of file
label(for="photo") Photo
.name
input(type="text", id="name",placeholder="Name", name="name", value=user.name)
label(for="name") Name
.email
input(type="email", id="email", placeholder="Email", name="email", value=user.email)
label(for="email") Email
.school
input(type="text", id="school",placeholder="School", name="school", value=user.school)
label(for="school") School
.blog
input(type="text", id="blogUrl", placeholder="Blog url", name="blogUrl", value=user.blogUrl)
label(for="blogUrl") Blog Url
.tech
textarea(name="tech", id="tech", placeholder="Add Tech you can use")=user.tech
label(for="tech") Enter your tech skills seperated by comma. ex)react,node
.career
textarea(name="career", id="career", placeholder="Add your Career")=user.career
label(for="career") Enter your careers seperated by comma. ex)A company, B competition
.intro
textarea(name="introduction", id="introduction", placeholder="Self introduction", maxlength=200)=user.introduction
label(for="introduction") Self introduction
.box
input(type="submit", value="Update Profile")
\ No newline at end of file
......
......@@ -3,7 +3,7 @@ extends layouts/main
block content
.home
.home-title
h2 Develop your value
h2 "Develop your value"
h1 Developer Profile
.home-quote
h2=quote
......@@ -19,7 +19,7 @@ block content
a(href=`/users/${loggedUser._id}`) My profile
.gotoTrend#jsGotoTrend
h2 Today's Trending Repositories
h2 Today's Trending Repositories:
.gotoTrend-repos#jsGotoTrendRepos
span#jsIndicator Waiting....
block scripts
......
......@@ -2,7 +2,7 @@ extends layouts/main
block content
i.fas.fa-location-arrow
h3 Start with GitHub!
h3 Join Us!
a(href="/auth/github")
.login-github
i.fab.fa-github
......
......@@ -4,36 +4,41 @@ block content
.user-quote
h2=quote
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.githubUrl target="_blank") Github
a(href=`//${user.blogUrl}` target="_blank") Blog
.user-profile__column
.user-profile__info
h3(style="display: inline;") NAME:
h4(style="display: inline;")=user.name
br
h3(style="display: inline;") GITHUB NICKNAME:
h4(style="display: inline;")=user.githubName
br
h3(style="display: inline;") EMAIL:
h4(style="display: inline;")=user.email
br
h3(style="display: inline;") SCHOOL:
h4(style="display: inline;")=user.school
h3 TECH:
ul
each tech in user.tech
li=tech
h3 CAREER:
ul
each career in user.career
li=career
h3(style="display: inline;") SELF-INTRODUCTION:
h4(style="display: inline;")=user.introduction
.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
......
scss -> screens/assets둘다
사진 크기 설정하기
youtube와 구글에 scss나 sass 검색마니하기
pug 파일 안에 이미 있는 css 다 지워버리기
css하다보면 pug파일 많이 수정해야할거임
아직 세진님께 불러와지네요..? 최근 repos
\ No newline at end of file