suvo/3dhouseofficial.com
1
0
Fork 0
generated from dwd/boilarplate-astro-tailwind
Code Issues Pull Requests Packages Projects Releases Wiki Activity

c

Browse Source
This commit is contained in:
Suvodip
2024-05-09 21:54:26 +05:30
parent 81edbfb9f0
commit bb6b3dae39
207 changed files with 1741 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/pages/portfolio.astro Normal file
View File

@@ -0,0 +1,54 @@
---
import Layout from '../layouts/Layout.astro';
import FloorPlan3D from '../components/FloorPlan3D.astro';
import Artitect3D from '../components/Artitect3D.astro';
import Elevation3D from '../components/Elevation3D.astro';
import ResidentialInterior from '../components/ResidentialInterior.astro';
---
<Layout title=''>
<main>
<div>
<section class="pt-20">
<p class="text-[25px] font-bold text-center">Portfolio</p>
<div class="flex flex-row lg:justify-center overflow-x-auto whitespace-nowrap">
<button onclick="filterSections('all', this)" class="tablink bg-white inline-block py-2 px-4 text-blue-500 font-semibold">All</button>
<button onclick="filterSections('artiTect3D', this)" class="tablink bg-white inline-block py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold">Architecture Planning</button>
<button onclick="filterSections('floorPlan3D', this)" class="tablink bg-white inline-block py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold">3d Floor Plan</button>
<button onclick="filterSections('elevation3D', this)" class="tablink bg-white inline-block py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold">3d elevation</button>
<button onclick="filterSections('resdenInter', this)" class="tablink bg-white inline-block py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold">Residential Interior Design</button>
</div>
<div class="py-4" id="floorPlan3D">
<FloorPlan3D />
</div>
<div class="py-4" id="artiTect3D">
<Artitect3D />
</div>
<div class="py-4" id="elevation3D">
<Elevation3D />
</div>
<div class="py-4" id="resdenInter">
<ResidentialInterior />
</div>
</section>
</div>
</main>
</Layout>
<script is:inline>
let allIDs = ["floorPlan3D", "artiTect3D", "elevation3D", "resdenInter"];
function filterSections(sectionType) {
allIDs.forEach(id => {
const section = document.getElementById(id);
if (section) {
if (sectionType === 'all') {
section.style.display = 'block';
} else if (id.toLowerCase().includes(sectionType.toLowerCase())) {
section.style.display = 'block';
} else {
section.style.display = 'none';
}
}
});
}
</script>