Important - Supasan Warnnisorn Portfolio 4

<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Supasan Warnnissorn - Portfolio</title>
<link rel="stylesheet" href="pan.css">
<style>
.heade{
color: black;
animation-name: example;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes example {
0% {color: black; transform: translateY(5vh);}
50% {color: blue;transform: translateY(0vh);}
100% {color: black; transform: translateY(5vh);}
}
#wrapper1 {
display: flex;
}
#solutions {
width:300px;
}
#mttmmedia {
flex: 1;
}
p{
font-size:18px;
}
</style>
</head>
<body>
<header>
<img class="topbackground" alt="pan's activity"src="panismybro.jpeg"/>
<img alt="pan"
src="https://media.licdn.com/dms/image/D5603AQFDeiKzEl-LFg/profile-displayphoto-
shrink_200_200/0/1696094477107?
e=2147483647&v=beta&t=Ut328EpLbjJMpHIX5kfLRPc0vHuhMtcJqJ7UJ8LwgUw"/>
<h1>Supasan Warnnisorn</h1>
<h1 style="font-size:20px;">"Pan"</h1>
</header>
<nav>
<a href="#highlight">Supasan's Highlights</a>
<a href="#video">Featured Videos</a>
<a href="#solutions">The Solutions</a>
<a href="#univerity">สถานศึกษา</a>
<a href="#writings">งานเขียน</a>
<a href="#mttm">Mission To The Moon</a>
</nav>
<hr>
<section>


<div id="highlight">
<h1 class="mydiv">Supasan's Highlights</h1><br>
<center>
<h2>
Mahidol University Student Council
สภานักศึกษามหาวิทยาลัยมหิดล
</h2>
<img
src="https://lh3.googleusercontent.com/u/0/drive-viewer/AEYmBYQ1smSfdlrGGwCkc9X-
A_PWXoltvJ_GK068oZWfIg9zcMro-I5ZyMpThN7Cf_zYOAOmbEzKeh5A2MtGsVfg1_bdMYrT=w990-h909"
alt="Mahidol University" width="200px" height="200px"/>
<div id="highlight1" style="width:100%; word-wrap:break-word;">
<p>
Lead 12 Foreign Relations members for different activities and events
with 300+ participants in total from the starting of 2023
</p>
<p>
นำทีมฝ่ายวิเทศสัมพันธ์ 12 คน ในหลากหลายกิจกรรมและอีเว้นต์ ด้วยกว่า 300 ผู้เข้าร่วมกิจกรรมตั้งแต่ต้นปี
2566
</p>
</div>
</center>
</div>
<br><br><br>
<h1 class="heade">Featured Videos</h1><br>

<div id="wrapper1" style="width:100%; word-wrap: break-word;" id="video">
<div class="one" id="solutions">
<div style="width:100%; word-wrap: break-word;">
<h2 style="color:#5271ff;">The Solutions(เดอะ โซลูชั่น พอตแคสต์)</h2><br>
</div>
<img
src="https://lh3.googleusercontent.com/u/0/drive-viewer/AEYmBYRkZigHMtDA469_bVzoTGb
2lWF7O--8-gJnS_8mFlNrfO9Ugg8dAlrBT7f2WRdlgXuLHFclfvnCLxgRPjRQmvvl01z1zQ=w990-h909"
style="width:200px; height:200px"/>
<div style="width:50%; word-wrap:break-word;color:#5271ff;">
<p>
<b>A podcasting channel with 130k impressions on YouTube and
12.5k views on Reels (in total) with the vision to solve Thai's problems</b>
</p>
<p>
ช่องพอตแคสกว่า 1.3 แสนการมองเห็นบน YouTube
และ 1.25 หมื่นวิวบน Reels (โดยรวม) ด้วยวิสัยทัศน์ที่จะแก้ไขปัญหาของคนไทย
</p>
</div>
<button class="solB solT" onclick="showhide('hiddenvdo1')" style="width:200px;
height:100px;color:#5271ff; background-color:#f8faf0; border-
radius:25px;">Videos</button>
<div id="hiddenvdo1">
<iframe width="560" height="315" src="https://www.youtube.com/embed/8s-5Q-
5UHrw?si=6Lrhg7BZP0s2FDXe" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture; web-share" allowfullscreen></iframe>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/cpQuuQAnsT0?si=mROedOKKoOSYzWKx" title="YouTube
video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
src="https://www.youtube.com/embed/WcjNaHx5h9w?si=q5-dzNexIMuJCIYW" title="YouTube
src="https://www.youtube.com/embed/86RGDm4rNI8?si=8pNwcziRDcSnK6HW" title="YouTube
src="https://www.youtube.com/embed/KmFVVFrpvzI?si=JmGzA_GIx7P5ZUW5" title="YouTube
src="https://www.youtube.com/embed/FFMykFvojHI?si=5EDwrIdYhYPM24OX" title="YouTube
</div>
<br>
<button style="background-color:powderblue; width:10px; height:2px;"
onclick="showhide('hiddenvdo')"></button>
<pre id="hiddenvdo">
<a href="https://www.youtube.com/watch?v=8s-5Q-5UHrw">สัมภาษณ์ผู้มีความรู้ด้านการเมือง:
อนาคตการเมืองไทย และใครคือนายกคนที่ 30 ของประเทศไทย</a>
<a href="https://www.instagram.com/reel/CvcOSiwtkOe/?
igsh=OHE1YjBuYXBlb3h2">Short vdo ใครคือนายกคนต่อไป</a>
<a href="https://www.youtube.com/watch?v=cpQuuQAnsT0">สัมภาษณ์ 21 คนแปลกหน้า เรื่อง

ความรัก</a>
<a href="https://www.instagram.com/reel/Cz3ff3axlby/?
igsh=c3o2bXhraW84Yjdo">Short vdo คลิปเริ่ม สัมภาษณ์ความรัก</a>
<a href="https://www.youtube.com/watch?v=WcjNaHx5h9w">อยากทำ แต่ไม่ทำ podcast</a>
<a href="https://www.youtube.com/watch?v=86RGDm4rNI8"> Video Projects/ Media

Projects (Individual)
7 days to improve myself</a>
<a href="https://www.instagram.com/reel/CvHrSH8p8oI/?
igsh=dGZwdjYzdm9qdG1q">Short video </a>
<a href="https://youtu.be/KmFVVFrpvzI?si=dhH-mXB6aTKEP2oW">Interview 3 greatest

Thai voice artists Wanyayam, Krittone, PingPongVOBKK (unfinished, private)</a>
<a href="https://www.instagram.com/reel/Ctoal9mgmd7/?
igsh=NTNiaWYxdTc1cmJt">Example of News Reporting</a>
<a href="https://m.youtube.com/watch?v=FFMykFvojHI&feature=youtu.be">Group
Project (Triage)</a>
</pre>
</div>
<div class="two" id="mttmmedia">
<h2>Mission To The Moon Media(มิชชั่น ทู เดอะ มูน มีเดีย)</h2>
<img
src="https://lh3.googleusercontent.com/u/0/drive-viewer/AEYmBYQqh9OfMv93eIblFnl2D6n
2ru0w2lb0DQ2aXU8Vxq7nA4T79EDgp2D5n3_2qV5z-mNA2-cUuA4jywQWhKJC0w8oT-4tvg=w435-h909"
style="width:200px; height:200px;"/>
<div style="width:50%; word-wrap:break-word;color:#5271ff; margin:0px;">
<p>
<b>An Internship in a podcasting and digital media company
experienced during the freshmen summer</b>
</p>
<p>
การฝึกงานที่บริษัทพอตแคสและสื่ออนไลน์
เป็นประสบการณ์ระหว่างปิดภาคเรียน ปีการศึกษาที่ 1
</p>
</div>
</div>
</div>
<br><br><br>
<div class="skills" id="univerity" >

<h1 class="heade">สถานศึกษา</h1>
<span id="ma" class="symbol">MA</span>
<span id="hi" class="symbol">HI</span>
<span id="dol" class="symbol">DOL</span>
<h2>
Mahidol University Student Council<br>
สภานักศึกษามหาวิทยาลัยมหิดล
</h2>
<br>
<button onclick="showhide('councilinfo')" style="width:250px;
height:50px;background-color:#FFD700; color:#007BFF; font-size:200%;">My
Achivement</button>
<div id="councilinfo" style="width:100%;word-wrap: break-word;">
<h3>
Working as a student representative with the vision to see Mahidol University
students have a better living through our voices.</h3>
การทำงานในตำแหน่งผู้แทนนักศึกษา ด้วยวิสัยทัศน์ที่อยากเห็นนักศึกษามหาวิทยาลัยมหิดล มีชีวิตที่ดีขึ้นผ่านเสียงของ
พวกเรา<br><br>
<h3>Supasan has various involvement in the student council team as the assistant to
the president in foreign relations. He led his 10+ foreign relations members to
create a project on visiting Thammasat University Student Council which is the
first outside campus visit since 2020 at Chulalongkorn University Student Council.
</h3>
ศุภสัณห์ ได้มีส่วนร่วมอย่างหลากหลายให้กับทีมสภานักศึกษา ในตำแหน่งผู้ช่วยประธานสภานนักศึกษาฝ่ายวิเทศสัมพันธ์

เขานำทีมฝ่ายวิเทศสัมพันธ์กว่า 10 คน ในการสร้างโปรเจคการไปศึกษาดูงานที่สภานักศึกษามหาวิทยาลัย
ธรรมศาสตร์ ซึ่งเป็นการทัศนศึกษาครั้งแรกของสภานักศึกษา ตั้งแต่ปี 2563 ณ สภานักศึกษาจุฬาลงกรณ์
มหาวิทยาลัย<br><br>
<h3>Supasan led his team with the collaboration of different divisions at Mahidol
University apart from the student council. Consisting with the Student Affair
Division and the Potential club in creating the Soft Skill Learn and Fun Workshops
Event, inviting Former Modernform Group CEO and one million subscribed YouTube
Channel podcaster, Amazing Storytelling and other 5 well-rounded guest speakers to
our 4 different workshops, achieving in reaching 100+ participants in total.</h3>
ศุภสัณห์ ได้นำทีมในการร่วมมือกับองค์กรต่าง ๆ ในมหาวิทยาลัยมหิดลนอกเหนือจากสภานักศึกษา ซึ่งประกอบด้วย

กองกิจการนักศึกษา มหาวิทยาลัยมหิดล และชมรมพัฒนาศักยภาพ ในการทำโครงการ Soft Skill Learn and
Fun และได้การตอบรับจาก อดีตประธานเจ้าหน้าที่บริหาร โมเดิร์นฟอร์มกรุ๊ป และ เจ้าของช่อง podcast 1
ล้านผู้ติดตาม ช่อง Amazing Storytelling และอีก 5 วิทยาการรับเชิญผู้มากประสบการณ์ เข้าให้การอบรม
เชิงปฏิบัติการ โดยมีผู้เข้าร่วมกว่า 100 คนตลอดโครงการนี้<br><br>
<h3>Supasan is a leading representative in welcoming external visitors from other

universities, both Thailand and overseas, he and his team welcomed 150+ faculties
and students from South Korea, Japan, ASEAN and Thailand.</h3>
ศุภสัณห์ เป็นผู้นำตัวแทนในการต้อนรับแขกผู้มาเยือนจากหลากหลายมหาวิทยาลัย ทั้งจากประเทศไทยและต่าง

ประเทศ เขาและทีมได้ต้อนรับกว่า 150 คณาจารย์และนักศึกษาจากประเทศเกาหลี ญี่ปุ่น ประเทศในกลุ่มอาเซียน
และประเทศไทย<br><br>
<h3>The Solutions Podcast

The solution starts with a simple idea, there are problems around us, and we would
like to find solutions for both the host and audiences that bring the start of this
channel. Because we believe “problems can be solved and have solutions” we then
find problems and provide solutions in various topics from personal problems to
national issues like politics. </h3>
The Solutions เริ่มต้นด้วยความคิดที่เรียบง่าย เพราะปัญหาอยู่รอบตัวเรา และเราต้องการหาแนวทางแก้ไข

เพื่อผู้จัดรายการและผู้ชมเอง ซึ่งเป็นจุดเริ่มต้นในการเกิดช่องนี้ขึ้น เพราะเราเชื่อว่า “ปัญหามีทางแก้ไข และมี
Solutions พวกเราจึงหาปัญหา และให้แนวทางแก้ไขในหลากหลายหัวข้อ จากปัญหาระดับปัจเจกบุคคลไปจนถึง
ปัญหาระดับชาติอย่างการเมือง<br><br>
<h3>The Solutions also consist of interviews as well which is recommended to watch.

The Solutions have currently 12 episodes including both podcast and long form
videos. As well 7 short videos on Instagram and 2 on YouTube.
The Solutions</h3>
The Solutions อีกทั้งยังมีบทสัมภาษณ์อีกด้วย ซึงแนะนำให้รับชม ขณะนี้ The Solutions มีทั้งหมด 12 ตอน
รวมพอตแคสต์และวิดีโอแบบยาว เช่นเดียวกันมี 7 วิดีโอสั้นบน Instagram และ 2 วิดีโอสั้นบน
YouTube<br><br>
</div>
</div>
<br><br>
<div class="projects" id="writings">

<h1 class="heade">งานเขียน</h1>

<div id="writeshow">
<a href="https://docs.google.com/document/d/10yFRAcL451QcHzvU__c04S-
xRODkB7fMxo1Pvz1lWTw/edit"><button style="background-color:#f8faf0; color:#5271ff;
border-radius:5px; padding:15px; font-size:150%;">Writings งานเขียน
บทความจากการเข้าร่วมสภาจำลองจุฬาฯ</button></a><br>
<a
href="https://docs.google.com/document/d/1smQOGQbqWlLukO7J9LZY0yYD4wckYukaT-
l4p0mOsqY/edit"><button style="background-color:#f8faf0; color:#5271ff; border-
radius:5px; padding:15px; font-size:150%;">Talking Words - The Podcast (รอแปล
ไทย)</a><br>
<a href="https://www.instagram.com/reel/CsgAtEuAlez/?
igsh=MWxpamJzd2Y1djRudw=="><button style="background-color:#f8faf0; color:#5271ff;
border-radius:5px; padding:15px; font-size:150%;">MFP may not form the government
which will lead Thailand into conflict and a military coup (รอแปลไทย)
</button></a><br>
<a href="https://www.instagram.com/p/CsPSmJ7hjwx/?
igsh=MXZsODdueGlsYjNsMA=="><button style="background-color:#f8faf0; color:#5271ff;
border-radius:5px; padding:15px; font-size:150%;">Move Forward unpredictably led
the election as the largest party while Pheu Thai was the second. The new leading
government is still in discussion. (รอแปลไทย)</button></a><br>
<a href="https://www.instagram.com/reel/CudRfyPBeYK/?
igsh=am12a2dxZXFzcmZr"><button style="background-color:#f8faf0; color:#5271ff;
border-radius:5px; padding:15px; font-size:150%;">The house speaker belongs to Wan
Muhamad, ex-parliament president (รอแปลไทย)</button></a><br>

</div>
</div>
<h1 class="heade">Mission To The Moon</h1>

<div style="width: 100%;word-wrap: break-word;"id="mttm">
<p>
<b>Supasan has an internship at Mission To The Moon Media, a podcasting and digital
media company from 1 August to 2 September of 2022. It gave him perspectives on how
the media company works from backstages to frontstages.</b><br>
ศุภสัณห์ ได้ฝึกงานที่ มิชชั่น ทู เดอะ มูน มีเดีย บริษัทพอตแคสต์และสื่อออนไลน์ตั้งแต่ 1 สิงหาคม ถึง 2 กันยายน
2565 การฝึกงานได้ให้มุมมองในการทำงานของบริษัทสื่อตั้งแต่เบื้องหลัง ไปจนถึงเบื้องหน้า<br><br>
Mission To The Moon

รวมรูป
ใบรับรองฝึกงาน
<br><br>
About Supasan
Supasan is a junior (third-year) student at Mahidol University International
College (MUIC) majoring in Digital Journalism. Supasan is a passionate-driven
student, he is involved in multiple extracurricular activities and created various
media works. Supasan is currently working in a leadership role at the student
council in the position of assistant to the president in foreign relations at
Mahidol University Student Council. He is also involved in media roles as a content
creator at the Solutions Podcast with the current impressions of 130k on YouTube.
Supasan also has an internship experience at a podcasting and digital media company
- Mission To The Moon Media.
Supasan has one motto in mind "I see the glass half full" He always sees things to
be improved as well and he loves to listen to others' thoughts to gain his
improvements. He is always ready to listen for any upcoming feedback because he
believes that being open-minded would improve himself and his team with leaps and
bounds.
</p>

</div>
<br><br><br><br><br>
<div class="wavy-background">
<div class="wave"></div>
</div>
<hr>
<section id="contact">
<a href="supasanpan.php"><button style="width:150px; height:150px; margin:50px;
border-radius:20px;">Next Page</button></a>
<h1>Contact me</h1><input alt="pan" type="image" onclick="swapper()"
src="https://media.licdn.com/dms/image/D5603AQFDeiKzEl-LFg/profile-displayphoto-
shrink_200_200/0/1696094477107?
e=2147483647&v=beta&t=Ut328EpLbjJMpHIX5kfLRPc0vHuhMtcJqJ7UJ8LwgUw" />

<a href="YOUR_YOUTUBE_LINK" target="_blank" class="social-button">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMwAAADACAMAAAB/
Pny7AAAAeFBMVEUAd7f///
8AdLYAZ7AAarHd6vNdnsvG4e+ev9vM4e5DjMG92es0gLvK3OuWv9sadramxN4lhb8AcLT3+vzr9Pllo80Rf
rvj7/
aSuthKlceAstRip9BrrtVKnsstjsO10uZ3rNKqz+XU6vSHrNKRtNWKwd4+mMlbk8RysCA9AAAGZUlEQVR4n
O2da3eqOhCGw1SwQKUmgXCpBaSX/f//4Qmtu6e1QMZojokn71rtJ4Q8TgyZYWYggVRcA3FaUMcjB5F/
YcSuPZpzxaLwEyZvrj2US6jJP2A66vgkGwW0G2HywvlJNooVuYTpyA0YRpqGdAHhTzdhGGmaJ0443IRhpGm
Ak/Tu2qO4lO5SsruRWSbn2Y4838gsk/PsmbS3A9MSce0xXE43hPI/
Fhx07XGcL2AMBE2SRAjC3F7N2Z2oX7N9Gg/
rbp+9tLBy1j6wSu7XZfAlPnSNcNQ6jGZ5cCQ+7Fz88YBofqF8aF0z13Ag6SZRRu2EYzR1OssSBJlTDjdE8Q
JLEHSJOzSsXmYJ+NYZ2wDdLLMEQV45EkEAyFQsQVAWjsDUXA0TpE5MNIClhexf9S7AsB3GMEEwPNhPA0z56
3fHNKwOkTCp/TCrCjfL5M3G+iVgDN1iZX3oDVrFzf/
7PLM9KPr5KAqn0HqYftqLmYSx3YlmL9jfv9zS2L4/Y694mNz25ewkGNs9TvaC/82UlrPI1axUUxxk/
2pWD2iY2HYYoDgHYFRmOwxhWzSM/
Zk3Y5IATsPjtceqFAjsfubN9n2m1GqLvNO4EDsDgVuc3649UJRYgzFN6YJhRtNgXJrq2sNECiL1guZMtBlA
OdHiyBGWMRCQLdOExbWHeIJAVEszbSgenTEMGW3Tzy/
Q69ax55oA0Xoahe9t98kmBLSZ8AZ4Wjhmlk8Bkzg/
FgIuUYRzz5oPAhB1FpZlnvM8L8tNkxAnzfIpAGBA66hviqgVzFWjfBMwxlYSxH0SLy8vyyTXla+8SYdzJw+
Jn4JKJUki/
wshPuAufynyOKeZ72/2+KkPjBxJXTRv+3gI83GfkZfDer2v+qilc1fQVtJn22k10cPE8bSoZo7fVsXxsw8g
D3WzXZdTXlMZd/
cFvehWo9jMOjS87H7FMqHdT45s8gOMJM0mXHKYyrSK6KVwoFgON6VHNPC4Xzz+e6YNkD/
VoAwy8LDrL5PcCnTGl/
m6VPbTp2G1amyvh4HJrXg14KKMeRfdXcA46njz5mdwhr2pRnaocANSpPhHc+GWnm+cVaW8zM/ozJ3Ckn/
nGRO/s4sXFUdn79RX92ZgGN2fhDJeqD/
3tmMIhrX4B1lfyqszQw5mYE7JZPkmnp1nGyMwWnb5oGnsgzn99/
JX+VlpekZgFBHfJZXnRLZNwMyUSeC0OSOxxQBMic/
8mlKmv1EzAHOm8vcbgglS7fXZQhj+rrtLsxAmiG8JJtdtxmAjTLDR3D9bCVPWeqaxEobf3xCMbsWOnTClXq
McO2GkY3NDMHr9mOyECcI/
lsLkQ9p16RqfdxzoOmmGYXjcRHVNhaC0Lt6QIcERJtOJbRiFydOCjv0fPsSYoE2Mxel0avZMwoS9+PlMCYD
eI73QjU6Sm0GYzUQ3AYAe54eGOpnU5mDSZOrGt5hD9eOqp7OYg4lnAuEADebjeW8RDJ9tDwkEEyHkOlmupm
CaeZeEUcwJthrLmSGYdPGaGNPorM1mYPJ+adfLWsQp1hqNzMzApIrWXYhzxPXJLGZguGJnhVnQBo0bjRGYU
HH7xuS5hxoRdCMwqqRbaNUn0XkcYAJGNcsIEep691yjDYkJGLVnhWiqov5G/
hsYdWwFEDXilsBslWF8QNS7auxnTMC8Kr9TQLQisAOGv6iDXoji3er0ckoTjwHV/
dSBqvME7LAMotE9PKg73tgBgwgUexiXYTTCzR7Gw3gYD+NhPIyH8TAexsN4GA/jYTyMh/
EwHsbDeBgP42E8jIfxMB7Gw3gYD+NhPIyH8TAexsN4GA/jYTwMCkaZ+
+0QDOtVZaBHRYarvWoUnbr4FR7UxU3V6Rnn0KrSpY8KwNmTahRbTC2/sp2TTmEDYa/
LJw2PspThUUGPquIBZZa2VhE9iO18W8yAh/2vD7yHC9/
qxAemVSxVbXN+3PESS0OKfRpPq3urfxcpQJ11M8fHaVbj+kaBPMvcVeP1vtIonzucV4zdbadEyXRJ79zxCc
VXvrP5s8jrarIQ8tV4eEKnHn/CIJbOos/
idS05+EKMOQmiuzLYJ2jJ8+3APJPd6tqDuJRWO2L9q33RuksJt/
0FsliBROHWv0IaKbbj5IxmjlZp7L5BFI0TnNH4ommi3cnNLn28mVXC5I37Ew3I2KBXwgSljhNqlz5fYPAP1
lqXNpp5WG8AAAAASUVORK5CYII=" alt="LinkedIn">
Subscribe on YouTube
</a>
<a href="YOUR_YOUTUBE_LINK" target="_blank" class="social-button">
<img src="https://img.freepik.com/premium-vector/free-vector-youtube-icon-
logo-social-media-logo_901408-454.jpg?w=1380" alt="Youtube">
Subscribe on YouTube
</a>

<a href="YOUR_INSTAGRAM_LINK" target="_blank" class="social-button">
<img
src="https://upload.wikimedia.org/wikipedia/commons/9/95/Instagram_logo_2022.svg"
alt="Instagram">
Follow on Instagram
</a>
<a style="color:powderblue" href="facebook.com"><h1 id="more">More About
Me</h1></a>
<a style="background-color:black;"class="social-button"
href="mailto:nudtanun.warnni@student.sk.ac.th"><img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJQAAACUCAMAAABC4vDmAAAAY1BMVEX/
//8AAADn5+c8PDx/f3+Kior5+fn8/
Pzy8vKwsLCQkJD29vZ4eHhUVFRRUVGqqqrf39+WlpZdXV02NjZra2tlZWWgoKAdHR0LCwtCQkIVFRVwcHDA
wMBKSkq6urrQ0NArKyu8OrjDAAAERklEQVR4nO2b6ZLqIBBGSSZmUaNxHXd9/6e86tzRbtYGCWGq+H6aqKd
OCJDQMJaSkpKSkpKSkpKSkkJPVecDpq4kSN123e6/Bsu+XW87DunaZhFkdoVM46FxfjN+IdWzoVnemdU/
TOVxaBKYY/mEKobmwJk+b7uhKfjcb8JqMzQEn03Fum/4wW5UDJDRDjJ8d6zBmCN/
IwQ9I8zQMP7Wm8q6+15TTTmEI9vzl3RahmUqeaZszw5CQzsGdVWJveSBCR+FdSV6uucFBW/
CdTBX1Rr87bcANVoM4Ap5WowEqDGDVJsgrlDHvXjPVd6m8AQmhCvkaQy6KwiFXfUPhT2poIK64j0podg2WL
tC7WnLdFDBXImeNFDI1bI3qnIpeNJBBXEl86SFCuBK6kkPhVz1MTqjMfj9UKWHYnPwpXbim2kCH3zn4IAeq
ldXKk9GqB5dKT2ZoZArnzMZNFcZ42NGKORq6c3VBN53c+6gGQq52njqGUo4toz5owSoHlxpPdGg0EzGRy+K
+syFeJwE5dmVwRMVyuuIoxhb7KE8ujJ6okMhV+0HrkrYZ0o9WUBhV7UrU232ZAOFXM0cXZXwrarCkxWUh3Z
FaE+2UIjq7OCqPJOY7KA+dEX0ZAuFXvd9Wboqv8CXG92ZllAfuCJ7sofCriyoJmRPDlCOc1HNPNMHFLuAn1
8RqSYr8KWL6WwHKAdXVp7coLArwohTW3lyhEKuzCMOGlvMnlyh2MnCFfJ0ovy6I9QV/
E921rarCRxbsqvu1M+guHWcm8ZVfcPnGrood6hTxkXtCnsiXkAXqIb/
H3W7Qu2J7MoBSvCkdiV6Irmyh5J4errKxVNziSeKK2so1HFCwL1AlcPVusaiA7WFghizGl3KHXdZTnDt9YS
LHvSuLKGgp1vJfbArgKy8gEwPNeWN+8ATFOfp6SODKZruDpZ3Da5x+HFIdmUFJZ0MX9AKeXZbnc8r3GHufr
VQJ8Q2UBJPoitJ3m2N6MoCSvmAdRKXn0EOsP3THrLoUNBTizvwq4bqgIfgGk73VK7IUNoH0U5ZCtbyVWMUV
1QoRXt6/
RV82QeyFWeAhHbl8NJMPtXMC26Ocr8RC8nQQ3nJQYPStKd3ujkqAtnP+Sv3G2O7IkFRX5hV9WWx3iyXm/
XiIq2M/B/TizMKFMmTVQyuCFC+X1g/on9pbYZCnvwtg+hcGaFQiYLH5dGSL0awgEL9k9+lNXV/
ZYCCnnyXCKHFNeTq7y3XxriwjTz1UwIgd6WBgu3p2FexBHT1ald/
q6wEtac+C3Ak7YpSqrTst1RJdKWAClksiIsE1VBhSwUrUvlb6KJK3tUfKakcwzY+SPHpVoSKskx3AE+PyAu
aoyz9jrJIPsLtBNM4N17EsEWl4LeoRLmZJ8ptT4zJeooBUzybWZRb6aLcdMii3J7JYtnI2vILqBFu+X0kws
3RKSkpKSkpKSkpKSkpqvwDpZZIAYO9oIcAAAAASUVORK5CYII=" alt="Mail">
MAIL ME!</a>
<br><br><br><br><br><br><br>
<p>Made by his brother, ping; nudtanun warnnisorn. With barehand writing html
css and javascript code. Credit to some code source I took from and Thanks for
using this websiite :3</p>
</section>
<div class="context">
<h1></h1>
</div>
<div class="area" >
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div >
<div id="cbox"></div>
<script>
let lang = "eng";
document.getElementById("hiddenvdo").style.display = "none";
document.getElementById("hiddenvdo1").style.display = "none";
document.getElementById("councilinfo").style.display = "none";
function myFunction() {
const element = document.getElementById("myDIV");
let x = element.scrollLeft;
let y = element.scrollTop;
document.getElementById ("demo").innerHTML = "Horizontally: " + x.toFixed()
+ "<br>Vertically: " + y.toFixed();
}
function changele(gg, yo){
document.getElementById(gg).innerHTML = yo;
}
function showhide(x){
let displayvdo = document.getElementById(x).style.display;
if(displayvdo == "block"){
document.getElementById(x).style.display = "none";
}else{
document.getElementById(x).style.display = "block";
}
}
function changelangeng(){
}
function changelangthai(){
document.getElementById("highlight1").innerHTML = "";
document.getElementById("universityP").innerHTML = "";
}
let counter = 0;
function swapper(){
counter ++;
if(counter > 9){
alert('Thanks for visiting');
} else if(counter > 0){
alert('OMG, finally someone found the secret. It was worthy to show my
"TRUE" self')
document.body.style.backgroundColor = "powderblue";
changele('story', 'LORE');
changele('portfolio', 'MORE');
changele('more', 'More and more and more about me');
changele('ma', '');
changele('hi', 'phitsanulok');
changele('dol', '');
}
}
handleMouseMove = (event) => {
setTimeout(function(){
const y = event.pageY;
const x = event.pageX;
const ref = document.getElementById("cbox");
const scrollLeft = (window.pageXOffset !== undefined) ?
window.pageXOffset : (document.documentElement || document.body.parentNode ||
document.body).scrollLeft;
const scrollTop = (window.pageYOffset !== undefined) ?
window.pageYOffset : (document.documentElement || document.body.parentNode ||
document.body).scrollTop;
ref.style.left = x - scrollLeft - 75 + 'px';
ref.style.top = y - scrollTop - 75 + 'px';
}, 200);
};
document.addEventListener("mousemove", handleMouseMove, false);
var limit = Math.max( document.body.scrollHeight, document.body.offsetHeight,
document.documentElement.clientHeight,
document.documentElement.scrollHeight, document.documentElement.offsetHeight );
window.addEventListener("scroll", (event) => {
let scroll = this.scrollY;
let scroller = scroll/limit;
/*if(scroller > 0.5){
document.body.style.background-color = "powderblue";
}*/
console.log(scroller);
console.log(scroll);
});
</script>
</body>
</html>

Important - Supasan Warnnisorn Portfolio 4

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Important - Supasan Warnnisorn Portfolio 4

Uploaded by

Copyright:

Available Formats

<!

<!--<button style="width:200px; height:100px; font-size:25px;"

<h1 class="heade">Featured Videos</h1><br>

<a href="https://www.youtube.com/watch?v=cpQuuQAnsT0">สัมภาษณ์ 21 คนแปลกหน้า เรื่อง

<a href="https://www.youtube.com/watch?v=WcjNaHx5h9w">อยากทำ แต่ไม่ทำ podcast</a>

<a href="https://www.youtube.com/watch?v=86RGDm4rNI8"> Video Projects/ Media

<a href="https://youtu.be/KmFVVFrpvzI?si=dhH-mXB6aTKEP2oW">Interview 3 greatest

<div class="skills" id="univerity" >

ศุภสัณห์ ได้นำทีมในการร่วมมือกับองค์กรต่าง ๆ ในมหาวิทยาลัยมหิดลนอกเหนือจากสภานักศึกษา ซึ่งประกอบด้วย

<h3>Supasan is a leading representative in welcoming external visitors from other

ศุภสัณห์ เป็นผู้นำตัวแทนในการต้อนรับแขกผู้มาเยือนจากหลากหลายมหาวิทยาลัย ทั้งจากประเทศไทยและต่าง

<h3>The Solutions Podcast

The Solutions เริ่มต้นด้วยความคิดที่เรียบง่าย เพราะปัญหาอยู่รอบตัวเรา และเราต้องการหาแนวทางแก้ไข

<h3>The Solutions also consist of interviews as well which is recommended to watch.

<div class="projects" id="writings">

<h1 class="heade">Mission To The Moon</h1>

Mission To The Moon

You might also like