-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
97 lines (92 loc) · 6.77 KB
/
index.html
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Font1&family=Font2&display=swap" rel="stylesheet">
<title>🐭 JORGE RIVAS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script>
window.addEventListener("scroll", function() {
var socialIconsContainer = document.querySelector(".social-icons-container");
var windowHeight = window.innerHeight;
var scrollPosition = window.scrollY;
if (scrollPosition > windowHeight / 5) {
socialIconsContainer.classList.add("show");
} else {
socialIconsContainer.classList.remove("show");
}
});
let portal = document.getElementById('portal');
for (let i = 0; i < 360; i++) {
let chispas = document.createElement("div");
chispas.className = "chispas";
chispas.style.transform = 'rotate(' + i * 2 + 'deg)';
let chispasTranslation = Math.random() * (120 - 100) + 100;
chispas.style.transform += ' translate(' + chispasTranslation + 'px)';
portal.appendChild(chispas);
}
</script>
<header>
<div class="social-icons-container">
<a href="https://github.com/Rivas-Jorge">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5CazwxFe2ioqKRNLij1I2FTLfRjNXIto8FbvwQhDVLkkWfQzK17O3CiQZ_BXUO0T1MXEQ2orE1ns&usqp=CAU&ec=48665698">
</a>
<a href="https://www.linkedin.com/in/j0rger1vas/">
<img src="data:image/png;base64,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" alt="LinkedIn Icon">
</a>
<a href="https://twitter.com/JorgeR1vas">
<img src="https://png.pngtree.com/png-vector/20221018/ourmid/pngtree-twitter-social-media-round-icon-png-image_6315985.png" alt="Twitter Icon">
</a>
</div>
</header>
<div class="container">
<div class="profile" >
<img src="images/jorge.jpg" alt="Profile Image" >
<h1>Jorge Rivas</h1>
<div id="portal"></div>
<p>Hello! I'm Jorge Rivas, an aspiring web developer with a passion for learning. Although I'm relatively new to the field, I'm excited to share my journey and growth as I dive into the world of web development. My current focus lies in HTML, CSS, JavaScript, and Git.</p>
</div>
<div class="icons-container">
<div class="icon">
<img src="https://cdn-icons-png.flaticon.com/256/121/121537.png" alt="html">
</div>
<div class="icon">
<img src="https://www.shareicon.net/data/512x512/2015/08/31/93779_css3_512x512.png" alt="css">
</div>
<div class="icon">
<img src="https://cdn.icon-icons.com/icons2/2622/PNG/512/brand_javascript_icon_157913.png" alt="javascript">
</div>
<div class="icon">
<img src="https://git-scm.com/images/logos/downloads/Git-Icon-Black.png" alt="git bash">
</div>
</div>
<section class="projects">
<h2>My Projects</h2>
<div class="project">
<a href="http://book.zionsquad.repl.co/" target="_blank"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyzebUCdEI_GfMXFydHErWdN8u3-bQ189tUBC1W0y4iA&usqp=CAU&ec=48665698" alt="book"></a>
<div class="project-info">
<h3> Personal library</h3>
<p>"Welcome to my library project! Search, bookmark, and highlight books for an enhanced reading experience. Explore the collection, find your favorites, and easily navigate through the pages. Enjoy the convenience and functionality of this interactive library project."</p>
<a href="http://book.zionsquad.repl.co/" target="_blank">Visit Project</a>
</div>
</div>
<div class="project">
<img src="https://cdn-icons-png.flaticon.com/512/1146/1146921.png" alt="Weather App">
<div class="project-info">
<h3>Weather App</h3>
<p>
"Create a Weather App in React.js: Get 3-Day Forecasts by Zip Code!"</p>
</div>
</div>
<div class="project">
<img src="" alt="Project 3">
<div class="project-info">
<h3>Project 3</h3>
<p> Project 3</p>
</div>
</div>
</section>
</div>
</body>
</html>