Merge pull request 'Minimalist design' (#2) from minimalist into main

Reviewed-on: #2
This commit is contained in:
Tibo De Peuter 2023-07-31 15:55:35 +02:00
commit 1b760b290c
14 changed files with 4476 additions and 9 deletions

2
.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
.idea
node_modules

1
assets/icons/git.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M26.852 15.281l-9.848-9.848a1.453 1.453 0 0 0-2.054 0l-2.045 2.045 2.594 2.594a1.725 1.725 0 0 1 2.185 2.199l2.5 2.5a1.728 1.728 0 1 1-1.035.974l-2.332-2.332v6.136a1.73 1.73 0 1 1-1.421-.05v-6.193a1.729 1.729 0 0 1-.938-2.266l-2.557-2.558-6.753 6.752a1.454 1.454 0 0 0 0 2.055l9.849 9.848a1.453 1.453 0 0 0 2.054 0l9.802-9.802a1.454 1.454 0 0 0 0-2.055z"/></svg>

After

Width:  |  Height:  |  Size: 431 B

1
assets/icons/github.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill-rule="evenodd" d="M49.998 11.963C28.461 11.963 11 29.425 11 50.965c0 17.231 11.172 31.849 26.671 37.003 1.952.361 2.662-.84 2.662-1.877 0-.924-.034-3.375-.051-6.633-10.849 2.359-13.138-5.229-13.138-5.229-1.774-4.505-4.331-5.703-4.331-5.703-3.541-2.418.269-2.371.269-2.371 3.914.277 5.974 4.018 5.974 4.018 3.478 5.96 9.129 4.235 11.35 3.243.353-2.525 1.363-4.24 2.476-5.217-8.659-.984-17.763-4.33-17.763-19.274 0-4.259 1.519-7.741 4.013-10.468-.399-.982-1.74-4.947.383-10.319 0 0 3.274-1.048 10.726 4.001 3.109-.869 6.446-1.303 9.763-1.316 3.312.014 6.65.447 9.763 1.316 7.447-5.049 10.716-4.001 10.716-4.001 2.128 5.372.788 9.337.388 10.319 2.5 2.727 4.008 6.209 4.008 10.468 0 14.979-9.117 18.279-17.805 19.241 1.398 1.205 2.646 3.59 2.646 7.229 0 5.211-.047 9.416-.047 10.695 0 1.045.701 2.26 2.681 1.873C77.836 82.798 89 68.191 89 50.965c0-21.54-17.461-39.002-39.002-39.002z" clip-rule="evenodd"/></svg>

After

Width:  |  Height:  |  Size: 980 B

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M80.667 14H19.315C16.381 14 14 16.325 14 19.188v61.617C14 83.672 16.381 86 19.315 86h61.352C83.603 86 86 83.672 86 80.805V19.188C86 16.325 83.603 14 80.667 14zM35.354 75.354H24.67V40.995h10.684v34.359zm-5.342-39.057a6.19 6.19 0 0 1-6.19-6.194 6.189 6.189 0 1 1 12.379 0 6.194 6.194 0 0 1-6.189 6.194zM75.35 75.354H64.683V58.646c0-3.986-.078-9.111-5.551-9.111-5.558 0-6.405 4.341-6.405 8.822v16.998H42.052v-34.36h10.245v4.692h.146c1.426-2.7 4.91-5.549 10.106-5.549 10.806 0 12.802 7.114 12.802 16.369v18.847z"/></svg>

After

Width:  |  Height:  |  Size: 587 B

1
assets/icons/mail.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g><path d="M85.944 20.189H14.056a2.559 2.559 0 0 0-2.556 2.557v5.144c0 .237.257.509.467.619l37.786 21.583a.63.63 0 0 0 .318.083.634.634 0 0 0 .324-.088L87.039 28.53c.206-.115.752-.419.957-.559.248-.169.504-.322.504-.625v-4.601a2.559 2.559 0 0 0-2.556-2.556zM88.181 35.646a.644.644 0 0 0-.645.004L66.799 47.851a.637.637 0 0 0-.145.985l20.74 22.357a.632.632 0 0 0 .467.204.64.64 0 0 0 .639-.639V36.201a.638.638 0 0 0-.319-.555zM60.823 51.948a.636.636 0 0 0-.791-.118l-8.312 4.891a3.243 3.243 0 0 1-3.208.021l-7.315-4.179a.64.64 0 0 0-.751.086L12.668 78.415a.64.64 0 0 0 .114 1.02c.432.254.849.375 1.273.375h71.153a.635.635 0 0 0 .585-.385.635.635 0 0 0-.118-.689L60.823 51.948zM34.334 49.601a.639.639 0 0 0-.115-1.023L12.453 36.146a.638.638 0 0 0-.953.556v32.62a.637.637 0 0 0 1.073.468l21.761-20.189z"/></g></svg>

After

Width:  |  Height:  |  Size: 875 B

1
assets/icons/twitter.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M88.5 26.12a31.562 31.562 0 0 1-9.073 2.486 15.841 15.841 0 0 0 6.945-8.738A31.583 31.583 0 0 1 76.341 23.7a15.783 15.783 0 0 0-11.531-4.988c-8.724 0-15.798 7.072-15.798 15.798 0 1.237.14 2.444.41 3.601-13.13-.659-24.77-6.949-32.562-16.508a15.73 15.73 0 0 0-2.139 7.943 15.791 15.791 0 0 0 7.028 13.149 15.762 15.762 0 0 1-7.155-1.976c-.002.066-.002.131-.002.199 0 7.652 5.445 14.037 12.671 15.49a15.892 15.892 0 0 1-7.134.27c2.01 6.275 7.844 10.844 14.757 10.972a31.704 31.704 0 0 1-19.62 6.763c-1.275 0-2.532-.074-3.769-.221a44.715 44.715 0 0 0 24.216 7.096c29.058 0 44.948-24.071 44.948-44.945 0-.684-.016-1.367-.046-2.046A32.03 32.03 0 0 0 88.5 26.12z"/></svg>

After

Width:  |  Height:  |  Size: 735 B

BIN
assets/owl_circuit.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 562 KiB

59
flake.lock generated Normal file
View file

@ -0,0 +1,59 @@
{
"nodes": {
"flake-utils": {
"inputs": {
"systems": "systems"
},
"locked": {
"lastModified": 1689068808,
"narHash": "sha256-6ixXo3wt24N/melDWjq70UuHQLxGV8jZvooRanIHXw0=",
"owner": "numtide",
"repo": "flake-utils",
"rev": "919d646de7be200f3bf08cb76ae1f09402b6f9b4",
"type": "github"
},
"original": {
"owner": "numtide",
"repo": "flake-utils",
"type": "github"
}
},
"nixpkgs": {
"locked": {
"lastModified": 1690630721,
"narHash": "sha256-Y04onHyBQT4Erfr2fc82dbJTfXGYrf4V0ysLUYnPOP8=",
"owner": "NixOS",
"repo": "nixpkgs",
"rev": "d2b52322f35597c62abf56de91b0236746b2a03d",
"type": "github"
},
"original": {
"id": "nixpkgs",
"type": "indirect"
}
},
"root": {
"inputs": {
"flake-utils": "flake-utils",
"nixpkgs": "nixpkgs"
}
},
"systems": {
"locked": {
"lastModified": 1681028828,
"narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
"owner": "nix-systems",
"repo": "default",
"rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
"type": "github"
},
"original": {
"owner": "nix-systems",
"repo": "default",
"type": "github"
}
}
},
"root": "root",
"version": 7
}

28
flake.nix Normal file
View file

@ -0,0 +1,28 @@
{
description = "Portfolio";
inputs.flake-utils.url = "github:numtide/flake-utils";
outputs = { self, nixpkgs, flake-utils }:
flake-utils.lib.eachDefaultSystem
(system:
let
pkgs = import nixpkgs {
inherit system;
config.allowUnfree = true;
};
in {
devShells.default = pkgs.mkShell {
packages = with pkgs; [
jetbrains.webstorm
nodejs
nodePackages.live-server
];
shellHook = ''
webstorm . && exit
'';
};
}
);
}

View file

@ -1,17 +1,75 @@
<!DOCTYPE html>
<html>
<html prefix="schema: http://schema.org/ foaf: https://xmlns.com/foaf/0.1/ og: http://ogp.me/ns#"
typeof="schema:WebPage"
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<title>Tibo De Peuter</title>
<meta name="description" content="Computer Science student. Personal portfolio">
<link rel="alternate" type="application/n-quads" href="https://tibo.depeuter.dev/tdpeuter.ttl">
<meta property="og:title" content="Tibo De Peuter">
<meta property="og:type" content="website">
<meta property="og:image" content="https://tibo.depeuter.dev/assets/owl_circuit.png">
<meta property="og:url" content="https://tibo.depeuter.dev/">
<meta property="og:description" content="Computer Science student. Personal portfolio">
<meta property="og:locale" content="en_GB">
<meta property="foaf:name" content="Tibo De Peuter">
<meta property="foaf:givenName" content="Tibo">
<meta property="foaf:familyName" content="De Peuter">
<meta property="foaf:img" content="https://tibo.depeuter.dev/assets/owl_circuit.png">
<meta property="foaf:homepage" content="https://tibo.depeuter.dev/">
<meta property="foaf:gender" content="male">
<link rel="foaf:maker" content="https://tibo.depeuter.dev/">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="image/png" href="assets/owl_circuit.png">
<link rel="apple-touch-icon" href="assets/owl_circuit.png">
</head>
<body>
<h1>Hello there!</h1>
<p>My name is Tibo De Peuter. Even though this website may currently not look like much, please come back later and check out the finished product!</p>
<p>In the meantime, you can find me here:</p>
<ul>
<li><a href="https://git.depeuter.dev/tdpeuter">My own Git</a></li>
<li><a href="https://github.com/tdpeuter">Github</a></li>
<li><a href="https://twitter.com/tdpeuter">Twitter</a></li>
<div class="wrapper">
<div class="quote">
<p>My name is Tibo De Peuter.</p>
<p>I like working with computers.</p>
</div>
<ul class="links">
<li>
<a href="mailto:tibo@depeuter.dev" title="My mail address">
<img src="assets/icons/mail.svg" alt="Mail me"/>
</a>
</li>
<li>
<a href="https://git.depeuter.dev/tdpeuter" title="My personal git">
<img src="assets/icons/git.svg" alt="Gitea"/>
</a>
</li>
<li>
<a href="https://github.com/tdpeuter" title="My GitHub account">
<img src="assets/icons/github.svg" alt="GitHub"/>
</a>
</li>
<li>
<a href="https://twitter.com/tdpeuter" title="My Twitter account">
<img src="assets/icons/twitter.svg" alt="Twitter"/>
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/tdpeuter/" title="My LinkedIn account">
<img src="assets/icons/linkedin.svg" alt="LinkedIn"/>
</a>
</li>
</ul>
<p>See you around! o7</p>
</div>
<footer>
<p>
Made with <span class="heart">&hearts;</span>.
<a href="https://git.depeuter.dev/tdpeuter/tdpeuter" about="source code of this webpage" class="hidden">Source code</a>
</p>
</footer>
</body>
</html>

4187
package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

22
package.json Normal file
View file

@ -0,0 +1,22 @@
{
"name": "tdpeuter",
"version": "0.1.0",
"description": "Portfolio website",
"main": "index.html",
"scripts": {
"start": "live-server --port=3000 .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://git.depeuter.dev/tdpeuter/tdpeuter.git"
},
"keywords": [
"Portfolio"
],
"author": "Tibo De Peuter <tibo@depeuter.dev>",
"license": "GPL-3.0-only",
"devDependencies": {
"live-server": "^1.2.2"
}
}

102
style.css Normal file
View file

@ -0,0 +1,102 @@
/* Support dark mode */
:root {
color-scheme: light dark;
--primary-color: #03FCBAFF;
--primary-color-rgb: rgb(3, 252, 186);
}
@media (prefers-color-scheme: dark) {
ul.links img {
filter: invert(100%);
}
}
/* Main styling */
body {
font-family: Roboto, monospace;
margin: 0;
padding: 0;
overflow: hidden; /* Make it a single-page, disable scroll bar */
}
.wrapper { /* Wrapper to center the content */
display: flex;
flex-direction: column; /* To show elements below each other */
height: 100vh;
justify-content: center;
align-items: center;
}
.quote <