-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
166 lines (150 loc) · 7.69 KB
/
about.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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-control" content="public">
<title>Julia Robinek | About</title>
<link rel="icon" type="image/svg+xml" href="Logos/Circle-small.svg">
<link rel="preload" href="aboutstyles.css" as="style" onload="this.rel='stylesheet'">
<link rel="preload" href="menustyles.css" as="style" onload="this.rel='stylesheet'">
</head>
<body>
<!-- Black run-up "page"-->
<div>
<div id="run-up">
<a href="index.html" class="home-icon-run-up">Julia Robinek</a>
<div class="home-icon-sign-run-up"> <img src="Logos/RJlogo-small-white.svg"></img> </div>
</div>
</div>
<!-- Header Section Start NEED TO COPY TO EVERY PAGE DUE TO SLOW SERVER-->
<header>
<div class="header-content">
<div class="home-box">
<a href="index.html" class="home-icon">Julia Robinek</a>
<div class="home-icon-sign"> <img src="Logos/RJlogo-small-white.svg" loading="lazy"></img> </div>
</div>
<div class="menu-icon" id="menu-icon">
☰ <!-- Hamburger icon -->
</div>
<ul class="menu" id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="about.html" class="activem">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</header>
<!-- Header Section End -->
<!-- Hero Section -->
<hero class="AboutContent">
<h1>about</h1>
<article>
<p class="typewriter">
About me? I’m a painter, meditation teacher, web designer, and someone who’s deeply tuned into the values that shape our world. Oh, and I used to be an economist. You get the idea — life is an unfolding story, and I love exploring all its layers.
</p>
<p></p>
<p>
As a painter, I’m drawn to capturing the twists and turns of life, portraying the world as this ever-shifting dreamscape where reality flows like water. My art dives into the fleeting nature of existence, how memories, dreams, and thoughts all blur together. Nature—especially water—is a big inspiration for me because it represents life’s constant movement and the way everything is connected. I see the external world as a mirror of our inner one, shaped by our emotions, thoughts, and values.
</p>
<p>
Lately, I’ve been reflecting on how our values influence the way we design our world. It’s fascinating to ask—what would life look like if we gave different meanings to things? How would the world change if we prioritized new beliefs and ideas?
</p>
<p>
At the heart of my art is a love for self-discovery, that journey of listening to the inner voice that moves us forward or pulls us into the past. I want my paintings to open doors to these inner worlds, blending the familiar with the surreal, and helping us see things in a new light.
</p>
<p>
For me, life is all about the beauty and the beast, mystery, and transformation. Through my art, I hope to create a space where reality and imagination merge, making the journey as meaningful as where we’re headed.
</p>
</article>
<h3>studies</h3>
<dl>
<dt>MSc IT Communication and Web Design, SDU Kolding Denmark</dt>
<dd>Value Sensitive Design</dd>
</dl>
<dl>
<dt>Meditation Teacher, University of California, Berkley – Greater Good Science Center</dt>
</dl>
<dl>
<dt>Painting, Vhs Flensburg Germany</dt>
</dl>
<dl>
<dt>MSc Economy, University of West Hungary</dt>
<dd>Business Development</dd>
</dl>
<dl>
<dt>BA Economy, King Sigismund College Hungary</dt>
<dd>International Relations</dd>
</dl>
<br>
<h3>exhibitions</h3>
<dl>
<dt>2024-2025</dt>
<dt class="exhib">Sønderborg Kommune, Sønderborg (Denmark)</dt>
<dd class="exhtitle">The 100</dd>
</dl>
<dl>
<dt>2024</dt>
<dt class="exhib">KunstPunkt, Augustenborg (Denmark)</dt>
<dd class="exhtitle">Overflod</dd>
</dl>
</hero>
<!-- Footer Section Start NEED TO COPY TO EVERY PAGE -->
<footer>
<div class="footer-content">
<div class="footer-left">
<p>Copyright © Julia Robinek 2015 - <span id="year"></span></p>
<div class="small">
<a href="privacy.html">Privacy Policy</a>
<p>Run by GitHub</p>
</div>
</div>
<div class="footer-right">
<a href="https://www.instagram.com/juliarobinek" target="_blank">
<img src="Logos/logoInstaGraySmall-toUse.svg" loading="lazy" alt="Instagram Icon" class="social-icon">
</a>
</div>
</div>
<!-- Get the current year and insert it into the span with id="year" -->
<script defer>
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</footer>
<!-- Footer Section End -->
<script>
// Add the run-up "page" before the index page comes up
document.addEventListener("DOMContentLoaded", function() {
setTimeout(function() {
const runUpDiv = document.getElementById("run-up");
runUpDiv.style.transition = "opacity 0.3s";
runUpDiv.style.opacity = 0.4;
// When the opacity transition ends, hide the element completely
runUpDiv.addEventListener("transitionend", function() {
runUpDiv.style.display = "none";
}, { once: true }); // { once: true } ensures this runs only once
}, 800);
});
// Add the menu on top of every page of the website
document.addEventListener("DOMContentLoaded", function() {
fetch('menu.html') // Load the menu.html file
.then(response => response.text()) // Convert to text
.then(data => {
document.getElementById('wholehead').innerHTML = data; // Insert the menu HTML into the page
})
.catch(error => console.error('Error loading menu:', error));
});
// JavaScript to toggle the responsive menu and header background
document.getElementById("menu-icon").addEventListener("click", function() {
var menu = document.getElementById("menu");
var header = document.querySelector("header");
if (menu.classList.contains("show")) {
menu.classList.remove("show");
header.classList.remove("header-active"); // Remove half-transparent gray
} else {
menu.classList.add("show");
header.classList.add("header-active"); // Add half-transparent gray
}
});
</script>
</body>
</html>