victorvobis/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first deploy

Browse Source
This commit is contained in:
Your Name 2025-06-03 21:56:45 +02:00
parent d1c76eb767
commit 48b310c076
6 changed files with 26 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
compose.yaml
View File

@ -52,10 +52,6 @@ services:
environment:
- DISPLAY=:1
ports:
- 6080:6080
- 5901:5901
networks:
website_net:

26
nginx/nginx.conf
View File

@ -26,34 +26,17 @@ http {
server {
listen 80;
listen [::]:80;
charset utf-8;
server_name localhost;
server_tokens off;
return 301 https://$host:5443$request_uri;
}
server {
listen 443 ssl;
server_name localhost;
server_name victorvobis.org www.victorvobis.org;
root /var/www/html;
ssl_certificate /certs/localhost.pem;
ssl_certificate_key /certs/localhost-key.pem;
# Apply connection limits
limit_conn conn_limit_per_ip 2;
location / {
root /var/www/html;
index index.html index.htm;
}
location /minirt/password {
add_header Content-Type application/json;
try_files /json/password.json =404;
}
location /minishell/vnc {
proxy_pass http://minishell:8006/;
proxy_http_version 1.1;
@ -64,6 +47,11 @@ http {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location /minirt/password {
add_header Content-Type application/json;
try_files /json/password.json =404;
}
location /minirt/vnc {
index vnc.html;
try_files $uri $uri/ /vnc.html;

2
nginx/site/config.js
View File

@ -1,3 +1,3 @@
export const config = {
BASE_URL: 'https://localhost:5443/'
BASE_URL: 'https://victorvobis.org/'
};

26
nginx/site/html/minirt.html
View File

@ -27,6 +27,9 @@
Like the shell, this was part of the 42 curriculum, and was achieved within the same rules and
constraints as the previous project.
</p>
<p class="leading-relaxed text-gray-700 max-w-prose">
Again, the source code for this project is availiable <a class="underline text-blue-700 hover:text-blue-900" href="https://git.victorvobis.org/repo/miniRT.git">here</a>
</p>
<p class="leading-relaxed text-gray-700 max-w-prose">
This time, the assignment was to create a simple raytracer from scratch,
using a custom wrapper around the linux X11 API, for simple window creation and I/O.
@ -34,12 +37,13 @@
<p class="leading-relaxed text-gray-700 max-w-prose">
A raytracer is a program that uses a technique called
<a class="underline text-blue-700 hover:text-blue-900" href="https://en.wikipedia.org/wiki/Ray_tracing_(graphics)">"raytracing"</a>,
which essentially means that we simulate looking at a scene from our "eye-position", and use the computer screen like a window through which we
which is a technique used to create realistic images digitaly.
Raytracing essentially means that we simulate looking at a scene from our "eye-position", and use the computer screen like a window through which we
look at this scene.
</p>
<p class="leading-relaxed text-gray-700 max-w-prose">
Now, we imagine shooting a perfectly straight "ray" from our "eye" through each pixel of the screen, and trace that ray's path to see if it will
intersect with an object. If yes, we know that this specific pixel can display the color of the object that it hit.
intersect with an object. If yes, we know that this specific pixel should display the color of the object that it hit.
We repeat this process for each pixel. Using some math to check for lighting, shadows from other objects, distance and more,
we can determine a final color for each pixel, and with that create a remarkably realistic image from our scene.
</p>
@ -59,17 +63,18 @@
<li>Skybox</li>
</ul>
<p class="leading-relaxed text-gray-700 max-w-prose">
This project was again a team effort, my teammate
This project was again a team effort, and my teammate
<a class="underline text-blue-700 hover:text-blue-900" href="https://github.com/benszilas">Benjámin Szilas</a>
was very effective at implementing a lot of the math formulas.
He is responsible for a lot of the tracing functions, he implemented shadows, reflection, light-dispersion, anti-aliasing and much more,
whereas I prefered to work on the I/O focused parts like the menus, scene manipulation, file explorer and so on.<br/>
I had a lot of fun with this project, and learned a lot about working as a team, graphical programming and (some) maths!
implemented a lot of functionality and features which where essential to the project.
He is responsible for a lot of the tracing functions, and implemented features like shadows, mirrors, phong-reflection, multiple lights, anti-aliasing and much more.
</p>
<p class="leading-relaxed text-gray-700 max-w-prose">
As a final note: since we finished the project, and I was planning on showcasing it here, I have reimplemented the graphical part to use
I had a lot of fun with this project, and learned a lot about graphical programming, working as a team and (some) maths!
</p>
<p class="leading-relaxed text-gray-700 max-w-prose">
As a final note: since we finished the project, I was planning on showcasing it here, and so I have reimplemented the graphical part to use
<a class="underline text-blue-700 hover:text-blue-900" href="https://github.com/raysan5/raylib">Raylib</a>
since it seemed more future proof to use.
since it seemed more appropriate to use.
</p>
<p class="leading-relaxed text-gray-700 max-w-prose">
Again, I have provided a live version below, feel free to play around in it!
@ -95,9 +100,6 @@
<div>
<div id="minirt-canvas-background" style="display: none" class="minirt-canvas-background">
<button id="canvas-close-btn" class="absolute top-[16px] right-[16px] text-white">Close</button>
<div id="top_bar">
<div id="status">Loading</div>
</div>
</div>
</div>
</div>

83
nginx/site/index.html
View File

@ -19,90 +19,9 @@
</div>
</header>
<div class="flex flex-col gap-y-6 bg-neutral-200/70 w-[60%] ml-[10%] mr-auto px-16 py-8">
<h2 class="text-4xl font-bold text-gray-800">The Shell</h2>
<div class="space-y-2">
<p class="leading-relaxed text-gray-700 max-w-prose">
The minishell project is part of the common core curriculum at ecole42 and
is seen as a milestone and one of the biggest jumps in complexity on the way to completing the cursus.
</p>
<p class="leading-relaxed text-gray-700 max-w-prose">
The rules are simple: Create a program that will replicate basic shell behaviour like typically found on posix systems.
</p>
<p class="leading-relaxed text-gray-700 mb-4 max-w-prose">
Some of the requirements are:
Welcome to my Website! <a class="underline text-blue-700 hover:text-blue-900">Get Started...</a>
</p>
<ul class="list-disc list-inside space-y-2 text-gray-700 ml-4">
<li>Command line parsing</li>
<li>I/O loop to accept continuous commands</li>
<li>Command execution</li>
<li>File Descriptor redirection</li>
<li>Pipe Operators</li>
<li>Heredoc</li>
<li>Logical AND ( && )</li>
<li>Logical OR ( || )</li>
<li>and more...</li>
</ul>
<p class="leading-relaxed text-gray-700 mb-4 max-w-prose">
The program has to be written in C, we are working on GNU/Linux machines.
</p>
<p class="leading-relaxed text-gray-700 mb-4 max-w-prose">
We are also required to follow a very strict norm on which you can read more
<a class="underline text-blue-700 hover:text-blue-900" href="/assets/42-norm.pdf">here</a>.
</p>
<p class="leading-relaxed text-gray-700 mb-4 max-w-prose">
What makes the 42 projects stand out in my opinon is that the tools we use are very restricted, essentially only allowing
syscalls to interface with the kernel, some utility functions and memory functions, and in this case we were allowed to use
printf, which is normally forbidden.
This means that all utilty has to be implemented by hand, and all relevant code will be written by the projects authors.
</p>
<p class="leading-relaxed text-gray-700 mb-4 max-w-prose">
We also could use the readline function used in bash to handle the input of the user.<br>
Since memory leaks of any kind are considered an unrecoverable mistake when validating a project, and the readline function would
inevitably leak memory, those leaks were explicitly tolerated by the projects requirements.
</p>
<p class="leading-relaxed text-gray-700 mb-4 max-w-prose">
But, out of cursiousity, we decided to recreate the readline function, removing the dependecy and leaks from our project,
and learing a lot on the way.<br>
In my opinion, this is arguably the most interesting part of our implementation, and I very much enjoyed it!
</p>
<p class="leading-relaxed text-gray-700 mb-4 max-w-prose">
This project was a team effort, and big thanks go out to my team partner<br>and good friend,
<a class="underline text-blue-700 hover:text-blue-900" href="https://github.com/zekmaro">Andrej Arama</a>!
</p>
<p class="leading-relaxed text-gray-700 mb-4 max-w-prose">
The source code for the project can be seen on my
<a class="underline text-blue-700 hover:text-blue-900" href="https://git.victorvobis.org/minishell">git server</a> and
I have also provided a live version of the shell found below.
</p>
<div id="shell-container" class="flex max-w-[800px] min-h-[600px] bg-gray-800 justify-center place-items-center">
<button id="shell-start-button" class="flex p-4 bg-neutral-100/50 place-items-center rounded-md">
Start Shell
</button>
</div>
</div>
<div class="flex justify-between">
<p class="leading-relaxed text-gray-700 mb-4">
After trying out the shell, feel free to check out my other projects!
</p>
<a class="underline text-blue-700 hover:text-blue-900" href="/html/minirt.html">Next Project...</a>
</div>
</div>
</div>
<script>
const config = {
BASE_URL: 'http://localhost:5080/',
};
const shell_button = document.getElementById('shell-start-button');
shell_button.addEventListener('click', function() {
const shell_container = document.getElementById('shell-container');
const shell_frame = document.createElement('iframe');
shell_frame.height = '600';
shell_frame.width = '800';
shell_frame.src = config.BASE_URL + 'minishell/vnc';
shell_container.appendChild(shell_frame);
shell_button.style = 'display: none';
});
</script>
</body>
</html>

27
nginx/site/js/minirt.js
View File

@ -36,7 +36,7 @@ get_passwd.addEventListener('click', function() {
const passwd_display = document.getElementById('minirt-password-display');
passwd_display.textContent = `Password: ${data.password}`;
});
} catch (c) {
} catch (e) {
console.error(e);
}
})
@ -55,25 +55,9 @@ minirt_button.addEventListener('click', function() {
screen.id = 'screen';
canvas_background.appendChild(screen);
let rfb;
let desktopName;
// When this function is called we have
// successfully connected to a server
function connectedToServer(e) {
status("Connected to " + desktopName);
}
// This function is called when we are disconnected
function disconnectedFromServer(e) {
if (e.detail.clean) {
status("Disconnected");
} else {
status("Something went wrong, connection is closed");
}
}
// When this function is called, the server requires
// credentials to authenticate
function credentialsAreRequired(e) {
@ -88,11 +72,6 @@ minirt_button.addEventListener('click', function() {
desktopName = e.detail.name;
}
// Show a status text in the top bar
function status(text) {
document.getElementById('status').textContent = text;
}
// This function extracts the value of one variable from the
// query string. If the variable isn't defined in the URL
// it returns the default value instead.
@ -124,8 +103,6 @@ minirt_button.addEventListener('click', function() {
// | | | Connect | | |
// v v v v v v
status("Connecting");
// Build the websocket URL used to connect
let url;
if (window.location.protocol === "https:") {
@ -144,8 +121,6 @@ minirt_button.addEventListener('click', function() {
{ credentials: { password: password } });
// Add listeners to important events from the RFB module
rfb.addEventListener("connect", connectedToServer);
rfb.addEventListener("disconnect", disconnectedFromServer);
rfb.addEventListener("credentialsrequired", credentialsAreRequired);
rfb.addEventListener("desktopname", updateDesktopName);