| Server IP : 159.69.118.108 / Your IP : 216.73.216.200 Web Server : Apache/2.4.58 (Ubuntu) System : Linux ubuntu-4gb-fsn1-1 6.8.0-90-generic #91-Ubuntu SMP PREEMPT_DYNAMIC Tue Nov 18 13:53:54 UTC 2025 aarch64 User : root ( 0) PHP Version : 8.2.32 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/lauthiamkok.net/prototype.lauthiamkok.net.sensewithdata/research/ |
Upload File : |
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/assets/favicon.17e50649.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>sensewithDATA</title>
<script type="module" crossorigin src="/assets/research.7f11868a.js"></script>
<link rel="modulepreload" href="/assets/vuelidate.a8eab91a.js">
<link rel="modulepreload" href="/assets/vendors.2bf68b2a.js">
<link rel="modulepreload" href="/assets/google-recaptcha.950252d1.js">
<link rel="modulepreload" href="/assets/signup.0e5d6c99.js">
<link rel="modulepreload" href="/assets/use-fetch.c391a8ae.js">
<link rel="modulepreload" href="/assets/moment.08a7f518.js">
<link rel="modulepreload" href="/assets/router.ba99dc9e.js">
<link rel="modulepreload" href="/assets/float-item.3e85777c.js">
<link rel="modulepreload" href="/assets/index.9c267f6d.js">
<link rel="stylesheet" href="/assets/google-recaptcha.ba4cd265.css">
</head>
<body class="font-body">
<div id="app">
<!-- container:header -->
<div class="container mx-auto">
<div class="flex-center-xy w-full px-1.5 py-6">
<div class="w-1/2 px-2.5">
<ul class="flex justify-start">
<li>
<a href="#" class="w-100px h-100px flex-center-xy">
<img src="/static/g1397.png" class="w-90/100">
</a>
</li>
</ul>
</div>
<div class="w-1/2 px-2.5">
<ul class="flex justify-end space-x-10 <lg:space-x-6 <md:hidden">
<li><a href="#" class="hover:text-gray-500">Questions</a></li>
<li><a href="#" class="hover:text-gray-500">Voices</a></li>
<li><a href="#" class="hover:text-gray-500">Resources</a></li>
<li><a href="#" class="hover:text-gray-500 current">Research</a></li>
<li><a href="#" class="hover:text-gray-500">About</a></li>
<li><a href="#" class="hover:text-gray-500">Connect</a></li>
<li>
<a
href="#"
class="hover:text-gray-500"
v-on:click.prevent=""
>
<i class="icon-search"></i>
</a>
</li>
</ul>
<ul class="justify-end space-x-6 hidden <md:flex">
<li>
<a
href="#"
class="text-4xl hover:text-gray-500"
v-on:click.prevent=""
>
<i class="icon-lines"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- container -->
<!-- block -->
<div class="bg-gray-50 py-6 mb-10">
<!-- container: introduction -->
<div class="container mx-auto py-6">
<!-- block -->
<div class="flex flex-wrap justify-between px-1.5 py-2">
<!-- flex item -->
<div class="w-4/12 <lg:w-1/2 <md:w-full px-2.5 space-y-6 <md:pb-6">
<!--item-->
<div class="text-lg space-y-3">
<h3 class="font-bold pb-2 border-b-1 border-gray-400">
About Research
</h3>
<p>
Created by Natasha Nicholson, Pete Quinn Davis, Annie Legge, and Alex Hilson. As part of our work as Data Fellows in the South West Creative Technology Network.
</p>
</div>
<!--item-->
<!--item-->
<div>
<h3 class="font-bold pb-2 border-b-1 border-gray-400">
Share
</h3>
<social-share
v-slot="{ url, title, encodedUrl, encodedTitle, copyUrl }"
v-bind:url="'https://lauthiamkok.net/'"
v-bind:title="'Lau Tiam Kok Website'"
>
<ul class="inline-flex space-x-4 pt-3">
<li>
<a
v-bind:href="'https://www.linkedin.com/shareArticle?' + `mini=true&url=${encodedUrl}` + `&title=${encodedTitle}`"
target="_blank"
rel="noopener"
class="badge"
>
<i class="icon-linkedin"></i>
</a>
</li>
<li class="hidden">
<a
v-bind:href="'https://api.whatsapp.com/send?' + `text=${title} ${url}`"
target="_blank"
rel="noopener"
class="badge">
<i class="icon-whatsapp"></i>
</a>
</li>
<li>
<a
v-bind:href="'https://facebook.com/sharer/sharer.php?' + `u=${encodedUrl}`"
target="_blank"
rel="noopener"
class="badge">
<i class="icon-facebook"></i>
</a>
</li>
<li>
<a
v-bind:href="'https://twitter.com/intent/tweet/?' + `text=${encodedTitle}` + `&url=${encodedUrl}`"
target="_blank"
rel="noopener"
class="badge">
<i class="icon-twitter"></i>
</a>
</li>
<li>
<a
v-bind:href="'mailto:?' + `subject=${encodedTitle}` + `&body=${encodedUrl}`"
target="_self"
rel="noopener"
class="badge">
<i class="icon-mail"></i>
</a>
</li>
<li>
<input v-bind:value="url" class="url hidden">
<a
v-bind:href="url"
v-on:click.prevent="copyUrl"
rel="noopener"
class="badge tooltip-context"
>
<i class="icon-link p-0.25"></i>
</a>
<div class="tooltip-container py-0.5 px-2 text-white bg-black rounded whitespace-nowrap">
<div class="arrow" data-popper-arrow></div>
<span>
Link copied!
</span>
</div>
</li>
</ul>
</social-share>
</div>
<!--item-->
</div>
<!-- flex item -->
<!-- flex item -->
<div class="w-6/12 <lg:w-1/2 <md:w-full px-2.5 space-y-6">
<div class="text-lg space-y-3 px-3 <md:px-0">
<h3 class="font-bold pb-2 border-b-1 border-gray-400">
Search Research
</h3>
<p>
Lorem ipsum dolor sitamet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
</p>
</div>
<!-- https://v1.tailwindcss.com/components/forms -->
<form class="w-full">
<!-- block -->
<div class="flex flex-wrap">
<div class="w-full md:w-8/12 px-3 pb-2 <md:px-0">
<!-- <label class="block" for="term">
Full Name
</label> -->
<input class="input" type="text" placeholder="(required)">
<!-- <p class="text-red-500">Please fill out this field.</p> -->
</div>
</div>
<!-- block -->
<!-- block -->
<div class="px-3 py-3 <md:px-0">
<button class="button" type="button">
Submit
</button>
</div>
<!-- block -->
</form>
</div>
<!-- flex item -->
</div>
<!-- block -->
</div>
<!-- container -->
</div>
<!-- block -->
<!-- container: highlight -->
<div class="container mx-auto pb-10">
<!-- block -->
<div class="flex-center-x px-1.5 pb-8">
<div class="w-5/12 <xl:w-6/12 <lg:w-8/12 <md:w-full px-2.5 text-center">
<div class="separator-center">
<h2 class="text-4xl font-bold pb-2">
Tags
</h2>
<div class="text-lg pb-2">
<p>
Lorem ipsum dolor sitamet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
</p>
</div>
<ul class="space-x-2 flex-center-x list-circle list-inside">
<li><a href="#" class="relative -left-10px hover:text-gray-500">data</a></li>
<li><a href="#" class="relative -left-10px hover:text-gray-500">network</a></li>
<li><a href="#" class="relative -left-10px hover:text-gray-500">collaboration</a></li>
<li><a href="#" class="relative -left-10px hover:text-gray-500">something</a></li>
<li><a href="#" class="relative -left-10px hover:text-gray-500">data</a></li>
<li><a href="#" class="relative -left-10px hover:text-gray-500">network</a></li>
<li><a href="#" class="relative -left-10px hover:text-gray-500">collaboration</a></li>
<li><a href="#" class="relative -left-10px hover:text-gray-500">something</a></li>
</ul>
</div>
</div>
</div>
<!-- block -->
<!-- block -->
<div class="flex flex-wrap w-full px-4 pb-4">
<!-- flex item -->
<div class="w-8/12 <lg:w-1/2 <md:w-full flex-center-xy bg-gray-200 min-h-lg bg-cover bg-center relative"
:style="{ 'background-image': 'url(/static/Tree-projections.002.jpeg)' }"
>
<div class="absolute top-0 left-0 py-1 pl-3 pr-1 m-2 bg-white z-2">
<ul class="flex flex-wrap list-circle list-inside">
<li><a href="#" class="relative -left-10px hover:text-gray-500 pr-2">Talks</a></li>
<li><a href="#" class="relative -left-10px hover:text-gray-500 pr-2">Events</a></li>
<li><a href="#" class="relative -left-10px hover:text-gray-500 pr-2">News</a></li>
</ul>
</div>
</div>
<!-- flex item -->
<!-- flex item -->
<div class="w-4/12 <lg:w-1/2 <md:w-full bg-red-200 h-lg flex flex-col justify-between">
<!-- flex item -->
<div class="pl-10 pr-4 pt-12 <lg:px-6">
<h3 class="text-2xl font-bold leading-relaxed hover:text-gray-500 pb-4">
<a href="#">
Lorem ipsum dolor sitamet,
consectetur adipiscing elit
</a>
</h3>
<div class="text-lg w-10/12">
<p>
Lorem ipsum dolor sitamet,
consectetur adipiscing elit, sed
do eiusmod tempor incididunt
utlabore et dolore magna
aliqua.
</p>
</div>
</div>
<!-- flex item -->
<!-- flex item -->
<div class="pl-10 pr-4 pb-10 <lg:px-6">
<button class="button">
Read More
</button>
</div>
<!-- flex item -->
</div>
<!-- flex item -->
</div>
<!-- block -->
</div>
<!-- container -->
<loop-items
v-slot="{ items, meta, data }"
v-bind:limit="6"
v-bind:api="'/wp-json/api/v1/research'"
v-bind:scroll-to-top="'items-research'"
>
<!-- container: items -->
<div
class="container mx-auto pb-10"
id="items-research"
v-if="meta.totalPages > 0"
>
<!-- block -->
<div class="flex-center-x w-full px-1.5">
<!-- item -->
<div
class="w-4/12 <lg:w-1/2 <md:w-full px-2.5"
v-for="( item, index ) in items"
>
<div class="square-container !before:pt-80/100 relative">
<a
:href="item.url"
class="square-object bg-cover bg-center hover:opacity-80 transition-opacity duration-500"
:style="{ 'background-image': 'url(' + item.image.url + ')' }"
>
</a>
</div>
<div class="px-6 py-6 mb-4 bg-gray-50">
<h3 class="bg-text hover:cursor-pointer hover:bg-violet-600 px-4 py-2 text-2xl font-bold leading-relaxed">
<a
:href="item.url"
v-html="item.title"
></a>
</h3>
<div
class="pt-3 pr-1"
v-if="item.terms"
>
<ul class="flex flex-wrap list-circle list-inside">
<li
v-for="( item, index ) in item.terms"
>
<a
class="relative -left-10px hover:text-gray-500 pr-2"
:href="item.url"
v-html="item.name"
></a>
</li>
</ul>
</div>
<div
class="text-lg pt-4"
v-html="item.excerpt"
></div>
</div>
</div>
<!-- item -->
</div>
<!-- block -->
<!-- block -->
<div class="flex pt-6">
<!-- item -->
<div class="w-4/12 px-2.5">
<nav v-if="meta.prevPage !== false">
<ul class="menu simple">
<li>
<float-item>
<router-link
:to="meta.context + meta.prevPage"
class="text-5xl hover:text-gray-500 tooltip-context"
>
<i class="icon-chevron-thin-left"></i>
</router-link>
<div class="tooltip-container py-0.5 px-2 text-white bg-black rounded whitespace-nowrap">
<div class="arrow" data-popper-arrow></div>
<span>
Previous Page
</span>
</div>
</float-item>
</li>
</ul>
</nav>
</div>
<!-- item -->
<!-- item -->
<div class="w-4/12 px-2.5 flex-center-xy">
<span>{{ meta.currentPage }}/{{ meta.totalPages }}</span>
</div>
<!-- item -->
<!-- item -->
<div class="w-4/12 px-2.5">
<nav v-if="meta.nextPage !== false">
<ul class="menu simple">
<li>
<float-item>
<router-link
:to="meta.context + meta.nextPage"
class="text-5xl hover:text-gray-500 float-right tooltip-context"
>
<i class="icon-chevron-thin-right"></i>
</router-link>
<div class="tooltip-container py-0.5 px-2 text-white bg-black rounded whitespace-nowrap">
<div class="arrow" data-popper-arrow></div>
<span>
Next Page
</span>
</div>
</float-item>
</li>
</ul>
</nav>
</div>
<!-- item -->
</div>
<!-- block -->
</div>
<!-- container -->
</loop-items>
<!-- container: signup -->
<div class="container mx-auto py-12 mb-10 bg-gray-50">
<!-- block -->
<div class="flex-center-x px-1.5 pb-8">
<div class="w-5/12 <xl:w-6/12 <lg:w-8/12 <md:w-full px-2.5 text-center">
<div class="separator-center">
<h2 class="text-4xl font-bold">
Newsletters
</h2>
<div class="text-lg py-2">
<p>
Lorem ipsum dolor sitamet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
<!-- block -->
<!-- block -->
<div class="flex-center-xy w-full px-1.5">
<div class="w-8/12 <xl:w-full px-2.5">
<!-- https://v1.tailwindcss.com/components/forms -->
<form class="w-full">
<!-- block -->
<div class="flex flex-wrap">
<div class="w-full md:w-1/2 px-3 pb-6">
<label class="block" for="full-name">
Full Name
</label>
<input class="input" type="text" placeholder="(required)">
<!-- <p class="text-red-500">Please fill out this field.</p> -->
</div>
<div class="w-full md:w-1/2 px-3 pb-6">
<label class="block" for="email">
Email
</label>
<input class="input" type="email" placeholder="(required)">
<!-- <p class="text-red-500">Please fill out this field.</p> -->
</div>
</div>
<!-- block -->
<!-- block -->
<div class="flex flex-wrap">
<div class="w-full md:w-1/2 px-3 pb-6">
<label class="block" for="organisation">
Organisation
</label>
<input class="input" type="text" placeholder="(optional)">
</div>
<div class="w-full md:w-1/2 px-3 pb-6">
<label class="block" for="website">
Website
</label>
<input class="input" type="text" placeholder="(optional)">
</div>
</div>
<!-- block -->
<!-- block -->
<div class="flex-center-xy py-3">
<button class="button" type="button">
Submit
</button>
</div>
<!-- block -->
</form>
</div>
</div>
<!-- block -->
</div>
<!-- container -->
<!-- container: footer scroll top -->
<div class="container mx-auto flex-center-x">
<a
href="#"
class="triangle-up"
data-tippy-placement="top"
data-tippy-content="Scroll to Top"></a>
</div>
<!-- container -->
<!-- container: footer menu -->
<div class="w-full py-10 bg-gray-100">
<!-- block -->
<div class="flex flex-wrap w-full px-1.5">
<div class="w-full px-2.5">
<ul class="flex-center-x space-x-10 <lg:space-x-6">
<li><a href="#" class="hover:text-gray-500">Home</a></li>
<li><a href="#" class="hover:text-gray-500">Questions</a></li>
<li><a href="#" class="hover:text-gray-500">Voices</a></li>
<li><a href="#" class="hover:text-gray-500">Resources</a></li>
<li><a href="#" class="hover:text-gray-500">Research</a></li>
<li><a href="#" class="hover:text-gray-500">About</a></li>
<li><a href="#" class="hover:text-gray-500">Connect</a></li>
</ul>
</div>
</div>
<!-- block -->
<!-- block -->
<div class="flex flex-wrap w-full px-1.5 py-10">
<div class="w-full px-2.5">
<ul class="flex-center-x space-x-3 <md:text-center">
<li>
<a
href="#"
target="_blank"
rel="noopener"
class="text-lg text-light-blue-400 hover:text-light-blue-600">
<i class="icon-vimeo"></i>
</a>
</li>
<li>
<a
href="#"
target="_blank"
rel="noopener"
class="text-lg text-rose-500 hover:text-rose-800">
<i class="icon-instagram"></i>
</a>
</li>
<li>
<a
href="#"
target="_blank"
rel="noopener"
class="text-lg text-light-blue-500 hover:text-light-blue-600">
<i class="icon-twitter"></i>
</a>
</li>
<li>
<a
href="#"
target="_blank"
rel="noopener"
class="text-lg text-blue-600 hover:text-blue-900">
<i class="icon-linkedin"></i>
</a>
</li>
</ul>
</div>
<div class="w-full px-2.5 pb-2">
<ul class="flex-center-x space-x-6 <md:text-center">
<li>Email: <a href="#" class="hover:text-gray-500">hello@sensewithdata.org</a></li>
</ul>
</div>
<div class="w-full px-2.5">
<ul class="flex-center-x space-x-6 <md:text-center separator-x">
<li><a href="#" class="hover:text-gray-500">Data Policy</a></li>
<li><a href="#" class="hover:text-gray-500">Terms and Conditions</a></li>
</ul>
</div>
</div>
<!-- block -->
</div>
<!-- container -->
<current-breakpoint/>
</div>
</body>
</html>