Skip to content

Commit

Permalink
portfolio update
Browse files Browse the repository at this point in the history
  • Loading branch information
@usman-khan-01
usman-khan-01 committed Dec 14, 2023
1 parent f137f93 commit 8da1ab3
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 98 deletions.
48 changes: 8 additions & 40 deletions assets/css/site.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
}
}

/*#region portfolio */
.nav-pills .nav-item .nav-link {
padding: 15px 15.5px;
text-align: center;
Expand All @@ -15,51 +16,28 @@
border-radius: 8px;
}

/*#region portfolio */
/* The Modal (background) */
/* modal (background) */
.modal {
/* Hidden by default */
display: none;
/* Stay in place */
position: fixed;
/* Sit on top */
z-index: 99;
/* Location of the box */
padding-top: 100px;
padding-top: 65px;
left: 0;
top: 0;
/* Full width */
width: 100%;
/* Full height */
height: 100%;
/* Enable scroll if needed */
overflow: auto;
/* Fallback color */
background-color: rgb(0, 0, 0);
/* Black w/ opacity */
background-color: rgba(0, 0, 0, 0.9);
background-color: rgba(0, 0, 0, 0.7);
}

/* Modal Content (image) */
/* modal content (image) */
.modal-content {
margin: auto;
display: block;
width: 75%;
/* max-width: 75%; */
width: 60%;
max-width: 60%;
}

/* Caption of Modal Image */
/* #caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
} */

@keyframes zoom {
from {
transform: scale(0.4)
Expand Down Expand Up @@ -100,21 +78,12 @@
}
}

/* Add Animation */
/* .modal-content,
#caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
} */

.out {
animation-name: zoom-out;
animation-duration: 0.6s;
}

/* 100% Image Width on Smaller Screens */
/* 100% image width on smaller screens */
@media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
Expand Down Expand Up @@ -198,7 +167,6 @@
right: 1%;
z-index: 9999;
position: fixed;
/* position: sticky; */
z-index: 1;
}

Expand Down
74 changes: 41 additions & 33 deletions assets/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ getPlatformName = (s) => console.log(s[0].link);
//#endregion cloud data

//#region local data
$.getJSON("./assets/data/data.json", function (data) {
$.getJSON("./assets/data/data.json", (data) => {
//#region basic info
$(".navbar-brand, .name").append(data.fullName);
$(".category").append(data.profession);
Expand All @@ -50,20 +50,20 @@ getPlatformName = (s) => console.log(s[0].link);
"Industry",
"Languages",
];
$.each(basicInformation, (i, value) =>
$(".pInfo .text-uppercase").append(value + ":" + "<br><br>")
);
$.each(data.basicInfo, (i, value) =>
$.each(basicInformation, (i, value) => {
$(".pInfo .text-uppercase").append(value + ":" + "<br><br>");
});
$.each(data.basicInfo, (i, value) => {
$(".pInfoValue").append(
value != null && value === `${/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/g}`
? `<a href="mailto:${value}">${value}</a><br><br>`
: value + "<br><br>"
)
);
);
});
//#endregion basic info

//#region skills
$.each(data.skills, function (i, skill) {
$.each(data.skills, (i, skill) => {
$(".skills").append(`
<div class="col-md-4 skill">
<div class="progress-container progress-primary"><span class="progress-badge">${skill.name}</span>
Expand All @@ -79,40 +79,48 @@ getPlatformName = (s) => console.log(s[0].link);
//#endregion skills

//#region portfolio
$.each(data.portfolioHeadings, function (i, ph) {
$.each(data.portfolioHeadings, (i, ph) => {
$(".portfolio-heading").append(`
<li class="nav-item ${ph.link}"><a class="nav-link ${ph.active}" data-toggle="tab" href="#${ph.link}" role="tablist">${ph.name}</a></li>
`);
});

$.each(data.portfolios, function (i, p) {
$(`#portfolios .container`).append(`
<div class="projects tab-pane row"></div>
<div class="modal" id="portfolioModal">
<img class="modal-content" id="portfolioImg">
</div>
`);

$.each(data.portfolios, (i, p) => {
Portfolios(p);

var modal = document.getElementById("portfolioModal");
var img = document.getElementById(`${p.hId}`);
var modal = document.getElementById("portfolioModal");
var modalImg = document.getElementById("portfolioImg");
// var captionText = document.getElementById("caption");

console.log(`${img.baseURI.replace("index.html", "")}${p.imageUrl}`);

// display modal
$(img).click(function () {
$(img).click(() => {
modal.style.display = "block";
modalImg.src = this.src;
modalImg.src = `${img.baseURI.replace("index.html", "")}${p.imageUrl}`;
modalImg.alt = this.alt;
// captionText.innerHTML = this.alt;
});

// close the modal
$(modal).click(function () {
portfolioImg.className += "out";
setTimeout(function () {
$(modal).click(() => {
modalImg.className += "out";
setTimeout(() => {
modal.style.display = "none";
portfolioImg.className = "modal-content";
}, 200);
modalImg.className = "modal-content";
}, 400);
});
});
//#endregion portfolio

//#region experiences
$.each(data.experiences, function (i, exp) {
$.each(data.experiences, (i, exp) => {
$(".experiences-list").append(`
<div class="card">
<div class="row education">
Expand All @@ -136,7 +144,7 @@ getPlatformName = (s) => console.log(s[0].link);
//#endregion experiences

//#region education
$.each(data.education, function (i, edu) {
$.each(data.education, (i, edu) => {
$(".education-list").append(`
<div class="card">
<div class="row education">
Expand All @@ -160,7 +168,7 @@ getPlatformName = (s) => console.log(s[0].link);
//#endregion education

//#region testimonials
$.each(data.testimonials, function (i, testimonial) {
$.each(data.testimonials, (i, t) => {
$(".carousel-indicators").append(
`<li class="carousel-indicator" data-target="#cc-Indicators" dataSlideTo="0"></li>`
);
Expand All @@ -170,10 +178,10 @@ getPlatformName = (s) => console.log(s[0].link);
<div class="row testimonial">
<div class="col-lg-2 col-md-3 cc-reference-header">
<a target="_blank">
<img src="${testimonial.imageUrl}" alt="${testimonial.name}'s Image" />
<img src="${t.imageUrl}" alt="${t.name}'s Image" />
</a>
<div class="h5 pt-2">${testimonial.name}</div> <p class="category">${testimonial.country}</p> </div>
<div class="col-lg-10 col-md-9"> <p>${testimonial.review}</p> </div>
<div class="h5 pt-2">${t.name}</div> <p class="category">${t.country}</p> </div>
<div class="col-lg-10 col-md-9"> <p>${t.review}</p> </div>
</div>
</div>`);
} else {
Expand All @@ -182,10 +190,10 @@ getPlatformName = (s) => console.log(s[0].link);
<div class="row testimonial">
<div class="col-lg-2 col-md-3 cc-reference-header">
<a target="_blank">
<img src="${testimonial.imageUrl}" alt="${testimonial.name}'s Image" />
<img src="${t.imageUrl}" alt="${t.name}'s Image" />
</a>
<div class="h5 pt-2">${testimonial.name}</div> <p class="category">${testimonial.country}</p> </div>
<div class="col-lg-10 col-md-9"> <p>${testimonial.review}</p> </div>
<div class="h5 pt-2">${t.name}</div> <p class="category">${t.country}</p> </div>
<div class="col-lg-10 col-md-9"> <p>${t.review}</p> </div>
</div>
</div>`);
}
Expand Down Expand Up @@ -225,7 +233,7 @@ getPlatformName = (s) => console.log(s[0].link);
//#endregion pdf data

//#region generate pdf
$(document).on("click", "#gpdf", function () {
$(document).on("click", "#gpdf", () => {
DOC.fromHTML($("#pdf").html(), 20, 0, {
width: 550,
pagesplit: true,
Expand Down Expand Up @@ -255,8 +263,8 @@ function ShowOrHidePortfoliosBasedOnCondition(id) {
}

function Portfolios(p) {
$(`.portfolios`).append(`
<div class="tab-content gallery mt-5 col-md-4" style="padding-bottom: 20px" id="${p.hId}">
$(`.projects`).append(`
<div id="${p.hId}" class="tab-content gallery mt-5 col-md-4" style="padding-bottom: 20px">
<div class="cc-porfolio-image img-raised" data-aos="fade-up" data-aos-anchor-placement="top-bottom">
<figure class="cc-effect">
<img src="${p.imageUrl}" id="${p.hId}-img" alt="${p.name}" />
Expand All @@ -267,7 +275,7 @@ function Portfolios(p) {
</figcaption>
</figure>
</div>
</div>
</div>
`);
ShowOrHidePortfoliosBasedOnCondition(p.hId);
}
Expand Down
25 changes: 0 additions & 25 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,36 +179,11 @@
</ul>
</div>
</div>
<div class="portfolios row tab-pane"></div>
<!-- <div class="row" id="aspnet"></div>
<div class="row" id="angular"></div>
<div class="row" id="wordpress"></div> -->
</div>
<div class="modal" id="portfolioModal" >
<img class="modal-content" id="portfolioImg">
<!-- <div id="caption"></div> -->
</div>
</div>
</div>
<!--#endregion portfolios -->

<!--#region experiences -->
<!-- <div class="container experiences">
<div class="experience-item">
<h4>Developer</h4>
<h5>2019 Present</h5>
<p><em>Company</em></p>
<p>
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, soluta rem inventore
perspiciatis voluptate vero fuga nesciunt, minus quae quia est modi! Quas vitae, impedit maxime
illo esse earum et!</li>
</ul>
</p>
</div>
</div> -->
<!--#endregion experiences -->

<!--#region experiences -->
<div class="section" id="experiences">
<div class="container cc-education experiences-list">
Expand Down

0 comments on commit 8da1ab3

Please sign in to comment.