index.liquid

---
permalink: "/"
layout: layout.liquid

renderData:
    title: "Lok Sang Ho"

---
<!--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader">
  <div id="status">&nbsp;</div>
</div>
<script>
$(window).on('load', function() { // makes sure the whole site is loaded 
  $('#status').delay(4000).fadeOut(); // will first fade out the loading animation 
  $('#preloader').delay(4500).fadeOut('slow'); // will fade out the white DIV that covers the website. 
  $('body').delay(4500).css({'overflow':'visible'});
})
</script>
<div>
<p id="instruct_x3d">Click and drag to rotate. Press 'R' to reset view.</p>
<x3d class="time_machine"> 
    <scene>
        <navigationInfo explorationMode="rotate"></navigationInfo>
        <Background transparency='0.5' ></Background>
        <inline url="assets/time_machine.x3d"> </inline> 
        <transform DEF="clock1">
            <inline url="assets/Flying_Clocks.x3d"> </inline> 
        </transform>
        <transform DEF="clock2">
            <inline url="assets/Flying_Clocks.x3d"> </inline> 
        </transform>
        <timeSensor DEF="time" cycleInterval="1" loop="true"></timeSensor>
        <PositionInterpolator DEF="move1" key="0 1" keyValue="0 0 0   -100 0 0"></PositionInterpolator>
        <Route fromNode="time" fromField ="fraction_changed" toNode="move1" toField="set_fraction"></Route>
        <Route fromNode="move1" fromField ="value_changed" toNode="clock1" toField="translation"></Route>
        <PositionInterpolator DEF="move2" key="0 1" keyValue="100 0 0   0 0 0"></PositionInterpolator>
        <Route fromNode="time" fromField ="fraction_changed" toNode="move2" toField="set_fraction"></Route>
        <Route fromNode="move2" fromField ="value_changed" toNode="clock2" toField="translation"></Route>
    </scene> 
</x3d>  
</div>-->
<div class="corkboard-top">
<br><br><br><br><br><br><br><br>
</div> 
<div id="corkboard" class="child corkboard columns is-multiline"> 
    {%- for portfolio-item in contentful-photos -%}
    <div class="item column is-one-third ">
       
        <div class="flip-card">
		<div class=" flip-card-inner">

		<div class="flip-card-front">
            
                	<div class=" image is-1by1">
                        <img class="polaroid" src="https:{{portfolio-item.thumbnail.fields.file.url}}?w=400&fm=jpg&fl=progressive&q=80&fit=fill&f=faces" alt="Photo from {{ portfolio-item.itemTitle }}" loading="lazy">

               		 </div>
		
            	<img class="polaroid_icon" src="css/icon_only.png">
		
		<!--<p class="title is-4 has-text-dark"></p>-->
        	</div>
        	
			<div class="flip-card-back polaroid-back has-text-centered is-flex is-align-items-center">
		
				<div class="polaroid-back-text">
					<a href="{{portfolio-item.slug}}"><p>#{{portfolio-item.itemTitle}}</p></a>
				</div>
		
			</div>
			
		</div>
		<img class="polaroid_pin" src="css/pin_yellow.png">
	</div>
    </div>
    {%- endfor -%}
</div>
<div class="corkboard-bottom">
<br>
<br><br><br><br><br><br><br>
</div>

<br>
<br>

<!--<h1 class="title has-text-centered">Social Media</h1>-->
<div>
<div class="social-media">
	<div class="social-board-top">
	<br><br><br><br><br><br><br><br><br><br><br>
	</div>
	<div class="child social-board-middle">
		<br><br>
		<div class="instagram_container"> 
			<figure data-behold-id="JcBmk4CkAWNHuyq9dZcS"></figure>
			<script src="https://w.behold.so/widget.js" type="module"></script>
		</div>
		<br><br>
		<div class="is-one-quarter twitter_container">
			<div>
			<a class="twitter-timeline" data-tweet-limit="3" data-chrome="nofooter noborders noheader noscrollbar" data-width="300" href="https://twitter.com/LokSangHo1?ref_src=twsrc%5Etfw">Tweets by LokSangHo1</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
			</div>
		</div>
		<br><br>
	</div>
	<div class="social-board-bottom">
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	</div>
</div>
</div>