-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmobile.js
80 lines (76 loc) · 4.63 KB
/
mobile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
document.addEventListener("DOMContentLoaded", function() {
if (window.matchMedia("(pointer: none), (pointer: coarse)").matches) {
const swup = new Swup();
document.documentElement.innerHTML = `
<html>
<head>
<title>oscarsaul</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="mobile-style.css">
<link rel="icon" href="assets/logo.png">
</head>
<body>
<h1 itemprop="name">
<span id="text" class="title" >oscar saul.</span><span id="cursor">|</span>
</h1>
<div id="wrapper">
<div class="quote" itemprop="description" style="top: -300px;">Hey 👋, I'm a Computer Science and Business student focused on developing full-stack web applications and backend services. I have a strong interest in cybersecurity, fintech, and 3D modeling. Currently, I’m exploring the applications of Nmap's, modeling in Fusion 360, and automating <a class="gradient sublink" href="arbitrage-trader">arbitrage opportunities</a> through web scraping. Want to learn more <a style="text-decoration: underline;"class="gradient sublink" href="about-me">about me?</a> 👈😎</div>
<br>
<h2>Projects</h2>
<section>
<p itemprop="projects"><a href="arbitrage-trader">Arbitrage Trader</a> - a program that calculates profit opportunities across multiple sportsbooks</p>
<p itemprop="projects"><a href="social-crawler">Social Crawler</a> - a selenium based web crawler that retrieves users social media metrics.</p>
<p itemprop="projects"><a href="ai-playlist">AI Generated Playlist</a> - a web based application that uses Open Ai api to generate a unique playlist.</p>
<p itemprop="projects"><a href="mouse-heatmap">Mouse Heatmap</a> - lightweight application that stores mouse points and provides a playback of heatmap.</p>
<p itemprop="projects"><a href="dns-config">DNS Configurator</a> - python script that changes system DNS settings to Cloudflares resolvers.</p>
</section>
<h2>Experience</h2>
<section id="project-container">
<div>
<h3 itemprop="jobTitle">Makerspace <span id="time">2024</span></h3>
<p class="quote">Engage in creating innovative projects utilizing various technologies, including 3D modeling, printing, and coding.</p>
</div>
<div>
<h3 itemprop="jobTitle">RecruitForMe <span id="time">2022 - 2023</span></h3>
<p class="quote">Software Developer (Co-op) for <a href="https://recruitforme.com">recruitforme</a>, a networking and employment-based platform.</p>
</div>
<div>
<h3 itemprop="jobTitle">AWS Certificate <span id="time">2022</span></h3>
<p class="quote">Certified in Lambda, DynamoDB, Fargate, S3, and Elastic Beanstalk.</p>
</div>
</section><br>
<div class="connect-with-me">
<a id="connect" href="https://www.linkedin.com/in/oscarmmv/" target="_blank">
<button class="connect-button"><i class="bi bi-linkedin"></i></button>
</a>
<a id="connect" href="https://github.com/oscarmmv" target="_blank">
<button class="connect-button"><i class="bi bi-github"></i></button>
</a>
<a id="connect" href="https://discord.com/users/748901094650019971" target="_blank">
<button class="connect-button"><i class="bi bi-discord"></i></button>
</a>
</div>
</div>
</body>
</html>
`;
// Typing effect
const textElement = document.getElementById('text');
const cursorElement = document.getElementById('cursor');
const text = "oscar saul.";
let index = 0;
function type() {
if (index === 0) {
textElement.textContent = "";
}
if (index < text.length) {
textElement.textContent += text.charAt(index);
index++;
setTimeout(type, 100);
} else {
cursorElement.style.display = 'none';
}
}
}
type();
});