<html>
<head>

<!--

　　　          ___   .--.
　　　    .--.-"   "-' .- |
　　　   / .-,`          .'   
　　　   \   `           \ 　　　　　　。・゜ 　♡   。　　・　゜ 　　　♡  
　　　    '.            ・ \　　　　　　　　　　　　　　　　　　　　　　　　♡　　　　♡ ゜・。。♡  
　　　      |  ・     ᴥ    。|　　　　・゜♡ ゜・。　　. * ・ ♡ °  . 。
　　　      \ 。            /.____　　　　　　　　　　　　　　　　　　♡.  
　　　     /`-.          ,'.'    `\　　　　　　　　　　　　　　　　　　。・゜　　　 ♡ ・ 。　　。・゜ ♡  
　　　  __/   \`-.____.-' `\      /　　　　　♡　。・゜      
　　　  | `---`'-'._/-`     \----'    _ 　　　　　　　　　　　♡　　　.　　　.♡ 
　　　  |,-'`  /             |    _.-' `\　　　　. * ・        
　　　 .'     /              |--'`     / |　　　　　　　　　　 ♡
　　　/      /\              `         | |
　　　|   .\/  \      .--. __          \ |　　　　　　　　　　　*.。middlepot.com 
　　　 '-'      '._       /  `\         /　　　　　　　　　　　　　　　　　　　　　　　ଘ(*´ ˘ `*)ഒ 。.*
　　　             `\    '     |------'`
　　　               \  |      |
　　　                \        /
 　　　                '._  _.'

-->

<title>ഒ</title>

<link rel="shortcut icon" href="https://i.imgur.com/c2cyx81.png">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="title" content="ഒ">
<meta name="description" content="꒰ 𝑚𝑖𝑑𝑑𝑙𝑒𝑝𝑜𝑡'𝑠 𝑑𝑖𝑎𝑟𝑦 ꒱">
<meta name="theme-color" content="#f7e9ed">
<meta property="og:url" content="https://middlepot.com/portfolio">
<meta property="og:title" content="ഒ">
<meta property="og:description" content="꒰ 𝑚𝑖𝑑𝑑𝑙𝑒𝑝𝑜𝑡'𝑠 𝑑𝑖𝑎𝑟𝑦 ꒱">
<meta property="og:image" content="https://middlepot.com/img/pure.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:type" content="website">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://middlepot.com/portfolio">
<meta property="twitter:title" content="ഒ">
<meta property="twitter:description" content="꒰ 𝑚𝑖𝑑𝑑𝑙𝑒𝑝𝑜𝑡'𝑠 𝑑𝑖𝑎𝑟𝑦 ꒱">
<meta property="twitter:image" content="https://middlepot.com/img/pure.jpg">

<style>
body{ 
  cursor: url(https://i.imgur.com/C9RGjYt.png), progress;}
a:hover {cursor: url(https://i.imgur.com/EZZ5Vol.png), progress;
  
  }
 ::selection {text-shadow: 0 0 2px #cec1bb;color:#cec1bb}
 ::-moz-selection {text-shadow: 0 0 2px #cec1bb;color:#cec1bb}
}
}
</style>
<style type="text/css">
::-webkit-scrollbar {
width: 4px;
height: 4px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #f9f0ed;
-webkit-border-radius: 0ex;
border: 1px dotted #e2d5d0;
}
#linkbjinho { color: #bca7a7; padding-bottom: 2px; border-bottom:1px dotted #c6a799; }
#linkzinho { padding-bottom: 2px; border-bottom:1px dotted #c6a799; }
#linkzinhoo { padding-bottom: 2px; border-bottom:1px dotted #e8c1c5; }</style>

<!--
tooooooooltip
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script>
(function($){
	var methods={
		init:function(options){
			var defaults={ 
				tip_follows_cursor:false, //tooltip follows cursor: boolean
				tip_delay_time:700, //tooltip delay before displaying: milliseconds
				tip_fade_speed:300, //tooltip fade in/out speed: milliseconds
				attribute:"title" //tooltip text come from this attribute
			},
			options=$.extend(defaults,options);
			if($("#s-m-t-tooltip").length===0){
				$("body").append("<div id='s-m-t-tooltip'><div></div></div>");
			}
			var smtTooltip=$("#s-m-t-tooltip"); 
			smtTooltip.css({"position":"absolute","display":"none"}).data("smt-z-index",smtTooltip.css("z-index")).children("div").css({"width":"100%","height":"100%"});
			function smtGetCursorCoords(event){
				var smtCursorCoordsX=event.pageX,
					smtCursorCoordsY=event.pageY;
				smtTooltip.style_my_tooltips("position",{
					smtCursorCoordsX:smtCursorCoordsX,
					smtCursorCoordsY:smtCursorCoordsY
				});
			}
			$(".smt-current-element").live("mouseout mousedown click",function(){
				var $this=$(this);
				clearTimeout(smtTooltip_delay);
				smtTooltip.style_my_tooltips("hide",{
					speed:$this.data("smt-fade-speed")
				});
				$(document).unbind("mousemove");
				$this.removeClass("smt-current-element");
				if($this.attr(options.attribute)===""){
					$this.attr(options.attribute,$this.data("smt-title"));
				}
			});
			return this["live"]("mouseover",function(event){
				var $this=$(this),
					title=$this.attr(options.attribute);
				$this.addClass("smt-current-element").data({"smt-title":title,"smt-fade-speed":options.tip_fade_speed}).attr(options.attribute,"");
				smtTooltip.style_my_tooltips("update",{
					title:title,
					speed:options.tip_fade_speed,
					delay:options.tip_delay_time,
					tip_follows_cursor:options.tip_follows_cursor
				});
				$(document).bind("mousemove", function(event){
					smtGetCursorCoords(event); 
				});
			});
		},
		update:function(options){
			var $this=$(this);
			$this.stop().css({"display":"none","z-index":$this.data("smt-z-index")}).children("div").text(options.title);
			smtTooltip_delay=setTimeout(function(){
				$this.style_my_tooltips("show",{
					speed:options.speed,
					tip_follows_cursor:options.tip_follows_cursor
				})
			}, options.delay);
		},
		show:function(options){
			var $this=$(this);
			$this.stop().fadeTo(options.speed,1);
			if(!options.tip_follows_cursor){
				$(document).unbind("mousemove");
			}
		},
		hide:function(options){
			var $this=$(this);
			$this.stop().fadeTo(options.speed,0,function(){
				$this.css({"z-index":"-1"});
			});
		},
		position:function(options){
			var $this=$(this),
				winScrollX=$(window).scrollLeft(),
				winScrollY=$(window).scrollTop(),
				tipWidth=$this.outerWidth(true),
				tipHeight=$this.outerHeight(true),
				leftOffset=(options.smtCursorCoordsX+tipWidth)-winScrollX,
				topOffset=(options.smtCursorCoordsY+tipHeight)-winScrollY;
			if(leftOffset<=$(window).width() && leftOffset<=$(document).width()){
				$this.css("left",options.smtCursorCoordsX);
			}else{
				var thePosX=options.smtCursorCoordsX-tipWidth;
				if(thePosX>=winScrollX){
					$this.css("left",thePosX);
				}else{
					$this.css("left",winScrollX);
				}
			}
			if(topOffset<=$(window).height() && topOffset<=$(document).height()){
				$this.css("top",options.smtCursorCoordsY);
			}else{
				var thePosY=options.smtCursorCoordsY-tipHeight;
				if(thePosY>=winScrollY){
					$this.css("top",thePosY);
				}else{
					$this.css("top",winScrollY);
				}
			}
		}
	}
	$.fn.style_my_tooltips=function(method){
		if(methods[method]){
			return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
		}else if(typeof method==="object" || !method){
			return methods.init.apply(this,arguments);
		}else{
			$.error("Method "+method+" does not exist");
		}
	};
})(jQuery);  
</script>
<script>

(function($){

$(document).ready(function(){

$("a[title]").style_my_tooltips({

tip_follows_cursor:true,

tip_delay_time:90,

tip_fade_speed:600,

attribute:"title"

});

});

})(jQuery);

</script>
<!--tooltip!-->
<style>
.tooltip{
    display: inline;
    position: relative;
}
#s-m-t-tooltip {
max-width:300px; /*how big the tooltip can be at most*/
border-radius: 0px; /*change your border radius*/
padding:3px 4px 5px 4px; /*padding inside tooltip*/
margin:10px 7px -2px 10px; /*distance from word*/
background-color:#fcf6f2; /*background color*/ 
  border:1px dotted #CEB6B6; /*border info*/
  font-family:tahoma; /*tooltip font*/
font-size:7px; /*tooltip font size*/
letter-spacing:2px; /*tooltip letter spacing*/
color:#CEB6B6; /*tooltip font color*/
z-index:9999;
}
</style>

<!--
menuuuuuuuuuuuuuuu
-->
<html xmlns="https://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				font-family: Verdana;
			}
			
			ul {
				list-style: none
			}
			
			#context_menu {
				background: #fcf6f2;
				-moz-border-radius: 1px 1px;
				border: 1px dotted #baada3;
				letter-spacing:1px; 
				width: 70px;
				font-size: 8px;
				position: absolute;
				display: none;
				z-index:999;
			}
			
			#context_menu ul li {
				padding: 4px 4px;
				-moz-border-radius: 10px 10px;
				cursor: url(https://i.imgur.com/C9RGjYt.png), progress;
			}
			
			#context_menu ul li:hover {
				background: #fcf6f2;
				color: #baada3;
			}
		</style>
		<script type="text/javascript" language="JavaScript">
			function click(e){
				document.getElementById("teste").innerHTML = "";
				var menu = document.getElementById("context_menu");
				var mouseEvent = e || event;
				if (mouseEvent.button == 2 || mouseEvent.button == 3) {
					mostrar(mouseEvent);
					menu.onmouseout = function(e){
						var mouseEvent = e || event;
						var element = mouseEvent.relatedTarget || mouseEvent.toElement; 
						if (element.nodeName != "LI") {
							mouseEvent.toElement;
						}
					};
				}
				if (mouseEvent.button == 0 || mouseEvent.button == 1) {
					esconder();
				}
			}
			
			document.onmousedown = click;
			document.oncontextmenu = function(){
				return false
			};
			function mostrar(e){
				var menu = document.getElementById("context_menu");
				menu.style.display = "block";
				menu.style.top = e.pageY + 5 + "px";
				menu.style.left = e.pageX + 5 + "px";
			}
			
			function esconder(){
				setTimeout(function(){
					var menu = document.getElementById("context_menu");
					menu.style.display = "none"
				}, 100);
			}
			
		</script>
	</head>
		<div id="teste"></div>
		<div id="context_menu">
			<ul>
				<li><font color="#baada3">stay safe.. !</font></li>
			</ul>
		</div>
<!--
menuuuuuuuuuuuuuuu
-->

</head>


<body ondragstart="return false" style="background-image:url(https://i.imgur.com/s0V8ydU.png); background-repeat: no-repeat; background-size: cover; background-color:#fefbfb; font-family: Verdana; font-size: 10px;">
<style>
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
#base {
position: absolute;
	left: 13%;
	top: 10%;
overflow-y:hidden;
overflow-x:hidden;
 }
#menu1 {
position: absolute;
	left: %;
	top: 29%;
width: 130px;
height: 250px;
overflow-y:hidden;
overflow-x:hidden;
z-index: 2;
 }
#menu2 {
position: absolute;
	left: 23%;
	top: 0.3%;
width: 560px;
height: 35px;
overflow-y:hidden;
overflow-x:hidden;
z-index: 4;
 }
#menu3 {
position: absolute;
	left: 85%;
	top: 47%;
width: 130px;
height: 250px;
overflow-y:hidden;
overflow-x:hidden;
z-index: 2;
 }
#stuff {
position: absolute;
	left: 18.5%;
	top: 10.5%;
width: 594px;
height: 433px;
overflow-x:hidden;
z-index: 6;
 }
#aaa {
position: absolute;
	left: 46.5%;
	top: 96%;
width: 100px;
height: 100px;
overflow-x:hidden;
z-index: 3;
 }
@media screen and (max-width: 1000px) and (orientation: portrait){
#everything { position: absolute; zoom: 155%;
	left:570px;
	top:80px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg); }
#stuff { overflow: auto; overflow: scroll; }
}
@media screen and (max-width: 1000px) and (orientation: landscape){
#everything { position: absolute; zoom: 100%; left:20px; top:10px;}
#stuff { overflow: auto; overflow: scroll; }
}
</style>

<div id="everything">
<div id="base">

<div id="aaa">
<a id="linkzinho" href="https://middlepot.com" style="text-decoration: none;"><font color="#8e7f69">middlepot.com</font></a>
</div>

<img src="https://i.imgur.com/Jm86w3I.png"/>

<div onselectstart="return false" id="menu1">
<p style="font-size:10px;line-height:50%;"><br>　　　　<font color="#c6a799">ణ</font>　<a href="/about" style="text-decoration: none; color:#a3948d;">about</a><br><br><br>
　　　　<font color="#c6a799">ణ</font>　<a href="/links" style="text-decoration: none; color:#a3948d;">links</a><br><br><br>
　　　　<font color="#c6a799">ణ</font>　<a href="/contact" style="text-decoration: none; color:#a3948d;">contact</a><br><br><br>
　　　　<font color="#c6a799">ణ</font>　<a href="/credits" style="text-decoration: none; color:#a3948d;">credits</a><br><br><br>
</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
　　　　　　<a href="https://poofties.middlepot.com" target="_blank" style="text-decoration: none; color:#8c7d75;">poofties</a>
</div>

<div id="menu2">
<br>
　　<a id="linkzinho" href="/status" style="text-decoration: none; color:#93847d;">status</a>　　　　　　　 <a id="linkzinho" href="/fashion" style="text-decoration: none; color:#93847d;">fashion</a>　　　　　　　<a id="linkzinho"href="/portfolio" style="text-decoration: none; color:#93847d;">portfolio</a>　　　　　　　<a id="linkzinho" href="/gaming" style="text-decoration: none; color:#93847d;">gaming</a>　　　　　　<a id="linkzinho" href="/recommended" style="text-decoration: none; color:#93847d;">recommended</a>

</div>

<div id="menu3">
<br><br>
　　　　　 <a href="/blog" style="text-decoration: none; color:#b29487;">my blog</a>
</div>

<div id="stuff">

<div style="background-image:url(https://i.imgur.com/x9mxyB4.png); width: 594px; height: 433px; color: #BC9F9F; overflow-x: hidden; overflow: auto; overflow: scroll; text-align:justify ; font-family: Verdana; font-size:8px; line-height: 100%">

<div style="background-image:url(https://i.imgur.com/Vhet6sr.png); background-size: auto auto; background-repeat: repeat-x; width: 590px; height: 25px; overflow-x: hidden; overflow-y: hidden;"></div>

<div style= "overflow: auto; overflow: scroll; padding-left: 10%; padding-right: 10%;">

<style>
#linkzinhoinho { color: #c7a5a5; }
</style>
<br>
<center><img width="100px" height="auto" src="https://i.imgur.com/9qg5UDg.png"></center><br>
<center><font color="#bca9a9">melissa cavalcante assolari | august 11, 1997 <br>degree in game design | artist ♡ crafter ♡ designer </font></center>
<center>
<br><br><font color="#9c8c7e">( <a id="linkbjinho" style="text-decoration: none;" href="https://middlepot.com/cv.pdf" target="_blank"><font color="#9c8c7e">middlepot's cv</font></a> )</font><br><br><br><br><br>

<img src="https://i.imgur.com/NC62NZP.gif">


<br><br><br><font color="#9e8976"><sub><sub><img src="https://i.imgur.com/nxTBxAO.gif"></sub></sub> web design<sub><img src="https://i.imgur.com/0USgjYr.gif"></sub><br><br></font><br><br>
<img width="300px" height="auto" src="https://i.imgur.com/f0mz3xF.png"><br><br>
<img width="300px" height="auto" src="https://i.imgur.com/INDlrdR.gif"><br><br>
<img width="300px" height="auto" src="https://i.imgur.com/lIjAnkz.gif"><br><br>
<img width="300px" height="auto" src="https://i.imgur.com/qyIhmW6.png">
<br><br><br><br>
<img src="https://i.imgur.com/NC62NZP.gif"></center></font>
<center>



<br><br><br><font color="#9e8976"><sub><sub><img src="https://i.imgur.com/nxTBxAO.gif"></sub></sub> needle felting<sub><img src="https://i.imgur.com/0USgjYr.gif"></sub><br><br></font><br><br>
　　<img width="auto" height="250px" src="https://i.imgur.com/WOx9j1W.png">　
<img width="auto" height="250px" src="https://i.imgur.com/HnO6VtX.png"><br><br>
<img width="auto" height="150px" src="https://i.imgur.com/vlSTDfe.png">　
<img width="auto" height="150px" src="https://i.imgur.com/qunDIJU.png"><br><br>
　　<img width="auto" height="250px" src="https://i.imgur.com/JsN6EKu.png">　
<img width="auto" height="250px" src="https://i.imgur.com/C3Jv1i8.png">
<br><br><br><br>
<img src="https://i.imgur.com/NC62NZP.gif"></center></font>
<center>



<br><br><br><font color="#9e8976"><sub><sub><img src="https://i.imgur.com/nxTBxAO.gif"></sub></sub> game design<sub><img src="https://i.imgur.com/0USgjYr.gif"></sub><br><br>
<a href="/milkywoods" target="_blank"><img src="https://i.imgur.com/bQqf98x.gif"/></a><br><br>
<font style="font-size: 8px;" color="#b38d94">
( click to enter milky woods )
</font>
<br><br><br><br>
<img src="https://i.imgur.com/NC62NZP.gif"></center></font>
<center>



<br><br><br><font color="#9e8976"><sub><sub><img src="https://i.imgur.com/nxTBxAO.gif"></sub></sub> digital drawing<sub><img src="https://i.imgur.com/0USgjYr.gif"></sub><br><br>
<br>
<img width="auto" height="180px" src="https://i.imgur.com/En5glYJ.png"><br><br>
<img width="auto" height="180px" src="https://i.imgur.com/SoiKb3i.png"><br><br>
<img width="auto" height="180px" src="https://i.imgur.com/oIj1rBe.png"><br><br>
<img width="auto" height="180px" src="https://i.imgur.com/hSK8UjC.png">

<br><br><br><br>
<img src="https://i.imgur.com/NC62NZP.gif"></center></font>
<center>



<br><br><br><font color="#9e8976"><sub><sub><img src="https://i.imgur.com/nxTBxAO.gif"></sub></sub> collaging<sub><img src="https://i.imgur.com/0USgjYr.gif"></sub><br><br>
<br>
<img width="350px" height="auto" src="https://i.imgur.com/Gc9WlWB.png"><br><br>
<img width="350px" height="auto" src="https://i.imgur.com/PPy4T0y.png"><br><br><br>
<img width="175px" height="auto" src="https://i.imgur.com/I5f33J8.png"> <img width="175px" height="auto" src="https://i.imgur.com/QApSfkU.png">
<br><br><br><br>
<img src="https://i.imgur.com/NC62NZP.gif"></center></font>
<center>



<br><br><br><font color="#9e8976"><sub><sub><img src="https://i.imgur.com/nxTBxAO.gif"></sub></sub> sewing<sub><img src="https://i.imgur.com/0USgjYr.gif"></sub><br><br></font><br><br>
<img width="auto" height="350px" src="https://i.imgur.com/yZDQncB.png"><br><br>
<img width="auto" height="250px" src="https://i.imgur.com/iSQXs89.png"><br><br>
　<img width="auto" height="200px" src="https://i.imgur.com/40yJb4m.png">
<img width="auto" height="200px" src="https://i.imgur.com/KyF2u47.png"><br><br>
<img width="auto" height="300px" src="https://i.imgur.com/uTSJoqY.png"/>
<img width="auto" height="300px" src="https://i.imgur.com/jSHmf04.png"/><br><br>
<br><br><br><br>
<img src="https://i.imgur.com/NC62NZP.gif"></center></font>
<center>



<br><br><br><font color="#9e8976"><sub><sub><img src="https://i.imgur.com/nxTBxAO.gif"></sub></sub> ascii art<sub><img src="https://i.imgur.com/0USgjYr.gif"></sub><br><br>
<br>
<img src="https://i.imgur.com/QgQSreB.png">
<img src="https://i.imgur.com/gQcFKYn.png">
<img src="https://i.imgur.com/nMg7OJ5.png"><br><br>
<img src="https://i.imgur.com/px7ebRm.png">
<br><br><br><br>
<img src="https://i.imgur.com/NC62NZP.gif"></center></font>
<center>


<br><br><br><font color="#9e8976"><sub><sub><img src="https://i.imgur.com/nxTBxAO.gif"></sub></sub> photography<sub><img src="https://i.imgur.com/0USgjYr.gif"></sub><br><br>
<br>
<img width="400px" height="auto" src="https://i.imgur.com/kW0Y74l.png"><br><br><br><br>
<img src="https://i.imgur.com/NC62NZP.gif"></center></font>
<center>



<br><br><br><font color="#9e8976"><sub><sub><img src="https://i.imgur.com/nxTBxAO.gif"></sub></sub> embroidery<sub><img src="https://i.imgur.com/0USgjYr.gif"></sub><br><br>
<br>
<img width="280px" height="auto" src="https://i.imgur.com/vCQFGy0.png">
<br><br>
<img width="200px" height="auto" src="https://i.imgur.com/7fbv0PA.gif"> <img width="200px" height="auto" src="https://i.imgur.com/2rRb5tt.gif">
<br><br>
<img width="280px" height="auto" src="https://i.imgur.com/EahGtcV.gif">
<br><br>
<img width="280px" height="auto" src="https://i.imgur.com/OLF2amH.gif">
<br><br><br><br>
<img src="https://i.imgur.com/NC62NZP.gif"></center></font>
<center>



<br><br><br><font color="#9e8976"><sub><sub><img src="https://i.imgur.com/nxTBxAO.gif"></sub></sub> 3D modeling<sub><img src="https://i.imgur.com/0USgjYr.gif"></sub><br><br>
<font style="font-size: 8px;" color="#b38d94"><br>
( click the previews to load the .glb files )
</font>
<br><br>
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

<div style="border: none; width: 400px; height: 400px; overflow:hidden;">
<model-viewer onclick="dismissPoster();" reveal="manual" style="overflow:hidden; --progress-bar-color:#d1b0b2; --progress-bar-height:2px; --poster-color:transparent; top:-120px; left:-120px; border:none; width:650px; height:650px;" src="https://file.pooftie.me/m/bunny.glb" environment-image="https://i.imgur.com/YqBKGCz.jpg" poster="https://i.imgur.com/srm5Lh3.png" exposure="1.2" data-js-focus-visible camera-controls></model-viewer>
</div>
<div style="border: none; width: 400px; height: 400px; overflow:hidden;">
<model-viewer onclick="dismissPoster();" reveal="manual" style="overflow:hidden; --progress-bar-color:#d1b0b2; --progress-bar-height:2px; --poster-color:transparent; top:-120px; left:-140px; border:none; width:650px; height:650px;" src="https://file.pooftie.me/m/teddy.glb" environment-image="https://i.imgur.com/YqBKGCz.jpg" poster="https://i.imgur.com/q5eKeWy.png" exposure="1.2" data-js-focus-visible camera-controls></model-viewer>
</div>
<br><br><br><br>
<img src="https://i.imgur.com/NC62NZP.gif"></center></font>
<center>




<br><br><br><font color="#9e8976"><sub><sub><img src="https://i.imgur.com/nxTBxAO.gif"></sub></sub> digital painting<sub><img src="https://i.imgur.com/0USgjYr.gif"></sub><br><br>
<br>
<img width="300px" height="auto" src="https://i.imgur.com/3tWbz7w.png"><br><br>
<img width="350px" height="auto" src="https://i.imgur.com/bMMexej.png"><br><br>
<img width="300px" height="auto" src="https://i.imgur.com/PLAqbSa.png"><br><br>
<img width="350px" height="auto" src="https://i.imgur.com/HZseZ4b.png">
<br><br><br><br>
<img src="https://i.imgur.com/NC62NZP.gif"></center></font>
<center>



<br><br><br><font color="#9e8976"><sub><sub><img src="https://i.imgur.com/nxTBxAO.gif"></sub></sub> video editing<sub><img src="https://i.imgur.com/0USgjYr.gif"></sub><br><br>
<br>
<style>
#media-player {
	padding:25px;
	background-image:url(https://i.imgur.com/K9wDyg9.png);
	background-repeat: no-repeat;
	width:400px;
	height:253px;
}

video {
	background:#fff;
	width:396px;
	height:auto;
}

button {
	text-indent:-9999px;
	width:15px;
	height:15px;
	border:none;
	outline:none;
	cursor: url(https://i.imgur.com/EZZ5Vol.png), progress;
	background:transparent url('https://i.imgur.com/Xo2WHU1.png') no-repeat;
}

.pause { background-position:-19px 0; }
.stop { background-position:-38px 0; }
.volume-plus { background-position:-57px 0; }
.volume-minus { background-position:-76px 0; }
.mute { background-position:-95px 0; }
.unmute { background-position:-114px 0; }
.replay { background-position:-133px 0; }

progress {
	color:#fff;
	font-size:8px;
	font-family:verdana;
	border-radius: 5px;
	width:290px;
	height:6px;
	border:none;
	outline:none;
	margin-right:5px;
	text-align:left;
	
}
progress::-webkit-progress-bar {
  background-color: #fff;
  border-radius: 7px;
}
progress::-webkit-progress-value {
  background-color: #f5e4e8;
  border-radius: 7px;
}
progress::-moz-progress-bar {
  background-color: #fff;
  border-radius: 7px;
}
progress::-moz-progress-value {
  background-color: #f5e4e8;
  border-radius: 7px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() { initialiseMediaPlayer(); }, false);

var mediaPlayer;
var playPauseBtn;
var muteBtn;
var progressBar;

function initialiseMediaPlayer() {
	mediaPlayer = document.getElementById('media-video');
	
	playPauseBtn = document.getElementById('play-pause-button');
	muteBtn = document.getElementById('mute-button');
	progressBar = document.getElementById('progress-bar');

	mediaPlayer.controls = false;
	
	mediaPlayer.addEventListener('timeupdate', updateProgressBar, false);
	
	mediaPlayer.addEventListener('play', function() {
		changeButtonType(playPauseBtn, 'pause');
	}, false);
	mediaPlayer.addEventListener('pause', function() {
		changeButtonType(playPauseBtn, 'play');
	}, false);
	
	mediaPlayer.addEventListener('volumechange', function(e) { 
		if (mediaPlayer.muted) changeButtonType(muteBtn, 'unmute');
		else changeButtonType(muteBtn, 'mute');
	}, false);	
	mediaPlayer.addEventListener('ended', function() { this.pause(); }, false);	
}

function togglePlayPause() {
	if (mediaPlayer.paused || mediaPlayer.ended) {
		changeButtonType(playPauseBtn, 'pause');
		mediaPlayer.play();
	}
	else {
		changeButtonType(playPauseBtn, 'play');
		mediaPlayer.pause();
	}
}

function stopPlayer() {
	mediaPlayer.pause();
	mediaPlayer.currentTime = 0;
}

function changeVolume(direction) {
	if (direction === '+') mediaPlayer.volume += mediaPlayer.volume == 1 ? 0 : 0.1;
	else mediaPlayer.volume -= (mediaPlayer.volume == 0 ? 0 : 0.1);
	mediaPlayer.volume = parseFloat(mediaPlayer.volume).toFixed(1);
}

function toggleMute() {
	if (mediaPlayer.muted) {
		changeButtonType(muteBtn, 'mute');
		mediaPlayer.muted = false;
	}
	else {
		changeButtonType(muteBtn, 'unmute');
		mediaPlayer.muted = true;
	}
}

function replayMedia() {
	resetPlayer();
	mediaPlayer.play();
}

function updateProgressBar() {
	var percentage = Math.floor((100 / mediaPlayer.duration) * mediaPlayer.currentTime);
	progressBar.value = percentage;
	progressBar.innerHTML = percentage + '% played';
}

function changeButtonType(btn, value) {
	btn.title = value;
	btn.innerHTML = value;
	btn.className = value;
}

function loadVideo() {
	for (var i = 0; i < arguments.length; i++) {
		var file = arguments[i].split('.');
		var ext = file[file.length - 1];
		if (canPlayVideo(ext)) {
			resetPlayer();
			mediaPlayer.src = arguments[i];
			mediaPlayer.load();
			break;
		}
	}
}

function canPlayVideo(ext) {
	var ableToPlay = mediaPlayer.canPlayType('video/' + ext);
	if (ableToPlay == '') return false;
	else return true;
}

function resetPlayer() {
	progressBar.value = 0;
	mediaPlayer.currentTime = 0;
	changeButtonType(playPauseBtn, 'play');
}
</script>
	<div id='media-player'>
		<video id='media-video' controls poster="https://i.imgur.com/7TEHVIB.png" onclick="this.play()">
			<source src='https://file.pooftie.me/v/i.mp4' type='video/mp4'>
		</video>
		<div id='media-controls'>
			<progress id='progress-bar' min='0' max='100' value='0'/>0% played</progress>
			<button id='replay-button' class='replay' title="replay" onclick='replayMedia();'/>
			<button id='play-pause-button' class='play' title="play" onclick='togglePlayPause();'/>　
			<button id='stop-button' class='stop' title="stop" onclick='stopPlayer();'/>
			<button id='volume-inc-button' title="+ volume" class='volume-plus' onclick='changeVolume("+");'/>　
			<button id='volume-dec-button' title="- volume" class='volume-minus' onclick='changeVolume("-");'/>　
			<button id='mute-button' class='mute' title="mute" onclick='toggleMute("true");'/>
		</div>
	</div>
<br><br><br><br>
<img src="https://i.imgur.com/NC62NZP.gif"></center></font>
<center>


<br><br><br><font color="#9e8976"><sub><sub><img src="https://i.imgur.com/nxTBxAO.gif"></sub></sub> story games / templates<sub><img src="https://i.imgur.com/0USgjYr.gif"></sub><br><br></font><br><br>
<img width="280px" height="auto" src="https://i.imgur.com/xH8WFa3.gif">
<br><br><br><br>
<img src="https://i.imgur.com/NC62NZP.gif"></center></font>
<center>





<br><br><br><font color="#9e8976"><sub><sub><img src="https://i.imgur.com/nxTBxAO.gif"></sub></sub> compositing<sub><img src="https://i.imgur.com/0USgjYr.gif"></sub><br><br><br>
<sub><sub><img width="15px" height="auto" src="https://i.imgur.com/cisEw35.gif"></sub></sub>　<a href="https://file.pooftie.me/a/tiptoes.mp3" target="_blank" id="linkzinhoinho">tiptoes .mp3</a><br>
<sub><sub><img width="15px" height="auto" src="https://i.imgur.com/cisEw35.gif"></sub></sub>　<a href="https://file.pooftie.me/a/little%20girl.mp3" target="_blank" id="linkzinhoinho">little girl .mp3</a><br>
<sub><sub><img width="15px" height="auto" src="https://i.imgur.com/cisEw35.gif"></sub></sub>　<a href="https://file.pooftie.me/a/old%20stuffie.mp3" target="_blank" id="linkzinhoinho">old stuffie .mp3</a>
<br><br><br><br><br>
<img src="https://i.imgur.com/NC62NZP.gif"></center></font>
<center>





<br><br><br><font color="#9e8976"><sub><sub><img src="https://i.imgur.com/nxTBxAO.gif"></sub></sub> web materials<sub><img src="https://i.imgur.com/0USgjYr.gif"></sub><br><br>
<br>
<img src="https://i.imgur.com/5UJWsUc.png"><img src="https://i.imgur.com/5UJWsUc.png"><br><br>
<img width="40" height="auto" src="https://i.imgur.com/w3nIJKw.png"> <img width="40" height="auto" src="https://i.imgur.com/oEETh0f.png"> <img width="40" height="auto" src="https://i.imgur.com/OoVhpd0.png"><br><br>
<img width="110" height="auto" src="https://i.imgur.com/wSRLuW7.png"><br><br>
<img width="auto" height="60" src="https://i.imgur.com/kjJ7zti.gif">　<img width="auto" height="60"src="https://i.imgur.com/hxS2jLj.gif"><br><br>
<img width="auto" height="60" src="https://i.imgur.com/bvAiMrD.gif">　<img width="auto" height="60"src="https://i.imgur.com/7mKu6kW.png">
<br><br><br><br>
<img src="https://i.imgur.com/NC62NZP.gif"></center></font>
<center>




<br><br><br><font color="#9e8976"><sub><sub><img src="https://i.imgur.com/nxTBxAO.gif"></sub></sub> fonts<sub><img src="https://i.imgur.com/0USgjYr.gif"></sub><br><br>
<a href="https://file.pooftie.me/r/mimi.rar" target="_blank"><img src="https://i.imgur.com/KjGQcfl.png"></a><br><br>
<a href="https://file.pooftie.me/r/bby.rar" target="_blank"><img src="https://i.imgur.com/RgTmqQx.png"></a>
<br><br><br><br>
<img src="https://i.imgur.com/NC62NZP.gif"></center></font>
<center>


<br><br><br><font color="#9e8976"><sub><sub><img src="https://i.imgur.com/nxTBxAO.gif"></sub></sub> pc & phone customization<sub><img src="https://i.imgur.com/0USgjYr.gif"></sub><br><br></font><br><br>
<img width="400px" height="auto" src="https://i.imgur.com/ubcAKg9.gif"><br><br>
<img width="auto" height="350px" src="https://i.imgur.com/QmXja0G.png">　
<img width="auto" height="350px" src="https://i.imgur.com/xSkS9RH.png">
<br><br><br><br>
<img src="https://i.imgur.com/NC62NZP.gif"></center></font>
<center>


<br><br><br><font color="#9e8976"><sub><sub><img src="https://i.imgur.com/nxTBxAO.gif"></sub></sub> phone case decor<sub><img src="https://i.imgur.com/0USgjYr.gif"></sub><br><br></font><br><br>
<img width="auto" height="300px" src="https://i.imgur.com/UU7Byc5.jpg"> 
<img width="auto" height="300px" src="https://i.imgur.com/AMuOpEx.jpg">
<br><br><br><br>
<img src="https://i.imgur.com/NC62NZP.gif"></center></font>


<br><br>


</div>
<br><br><br>
</div>
</div>

</div>



</div>
</body>

<!--

　　　          ___   .--.
　　　    .--.-"   "-' .- |
　　　   / .-,`          .'   
　　　   \   `           \ 　　　　　　。・゜ 　♡   。　　・　゜ 　　　♡  
　　　    '.            ・ \　　　　　　　　　　　　　　　　　　　　　　　　♡　　　　♡ ゜・。。♡  
　　　      |  ・     ᴥ    。|　　　　・゜♡ ゜・。　　. * ・ ♡ °  . 。
　　　      \ 。            /.____　　　　　　　　　　　　　　　　　　♡.  
　　　     /`-.          ,'.'    `\　　　　　　　　　　　　　　　　　　。・゜　　　 ♡ ・ 。　　。・゜ ♡  
　　　  __/   \`-.____.-' `\      /　　　　　♡　。・゜      
　　　  | `---`'-'._/-`     \----'    _ 　　　　　　　　　　　♡　　　.　　　.♡ 
　　　  |,-'`  /             |    _.-' `\　　　　. * ・        
　　　 .'     /              |--'`     / |　　　　　　　　　　 ♡
　　　/      /\              `         | |
　　　|   .\/  \      .--. __          \ |　　　　　　　　　　　*.。middlepot.com 
　　　 '-'      '._       /  `\         /　　　　　　　　　　　　　　　　　　　　　　　ଘ(*´ ˘ `*)ഒ 。.*
　　　             `\    '     |------'`
　　　               \  |      |
　　　                \        /
 　　　                '._  _.'

-->

</html>