c842320
b925645
c842320
aa0f0ca
c842320
b925645
c842320
b925645
aa0f0ca
c842320
aa0f0ca
c842320
ba32f77
c842320
ba32f77
c842320
ba32f77
c842320
ba32f77
c842320
ba32f77
c842320
ba32f77
c842320
ba32f77
c842320
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects | TerraSight Geomatics</title>
<meta name="description" content="Case studies showcasing our geospatial projects in infrastructure, architecture, planning, and environmental sectors across Melbourne and Australia.">
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#8B4513',
secondary: '#D2691E',
stone: '#A8A29E',
charcoal: '#374151',
sand: '#E2E8F0',
offwhite: '#FEF7ED'
}
}
}
}
</script
<style>
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Inter:wght@300;400;500&display=swap');
body { font-family: 'Inter', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Archivo', sans-serif; font-weight: 800; }
.project-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover {
transform: translateY(-5px);
}
.highlight-text {
background-color: rgba(210, 105, 30, 0.15);
padding: 0.1em 0.3em;
border-radius: 0.2em;
}
</style>
</head>
<body class="bg-offwhite text-charcoal">
<nav class="bg-offwhite/90 backdrop-blur-sm sticky top-0 z-50 border-b border-stone-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex items-center">
<a href="index.html" class="flex-shrink-0 flex items-center">
<span class="text-2xl font-bold text-primary">Alt Spatial Studio</span>
</a>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a href="index.html" class="text-charcoal hover:text-primary transition-colors px-3 py-2">Home</a>
<a href="about.html" class="text-charcoal hover:text-primary transition-colors px-3 py-2">About</a>
<a href="services.html" class="text-charcoal hover:text-primary transition-colors px-3 py-2">Services</a>
<a href="projects.html" class="text-primary font-medium border-b-2 border-primary px-3 py-2">Projects</a>
<a href="industries.html" class="text-charcoal hover:text-primary transition-colors px-3 py-2">Industries</a>
<a href="contact.html" class="bg-primary text-white px-4 py-2 rounded-md hover:bg-primary/90 transition-colors">Contact</a>
</div>
</div>
<div class="md:hidden">
<button type="button" class="text-charcoal hover:text-primary">
<i data-feather="menu"></i>
</button>
</div>
</div>
</div>
</nav>
<section class="py-16 bg-white">
<div class="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
<h1 class="text-4xl md:text-5xl font-bold text-charcoal mb-4">Project Portfolio</h1>
<p class="text-xl text-charcoal/70">Real-world applications of our geospatial expertise across infrastructure, architecture, and environmental sectors.</p>
</div>
</section>
<section class="py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="project-card bg-white rounded-lg border border-stone-200 overflow-hidden">
<div class="relative overflow-hidden">
<img src="http://static.photos/infrastructure/640x360/301" alt="Metro Tunnel Project" class="w-full h-48 object-cover transition-transform duration-300 hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-charcoal/20 to-transparent"></div>
</div>
<div class="p-6">
<span class="inline-block bg-primary/10 text-primary text-sm font-medium px-3 py-1 rounded-full mb-3">Infrastructure</span>
<h3 class="text-xl font-semibold text-charcoal mb-2">Melbourne Metro Tunnel Alignment</h3>
<p class="text-charcoal/70 mb-4">High-precision laser scanning for tunnel construction verification and alignment monitoring throughout the project lifecycle.</p>
<div class="flex items-center justify-between">
<span class="text-sm text-charcoal/60">2023 • Melbourne</span>
<a href="#" class="text-primary font-medium hover:text-primary/80 transition-colors">View Details</a>
</div>
</div>
</div>
<div class="project-card bg-white rounded-lg border border-stone-200 overflow-hidden">
<div class="relative overflow-hidden">
<img src="http://static.photos/architecture/640x360/302" alt="Heritage Building" class="w-full h-48 object-cover transition-transform duration-300 hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-charcoal/20 to-transparent"></div>
</div>
<div class="p-6">
<span class="inline-block bg-secondary/10 text-secondary text-sm font-medium px-3 py-1 rounded-full mb-3">Architecture</span>
<h3 class="text-xl font-semibold text-charcoal mb-2">Collins Street Heritage Documentation</h3>
<p class="text-charcoal/70 mb-4">Comprehensive photogrammetric survey for the restoration and adaptive reuse of a historic CBD commercial building.</p>
<div class="flex items-center justify-between">
<span class="text-sm text-charcoal/60">2023 • Melbourne CBD</span>
<a href="#" class="text-primary font-medium hover:text-primary/80 transition-colors">View Details</a>
</div>
</div>
</div>
<div class="project-card bg-white rounded-lg border border-stone-200 overflow-hidden">
<div class="relative overflow-hidden">
<img src="http://static.photos/construction/640x360/303" alt="Commercial Development" class="w-full h-48 object-cover transition-transform duration-300 hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-charcoal/20 to-transparent"></div>
</div>
<div class="p-6">
<span class="inline-block bg-primary/10 text-primary text-sm font-medium px-3 py-1 rounded-full mb-3">Engineering</span>
<h3 class="text-xl font-semibold text-charcoal mb-2">Southbank High-Rise Construction</h3>
<p class="text-charcoal/70 mb-4">Ongoing deformation monitoring and as-built verification for a 40-story commercial tower development.</p>
<div class="flex items-center justify-between">
<span class="text-sm text-charcoal/60">2022-2024 • Southbank</span>
<a href="#" class="text-primary font-medium hover:text-primary/80 transition-colors">View Details</a>
</div>
</div>
</div>
<div class="project-card bg-white rounded-lg border border-stone-200 overflow-hidden">
<div class="relative overflow-hidden">
<img src="http://static.photos/environment/640x360/304" alt="Environmental Survey" class="w-full h-48 object-cover transition-transform duration-300 hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-charcoal/20 to-transparent"></div>
</div>
<div class="p-6">
<span class="inline-block bg-green-100 text-green-800 text-sm font-medium px-3 py-1 rounded-full mb-3">Environmental</span>
<h3 class="text-xl font-semibold text-charcoal mb-2">Yarra River Bathymetric Survey</h3>
<p class="text-charcoal/70 mb-4">Comprehensive river bed mapping for flood modelling and environmental impact assessment along metropolitan reaches.</p>
<div class="flex items-center justify-between">
<span class="text-sm text-charcoal/60">2023 • Yarra River</span>
<a href="#" class="text-primary font-medium hover:text-primary/80 transition-colors">View Details</a>
</div>
</div>
</div>
<div class="project-card bg-white rounded-lg border border-stone-200 overflow-hidden">
<div class="relative overflow-hidden">
<img src="http://static.photos/industry/640x360/305" alt="Industrial Facility" class="w-full h-48 object-cover transition-transform duration-300 hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-charcoal/20 to-transparent"></div>
</div>
<div class="p-6">
<span class="inline-block bg-secondary/10 text-secondary text-sm font-medium px-3 py-1 rounded-full mb-3">Industrial</span>
<h3 class="text-xl font-semibold text-charcoal mb-2">Port of Melbourne Infrastructure</h3>
<p class="text-charcoal/70 mb-4">LiDAR scanning and BIM modelling for wharf infrastructure assessment and maintenance planning.</p>
<div class="flex items-center justify-between">
<span class="text-sm text-charcoal/60">2022 • Port of Melbourne</span>
<a href="#" class="text-primary font-medium hover:text-primary/80 transition-colors">View Details</a>
</div>
</div>
</div>
<div class="project-card bg-white rounded-lg border border-stone-200 overflow-hidden">
<div class="relative overflow-hidden">
<img src="http://static.photos/education/640x360/306" alt="University Campus" class="w-full h-48 object-cover transition-transform duration-300 hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-charcoal/20 to-transparent"></div>
</div>
<div class="p-6">
<span class="inline-block bg-primary/10 text-primary text-sm font-medium px-3 py-1 rounded-full mb-3">Education</span>
<h3 class="text-xl font-semibold text-charcoal mb-2">University Campus Digital Twin</h3>
<p class="text-charcoal/70 mb-4">Campus-wide reality capture creating a comprehensive digital twin for facility management and space planning.</p>
<div class="flex items-center justify-between">
<span class="text-sm text-charcoal/60">2023 • University of Melbourne</span>
<a href="#" class="text-primary font-medium hover:text-primary/80 transition-colors">View Details</a>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<button class="bg-primary text-white px-6 py-3 rounded-md font-medium hover:bg-primary/90 transition-colors">
Load More Projects
</button>
</div>
</div>
</section>
<section class="py-20 bg-primary text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div>
<div class="text-4xl font-bold mb-2">150+</div>
<div class="text-lg opacity-90">Projects Completed</div>
</div>
<div>
<div class="text-4xl font-bold mb-2">25+</div>
<div class="text-lg opacity-90">Industry Partners</div>
</div>
<div>
<div class="text-4xl font-bold mb-2">98%</div>
<div class="text-lg opacity-90">Client Satisfaction</div>
</div>
<div>
<div class="text-4xl font-bold mb-2">5M+</div>
<div class="text-lg opacity-90">Points Captured</div>
</div>
</div>
</div>
</section>
<footer class="bg-charcoal text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-lg font-semibold mb-4">Alt Spatial Studio</h3>
<p class="text-stone-300">Innovative reality capture and geospatial solutions for the built and natural environment.</p>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Services</h4>
<ul class="space-y-2 text-stone-300">
<li><a href="services.html" class="hover:text-white transition-colors">Feature Surveys</a></li>
<li><a href="services.html" class="hover:text-white transition-colors">3D BIM Modelling</a></li>
<li><a href="services.html" class="hover:text-white transition-colors">Reality Capture</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Company</h4>
<ul class="space-y-2 text-stone-300">
<li><a href="about.html" class="hover:text-white transition-colors">About Us</a></li>
<li><a href="projects.html" class="hover:text-white transition-colors">Projects</a></li>
<li><a href="industries.html" class="hover:text-white transition-colors">Industries</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Contact</h4>
<address class="not-italic text-stone-300">
<p>Melbourne, Australia</p>
<p class="mt-2"><a href="mailto:info@altspatial.com" class="hover:text-white transition-colors">info@altspatial.com</a></p>
</address>
</div>
</div>
<div class="border-t border-stone-600 mt-8 pt-8 text-center text-stone-400">
<p>© 2023 Alt Spatial Studio. All rights reserved.</p>
</div>
</div>
</footer>
<script>
feather.replace();
</script>
</body>
</html>
|
