generated from dwd/boilarplate-astro-tailwind
57 lines
2.8 KiB
Plaintext
57 lines
2.8 KiB
Plaintext
---
|
|
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='3D House | Portfolio'>
|
|
<main>
|
|
<div>
|
|
<section class="pt-20">
|
|
<div class="container mx-auto px-4">
|
|
<p class="text-[25px] font-bold text-center "><span class="bg-[#000]/60 py-3 px-6 rounded-lg">Portfolio</span></p>
|
|
<div class="flex flex-row lg:justify-center overflow-x-auto whitespace-nowrap mt-4">
|
|
<button onclick="filterSections('all', this)" class="tablink bg-[#000]/60 inline-block py-2 px-4 text-blue-500 font-semibold">All</button>
|
|
<button onclick="filterSections('artiTect3D', this)" class="tablink bg-[#000]/60 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-[#000]/60 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-[#000]/60 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-[#000]/60 inline-block py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold">Residential Interior Design</button>
|
|
</div>
|
|
</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>
|