| 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/voices/ |
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/voices.07bb4a82.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 current">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>
<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 -->
<!-- container: introduction -->
<div class="container mx-auto py-6">
<!-- block -->
<div class="flex px-1.5 py-2">
<div class="w-1/3 <lg:w-1/2 <md:w-full px-2.5">
<div class="text-lg">
<p>
We like asking questions, provoking discourse and exploring a diversity of attitudes and approaches, as a method of research and developing our data practice. So we've approached people to add their data insights and ask a question to continue the discussion.
</p>
</div>
</div>
</div>
<!-- block -->
</div>
<!-- container -->
<!-- container: share -->
<div class="container mx-auto">
<!-- block -->
<div class="px-1.5">
<div class="w-1/3 <lg:w-1/2 <md:w-full px-2.5">
<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>
</div>
<!-- block -->
</div>
<!-- container -->
<loop-items
v-slot="{ items, meta, data }"
v-bind:limit="6"
v-bind:api="'/wp-json/api/v1/voice'"
v-bind:scroll-to-top="'items-voice'"
>
<!-- container: items -->
<div
class="container mx-auto pb-10"
id="items-voice"
v-if="meta.totalPages > 0"
>
<!-- block -->
<div class="flex-center-x w-full px-1.5 pt-10">
<!-- 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 bg-gray-200">
<div
class="flex flex-start py-3 square-object bg-cover bg-center hover:opacity-80 transition-opacity duration-500"
:style="{ 'background-image': 'url(' + item.image.url + ')' }"
>
<div class="px-2.5 text-center">
<h3 class="text-4xl bg-text hover:cursor-pointer hover:bg-violet-600 px-4 py-2 leading-relaxed">
<a
:href="item.url"
v-html="item.title"
></a>
</h3>
</div>
</div>
</div>
<div class="px-6 py-6 mb-4 bg-gray-50">
<div
class="text-lg"
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>