Portfolio

Directory

File	Folder Link
M - Portfolio.php	\\SYNAS\Allan\DOCUMENTATION\Module\Portfolio\rckuc\wolf\app\models
V - all files	\\SYNAS\Allan\DOCUMENTATION\Module\Portfolio\rckuc\wolf\app\views
C - PortfolioController.php	\\SYNAS\Allan\DOCUMENTATION\Module\Portfolio\rckuc\wolf\app\controllers
backend.php	\\SYNAS\Allan\DOCUMENTATION\Module\Portfolio\rckuc\wolf\app\layouts
get-portfolio.php	\\SYNAS\Allan\DOCUMENTATION\Module\Portfolio\rckuc\wolf\frontend
style.css (backend)	\\SYNAS\Allan\DOCUMENTATION\Module\Portfolio\rckuc\wolf\admin\themes\black_and_white
portfolio.js (backend)	\\SYNAS\Allan\DOCUMENTATION\Module\Portfolio\rckuc\wolf\admin\javascripts
default.css (frontend)	\\SYNAS\Allan\DOCUMENTATION\Module\Portfolio\rckuc\public\themes\rckuc\css
portfolio.js (frontend)	\\SYNAS\Allan\DOCUMENTATION\Module\Portfolio\rckuc\public\themes\rckuc\js
.sql	\\SYNAS\Allan\DOCUMENTATION\Module\Portfolio

Step 1

Update: backend.php

Insert scripts file in <head> section
Add new tab for "Portfolio"

<head>
    <link href="<?php echo URI_PUBLIC; ?>wolf/admin/themes/<?php echo Setting::get('theme'); ?>/switch_button.css" id="css_theme" media="screen" rel="Stylesheet" type="text/css" />
    ...
    <script type="text/javascript" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/portfolio.js"></script>
</head>

<!-- Add 'Portfolio' Tab -->
<body id="body_<?php echo $ctrl.'_'.Dispatcher::getAction(); ?>">
    <ul>
        <li id="page-plugin" class="plugin"><a href="<?php echo get_url('portfolio'); ?>"<?php if ($ctrl=='portfolio') echo ' class="current"'; ?>><?php echo __('Portfolio'); ?></a></li>
    </ul>
</body>

<head>
    <link href="<?php echo URI_PUBLIC; ?>wolf/admin/themes/<?php echo Setting::get('theme'); ?>/switch_button.css" id="css_theme" media="screen" rel="Stylesheet" type="text/css" />
    ...
    <script type="text/javascript" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/portfolio.js"></script>
</head>

<!-- Add 'Portfolio' Tab -->
<body id="body_<?php echo $ctrl.'_'.Dispatcher::getAction(); ?>">
    <ul>
        <li id="page-plugin" class="plugin"><a href="<?php echo get_url('portfolio'); ?>"<?php if ($ctrl=='portfolio') echo ' class="current"'; ?>><?php echo __('Portfolio'); ?></a></li>
    </ul>
</body>

Step 2

Update: style.css

/* Portfolio */
.portfolio_checkbox {
  max-height: 15rem;
  overflow-y: auto;
  padding: 1rem;
  background-color: lightgray;
  display: flex;
  flex-direction: column;
}

.portfolio_checkbox p {
  margin: 0 1rem 0.5rem 1rem;
}

.portfolio_checkbox .selected_checkbox,
.portfolio_checkbox .other_checkbox {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.portfolio_checkbox .checkbox_wrapper {
  background-color: white;
  border-radius: 10px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  transition: background-color 0.3s ease;
}

.portfolio_checkbox .checkbox_wrapper:hover {
  background-color: rgb(235, 235, 235);
}

.portfolio_checkbox label {
  cursor: pointer;
  flex: 1;
  position: relative;
  padding: 0.5rem 0.5rem 0.5rem 4rem;
}

.portfolio_checkbox label h4 {
    margin: 0;
}

.portfolio_checkbox label input[type="checkbox"] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    accent-color: #007bff;
    width: 18px;
    height: 18px;
    margin-right: 0.5rem;
    cursor: pointer;
}

.portfolio_checkbox .sort_button {
  display: flex;
  align-items: center;
  margin: 0 1rem;
}

.portfolio_checkbox .other_checkbox .sort_button {
  display: none;
}

.portfolio_checkbox .sort_button.hidden {
  display: none;
}

.portfolio_checkbox .sort_button > img {
  cursor: grab;
  padding: 0.5rem;
  border-radius: 100%;
  height: 1rem;
  transition: all 0.3s ease;
}

.portfolio_checkbox .sort_button > img:hover {
  background-color: lightgray;
}


#portfolio_section_description + span,
#portfolio_highlight_description + span {
  width: 100% !important;
 }

/* ------------ Portfolio Section ------------ */
#layout-container #layout-image {
  padding: 0.5rem;
  border: 1px solid black;
  width: max-content;
}

#layout-container #layout-image > img {
  height: 200px;
}

/* Portfolio */
.portfolio_checkbox {
  max-height: 15rem;
  overflow-y: auto;
  padding: 1rem;
  background-color: lightgray;
  display: flex;
  flex-direction: column;
}

.portfolio_checkbox p {
  margin: 0 1rem 0.5rem 1rem;
}

.portfolio_checkbox .selected_checkbox,
.portfolio_checkbox .other_checkbox {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.portfolio_checkbox .checkbox_wrapper {
  background-color: white;
  border-radius: 10px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  transition: background-color 0.3s ease;
}

.portfolio_checkbox .checkbox_wrapper:hover {
  background-color: rgb(235, 235, 235);
}

.portfolio_checkbox label {
  cursor: pointer;
  flex: 1;
  position: relative;
  padding: 0.5rem 0.5rem 0.5rem 4rem;
}

.portfolio_checkbox label h4 {
    margin: 0;
}

.portfolio_checkbox label input[type="checkbox"] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    accent-color: #007bff;
    width: 18px;
    height: 18px;
    margin-right: 0.5rem;
    cursor: pointer;
}

.portfolio_checkbox .sort_button {
  display: flex;
  align-items: center;
  margin: 0 1rem;
}

.portfolio_checkbox .other_checkbox .sort_button {
  display: none;
}

.portfolio_checkbox .sort_button.hidden {
  display: none;
}

.portfolio_checkbox .sort_button > img {
  cursor: grab;
  padding: 0.5rem;
  border-radius: 100%;
  height: 1rem;
  transition: all 0.3s ease;
}

.portfolio_checkbox .sort_button > img:hover {
  background-color: lightgray;
}


#portfolio_section_description + span,
#portfolio_highlight_description + span {
  width: 100% !important;
 }

/* ------------ Portfolio Section ------------ */
#layout-container #layout-image {
  padding: 0.5rem;
  border: 1px solid black;
  width: max-content;
}

#layout-container #layout-image > img {
  height: 200px;
}

Step 3

Update: wolf\plugins\ckeditor -> index.php
To enable Ckeditor

Update: function ckeditor_filter_setup()

in $controllers add one more field for "|portfolio|portfolio_section|portfolio_highlight"

function ckeditor_filter_setup() {
    $config_path = (USE_MOD_REWRITE) ? 'ckeditor/' : '../../?/wolf/plugins/ckeditor/';
    $controllers = '(page|snippet|donate|story|volunteer|project|documentation|source_code|announcement|form_builder|portfolio|testimonial|client|portfolio_section|portfolio_highlight)';
    $actions = '(add|edit|create|view|table)';
    $pattern = '/^'.ADMIN_DIR.'\/'.$controllers.'\/'.$actions.'/';

    if (preg_match($pattern, CURRENT_URI)) {
        Plugin::addJavascript('ckeditor', 'scripts/ckeditor/ckeditor.js');
        Plugin::addJavascript('ckeditor', 'scripts/init.js');
        /* nasty way of including scripts */
        Plugin::$javascripts[] = $config_path.'ckeditor_config.js';
        // load it AFTER ckeditor_config!
//         Plugin::addJavascript('ckeditor', 'scripts/user/config.js');
    }

}

function ckeditor_filter_setup() {
    $config_path = (USE_MOD_REWRITE) ? 'ckeditor/' : '../../?/wolf/plugins/ckeditor/';
    $controllers = '(page|snippet|donate|story|volunteer|project|documentation|source_code|announcement|form_builder|portfolio|testimonial|client|portfolio_section|portfolio_highlight)';
    $actions = '(add|edit|create|view|table)';
    $pattern = '/^'.ADMIN_DIR.'\/'.$controllers.'\/'.$actions.'/';

    if (preg_match($pattern, CURRENT_URI)) {
        Plugin::addJavascript('ckeditor', 'scripts/ckeditor/ckeditor.js');
        Plugin::addJavascript('ckeditor', 'scripts/init.js');
        /* nasty way of including scripts */
        Plugin::$javascripts[] = $config_path.'ckeditor_config.js';
        // load it AFTER ckeditor_config!
//         Plugin::addJavascript('ckeditor', 'scripts/user/config.js');
    }

}

Step 4

Add 3 New Snippet:

portfolio
portfolio-detail
featured-portfolio

Refer \\SYNAS\Allan\DOCUMENTATION\Module\Portfolio\rckuc\snippet

Refer \\SYNAS\Allan\DOCUMENTATION\Module\Portfolio\rckuc\snippet

Step 5

Update: default.css
Specially design for Ilead's website

/* ------------------PORTFOLIO------------------ */
body#portfolio #main-content {
	min-height: unset;
}

body#portfolio .breadcrumb .wrapper {
	flex-direction: row;
	padding-top: 1rem;
}

#pf-container {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

#pf-container #filter-tag {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

#pf-container #filter-tag p {
	font-weight: bold;
}

#pf-container #filter-tag a.tag {
	min-width: 3rem;
	border-radius: var(--border-radius);
	padding: 0.5rem 1rem;
	border: 1px solid black;
	background-color: white;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
}

#pf-container #filter-tag a.tag.active,
#pf-container #filter-tag a.tag:hover {
	color: white;
	border: 1px solid var(--color-pink);
	background-color: var(--color-pink);
}

#pf-container .pf-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 1rem;
}

#pf-container .pf-list.loading {
	position: relative;
	pointer-events: none;
	opacity: 0.7;
}

/* Create the spinner using ::after */
#pf-container .pf-list.loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 48px;
	height: 48px;
	border: 4px solid black;
	border-top-color: white;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: spin 1s linear infinite;
	z-index: 10;
}

/* Spinner animation */
@keyframes spin {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

#pf-container .pf-list .pf-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem;
	box-shadow: var(--box-shadow);
	animation: fadeInScale 0.5s ease forwards;
	box-sizing: border-box;
	width: calc((100% - 2rem) / 3);
	max-width: calc((100% - 2rem) / 3);
}

@keyframes fadeInScale {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

#pf-container .pf-list .pf-card .pf-image {
	overflow: hidden;
	width: 100%;
	aspect-ratio: 3 / 2;
}

#pf-container .pf-list .pf-card .pf-image img {
	width: 100%;
	transition: transform 1s ease-in-out;
}

#pf-container .pf-list .pf-card .pf-image img:hover {
 	transform: translateY(-66.6666%); /* special design for website long img porfolio */
 	/* transform: scale(1.1); */
}

#pf-container .pf-list .pf-card .pf-content {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

#pf-container .pf-list .pf-card .pf-content a {
	color: var(--color-pink);
	font-weight: bold;
}

#pf-container .pf-list .pf-card .pf-content a:hover {
	text-decoration: underline;
}

#pf-container .pf-list .pf-card .pf-content > div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 1rem;
}

#pf-container .pf-list .pf-card .pf-content > p {
	text-align: left;
}

#pf-container .pf-list .pf-card .pf-content div p {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: center;
}

#pf-container .pf-list .pf-card .pf-content div p img {
	height: 1.5rem;
}

#pf-container .pf-list .pf-card .pf-tag {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: auto;
}

#pf-container .pf-list .pf-card .pf-tag div.tag {
	min-width: 3rem;
	border-radius: var(--border-radius);
	padding: 0.5rem 1rem;
	color: white;
	border: 1px solid var(--color-pink);
	background-color: var(--color-pink);
	text-align: center;
}

#pf-container .pf-list .pf-card .pf-tag div.tag.inactive {
	color: black;
	border: 1px solid black;
	background-color: white;
}

#pf-container #pf-pagination {
	display: none;
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: center;
}

#pf-container #pf-pagination > a.inactive {
	border-color: lightgray;
	background-color: lightgray;
	cursor: no-drop;
}

#pf-container #pf-pagination #page_number {
	display: flex;
	gap: 1rem;
	font-weight: bold;
}

#pf-container #pf-pagination #page_number a.page-link.active {
	text-decoration: underline;
	color: var(--color-pink);
}

@media only screen and (max-width: 1024px) {
	#pf-container .pf-list .pf-card {
		/* width: calc((100% - 1rem) / 2); */
		width: calc((100% - 1rem) / 2);
		max-width: calc((100% - 1rem) / 2);
	}

	.btn-pink {
		min-width: 6rem !important;
	}
}

@media only screen and (max-width: 768px) {
	#pf-container .pf-list .pf-card {
		width: 100%;
		max-width: unset;
	}
}

/* ---------------------- Portfolio Detail ------------------------- */
#pf-banner {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding-bottom: var(--wrapper-padding-bottom);
	align-items: stretch;
}

#pf-banner > div {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 2rem;
	text-align: center;
}

#pf-banner > div:first-child,
#pf-banner > div:last-child {
	justify-content: space-between;
}

#pf-banner > div:first-child > div:first-child {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

#pf-banner > div:first-child > img {
	aspect-ratio: 1 / 1;
	height: 7.5rem;
}

#pf-banner > div:first-child > div:first-child > p {
	text-align: left;
}

#pf-banner > div:nth-child(2) {
	flex-wrap: wrap;
	text-align: center;
}

#pf-banner > div:nth-child(2) > p {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: center;
}

#pf-banner > div:nth-child(2) > p > img {
	height: 2rem;
}

#pf-banner > div:last-child > a:last-child {
	text-decoration: underline;
}

#pf-banner > div:last-child > a:last-child:hover {
	opacity: 0.7;
}

@media only screen and (max-width: 768px) {
	#pf-banner > div {
		justify-content: center;
	}

	#pf-banner > div:first-child {
		flex-direction: column-reverse;
		gap: 1rem;
	}
	
	#pf-banner > div:first-child > div:first-child {
		align-items: center;
	}

	#pf-banner > div:first-child > div:first-child > p {
		text-align: center;
	}

	#pf-banner > div:nth-child(2) {
		flex-direction: column;
		gap: 0.5rem;
	}

	#pf-banner > div:nth-child(2) > p {
		gap: 0.2rem;
	}

	#pf-banner > div:nth-child(2) > p > img {
		height: 1rem;
	}

	#pf-banner > div:last-child {
		flex-direction: column-reverse;
		gap: 1rem;
	}
}

#tag-service {
	display: flex;
	align-items: stretch;
}

#tag-service > div:first-child {
	background-color: var(--color-pink);
}

#tag-service > div:last-child {
	background-color: var(--color-blue);
}

#tag-service > div {
	width: 50%;
	padding: 2rem 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	color: white;
}

#tag-service > div > h3 {
	color: white;
	margin-bottom: 0.5;
}

@media only screen and (max-width: 768px) {
	#tag-service {
		flex-direction: column;
	}

	#tag-service > div {
		width: 100%;
	}
}

#pf-section > .container:nth-child(even)  {
	background-color: var(--color-blue);
	color: white;
}

#pf-section > .container .section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2rem;
}

#pf-section > .container .section > img {
	width: 100%;
}

/* ------ Grid Layout ------ */
#pf-section .grid-layout {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	padding: var(--wrapper-padding-top) var(--wrapper-padding-right);
	max-width: 1920px;
	margin: auto;
}

#pf-section .grid-layout > .card {
	box-sizing: border-box;
	box-shadow: var(--box-shadow);
}

#pf-section .grid-layout > .card > div.image {
	aspect-ratio: 4 / 3;
}

#pf-section .grid-layout > .card > div.image > img {
	box-sizing: border-box; 
	width: 100%;
}

@media only screen and (max-width: 1024px) {
	#pf-section .grid-layout {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (max-width: 768px) {
	#pf-section .grid-layout {
		grid-template-columns: repeat(1, 1fr);
	}
}

/* ------ Dynamic Flow Layout ------ */
#pf-section .dynamic-flow-layout {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 3rem;
	padding-bottom: var(--wrapper-padding-bottom);
}
 
#pf-section .dynamic-flow-layout > .card {
	display: flex;
	justify-content: flex-end;
	position: relative;
}

#pf-section .dynamic-flow-layout > .card:nth-child(odd) {
	justify-content: flex-start;
}

#pf-section .dynamic-flow-layout > .card > div.image {
	aspect-ratio: 4 / 3;
	width: 25rem;
	border-radius: var(--border-radius);
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	box-shadow: var(--box-shadow);
}

#pf-section .dynamic-flow-layout > .card:nth-child(odd) > div.image {
	left: unset;
	right: 0;
}

#pf-section .dynamic-flow-layout > .card > div.image > img {
	box-sizing: border-box; 
	width: 100%;
}

#pf-section .dynamic-flow-layout > .card > div.detail {
	width: calc(100% - 12.5rem);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	border-radius: var(--border-radius);
	border: 5px solid var(--color-pink);
	margin-top: 9rem;
	min-height: 16rem;
}

#pf-section .dynamic-flow-layout > .card:nth-child(odd) > div.detail {
	justify-content: flex-start;
}

#pf-section .dynamic-flow-layout > .card > div.detail > div {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 0 3rem;
	width: calc(100% - 12.5rem - 5px);
	text-align: center;
}

@media only screen and (max-width: 900px) {
	#pf-section .dynamic-flow-layout {
		align-items: center;
	}

	#pf-section .dynamic-flow-layout > .card {
		border: 3px solid var(--color-pink);
		flex-direction: column;
		border-radius: var(--border-radius);
		overflow: hidden;
		align-items: center;
		box-shadow: var(--box-shadow);
	}

	#pf-section .dynamic-flow-layout > .card > div.image {
		width: 100%;
		position: static;
		min-width: unset;
		border-radius: 0;
		box-shadow: 0 6px 20px rgba(0,0,0,0.1);
	}

	#pf-section .dynamic-flow-layout > .card > div.detail {
		margin: 0;
		min-height: unset;
		width: 100%;
		border: none;
	}

	#pf-section .dynamic-flow-layout > .card > div.detail > div {
		padding: 1rem 2rem;
		width: 100%;
	}
}

/* ------ Two Column Layout ------ */
#pf-section .two-column-layout {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3rem;
	padding-bottom: var(--wrapper-padding-bottom);
}

#pf-section .two-column-layout > .card {
	display: flex;
	align-items: center;
	justify-content: center;
}

#pf-section .two-column-layout > .card:nth-child(even) {
	flex-direction: row-reverse;
}

#pf-section .two-column-layout > .card > div {
	width: 50%;
}

#pf-section .two-column-layout > .card > div.image {
	aspect-ratio: 4 / 3;
	border-radius: var(--border-radius);
	overflow: hidden;
	box-shadow: var(--box-shadow);
}

#pf-section .two-column-layout > .card > div.image > img {
	box-sizing: border-box; 
	width: 100%;
}

#pf-section .two-column-layout > .card > div.detail > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 2rem;
}

@media only screen and (max-width: 1024px) {
	#pf-section .two-column-layout > .card {
		flex-direction: column !important;
	}

	#pf-section .two-column-layout > .card > div {
		width: 100%;
	}

	#pf-section .two-column-layout > .card > div.detail > div {
		padding: 2rem 0;
	}
}

/* ---------------------- Relates Portfolio ------------------------- */
#related-pf > .wrapper {
	padding-bottom: var(--wrapper-padding-bottom);
}

#related-pf > .wrapper a.btn-pink {
	margin: auto;
}

/* ------------------PORTFOLIO------------------ */
body#portfolio #main-content {
	min-height: unset;
}

body#portfolio .breadcrumb .wrapper {
	flex-direction: row;
	padding-top: 1rem;
}

#pf-container {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

#pf-container #filter-tag {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

#pf-container #filter-tag p {
	font-weight: bold;
}

#pf-container #filter-tag a.tag {
	min-width: 3rem;
	border-radius: var(--border-radius);
	padding: 0.5rem 1rem;
	border: 1px solid black;
	background-color: white;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
}

#pf-container #filter-tag a.tag.active,
#pf-container #filter-tag a.tag:hover {
	color: white;
	border: 1px solid var(--color-pink);
	background-color: var(--color-pink);
}

#pf-container .pf-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 1rem;
}

#pf-container .pf-list.loading {
	position: relative;
	pointer-events: none;
	opacity: 0.7;
}

/* Create the spinner using ::after */
#pf-container .pf-list.loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 48px;
	height: 48px;
	border: 4px solid black;
	border-top-color: white;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: spin 1s linear infinite;
	z-index: 10;
}

/* Spinner animation */
@keyframes spin {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

#pf-container .pf-list .pf-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem;
	box-shadow: var(--box-shadow);
	animation: fadeInScale 0.5s ease forwards;
	box-sizing: border-box;
	width: calc((100% - 2rem) / 3);
	max-width: calc((100% - 2rem) / 3);
}

@keyframes fadeInScale {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

#pf-container .pf-list .pf-card .pf-image {
	overflow: hidden;
	width: 100%;
	aspect-ratio: 3 / 2;
}

#pf-container .pf-list .pf-card .pf-image img {
	width: 100%;
	transition: transform 1s ease-in-out;
}

#pf-container .pf-list .pf-card .pf-image img:hover {
 	transform: translateY(-66.6666%); /* special design for website long img porfolio */
 	/* transform: scale(1.1); */
}

#pf-container .pf-list .pf-card .pf-content {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

#pf-container .pf-list .pf-card .pf-content a {
	color: var(--color-pink);
	font-weight: bold;
}

#pf-container .pf-list .pf-card .pf-content a:hover {
	text-decoration: underline;
}

#pf-container .pf-list .pf-card .pf-content > div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 1rem;
}

#pf-container .pf-list .pf-card .pf-content > p {
	text-align: left;
}

#pf-container .pf-list .pf-card .pf-content div p {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: center;
}

#pf-container .pf-list .pf-card .pf-content div p img {
	height: 1.5rem;
}

#pf-container .pf-list .pf-card .pf-tag {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: auto;
}

#pf-container .pf-list .pf-card .pf-tag div.tag {
	min-width: 3rem;
	border-radius: var(--border-radius);
	padding: 0.5rem 1rem;
	color: white;
	border: 1px solid var(--color-pink);
	background-color: var(--color-pink);
	text-align: center;
}

#pf-container .pf-list .pf-card .pf-tag div.tag.inactive {
	color: black;
	border: 1px solid black;
	background-color: white;
}

#pf-container #pf-pagination {
	display: none;
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: center;
}

#pf-container #pf-pagination > a.inactive {
	border-color: lightgray;
	background-color: lightgray;
	cursor: no-drop;
}

#pf-container #pf-pagination #page_number {
	display: flex;
	gap: 1rem;
	font-weight: bold;
}

#pf-container #pf-pagination #page_number a.page-link.active {
	text-decoration: underline;
	color: var(--color-pink);
}

@media only screen and (max-width: 1024px) {
	#pf-container .pf-list .pf-card {
		/* width: calc((100% - 1rem) / 2); */
		width: calc((100% - 1rem) / 2);
		max-width: calc((100% - 1rem) / 2);
	}

	.btn-pink {
		min-width: 6rem !important;
	}
}

@media only screen and (max-width: 768px) {
	#pf-container .pf-list .pf-card {
		width: 100%;
		max-width: unset;
	}
}

/* ---------------------- Portfolio Detail ------------------------- */
#pf-banner {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding-bottom: var(--wrapper-padding-bottom);
	align-items: stretch;
}

#pf-banner > div {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 2rem;
	text-align: center;
}

#pf-banner > div:first-child,
#pf-banner > div:last-child {
	justify-content: space-between;
}

#pf-banner > div:first-child > div:first-child {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

#pf-banner > div:first-child > img {
	aspect-ratio: 1 / 1;
	height: 7.5rem;
}

#pf-banner > div:first-child > div:first-child > p {
	text-align: left;
}

#pf-banner > div:nth-child(2) {
	flex-wrap: wrap;
	text-align: center;
}

#pf-banner > div:nth-child(2) > p {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: center;
}

#pf-banner > div:nth-child(2) > p > img {
	height: 2rem;
}

#pf-banner > div:last-child > a:last-child {
	text-decoration: underline;
}

#pf-banner > div:last-child > a:last-child:hover {
	opacity: 0.7;
}

@media only screen and (max-width: 768px) {
	#pf-banner > div {
		justify-content: center;
	}

	#pf-banner > div:first-child {
		flex-direction: column-reverse;
		gap: 1rem;
	}
	
	#pf-banner > div:first-child > div:first-child {
		align-items: center;
	}

	#pf-banner > div:first-child > div:first-child > p {
		text-align: center;
	}

	#pf-banner > div:nth-child(2) {
		flex-direction: column;
		gap: 0.5rem;
	}

	#pf-banner > div:nth-child(2) > p {
		gap: 0.2rem;
	}

	#pf-banner > div:nth-child(2) > p > img {
		height: 1rem;
	}

	#pf-banner > div:last-child {
		flex-direction: column-reverse;
		gap: 1rem;
	}
}

#tag-service {
	display: flex;
	align-items: stretch;
}

#tag-service > div:first-child {
	background-color: var(--color-pink);
}

#tag-service > div:last-child {
	background-color: var(--color-blue);
}

#tag-service > div {
	width: 50%;
	padding: 2rem 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	color: white;
}

#tag-service > div > h3 {
	color: white;
	margin-bottom: 0.5;
}

@media only screen and (max-width: 768px) {
	#tag-service {
		flex-direction: column;
	}

	#tag-service > div {
		width: 100%;
	}
}

#pf-section > .container:nth-child(even)  {
	background-color: var(--color-blue);
	color: white;
}

#pf-section > .container .section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2rem;
}

#pf-section > .container .section > img {
	width: 100%;
}

/* ------ Grid Layout ------ */
#pf-section .grid-layout {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	padding: var(--wrapper-padding-top) var(--wrapper-padding-right);
	max-width: 1920px;
	margin: auto;
}

#pf-section .grid-layout > .card {
	box-sizing: border-box;
	box-shadow: var(--box-shadow);
}

#pf-section .grid-layout > .card > div.image {
	aspect-ratio: 4 / 3;
}

#pf-section .grid-layout > .card > div.image > img {
	box-sizing: border-box; 
	width: 100%;
}

@media only screen and (max-width: 1024px) {
	#pf-section .grid-layout {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (max-width: 768px) {
	#pf-section .grid-layout {
		grid-template-columns: repeat(1, 1fr);
	}
}

/* ------ Dynamic Flow Layout ------ */
#pf-section .dynamic-flow-layout {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 3rem;
	padding-bottom: var(--wrapper-padding-bottom);
}
 
#pf-section .dynamic-flow-layout > .card {
	display: flex;
	justify-content: flex-end;
	position: relative;
}

#pf-section .dynamic-flow-layout > .card:nth-child(odd) {
	justify-content: flex-start;
}

#pf-section .dynamic-flow-layout > .card > div.image {
	aspect-ratio: 4 / 3;
	width: 25rem;
	border-radius: var(--border-radius);
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	box-shadow: var(--box-shadow);
}

#pf-section .dynamic-flow-layout > .card:nth-child(odd) > div.image {
	left: unset;
	right: 0;
}

#pf-section .dynamic-flow-layout > .card > div.image > img {
	box-sizing: border-box; 
	width: 100%;
}

#pf-section .dynamic-flow-layout > .card > div.detail {
	width: calc(100% - 12.5rem);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	border-radius: var(--border-radius);
	border: 5px solid var(--color-pink);
	margin-top: 9rem;
	min-height: 16rem;
}

#pf-section .dynamic-flow-layout > .card:nth-child(odd) > div.detail {
	justify-content: flex-start;
}

#pf-section .dynamic-flow-layout > .card > div.detail > div {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 0 3rem;
	width: calc(100% - 12.5rem - 5px);
	text-align: center;
}

@media only screen and (max-width: 900px) {
	#pf-section .dynamic-flow-layout {
		align-items: center;
	}

	#pf-section .dynamic-flow-layout > .card {
		border: 3px solid var(--color-pink);
		flex-direction: column;
		border-radius: var(--border-radius);
		overflow: hidden;
		align-items: center;
		box-shadow: var(--box-shadow);
	}

	#pf-section .dynamic-flow-layout > .card > div.image {
		width: 100%;
		position: static;
		min-width: unset;
		border-radius: 0;
		box-shadow: 0 6px 20px rgba(0,0,0,0.1);
	}

	#pf-section .dynamic-flow-layout > .card > div.detail {
		margin: 0;
		min-height: unset;
		width: 100%;
		border: none;
	}

	#pf-section .dynamic-flow-layout > .card > div.detail > div {
		padding: 1rem 2rem;
		width: 100%;
	}
}

/* ------ Two Column Layout ------ */
#pf-section .two-column-layout {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3rem;
	padding-bottom: var(--wrapper-padding-bottom);
}

#pf-section .two-column-layout > .card {
	display: flex;
	align-items: center;
	justify-content: center;
}

#pf-section .two-column-layout > .card:nth-child(even) {
	flex-direction: row-reverse;
}

#pf-section .two-column-layout > .card > div {
	width: 50%;
}

#pf-section .two-column-layout > .card > div.image {
	aspect-ratio: 4 / 3;
	border-radius: var(--border-radius);
	overflow: hidden;
	box-shadow: var(--box-shadow);
}

#pf-section .two-column-layout > .card > div.image > img {
	box-sizing: border-box; 
	width: 100%;
}

#pf-section .two-column-layout > .card > div.detail > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 2rem;
}

@media only screen and (max-width: 1024px) {
	#pf-section .two-column-layout > .card {
		flex-direction: column !important;
	}

	#pf-section .two-column-layout > .card > div {
		width: 100%;
	}

	#pf-section .two-column-layout > .card > div.detail > div {
		padding: 2rem 0;
	}
}

/* ---------------------- Relates Portfolio ------------------------- */
#related-pf > .wrapper {
	padding-bottom: var(--wrapper-padding-bottom);
}

#related-pf > .wrapper a.btn-pink {
	margin: auto;
}

Step 6

In your backend -> 'Pages' Tab -> Create a new page 'get-portfolio' -> Under 'Page Setting' Tab select layout 'get-portfolio'
It’s an AJAX-style PHP endpoint that loads portfolio cards dynamically with pagination and tag filtering.

Step 7

Copy all related files to your project and import sql table

Component

Module