{"id":105,"date":"2026-06-27T04:11:00","date_gmt":"2026-06-27T04:11:00","guid":{"rendered":"https:\/\/techcoree.com\/?page_id=105"},"modified":"2026-06-27T04:11:00","modified_gmt":"2026-06-27T04:11:00","slug":"portfolio-2","status":"publish","type":"page","link":"https:\/\/techcoree.com\/?page_id=105","title":{"rendered":"Portfolio"},"content":{"rendered":"\n<!-- ============================================================\n     STRUCTURAL ENGINEERING PORTFOLIO v3 \u2014 WordPress Custom HTML\n     Fixed: no text overlap on hover \u2014 body fades out, panel fades in\n     ============================================================ -->\n\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@tabler\/icons-webfont@latest\/dist\/tabler-icons.min.css\">\n\n<style>\n#tc-pf3 *, #tc-pf3 *::before, #tc-pf3 *::after { box-sizing: border-box; margin: 0; padding: 0; }\n#tc-pf3 {\n  font-family: 'Raleway', 'Segoe UI', sans-serif;\n  padding: 60px 20px;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n\/* HEADER *\/\n#tc-pf3 .pf-header { text-align: center; margin-bottom: 44px; }\n#tc-pf3 .pf-eyebrow {\n  font-size: 11px; font-weight: 700; letter-spacing: 3px;\n  text-transform: uppercase; color: #3a7bd5; margin-bottom: 10px;\n}\n#tc-pf3 .pf-header h2 {\n  font-size: 36px; font-weight: 700; color: #0d1b35;\n  line-height: 1.2; margin-bottom: 14px;\n}\n#tc-pf3 .pf-header p {\n  font-size: 15px; color: #5f6e84;\n  max-width: 520px; margin: 0 auto; line-height: 1.7;\n}\n\n\/* FILTER BAR *\/\n#tc-pf3 .pf-filter {\n  display: flex; gap: 8px; flex-wrap: wrap;\n  justify-content: center; margin-bottom: 32px;\n}\n#tc-pf3 .pf-filter button {\n  padding: 7px 18px; border-radius: 20px; font-size: 11px;\n  font-weight: 700; letter-spacing: 1px; text-transform: uppercase;\n  cursor: pointer; border: 1.5px solid #c8d5e8;\n  background: #fff; color: #5f6e84;\n  transition: all 0.22s ease; font-family: inherit;\n}\n#tc-pf3 .pf-filter button:hover { border-color: #3a7bd5; color: #3a7bd5; }\n#tc-pf3 .pf-filter button.on {\n  background: linear-gradient(135deg, #1a3a6e, #3a7bd5);\n  color: #fff; border-color: transparent;\n  box-shadow: 0 4px 14px rgba(30,95,168,0.35);\n}\n\n\/* GRID *\/\n#tc-pf3 .pf-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 14px;\n}\n@media (max-width: 1000px) { #tc-pf3 .pf-grid { grid-template-columns: repeat(3, 1fr); } }\n@media (max-width: 680px)  { #tc-pf3 .pf-grid { grid-template-columns: repeat(2, 1fr); } }\n@media (max-width: 400px)  { #tc-pf3 .pf-grid { grid-template-columns: 1fr; } }\n\n\/* CARD *\/\n#tc-pf3 .pf-card {\n  position: relative; overflow: hidden; border-radius: 14px;\n  height: 220px; cursor: pointer;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.18);\n  opacity: 0; transform: translateY(28px) scale(0.97);\n  transition: opacity 0.52s ease, transform 0.52s ease, box-shadow 0.35s ease;\n}\n#tc-pf3 .pf-card.show { opacity: 1; transform: translateY(0) scale(1); }\n#tc-pf3 .pf-card:hover {\n  transform: translateY(-6px) scale(1.025) !important;\n  box-shadow: 0 18px 50px rgba(0,0,0,0.4), 0 0 0 1.5px rgba(80,160,255,0.2);\n  z-index: 3;\n}\n\n\/* PHOTO BG *\/\n#tc-pf3 .pf-bg {\n  position: absolute; inset: 0;\n  background-size: cover; background-position: center;\n  transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);\n}\n#tc-pf3 .pf-card:hover .pf-bg { transform: scale(1.08); }\n\n\/* DEFAULT GRADIENT TINT \u2014 fades out on hover *\/\n#tc-pf3 .pf-tint {\n  position: absolute; inset: 0;\n  background: linear-gradient(175deg, rgba(5,15,45,0.3) 0%, rgba(8,20,60,0.88) 100%);\n  transition: opacity 0.35s ease;\n}\n#tc-pf3 .pf-card:hover .pf-tint { opacity: 0; }\n\n\/* HOVER SOLID TINT \u2014 fades in on hover, covers the photo fully *\/\n#tc-pf3 .pf-hover-tint {\n  position: absolute; inset: 0;\n  background: rgba(10,28,75,0.92);\n  opacity: 0; transition: opacity 0.35s ease;\n}\n#tc-pf3 .pf-card:hover .pf-hover-tint { opacity: 1; }\n\n\/* BORDER GLOW *\/\n#tc-pf3 .pf-border-glow {\n  position: absolute; inset: 0; border-radius: 14px;\n  border: 1.5px solid rgba(255,255,255,0);\n  transition: border-color 0.4s ease; pointer-events: none; z-index: 4;\n}\n#tc-pf3 .pf-card:hover .pf-border-glow { border-color: rgba(80,160,255,0.4); }\n\n\/* YEAR BADGE \u2014 hidden on hover *\/\n#tc-pf3 .pf-year {\n  position: absolute; top: 12px; right: 12px; z-index: 3;\n  font-size: 9px; font-weight: 700; letter-spacing: 1.2px;\n  padding: 3px 9px; border-radius: 20px;\n  background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7);\n  transition: opacity 0.2s ease;\n}\n#tc-pf3 .pf-card:hover .pf-year { opacity: 0; }\n\n\/* DEFAULT BODY \u2014 fades OUT and slides down on hover *\/\n#tc-pf3 .pf-body {\n  position: absolute; inset: 0; padding: 16px; z-index: 2;\n  display: flex; flex-direction: column; justify-content: flex-end;\n  transition: opacity 0.25s ease, transform 0.3s ease;\n}\n#tc-pf3 .pf-card:hover .pf-body { opacity: 0; transform: translateY(10px); pointer-events: none; }\n\n#tc-pf3 .pf-icon {\n  width: 42px; height: 42px; border-radius: 10px;\n  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);\n  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;\n}\n#tc-pf3 .pf-icon i { font-size: 20px; color: rgba(255,255,255,0.85); }\n#tc-pf3 .pf-cat {\n  font-size: 9px; font-weight: 700; letter-spacing: 2px;\n  text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 4px;\n}\n#tc-pf3 .pf-title { font-size: 13.5px; font-weight: 600; color: #fff; line-height: 1.35; }\n\n\/* HOVER INFO PANEL \u2014 fades IN and slides up. Sits above hover-tint, below border-glow *\/\n#tc-pf3 .pf-info {\n  position: absolute; inset: 0; padding: 20px; z-index: 3;\n  display: flex; flex-direction: column; justify-content: center;\n  align-items: flex-start; gap: 6px;\n  opacity: 0; transform: translateY(14px);\n  transition: opacity 0.3s ease 0.06s, transform 0.38s cubic-bezier(0.25,0.46,0.45,0.94) 0.06s;\n  pointer-events: none;\n}\n#tc-pf3 .pf-card:hover .pf-info { opacity: 1; transform: translateY(0); pointer-events: auto; }\n\n#tc-pf3 .pf-info-icon {\n  width: 46px; height: 46px; border-radius: 12px;\n  background: rgba(30,95,168,0.65); border: 1px solid rgba(80,160,255,0.4);\n  display: flex; align-items: center; justify-content: center; margin-bottom: 2px;\n  transform: scale(0.8) rotate(-8deg);\n  transition: transform 0.42s cubic-bezier(0.34,1.56,0.64,1) 0.12s;\n}\n#tc-pf3 .pf-card:hover .pf-info-icon { transform: scale(1) rotate(0deg); }\n#tc-pf3 .pf-info-icon i { font-size: 22px; color: #fff; }\n\n#tc-pf3 .pf-info-cat {\n  font-size: 9px; font-weight: 700; letter-spacing: 2px;\n  text-transform: uppercase; color: rgba(100,180,255,0.85);\n}\n#tc-pf3 .pf-info-title { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3; }\n#tc-pf3 .pf-info-desc { font-size: 11.5px; color: rgba(255,255,255,0.6); line-height: 1.55; }\n\n\/* CTA BUTTON \u2014 springs in with extra delay *\/\n#tc-pf3 .pf-cta {\n  display: inline-flex; align-items: center; gap: 6px;\n  margin-top: 6px; padding: 7px 16px; border-radius: 20px;\n  background: rgba(30,95,168,0.75); border: 1px solid rgba(80,160,255,0.35);\n  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;\n  color: #fff; text-decoration: none;\n  transform: translateY(8px); opacity: 0;\n  transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1) 0.2s,\n              opacity 0.28s ease 0.2s, background 0.2s;\n}\n#tc-pf3 .pf-card:hover .pf-cta { transform: translateY(0); opacity: 1; }\n#tc-pf3 .pf-cta:hover { background: rgba(30,95,210,0.9); }\n#tc-pf3 .pf-cta i { font-size: 13px; transition: transform 0.25s ease; }\n#tc-pf3 .pf-cta:hover i { transform: translateX(3px); }\n<\/style>\n\n<div id=\"tc-pf3\">\n  <div class=\"pf-header\">\n    <p class=\"pf-eyebrow\">Our Work<\/p>\n    <h2>Structural Engineering Projects<\/h2>\n    <p>From landmark bridges to seismic retrofits \u2014 a selection of our most impactful structural engineering deliverables.<\/p>\n  <\/div>\n\n  <div class=\"pf-filter\" id=\"tc-pf3-filters\">\n    <button class=\"on\" data-cat=\"all\">All<\/button>\n    <button data-cat=\"bridges\">Bridges<\/button>\n    <button data-cat=\"high-rise\">High-Rise<\/button>\n    <button data-cat=\"foundations\">Foundations<\/button>\n    <button data-cat=\"industrial\">Industrial<\/button>\n    <button data-cat=\"retrofitting\">Retrofitting<\/button>\n  <\/div>\n\n  <div class=\"pf-grid\" id=\"tc-pf3-grid\"><\/div>\n<\/div>\n\n<script>\n(function(){\n  var P=[\n    {t:\"Cable-Stay Bridge\",c:\"bridges\",l:\"Bridges\",icon:\"ti-building-bridge\",\n     img:\"https:\/\/images.unsplash.com\/photo-1477959858617-67f85cf4f1df?w=500&q=70\",\n     yr:\"2023\",desc:\"Multi-span cable-stay design with wind tunnel analysis\",link:\"#\"},\n    {t:\"High-Rise Steel Frame\",c:\"high-rise\",l:\"High-Rise\",icon:\"ti-building-skyscraper\",\n     img:\"https:\/\/images.unsplash.com\/photo-1486325212027-8081e485255e?w=500&q=70\",\n     yr:\"2023\",desc:\"46-storey moment-resisting frame with outrigger system\",link:\"#\"},\n    {t:\"Deep Foundation Analysis\",c:\"foundations\",l:\"Foundations\",icon:\"ti-layers-difference\",\n     img:\"https:\/\/images.unsplash.com\/photo-1504307651254-35680f356dfd?w=500&q=70\",\n     yr:\"2022\",desc:\"Bored pile capacity & settlement study for soft clay\",link:\"#\"},\n    {t:\"Truss Roof System\",c:\"industrial\",l:\"Industrial\",icon:\"ti-geometry\",\n     img:\"https:\/\/images.unsplash.com\/photo-1565008576549-57569a49371d?w=500&q=70\",\n     yr:\"2023\",desc:\"Long-span Pratt truss with 40m clear internal span\",link:\"#\"},\n    {t:\"Seismic Retrofitting\",c:\"retrofitting\",l:\"Retrofitting\",icon:\"ti-building-community\",\n     img:\"https:\/\/images.unsplash.com\/photo-1590736704728-f4730bb30770?w=500&q=70\",\n     yr:\"2022\",desc:\"FRP jacketing & shear wall upgrade for URM building\",link:\"#\"},\n    {t:\"Suspension Footbridge\",c:\"bridges\",l:\"Bridges\",icon:\"ti-building-bridge-2\",\n     img:\"https:\/\/images.unsplash.com\/photo-1449824913935-59a10b8d2000?w=500&q=70\",\n     yr:\"2021\",desc:\"120m pedestrian span with tuned mass dampers\",link:\"#\"},\n    {t:\"Concrete Core Tower\",c:\"high-rise\",l:\"High-Rise\",icon:\"ti-building\",\n     img:\"https:\/\/images.unsplash.com\/photo-1533929736458-ca588d08c8be?w=500&q=70\",\n     yr:\"2022\",desc:\"RC slip-formed core with post-tensioned flat plates\",link:\"#\"},\n    {t:\"Pile Cap Foundation\",c:\"foundations\",l:\"Foundations\",icon:\"ti-vector-triangle\",\n     img:\"https:\/\/images.unsplash.com\/photo-1605106702842-01a887a31122?w=500&q=70\",\n     yr:\"2022\",desc:\"12-pile cap group for bridge abutment loading\",link:\"#\"},\n    {t:\"Industrial Warehouse\",c:\"industrial\",l:\"Industrial\",icon:\"ti-category\",\n     img:\"https:\/\/images.unsplash.com\/photo-1497366811353-6870744d04b2?w=500&q=70\",\n     yr:\"2021\",desc:\"Portal frame with 30t overhead crane rails\",link:\"#\"},\n    {t:\"Beam-Column Connection\",c:\"retrofitting\",l:\"Retrofitting\",icon:\"ti-layout-grid\",\n     img:\"https:\/\/images.unsplash.com\/photo-1558618666-fcd25c85cd64?w=500&q=70\",\n     yr:\"2021\",desc:\"Haunch retrofit improving ductility & moment capacity\",link:\"#\"},\n    {t:\"Arch Pedestrian Bridge\",c:\"bridges\",l:\"Bridges\",icon:\"ti-road\",\n     img:\"https:\/\/images.unsplash.com\/photo-1477959858617-67f85cf4f1df?w=500&q=70\",\n     yr:\"2020\",desc:\"Tied steel arch with deck-level cable hangers\",link:\"#\"},\n    {t:\"Rebar & Formwork System\",c:\"foundations\",l:\"Foundations\",icon:\"ti-grid-dots\",\n     img:\"https:\/\/images.unsplash.com\/photo-1504307651254-35680f356dfd?w=500&q=70\",\n     yr:\"2020\",desc:\"Modular flying form system for core wall construction\",link:\"#\"}\n  ];\n\n  var grid=document.getElementById('tc-pf3-grid');\n  var bar=document.getElementById('tc-pf3-filters');\n\n  function render(cat){\n    grid.innerHTML='';\n    var list=cat==='all'?P:P.filter(function(p){return p.c===cat});\n    list.forEach(function(p,i){\n      var d=document.createElement('div');\n      d.className='pf-card';\n      d.innerHTML=\n        '<div class=\"pf-bg\" style=\"background-image:url(\\''+p.img+'\\')\"><\/div>'+\n        '<div class=\"pf-tint\"><\/div>'+\n        '<div class=\"pf-hover-tint\"><\/div>'+\n        '<div class=\"pf-border-glow\"><\/div>'+\n        '<span class=\"pf-year\">'+p.yr+'<\/span>'+\n        '<div class=\"pf-body\">'+\n          '<div class=\"pf-icon\"><i class=\"ti '+p.icon+'\" aria-hidden=\"true\"><\/i><\/div>'+\n          '<div class=\"pf-cat\">'+p.l+'<\/div>'+\n          '<div class=\"pf-title\">'+p.t+'<\/div>'+\n        '<\/div>'+\n        '<div class=\"pf-info\">'+\n          '<div class=\"pf-info-icon\"><i class=\"ti '+p.icon+'\" aria-hidden=\"true\"><\/i><\/div>'+\n          '<div class=\"pf-info-cat\">'+p.l+'<\/div>'+\n          '<div class=\"pf-info-title\">'+p.t+'<\/div>'+\n          '<div class=\"pf-info-desc\">'+p.desc+'<\/div>'+\n          '<a class=\"pf-cta\" href=\"'+p.link+'\">'+\n            '<i class=\"ti ti-arrow-right\" aria-hidden=\"true\"><\/i> View Project'+\n          '<\/a>'+\n        '<\/div>';\n      grid.appendChild(d);\n      setTimeout(function(){requestAnimationFrame(function(){d.classList.add('show')})},i*55);\n    });\n    if('IntersectionObserver' in window){\n      var obs=new IntersectionObserver(function(entries){\n        entries.forEach(function(e){\n          if(e.isIntersecting){e.target.classList.add('show');obs.unobserve(e.target)}\n        });\n      },{threshold:0.1});\n      grid.querySelectorAll('.pf-card:not(.show)').forEach(function(c){obs.observe(c)});\n    }\n  }\n\n  bar.addEventListener('click',function(e){\n    var b=e.target.closest('button');if(!b)return;\n    bar.querySelectorAll('button').forEach(function(x){x.classList.remove('on')});\n    b.classList.add('on');render(b.dataset.cat);\n  });\n\n  render('all');\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Our Work Structural Engineering Projects From landmark bridges to seismic retrofits \u2014 a selection of our most impactful structural engineering [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-105","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/techcoree.com\/index.php?rest_route=\/wp\/v2\/pages\/105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techcoree.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/techcoree.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/techcoree.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techcoree.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=105"}],"version-history":[{"count":3,"href":"https:\/\/techcoree.com\/index.php?rest_route=\/wp\/v2\/pages\/105\/revisions"}],"predecessor-version":[{"id":174,"href":"https:\/\/techcoree.com\/index.php?rest_route=\/wp\/v2\/pages\/105\/revisions\/174"}],"wp:attachment":[{"href":"https:\/\/techcoree.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}