diff --git a/index.html b/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..f2a862d38d771b20adcdf4552c1a3be8536ac3c9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,183 @@
+<!DOCTYPE html><html lang="en"><head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <title>ShawnYao2000</title>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
+ <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+ <script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script>
+ <link rel="stylesheet" href="index.css">
+ <link rel="icon" href="https://avatars.githubusercontent.com/u/104394846?v=4" type="image/png"></head>
+
+ <body>
+ <div id="loading">
+ <div id="spinner"></div>
+ </div>
+ <div id="profile">
+ <div id="profile_img" style="background: url(https://avatars.githubusercontent.com/u/104394846?v=4) center;"></div>
+ <div id="username"><span style="display:block;">Shiyang Yao</span><a href="https://github.com/ShawnYao2000">@ShawnYao2000</a></div>
+ <div id="userbio" style="display: block;">Uni Southampton 24'
+BSc Computer Science
+Here I will upload some of my works from uni</div>
+ <div id="about">
+ <span style="display:none;"><i class="fas fa-users"></i> null</span>
+ <span style="display:none;"><i class="fas fa-envelope"></i> null</span>
+ <span style="display:none;"><i class="fas fa-link"></i> <a href=""></a></span>
+ <span style="display:none;"><i class="fas fa-map-marker-alt"></i> null</span>
+ <span style="display:none;"><i class="fas fa-user-tie"></i> Available for hire</span>
+ <div class="socials">
+ <span style="display:none !important;"><a href="https://www.twitter.com/undefined" target="_blank" class="socials"><i class="fab fa-twitter"></i></a></span>
+ <span style="display:none !important;"><a href="https://www.dribbble.com/undefined" target="_blank" class="socials"><i class="fab fa-dribbble"></i></a></span>
+ <span style="display:block;"><a href="https://www.linkedin.com/in/shawnsyyao/" target="_blank" class="socials"><i class="fab fa-linkedin-in"></i></a></span>
+ <span style="display:none !important;"><a href="https://www.medium.com/@undefined/" target="_blank" class="socials"><i class="fab fa-medium-m"></i></a></span>
+ </div>
+ </div>
+ </div>
+ <div id="display">
+ <div id="work">
+ <h1>Work.</h1>
+ <div class="projects" id="work_section">
+ <a href="https://github.com/ShawnYao2000/TFIDF-Processing" target="_blank">
+ <section>
+ <div class="section_title">TFIDF-Processing</div>
+ <div class="about_section">
+ <span style="display:none;">undefined</span>
+ </div>
+ <div class="bottom_section">
+ <span style="display:inline-block;"><i class="fas fa-code"></i> Python</span>
+ <span><i class="fas fa-star"></i> 0</span>
+ <span><i class="fas fa-code-branch"></i> 0</span>
+ </div>
+ </section>
+ </a>
+ <a href="https://github.com/ShawnYao2000/Tetrecs" target="_blank">
+ <section>
+ <div class="section_title">Tetrecs</div>
+ <div class="about_section">
+ <span style="display:block;">a tetris like game from COMP module</span>
+ </div>
+ <div class="bottom_section">
+ <span style="display:none;"><i class="fas fa-code"></i> null</span>
+ <span><i class="fas fa-star"></i> 0</span>
+ <span><i class="fas fa-code-branch"></i> 0</span>
+ </div>
+ </section>
+ </a>
+ <a href="https://github.com/ShawnYao2000/COMP2211" target="_blank">
+ <section>
+ <div class="section_title">COMP2211</div>
+ <div class="about_section">
+ <span style="display:block;">Instantiating</span>
+ </div>
+ <div class="bottom_section">
+ <span style="display:none;"><i class="fas fa-code"></i> null</span>
+ <span><i class="fas fa-star"></i> 0</span>
+ <span><i class="fas fa-code-branch"></i> 0</span>
+ </div>
+ </section>
+ </a>
+ <a href="https://github.com/VladPavelescu/COMP2211-SEG" target="_blank">
+ <section>
+ <div class="section_title">COMP2211-SEG</div>
+ <div class="about_section">
+ <span style="display:none;">undefined</span>
+ </div>
+ <div class="bottom_section">
+ <span style="display:inline-block;"><i class="fas fa-code"></i> Java</span>
+ <span><i class="fas fa-star"></i> 0</span>
+ <span><i class="fas fa-code-branch"></i> 1</span>
+ </div>
+ </section>
+ </a>
+ <a href="https://github.com/ShawnYao2000/ShawnYao2000.github.io" target="_blank">
+ <section>
+ <div class="section_title">ShawnYao2000.github.io</div>
+ <div class="about_section">
+ <span style="display:none;">undefined</span>
+ </div>
+ <div class="bottom_section">
+ <span style="display:inline-block;"><i class="fas fa-code"></i> CSS</span>
+ <span><i class="fas fa-star"></i> 0</span>
+ <span><i class="fas fa-code-branch"></i> 0</span>
+ </div>
+ </section>
+ </a></div>
+ </div>
+ <div id="forks" style="display:none;">
+ <h1>Forks.</h1>
+ <div class="projects" id="forks_section"></div>
+ </div>
+ <div id="blog_section">
+ <h1>Blog.</h1>
+ <div id="blogs"></div>
+ </div>
+ <div id="footer">
+ <a href="https://github.com/imfunniee" target="_blank">made on earth by a human</a>
+ </div>
+ </div>
+ <script type="text/javascript">
+ setTimeout(function() {
+ document.getElementById("loading").classList.add("animated");
+ document.getElementById("loading").classList.add("fadeOut");
+ setTimeout(function() {
+ document.getElementById("loading").classList.remove("animated");
+ document.getElementById("loading").classList.remove("fadeOut");
+ document.getElementById("loading").style.display = "none";
+ }, 800);
+ }, 1500);
+ $.getJSON("blog.json", function(blog) {
+ blog = blog || [];
+ if (blog.length == 0) {
+ return (document.getElementById("blog_section").style.display =
+ "none");
+ }
+ for (var i = 0; i < blog.length; i++) {
+ $("#blogs").append(`
+ <a href="./blog/${blog[i].url_title}/" target="_blank">
+ <section>
+ <img src="./blog/${blog[i].url_title}/${blog[i].top_image}">
+ <div class="blog_container">
+ <div class="section_title">${blog[i].title}</div>
+ <div class="about_section">
+ ${blog[i].sub_title}
+ </div>
+ </div>
+ </section>
+ </a>
+ `);
+ }
+ }).fail(function() {
+ return (document.getElementById("blog_section").style.display = "none");
+ });
+ </script>
+
+ <script>
+ const magicProjectsGrid = new MagicGrid({
+ container: "#work_section",
+ animate: false,
+ gutter: 30, // default gutter size
+ static: true,
+ useMin: false,
+ maxColumns: 2,
+ useTransform: true
+ });
+
+ const magicForksGrid = new MagicGrid({
+ container: "#forks_section",
+ animate: false,
+ gutter: 30, // default gutter size
+ static: true,
+ useMin: false,
+ maxColumns: 2,
+ useTransform: true
+ });
+
+ $("document").ready(() => {
+ magicProjectsGrid.listen();
+ magicForksGrid.listen();
+ });
+ </script>
+
+
+</body></html>
\ No newline at end of file