-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
115 lines (84 loc) · 4.25 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
<title>Yassen Shopov • Portfolio Website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main_css.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<header class="header fadeInLeft">
<a href="#about"><b>ABOUT</b></a>
<a href="#portfolio"><b>PORTFOLIO</b></a>
<a href="#contact" style="margin-right: 80px;"><b>CONTACT</b></a>
</header>
<main>
<div class="hero">
<img class="heroImg fadeInRight" src="css/heroImg.png">
<h1 class="fadeInRight">YASSEN SHOPOV</h1>
<div class="skills">
<h2 class="fadeInRight">ENGINEER</h2>
<h2 class="fadeInRight">DESIGNER</h2>
<h2 class="fadeInRight">CONTENT CREATOR</h2>
</div>
</div>
<div id="pause1" class="pause"></div>
<div class="about" id="about">
<div class="paras">
<h2>🧬 ABOUT ME</h2>
<p>I am Yassen Shopov, a 21-year-old student from Bulgaria, on my journey of personal development. Welcome to my little page on the Internet.
<p>This website showcases my different projects and interests. My career as a digital creator started in 2020, and since then I have worked with 150+ clients on their digital illustrations and character design projects. Since the start of 2021, I have taken an avid interest in blogging, with my main niche being productivity and creativity enhancement.
<p>I have been using my skills in programming and web design to create extensions and automation that help me with work-life balance, increase my productivity, and help me monitor my personal data.</p>
<p>My aim as a digital content creator is to help my readers and followers reach their personal goals without sacrificing their mental health.</p>
<p>See you around! ✌️</p>
</div>
<img class="aboutImg fadeInRight" src="css/aboutImg.jpg">
</div>
<div id="pause2" class="pause"></div>
<div class="portfolio" id="portfolio">
<h2>💠 PORTFOLIO</h2>
<div class="DI">
<div id="imgWrapper">
<img id="digillustration" class="digillustration" src="css/digillustration.png"></img>
</div>
<h1 id="DIh1">DIGITAL ILLUSTRATION</h1>
</div>
</div>
<div id="pause3" class="pause"></div>
<div id="contact">
<h2>📣 CONTACT</h2>
<div class="contactSection">
<div class="upperContent">
<h2>Shoot me an email!</h2>
</div>
<div class="lowerContent">
<img class="contactImg" src="css/contact.png"></img>
</div>
</div>
</div>
</main>
<footer>
</footer>
<script src="{{url_for('static', filename='css/main_js.js')}}"></script>
<script>
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
console.log(winScroll);
console.log(height);
var scrolled1 = (((winScroll)/ (height - 1000)) * 100);
document.getElementById("pause1").style.width = scrolled1 + "%";
var scrolled2 = (((winScroll - 800) / (height - 1000)) * 100);
document.getElementById("pause2").style.width = scrolled2 + "%";
var scrolled3 = (((winScroll - 100) / (height)) * 100);
document.getElementById("pause3").style.width = scrolled3 + "%";
}
</script>
</body>
</html>