-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
209 lines (203 loc) · 11.7 KB
/
Copy pathindex.html
File metadata and controls
209 lines (203 loc) · 11.7 KB
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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portfolio | Stefanov</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather|Open+Sans&display=swap" rel="stylesheet">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-BJEYW0TQGH"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-BJEYW0TQGH');
</script>
</head>
<body>
<nav role="navigation">
<div class="hamburger-menu">
<input type="checkbox" id="hamburger">
<label for="hamburger" class="hamburger">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</label>
</div>
<div class="menu">
<div>
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#work">Work</a>
</li>
<li>
<a href="#aboutme">About Me</a>
</li>
<li>
<a href="#projects">Projects</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
<div class="divider-menu"></div>
<div class="mobile-menu slideDown">
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#work">Work</a>
</li>
<li>
<a href="#aboutme">About Me</a>
</li>
<li>
<a href="#projects">Projects</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<main role="main">
<header id="home" role="banner">
<h1 class="slideDown">Rethinking Technical Communication with XR</h1>
<h3 class="slideDown">My name is Ivan Stefanov. Welcome to my portfolio page!</h3>
<div class="divider-light slideUp"></div>
<p class="slideDown">Industrial XR Workflows | Unreal Engine | Digital Twins Visualization | Assisted Guidance </p>
<p class="slideDown">I design and prototype immersive solutions (XR/VR) for training, maintenance, and system understanding - transforming real machines and workflows into interactive XR experiences.</p>
</header>
<section id="work">
<h2>WORK</h2>
<p class="info-tap">Tap icon for info</p>
<ul class="work-container">
<li class="work-item">
<img src="img/info_logo1.png" alt="Industrial XR/VR" width="216" height="216">
<p>Industrial XR Workflows</p>
<div class="divider"></div>
<p class="motto">Immersive industrial training, visualization, and XR/VR workflows.</p>
</li>
<li class="work-item">
<img src="img/icon1.png" alt="Technical Writing">
<p>Interactive Technical Documentation</p>
<div class="divider"></div>
<p class="motto">Web Help. Responsive. Interactive. Mobile</p>
</li>
<li class="work-item">
<img src="img/icon2.png" alt="Web Development">
<p>Web-Based Tooling & Interfaces</p>
<div class="divider"></div>
<p class="motto">JavaScript. HTML5. CSS3</p>
</li>
<li class="work-item">
<img src="img/icon3.png" alt="Play Video">
<p>Visual & Instructional Media</p>
<div class="divider"></div>
<p class="motto">A picture is worth a thousand words. A video - ten thousand more.</p>
</li>
</ul>
</section>
<section id="aboutme" class="about">
<h2>ABOUT ME</h2>
<p>I'm a technical writer with over 15 years of experience, passionate about combining clear communication with modern technology. </br>I believe immersive technologies (XR/VR) will redefine how complex systems are understood, trained, and maintained. And I am actively building towards that future.
</p>
<!-- <img src="img/avatar_small.JPG" width="20%"/> -->
<button class="cv-button"><a href="cv.html">See CV here...</a></button>
</section>
<section id="projects">
<h2>SELECTED PROJECTS</h2>
<ul class="projects-container">
<li class="project-item" id="video1">
<h2>Immersive Technical Demo – XR Experience</h2>
<p> ◆ Virtual reality application prototype designed for technical training and user education </br> ◆ Interactive CAD models of machines </br> ◆ Realistic hand physics, smooth and teleport locomotion </br> ◆ Immersive video playback within the VR environment </br>
Built with <span class="bold">FreeCAD, Unreal Engine 5.5</span>.</p>
<video class="project-image" poster="img/Thmbnail_video1.png" controls width="100%" style="max-width: 800px; border-radius: 10px; margin-top: 1rem;">
<source src="https://userdocsmanager.s3.us-east-2.amazonaws.com/DemoVR.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button>Work In Progress</button>
<!-- <button><a href="https://github.com/vansky17/UserDoc-Manager-Client" target="_blank"> Github Repository</a></button> -->
</li>
<li class="project-item" id="video2">
<h2>Industrial Workflow – XR Experience</h2>
<p> ◆ Extended XR workflow prototype for interactive industrial processes</br> ◆ Step-by-step guidance through a possible AI-driven interface </br> ◆ Visualization of complex machines </br> ◆ Use cases: training, maintenance support, and technical communication
</br>Built with <span class="bold">FreeCAD, Unreal Engine 5.5</span>.</p>
<video class="project-image" playsinline controls width="100%" style="max-width: 800px; border-radius: 10px; margin-top: 1rem;">
<source src="https://userdocsmanager.s3.us-east-2.amazonaws.com/XR_Industrial_Workflow.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button>Work In Progress</button>
<!-- <button><a href="https://github.com/vansky17/UserDoc-Manager-Client" target="_blank"> Github Repository</a></button> -->
</li>
<li class="project-item">
<h2>HTML User Manuals</h2>
<p>HTML-based user manuals written with FrameMaker and ePublisher. Interactivity, responsiveness
and dynamic generation of technical content added with <span class="bold">JavaScript, jQuery and JSON</span>.
</p>
<img class="project-image" src="img/image2.gif" alt="Example workflow">
</li>
<li class="project-item">
<h2>Web App for Documentation Management</h2>
<p>A full React and Node.js application for viewing, downloading, and uploading technical documents.
Technologies: <span class="bold">React.js, Node/Express.js, PostgreSQL, AWS S3</span>.</p>
<a href="https://user-docs-manager.now.sh/" target="_blank"><img class="project-image" src="img/overview-doc-manager.png" alt="Example user guide"></a>
<button><a href="https://user-docs-manager.now.sh/" target="_blank"> See live app demo</a></button>
<button><a href="https://github.com/vansky17/UserDoc-Manager-Client" target="_blank"> Github Repository</a></button>
</li>
<li class="project-item">
<h2>VR Quiz App</h2>
<p>A fun quiz to test your readiness for the next dimension.
Made with vanilla <span class="bold"> JavaScript and jQuery</span>.
</p>
<a href="https://vansky17.github.io/VR-Quiz-App/" target="_blank"><img class="project-image" src="img/image4.png" alt="Example VR quiz"></a>
<button><a href="https://vansky17.github.io/VR-Quiz-App/" target="_blank"> See live on Github</a></button>
<button><a href="https://github.com/vansky17/VR-Quiz-App" target="_blank"> Github Repository</a></button>
</li>
<li class="project-item">
<h2>XR Signal</h2>
<p>A modern intelligence dashboard for the latest articles and videos about Virtual, Augmented and Mixed Reality.
Built with <span class="bold">Next.js, React and TypeScript</span>, it combines RSS and API sources, removes duplicates, classifies topics and ranks signals by relevance.
</p>
<a href="https://xr-signal.vercel.app/" target="_blank"><img class="project-image" src="img/vr-info-feed.png" alt="XR Signal dashboard"></a>
<button><a href="https://xr-signal.vercel.app/" target="_blank"> See live on Vercel</a></button>
<button><a href="https://github.com/vansky17/VR-Info-Feed" target="_blank"> Github Repository</a></button>
</li>
<li class="project-item">
<h2>VR Systems Guide</h2>
<p>A WebXR guide to current XR headsets. Works on desktop, mobile, and directly in Meta Quest via Quest Browser—no installation required. Built with <span class="bold">Babylon.js, TypeScript, Vite, HTML and CSS</span>.
</p>
<a href="https://vr-systems-guide.surge.sh/" target="_blank"><img class="project-image" src="img/overviewVR.png" alt="VR Systems Guide Babylon.js interface"></a>
<button><a href="https://vr-systems-guide.surge.sh/" target="_blank"> See live on Surge</a></button>
<button><a href="https://github.com/vansky17/VR-Systems-Guide" target="_blank"> Github Repository</a></button>
</li>
</ul>
</section>
</main>
<!-- Overlay -->
<div id="overlay">
<div id="popup">
<div id="close">×</div>
<p></p>
</div>
</div>
<!-- Overlay end -->
<footer id="contact" role="content-info">
<h2>Contact</h2>
<button><a href="mailto:ivan.stefanov@gmx.de">Send Email</a></button>
<button><a href="https://github.com/vansky17" target="_blank">Github Account</a></button>
<button><a href="https://www.linkedin.com/in/ivan-stefanov-85bba518b/" target="_blank">LinkedIn</a></button>
</footer>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</html>