Skip to content

Instantly share code, notes, and snippets.

@harunpehlivan

harunpehlivan/angular-profile-with-github-api.markdown

Created September 29, 2022 21:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save harunpehlivan/6f38a1d7d98dd77ae98c5d6a34b133a2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save harunpehlivan/6f38a1d7d98dd77ae98c5d6a34b133a2 to your computer and use it in GitHub Desktop.
Download ZIP
Angular Profile with Github api
Raw
index.html
<html>
<head>
</head>
<body>
<div id="main" ng-cloak="" class="buttondemoBasicUsage" ng-controller="myProfileCtrl" ng-cloak ng-app="myProfile">
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-3">
<div id="profile" class="clearfix">
<img src="{{myPicture}}" alt="Rommel's profile picture">
<div class="name">{{profileName}}</div>
<div class="profile_description">Front-end Developer</div>
<div class="availability">Available for work</div>
</div>
</div>
<div class="col-sm-8 col-md-9">
<nav>
<span ng-click = 'alertMe()' value = 'myPersonalInformation'>Personal Information</span>
<span ng-click = 'showSkills()' class = 'skil' value = 'mySkills'>Skills</span>
<span ng-click = '' value = ''>Trivia</span>
<span ng-click = 'showContacts()' value = 'myContacts'>Contact</span>
<span ng-click = '' value = ''>Git Repositories</span>
</nav>
<div class="row">
<div class="col-sm-10 col-sm-offset-2 col-md-8">
<br></br>
<p>{{myBio}}</p>
<br></br>
<md-button ng-click = 'search()' class="btn btn-contact scroll">Repositories</md-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<md-button href="#contact-me" class="btn btn-contact scroll">Get in contact</md-button>
<ul ng-repeat="data in datas">
<li><md-button href={{data.url}} target="blank" ng-click = "viewContents()" style="color: #f4f6f9">{{data.name}}</md-button>
<!-- <ul ng-repeat="info in infos">
<li>
<md-button style="color: #f4f6f9">{{info.name}}</md-button>
</li>
</ul> -->
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Skills Part-->
<div id="skills">
<div class="container" id="skills-card">
<div class="row">
<div class="col-sm-2 col-xs-6">
<img src="http://cboom.eu/img/html5.png" alt="HTML5">
</div>
<div class="col-sm-2 col-xs-6">
<img src="http://cboom.eu/img/css3.png" alt="CSS3">
</div>
<div class="col-sm-2 col-xs-6">
<img src="http://cboom.eu/img/sass.png" alt="Sass">
</div>
<div class="col-sm-2 col-xs-6">
<img src="http://cboom.eu/img/js.png" alt="JavaScript">
</div>
<div class="col-sm-2 col-xs-6 ">
<img src="http://cboom.eu/img/jQuery.png" alt="jQuery">
</div>
<div class="col-sm-2 col-xs-6 ">
<img src="http://cboom.eu/img/angularjs.png" alt="Angular JS">
</div>
<div class="col-sm-2 col-xs-6">
<img src="http://cboom.eu/img/grunt.png" alt="Grunt">
</div>
<div class="col-sm-2 col-xs-6">
<img src="http://cboom.eu/img/git.png" alt="Git">
</div>
<div class="col-sm-2 col-xs-6">
<img src="https://raw.githubusercontent.com/ServiceStack/Assets/master/img/wikis/vb-header.png" alt="Visual Basic">
</div>
<div class="col-sm-2 col-xs-6">
<img src="https://ds1hty5qgiz73.cloudfront.net/wp-content/uploads/2014/04/nodejs.png" alt="Node J">
</div>
<div class="col-sm-2 col-xs-6">
<img src="http://www.freepngimg.com/download/java/7-2-java-png.png" alt="Java">
</div>
<div class="col-sm-2 col-xs-6">
<img src="http://cboom.eu/img/photoshop.png" alt="Photoshop">
</div>
</div>
</div>
</div>
<!--End of Skills Part-->
<!--Contact Part-->
<div id="contact-me">
<div class="container">
<div class="row">
<div class="col-sm-6 contacts">
<h2>Contact me</h2>
<p> Currently looking to join a productive team and develop amazing projects. </p>
<p> If you have a job that requires my skill set, please get in touch.</p>
<p><i class="fa fa-phone" aria-hidden="true"></i>+90 552 741 0904</p>
<p><i class="fa fa-envelope" aria-hidden="true"></i><a href="mailto:trcmnhp@hotmail.com" class="email" target = "blank" >trcmnhp@hotmail.com</a>
</p>
</div>
<div class="col-sm-6">
<form id="contactForm2" class="form-horizontal" role="form">
<input class="form-control col-sm-6" id="contactName" placeholder="Your name .." type="text">
<input class="form-control col-sm-6" id="contactEmail" placeholder="Your email .." type="email">
<textarea class="form-control" rows="5" id="message" placeholder="Message ..."></textarea>
<button id="submit-form2" type="submit" class="btn btn-contact">Send message</button>
<div id="status2">
<span id="msgSubmit2">Your message was sent. Thank you!</span>
</div>
</form>
</div>
</div>
<div class="abs_border"></div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6">
2019 &copy HARUN PEHLİVAN . Front-end development.
</div>
<div class="col-sm-6"></div>
</div>
</div>
</footer>
</div>
<!--Contact Part-->
</body>
</html>
Raw
script.js
angular.module("myProfile", ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
//responsible for all function in angularjs
.controller("myProfileCtrl", function($scope, $http){
var myName = $http.get('https://api.github.com/users/harunpehlivan').then(function(apiDta) {
$scope.profileName = apiDta.data.name
$scope.gitHubName = apiDta.data.login
$scope.myURL = apiDta.data.html_url
$scope.myBio = apiDta.data.bio
$scope.myContents = apiDta.data.contents_url
$scope.myPicture = apiDta.data.avatar_url
console.log(apiDta.data)
});
$scope.alertMe = function(){
alert('No Experience yet')
}
$scope.search = function() {
$http.get('https://api.github.com/users/harunpehlivan/repos?').then(function(apiData) {
let array = apiData.data;
array.forEach(function(item) {
item.url = item.url.replace('api.', "");
item.url = item.url.replace('repos/', "");
});
$scope.datas = array
// console.log(apiData.data)
});
}
$scope.viewContents = function() {
$http.get('https://api.github.com/users/boslagu/repos?').then(function(apiData) {
let array = apiData.data;
array.forEach(function(item) {
item.url = item.url.replace('users', "repos") + '/contents';
$http.get(item.url).then(function(apiDatas) {
let array1 = apiDatas.data;
// console.log(apiDatas);
$scope.infos = array1
});
console.log(item.url);
});
// console.log(item.url)
});
}
$scope.showSkills = function() {
$scope.mySkills = true
$scope.myPersonalInformation = true
$scope.myContacts = false
}
$scope.showPersonalInformation = function() {
$scope.mySkills = false
$scope.myPersonalInformation = false
$scope.myContacts = false
}
$scope.showContacts = function() {
$scope.mySkills = false
$scope.myPersonalInformation = true
$scope.myContacts = true
}
})
Raw
scripts
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.4/angular-material.js"></script>
Raw
style.scss
// 00 - General settings
// Colors
$white: #fff;
$shadow-blue: #008eb8;
$p-text: #86a6b6;
$main-blue: #008eb8;
$l-blue: #2be0f0;
a, a:link, a:visited, a:hover, a:active {
text-decoration: none;
transition: all .15s linear;
color: $main-blue;
font-family: 'Source Sans Pro', sans-serif;
}
.textColor {
// text-decoration: none;
// transition: all .15s linear;
color: black;
// font-family: 'Source Sans Pro', sans-serif;
}
// Fonts
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700'); // font-family: 'Source Sans Pro', sans-serif;
@import url('https://fonts.googleapis.com/css?family=Source+Serif+Pro:400,700'); // font-family: 'Source Serif Pro', serif;
body {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
}
p {
font-size: 16px;
color: $p-text;
@media (max-width: 768px) {
font-size: 14px;
}
}
h1, h2, h3 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
}
h2 {
text-transform: uppercase;
font-size: 36px;
}
// 01 - Main section
#main {
background: #eee;
background-image: url("https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1568895074/abstract-background-webdesign-patterns-web-colors-abstractbg-dark-quality-206299_nprt9p.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
color: $white;
padding-bottom: 100px;
min-height: 700px;
@media (max-width: 768px) {
background-position: right center;
}
h1 {
font-size: 50px;
padding-top: 150px;
margin-bottom: 20px;
@media (max-width: 1200px) {
padding-top: 100px;
}
@media (max-width: 768px) {
padding-top: 30px;
font-size: 30px;
span {
display: block;
}
}
}
p {
color: $white;
letter-spacing: 0.5px;
}
.btn-contact {
background: transparent;
border: 2px solid $l-blue;
padding: 8px 30px;
margin-top: 20px;
color: $white;
text-transform: uppercase;
letter-spacing: 1px;
&:hover {
color: $white;
}
@media (max-width: 768px) {
margin-bottom: 50px;
width: 100%;
}
}
}
#profile {
text-align: center;
padding: 30px 0 30px 0;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.4);
transition: all .25s linear;
max-height: 100%;
font-family: 'Source Sans Pro', sans-serif;
@media (max-width: 768px) {
padding: 15px 0;
}
&:hover {
box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.6);
}
img {
border: 5px solid #438cb0;
border-radius: 50%;
max-height: 180px;
max-width: 100%;
box-shadow: 5px 3px 15px rgba(9, 52, 105, 0.8);
@media (max-width: 768px) {
max-width: 70px;
margin-left: 50px;
float: left;
}
}
.name {
margin-top: 20px;
font-size: 150%;
font-weight: 700;
@media (max-width: 768px) {
margin-top: 10px;
}
}
.profile_description {
margin: 0 0 20px 0;
}
.availability {
color: $l-blue;
font-size: 22px;
letter-spacing: 2px;
font-family: 'Source Sans Pro', sans-serif;
@media (max-width: 768px) {
display: none;
}
}
}
nav {
padding-top: 50px;
text-align: right;
@media (max-width: 768px) {
padding-top: 20px;
text-align: center;
}
a, a:link, a:visited, a:active {
color: $white;
padding: 10px 20px;
border-bottom: none;
letter-spacing: 1px;
@media (min-width: 768px) {
&:last-child {
padding-right: 0;
}
}
&:hover {
color: $l-blue;
}
}
}
// 02 - Skills section
#skills {
padding: 0 0 50px 0;
position: relative;
@media (max-width: 768px) {
}
img {
display: block;
margin: 0 auto;
max-height: 100px;
margin-bottom: 35px;
max-width: 100%;
@media (max-width: 768px) {
max-width: 80%;
max-height: 70px;
}
}
#skills-card {
background: $white;
margin-top: +50px;
padding: 50px 15px 15px 15px;
box-shadow: 0px 0px 10px $shadow-blue;
transition: all .25s linear;
&:hover {
box-shadow: 0px 0px 15px $shadow-blue;
}
}
}
// 03 - Projects section
#work {
padding: 50px 0 150px 0;
@media (max-width: 768px) {
padding-bottom: 100px;
}
h2 {
color: $shadow-blue;
margin-bottom: 60px;
text-align: center;
@media (max-width: 768px) {
margin-top: 0px;
font-size: 30px;
text-transform: capitalize;
text-align: left;
}
}
h3 {
color: $main-blue;
margin-bottom: 0px;
margin-top: 0px;
}
img {
max-width: 100%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
transition: all .15s linear;
&:hover {
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
}
@media (max-width: 768px) {
margin-bottom: 20px;
}
}
.short-desc {
margin: 0;
}
.label {
margin: 0 5px 3px 0;
font-size: 90%;
display: inline-block;
}
.specs {
padding-bottom: 10px;
.label {
background: $main-blue;
}
}
.code {
// padding-top: 10px;
.label {
border: 2px solid $l-blue;
background: none;
color: $main-blue;
padding: 7px 14px;
}
}
@media (max-width: 768px) {
.fa {
font-size: 16px;
margin-right: 8px;
width: 10px;
}
}
}
#mireba {
margin-bottom: 100px;
@media (max-width: 768px) {
margin-bottom: 50px;
}
}
#vasidan {
@media (max-width: 768px) {
text-align: left;
}
}
// 04. CV
#cv {
margin-top: 50px;
text-align: center;
color: $main-blue;
.download-my-cv {
font-size: 30px;
font-weight: bold;
a {
width: 100%;
display: block;
height: 100%;
color: $main-blue;
&hover {
color: $main-blue;
}
}
small {
opacity: 0.6;
font-size: 70%;
}
}
.fa {
font-size: 100px;
margin-right: 20px;
vertical-align: middle;
color: $main-blue;
}
@media (max-width: 768px) {
text-align: left;
.fa {
font-size: 50px;
}
a {
font-size: 16px;
}
}
}
#cv-card {
padding-top: 30px;
padding-bottom: 20px;
background: $white;
margin-top: -70px;
margin-bottom: -70px;
box-shadow: 0px 0px 7px $shadow-blue;
z-index: 10;
position: relative;
transition: all .25s linear;
&:hover {
box-shadow: 0px 0px 11px $shadow-blue;
}
}
// 05. Contacts section
#contact-me {
padding: 200px 0 0px 0;
background: #eee;
background-image: url("https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1559730796/ellipse-line-dark-blue_pdtzwf.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
color: $white;
position: relative;
@media (max-width: 768px) {
padding-top: 150px;
}
h2 {
font-size: 36px;
font-weight: bold;
margin-top: 100px;
}
h3 {
color: $main-blue;
font-size: 30px;
text-transform: uppercase;
font-weight: bold;
}
p {
color: $white;
}
a {
color: $l-blue;
}
.fa {
width: 30px;
font-size: 20px;
color: $white;
}
}
#contactForm2 {
padding-bottom: 70px;
input, textarea {
background: rgba(255,255,255,0.3);
color: $white;
border: none;
border-radius: 15px;
&::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: rgba(255,255,255, 0.7);
font-style: italic;
}
&::-moz-placeholder {
/* Firefox 19+ */
color: rgba(255,255,255, 0.7);
font-style: italic;
}
&:-ms-input-placeholder {
/* IE 10+ */
color: rgba(255,255,255, 0.7);
font-style: italic;
}
&:-moz-placeholder {
/* Firefox 18- */
color: rgba(255,255,255, 0.7);
font-style: italic;
}
}
.form-control {
margin-bottom: 10px;
border-radius: 0;
}
.btn-contact {
background: rgba(0,0,0,0.25);
border-radius: 0px;
color: #fff;
padding: 15px 30px;
text-transform: uppercase;
width: 100%;
transition: all .15s linear;
&:hover {
color: $white;
border: 1px solid $l-blue;
}
}
@media (max-width: 768px) {
padding: 50px 0;
h2 {
margin-top: 0;
}
h3 {
font-size: 17px;
}
#contactForm2 {
padding: 0;
border: none;
}
i.fa {
min-width: 30px;
font-size: 30px;
}
img {
margin-bottom: 0;
}
}
}
#status2 {
height: 40px;
padding-top: 10px;
}
#msgSubmit2 {
display: none;
color: $main-blue;
}
// 06. Footer
footer {
padding: 20px 0;
background: rgba(0,0,0,0.25);
color: $white;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://material.angularjs.org/1.1.4/docs.css" rel="stylesheet" />
<link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.4/angular-material.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment