mirror of
https://github.com/neosubhamoy/neosubhamoy-portfolio.git
synced 2025-12-18 22:22:59 +05:30
(feat): added hoverable project info tooltip card
This commit is contained in:
@@ -13,4 +13,5 @@ SMTP_USER = "Your SMTP Sender Username Here"
|
||||
SMTP_PASS = "Your SMTP Sender Password Here"
|
||||
SMTP_SENDTO = "Your Email Inbox Address to Receive Emails"
|
||||
SMTP_PORT = 465
|
||||
ANALYTICS_ID = "Your Google Analytics Tracking ID Here"
|
||||
ANALYTICS_ID = "Your Google Analytics Tracking ID Here"
|
||||
GITHUB_ACCESS_TOKEN = "Your GitHub Access Token Here"
|
||||
@@ -4,6 +4,7 @@
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
<link rel="stylesheet" href="assets/extra-style.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/shift-away.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale-subtle.css"/>
|
||||
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
|
||||
<link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js" integrity="sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
|
||||
BIN
htdocs/assets/images/projects/default.jpg
Normal file
BIN
htdocs/assets/images/projects/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 218 KiB After Width: | Height: | Size: 218 KiB |
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 64 KiB |
@@ -34,3 +34,16 @@ tippy('#shareclosebutton', {
|
||||
touch: false
|
||||
});
|
||||
|
||||
tippy('.projectitem', {
|
||||
content(reference) {
|
||||
const projectId = reference.getAttribute('data-template');
|
||||
const projectTippyTemplate = document.getElementById(projectId);
|
||||
return projectTippyTemplate.innerHTML;
|
||||
},
|
||||
allowHTML: true,
|
||||
placement: 'right',
|
||||
theme: 'neosubhamoy',
|
||||
animation: 'scale-subtle',
|
||||
touch: false
|
||||
});
|
||||
|
||||
|
||||
@@ -610,6 +610,10 @@ video {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.bottom-2 {
|
||||
bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.bottom-\[-10rem\] {
|
||||
bottom: -10rem;
|
||||
}
|
||||
@@ -674,6 +678,10 @@ video {
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.top-2 {
|
||||
top: 0.5rem;
|
||||
}
|
||||
|
||||
.top-3 {
|
||||
top: 0.75rem;
|
||||
}
|
||||
@@ -1034,6 +1042,10 @@ video {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.h-2 {
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
.h-20 {
|
||||
height: 5rem;
|
||||
}
|
||||
@@ -1099,6 +1111,14 @@ video {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.h-3 {
|
||||
height: 0.75rem;
|
||||
}
|
||||
|
||||
.h-4 {
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.max-h-\[45vh\] {
|
||||
max-height: 45vh;
|
||||
}
|
||||
@@ -1204,6 +1224,14 @@ video {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.w-3 {
|
||||
width: 0.75rem;
|
||||
}
|
||||
|
||||
.w-4 {
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.max-w-\[45vw\] {
|
||||
max-width: 45vw;
|
||||
}
|
||||
@@ -1538,6 +1566,10 @@ video {
|
||||
background-color: rgba(249, 115, 22, 0.2);
|
||||
}
|
||||
|
||||
.bg-\[rgba\(255\2c 255\2c 255\2c 0\.15\)\] {
|
||||
background-color: rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.bg-\[rgba\(255\2c _255\2c _255\2c _0\.25\)\] {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
@@ -1574,6 +1606,35 @@ video {
|
||||
background-color: rgb(30 41 59 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-bg_third {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(38 51 74 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-\[rgba\(0\2c 0\2c 0\2c 0\.15\)\] {
|
||||
background-color: rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.bg-\[rgba\(0\2c 0\2c 0\2c 0\.20\)\] {
|
||||
background-color: rgba(0,0,0,0.20);
|
||||
}
|
||||
|
||||
.bg-\[rgba\(255\2c 255\2c 255\2c 0\.2\)\] {
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.bg-\[rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.bg-\[rgba\(56\2c 189\2c 248\2c 0\.5\)\] {
|
||||
background-color: rgba(56,189,248,0.5);
|
||||
}
|
||||
|
||||
.bg-\[rgba\(56\2c 189\2c 248\2c 0\.7\)\] {
|
||||
background-color: rgba(56,189,248,0.7);
|
||||
}
|
||||
|
||||
.bg-gradient-to-r {
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
}
|
||||
@@ -1832,14 +1893,6 @@ video {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.leading-relaxed {
|
||||
line-height: 1.625;
|
||||
}
|
||||
|
||||
.leading-loose {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.text-\[rgb\(22\2c _163\2c _74\)\] {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(22 163 74 / var(--tw-text-opacity));
|
||||
@@ -1905,6 +1958,10 @@ video {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.opacity-\[0\.70\] {
|
||||
opacity: 0.70;
|
||||
}
|
||||
|
||||
.opacity-\[0\.75\] {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
32
htdocs/core/github_api_functions.php
Normal file
32
htdocs/core/github_api_functions.php
Normal file
@@ -0,0 +1,32 @@
|
||||
<?php
|
||||
// function to fetch star and fork count of the given github repo
|
||||
function fetch_repo_stats($repoName) {
|
||||
$url = "https://api.github.com/repos/" . $repoName;
|
||||
$token = $_ENV['GITHUB_ACCESS_TOKEN'];
|
||||
$ch = curl_init();
|
||||
|
||||
curl_setopt($ch, CURLOPT_URL, $url);
|
||||
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
|
||||
curl_setopt($ch, CURLOPT_USERAGENT, 'PHP script');
|
||||
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
|
||||
"Authorization: token $token"
|
||||
));
|
||||
|
||||
$response = curl_exec($ch);
|
||||
|
||||
if ($response === false) {
|
||||
$error = curl_error($ch);
|
||||
curl_close($ch);
|
||||
echo "Error fetching data for repo '$repoName': $error";
|
||||
return [null, null];
|
||||
}
|
||||
|
||||
curl_close($ch);
|
||||
$repoData = json_decode($response, true);
|
||||
|
||||
$stargazersCount = isset($repoData['stargazers_count']) ? $repoData['stargazers_count'] : null;
|
||||
$forksCount = isset($repoData['forks_count']) ? $repoData['forks_count'] : null;
|
||||
|
||||
return [$stargazersCount, $forksCount];
|
||||
}
|
||||
?>
|
||||
14
htdocs/core/utility_functions.php
Normal file
14
htdocs/core/utility_functions.php
Normal file
@@ -0,0 +1,14 @@
|
||||
<?php
|
||||
// function to format given number in youtube views style
|
||||
function format_number_in_yt_style($num) {
|
||||
if ($num >= 1000000000) {
|
||||
return number_format($num / 1000000000, 1) . 'B';
|
||||
} elseif ($num >= 1000000) {
|
||||
return number_format($num / 1000000, 1) . 'M';
|
||||
} elseif ($num >= 1000) {
|
||||
return number_format($num / 1000, 1) . 'K';
|
||||
} else {
|
||||
return $num;
|
||||
}
|
||||
}
|
||||
?>
|
||||
@@ -2,6 +2,8 @@
|
||||
require 'core/connection.php';
|
||||
require 'core/host_config.php';
|
||||
require 'core/query_functions.php';
|
||||
require 'core/github_api_functions.php';
|
||||
require 'core/utility_functions.php';
|
||||
require 'core/write_dataset.php';
|
||||
write_dataset($conn);
|
||||
|
||||
@@ -95,10 +97,88 @@ $years = create_project_years_array($conn);
|
||||
//fetch all projects by year and show it
|
||||
while ($project = $projects -> fetch_assoc()) {
|
||||
echo "
|
||||
<a class='projectitem text-accent_three my-2 ml-7 last:mb-3' href='".$project['link']."' target='_blank'>".$project['name'].($project['shortdes'] != "" ? ' - '. $project['shortdes'] : '')."</a>
|
||||
<a data-template='project".$project['id']."' class='projectitem text-accent_three my-2 ml-7 last:mb-3' href='".$project['link']."' target='_blank'>".$project['name'].($project['shortdes'] != "" ? ' - '. $project['shortdes'] : '')."</a>
|
||||
<div class='hidden'>
|
||||
<div id='project".$project['id']."'>
|
||||
<div class='p-1'>
|
||||
<div class='wrapper rounded-lg overflow-hidden my-1 relative'>
|
||||
<img class='opacity-[0.70]' src='".$project['thumbnail']."' alt='".strtolower($project['name'])."'>
|
||||
<span class='absolute top-2 left-2 text-sm bg-bg_third rounded-full px-2'>";
|
||||
if($project['platform'] === "website") {
|
||||
echo "<i class='fa-regular fa-window-maximize'></i> ".$project['platform'];
|
||||
} else if ($project['platform'] === "android") {
|
||||
echo "<i class='fa-brands fa-android'></i> ".$project['platform'];
|
||||
} else if ($project['platform'] === "ios" || $project['platform'] === "macos") {
|
||||
echo "<i class='fa-brands fa-apple'></i> ".$project['platform'];
|
||||
} else if ($project['platform'] === "windows") {
|
||||
echo "<i class='fa-brands fa-windows'></i> ".$project['platform'];
|
||||
} else if ($project['platform'] === "linux") {
|
||||
echo "<i class='fa-brands fa-linux'></i> ".$project['platform'];
|
||||
} else if ($project['platform'] === "crossplatform") {
|
||||
echo "<i class='fa-solid fa-shuffle'></i> ".$project['platform'];
|
||||
} else if ($project['platform'] === "bot") {
|
||||
echo "<i class='fa-solid fa-robot'></i> ".$project['platform'];
|
||||
} else if ($project['platform'] === "extention") {
|
||||
echo "<i class='fa-solid fa-puzzle-piece'></i> ".$project['platform'];
|
||||
}
|
||||
echo"
|
||||
</span>
|
||||
";
|
||||
if($project['is_open_sourced'] && isset($project['repo'])) {
|
||||
list($stargazersCount, $forksCount) = fetch_repo_stats($project['repo']);
|
||||
if(isset($stargazersCount) && isset($forksCount)) {
|
||||
echo "
|
||||
<div class='absolute bottom-2 left-2 flex items-center'>
|
||||
<span class='text-xs flex items-center bg-bg_third rounded px-2 py-1 mr-2'>
|
||||
<svg class='mr-2 h-4 w-4 text-accent_primary' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg> ".format_number_in_yt_style($stargazersCount)."
|
||||
</span>
|
||||
<span class='text-xs flex items-center bg-bg_third rounded px-2 py-1'>
|
||||
<svg class='mr-2 h-4 w-4 text-accent_primary' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='18' r='3'/><circle cx='6' cy='6' r='3'/><circle cx='18' cy='6' r='3'/><path d='M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9'/><path d='M12 12v3'/></svg> ".format_number_in_yt_style($forksCount)."
|
||||
</span>
|
||||
</div>
|
||||
";
|
||||
}
|
||||
}
|
||||
else if($project['user_count']) {
|
||||
echo "
|
||||
<span class='absolute bottom-2 left-2 text-xs flex items-center bg-bg_third rounded px-2 py-1'>
|
||||
<svg class='mr-2 h-4 w-4 text-accent_primary' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg> ".format_number_in_yt_style($project['user_count'])."+ users
|
||||
</span>
|
||||
";
|
||||
}
|
||||
echo"
|
||||
</div>
|
||||
<div class='flex justify-between items-center mt-3'>
|
||||
<h6 class='text-lg font-bold'>".$project['name']."</h6>
|
||||
<span class='projectstatus flex items-center text-xs bg-bg_third rounded-full px-2'>";
|
||||
if($project['status'] === "active") {
|
||||
echo "<i class='fa-solid fa-circle h-2 w-2 mr-1' style='color: #1fff4f'></i> ".$project['status'];
|
||||
}
|
||||
else if($project['status'] === "archived") {
|
||||
echo "<i class='fa-solid fa-circle h-2 w-2 mr-1' style='color: #ff9e1f'></i> ".$project['status'];
|
||||
}
|
||||
else if ($project['status'] === "inactive") {
|
||||
echo "<i class='fa-solid fa-circle h-2 w-2 mr-1' style='color: #fc3328'></i> ".$project['status'];
|
||||
}
|
||||
echo"
|
||||
</span>
|
||||
</div>
|
||||
<p class='text-xs text-accent_three my-1'>".$project['description']."</p>
|
||||
<div class='flex items-center flex-wrap overflow-hidden'>";
|
||||
$stack = explode(",",$project['stack']);
|
||||
foreach ($stack as $stack_item) {
|
||||
echo "
|
||||
<span class='projectstackitem flex items-center text-xs bg-[rgba(255,255,255,0.15)] text-accent_three rounded px-2 mr-2 mt-2'>".$stack_item."</span>
|
||||
";
|
||||
}
|
||||
echo"
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
";
|
||||
}
|
||||
|
||||
|
||||
echo <<<HTML
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user