tons of improvements

- scrollbar fixes - new favicon - fixed blur animation bug - updated info
vougioukakis · Mar 21, 2024 · 7f60700 · 7f60700
1 parent 8ce15ff
commit 7f60700
Show file tree

Hide file tree

Showing 32 changed files with 1,236 additions and 0 deletions.
diff --git a/favicon.ico b/favicon.ico
diff --git a/favicon_io/about.txt b/favicon_io/about.txt
@@ -0,0 +1,6 @@
+This favicon was generated using the following font:
+
+- Font Title: Francois One
+- Font Author: Copyright 2011 The Francois One Project Authors (contact@sansoxygen.com)
+- Font Source: https://fonts.gstatic.com/s/francoisone/v21/_Xmr-H4zszafZw3A-KPSZutNxgKQu_avAg.ttf
+- Font License: SIL Open Font License, 1.1 (http://scripts.sil.org/OFL))
diff --git a/favicon_io/android-chrome-192x192.png b/favicon_io/android-chrome-192x192.png
diff --git a/favicon_io/android-chrome-512x512.png b/favicon_io/android-chrome-512x512.png
diff --git a/favicon_io/apple-touch-icon.png b/favicon_io/apple-touch-icon.png
diff --git a/favicon_io/favicon 2.ico b/favicon_io/favicon 2.ico
diff --git a/favicon_io/favicon-16x16.png b/favicon_io/favicon-16x16.png
diff --git a/favicon_io/favicon-32x32.png b/favicon_io/favicon-32x32.png
diff --git a/favicon_io/favicon.ico b/favicon_io/favicon.ico
diff --git a/favicon_io/site.webmanifest b/favicon_io/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/index.html b/index.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="icon" href="favicon.ico?v=2">
+    <title>Nick Vougioukakis</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
+    <script type="text/x-mathjax-config">
+      MathJax.Hub.Config({
+        tex2jax: {
+          inlineMath: [['$', '$'], ['\\(', '\\)']],
+          processEscapes: true
+        }
+      });
+    </script>
+    <script src="script.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+
+    <style>
+        #loader {
+            border: 12px solid #f3f3f3;
+            border-radius: 50%;
+            border-top: 12px solid #0000007e;
+            width: 70px;
+            height: 70px;
+            animation: spin 1s linear infinite;
+        }
+
+        .center {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            margin: auto;
+        }
+
+        .fillscreen {
+            content: '';
+            display: block;
+            position: fixed;
+            visibility: visible;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgb(11, 14, 35);
+        }
+
+        @keyframes spin {
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="loading-screen" class="fillscreen">
+        <div id="loader" class="center"></div>
+    </div>
+
+    <div id="content-wrap">
+
+        <!-- left panel -->
+        <div class="contents" id="my-card">
+            <div class="home card">
+                <div class="info">
+                    <div>
+                        <h1 id="name-text" style="margin-top: 0px; margin-bottom: 0px; color: #d1ecf8;">Nikos Vougioukakis</h1>
+                    </div>
+                    <p style="display: flex; flex-direction: column; justify-content: center; margin: 0; align-items: center;">
+                        Mathematics student at &nbsp;
+                        <a class="link" href="http://math.uoc.gr/en/index.html" target="_blank">University of Crete</a>
+                    </p>
+                    <img class="uoc" src="src/Logo.png">
+
+                    <div class="buttons-div">
+                        <a href="https://www.linkedin.com/in/nikolaos-vougioukakis-66a2b7256/" style="background-color: #0077b5;" target="_blank" class="buttons"><i class="fab fa-linkedin"></i></a>
+                        <a href="https://github.com/vougioukakis" class="buttons" target="_blank"><i class="fab fa-github"></i></a>
+                        <a class="buttons" style="background-color: #C71610; cursor: pointer;" onclick="toggleMail();"><i class="fab fa-google"></i></a>
+                    </div>
+
+                    <div id="mailBox" style="display: none; "><p style="font-size: 14px;">Gmail: vougioukakis99 (at) gmail (dot) com</p></div>
+                </div>
+
+                <footer class="footer">
+                    <p style="font-size: 10px;">Nikolaos Vougioukakis 2024</p>
+                    <p style="font-size: 10px;">Background designed by Freepik</p>
+                </footer>
+            </div>
+
+
+        </div>
+
+
+        <!-- right -->
+
+        <div class="contents-flexbox" id="right">
+            <div class="header">
+                <div class="nav">
+                    <nav>
+                        <ul>
+                            <li><a class="current nav" id="homeNav" onclick="loadContent('home')">Home</a></li>
+                            <li><a class="not-current nav" id="eduNav" onclick="loadContent('education')">Education</a></li>
+                            <!--<li><a href="#" class="not-current" id="projNav">Projects</a></li>
+                            <li><a href="#" class="not-current">Learning</a></li>-->
+                        </ul>
+                    </nav>
+                </div>
+            </div>
+
+
+            <div class="contents-x2" id="mainContent"></div>
+
+        </div>
+
+
+    </div>
+
+</body>
+
+
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,179 @@
+document.onreadystatechange = function() {
+  setTimeout(function(){
+    //do what you need here
+  }, 2000);
+  if (document.readyState !== "complete") {
+      setTimeout(function(){
+        //do what you need here
+    }, 2000);
+    //document.querySelector("body").style.visibility = "hidden";
+    document.querySelector("#loader").style.visibility = "visible";
+  } else {
+    document.querySelector("#loading-screen").style.display = "none";
+    document.querySelector("body").style.visibility = "visible";
+    document.body.style.opacity = 1; // Add this line to set opacity to 1
+    //blurFade(); was useless
+  }
+};
+
+function blurFade() {
+  var cards = document.getElementsByClassName("card");
+
+      for (var i = 0; i < cards.length; i++) {
+        cards[i].style.backdropFilter = "blur(30px)";
+        cards[i].style.webkitBackdropFilter = "blur(30px)";
+      }
+}
+
+/*
+document.onreadystatechange = function() {
+  document.querySelector("body").style.visibility = "hidden";
+  document.querySelector("#loader").style.visibility = "visible";
+
+};*/
+function loadContent(contentId) {
+  const mainContent = document.getElementById('mainContent');
+
+  switch (contentId) {
+      case 'home':
+          document.getElementsByClassName("current")[0].className = "not-current";
+          console.log(document.getElementById("eduNav").className);
+          document.getElementById("homeNav").className = "current";
+          loadHomeContent();
+          blurFade();
+          break;
+      case 'education':
+        document.getElementsByClassName("current")[0].className = "not-current";
+          document.getElementById("eduNav").className = "current";
+          loadEducationContent();
+          blurFade();
+          break;
+      case 'projects':
+          mainContent.innerHTML = '<h2>Projects Content</h2><p>This is the projects section.</p>';
+          break;
+      case 'learning':
+          mainContent.innerHTML = '<h2>Learning Content</h2><p>This is the learning section.</p>';
+          break;
+      default:
+          console.error('Invalid content ID:', contentId);
+  }
+}
+
+
+// Call loadHomeContent when the page loads
+window.onload = function() {
+  loadContent('home');
+};
+
+function toggleMail() {
+  var element = document.getElementById('mailBox');
+  if (element.style.display === 'none' || element.style.display === '') {
+    element.style.display = 'block';
+  } else {
+    element.style.display = 'none';
+  }
+}
+
+
+
+//---------- Page content --------------
+
+function loadEducationContent() {
+  const educationContent = `
+        <div class="contents">
+            <div class="card">
+                <h3 class="card-title">BSc Mathematics at UOC - 2019-2024</h2>
+
+                    <p>Coursework includes (but not limited to):</p>
+                    <ul>
+                        <li>Python (2 courses)</li>
+                        <li>Numerical Analysis</li>
+                        <li>Numerical Solution of O.D.E.s</li>
+                        <li>Programming Lab (HTML, CSS, JavaScript, PHP, C)</li>
+                        <li>Programming (C++)</li>
+                        <li>Object Oriented Programming (Java)</li>
+                        <li>Real Analysis (Lebesgue Measure & integration on real axis)</li>
+                        <li>Applications of Probability</li>
+                        <li>Design and Analysis of Algorithms</li>
+                        <li>Parametric Statistics</li>
+                    </ul>
+
+                    <p>Courses I'm taking part in:</p>
+                    <ul>
+                    <li>Machine Learning</li>
+                    <li>Probabilistic Graphical Models (grad)</li>
+                    <li>Applied Statistics</li>
+                    <li>Descriptive Statistics</li>
+                    <li>Optimization Theory</li>
+                    <li>Data Science and applications</li>
+                    <li>The Complete Web Dev Bootcamp (Udemy)</li>
+                    </ul>
+
+            </div>
+        </div>
+
+      <div class="contents">
+        <div class="card">
+            <h3 class="card-title">Selected Books and Online Courses</h2>
+                    <h4>Books</h3>
+                    <ul>
+                        <li>Introduction to Statistical Learning with R by D. Witten, Gareth M. James, T. Hastie, R. Tibshirani -- <a class="link" href="https://www.statlearning.com/">download here</a></li>
+                        <li>Intro to Algorithms by Cormen, Leiserson, Rivest, Stein</li>
+                        <li>Linear Algebra and Applications by G. Strang</li>
+                        <li>Intro to Numerical Analysis by G.Akrivis, V.Dougalis</li>
+                        <li>Numerical Methods for O.D.Es by G.Akrivis, V.Dougalis</li>
+                        <li>Programming with C++ by Stroustrup</li>
+                        <li>Real Analysis by N.L. Carothers</li>
+                        <li>Classical Mechanics by Kibble, Berkshire</li>
+                    
+                    </ul>
+        </div>
+      </div>
+  `;
+
+  document.getElementById('mainContent').innerHTML = educationContent;
+}
+
+function loadHomeContent() {
+  const homeContent = `
+        <div class="contents">
+            <div class="card">
+                    <h3 class="card-title">About Me</h3>
+                    <div class="content-box">
+                        <p style="margin: 0;">My main interests are Applied and Computational Mathematics,
+                         Machine-Statistical Learning and Software Development.
+                         I love turning ideas into reality by using code and exploring the world through data.
+                          You'll often find me soaking up knowledge in books or experimenting with new code.</p>
+                    </div>
+            </div>
+
+            <div class="card">
+                    <h3 class="card-title">Experience</h3>
+                    <div class="content-box">
+                        <ul>
+                          <li>2024-Present: Teaching Assistant in Numerical Analysis, University of Crete</li>
+                        </ul>
+                    </div>
+            </div>
+        </div>
+
+        <div class="contents">
+            <div class="card" id="links">
+                <h3 class="card-title">Some nice learning resources</h3>
+                    <a href="https://collegecompendium.org/explore"><img src="src/colcomp.png"></a>
+
+                    <a href="https://ocw.mit.edu/"><img src="src/ocw.png"></a>
+
+                    <a href="https://www.freecodecamp.org/"><img src="src/fcc.png"></a>
+
+                    <a href="https://linuxjourney.com/"><img src="src/lj.png"></a>
+
+                    <a href="https://bulletin.math.uoc.gr/work/autolist.php?decade=2020"><img src="src/hms.png"></a>
+            </div>
+
+        </div>
+  
+  `;
+
+  document.getElementById('mainContent').innerHTML = homeContent;
+}
diff --git a/src/Logo.png b/src/Logo.png
diff --git a/src/bg.gif b/src/bg.gif
diff --git a/src/bg.jpg b/src/bg.jpg
diff --git a/src/bg.jpg~ b/src/bg.jpg~
diff --git a/src/blue-wavy-background.jpg b/src/blue-wavy-background.jpg
diff --git a/src/blue-wavy-backgroundBlur.jpg b/src/blue-wavy-backgroundBlur.jpg
diff --git a/src/bluewavybg-vertical.jpg b/src/bluewavybg-vertical.jpg
diff --git a/src/colcomp.png b/src/colcomp.png
diff --git a/src/fcc.png b/src/fcc.png
diff --git a/src/gh.png b/src/gh.png
diff --git a/src/hms.png b/src/hms.png
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="icon" href="favicon.ico?v=2">
+    <title>Nick Vougioukakis</title>
+</head>
+
+<body>
+    <div id="content-wrap">
+        <div class="header">
+            <div class="nav">
+                <nav>
+                    <ul>
+                        <li><a href="#" class="current" id="homeNav" onclick="loadContent('home')">Home</a></li>
+                        <li><a href="#" class="not-current" id="eduNav" onclick="loadContent('education')">Education</a></li>
+                        <!--<li><a href="#" class="not-current" id="projNav">Projects</a></li>
+                        <li><a href="#" class="not-current">Learning</a></li>-->
+                    </ul>
+                </nav>
+            </div>
+        </div>
+
+        <div class="contents-flexbox" >
+            <div class="contents" id="my-card">
+                <div class="home card">
+                    <div class="profile">
+                        <img src="src/pfp.png" alt="Profile Image">
+                    </div>
+                    <div class="info">
+                        <div>
+                            <h1 style="margin-top: 0px; margin-bottom: 0px;">Nick Vougioukakis</h1>
+                        </div>
+                        <p style="display: flex; flex-direction: column; justify-content: center; margin: 0; align-items: center;">
+                            Mathematics student at &nbsp;
+                            <a href="http://math.uoc.gr/en/index.html">University of Crete</a>
+                        </p>
+                        <img class="uoc" src="src/Logo.png">
+
+                        <p style="font-size: 12px;"> Email: vougioukakis99 {at} gmail {dot} com</p>
+
+                        <div class="buttons-div">
+                            <a href="https://www.linkedin.com/in/nikolaos-vougioukakis-66a2b7256/" style="background-color: #0077b5;" target="_blank" class="buttons">LinkedIn</a>
+                            <a href="https://github.com/vougioukakis" class="buttons" target="_blank">GitHub</a>
+                        </div>
+                    </div>
+                </div>
+
+
+        </div>
+
+        <div class="contents-x2" id="mainContent"></div>
+
+
+    </div>
+    <br>
+
+    <footer class="footer">
+        <p>Nikolaos Vougioukakis 2024</p>
+        <p>Background designed by Freepik</p>
+    </footer>
+
+    <script src="script.js"></script>
+
+</body>
+
+
+
+</html>
diff --git a/src/li.png b/src/li.png
diff --git a/src/lj.png b/src/lj.png
diff --git a/src/nvlogo.png b/src/nvlogo.png
diff --git a/src/nvlogoo.png b/src/nvlogoo.png
diff --git a/src/ocw.png b/src/ocw.png
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}