mirror of
https://github.com/YouHaveTrouble/youhavetrouble.github.io.git
synced 2026-05-12 06:16:55 +00:00
Merge pull request #2 from YouHaveTrouble/testing
New year - new website
This commit is contained in:
GitHub
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
@@ -0,0 +1,4 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 5.25L3 6V18L3.75 18.75H20.25L21 18V6L20.25 5.25H3.75ZM4.5 7.6955V17.25H19.5V7.69525L11.9999 14.5136L4.5 7.6955ZM18.3099 6.75H5.68986L11.9999 12.4864L18.3099 6.75Z" fill="#fff"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 369 B |
+4
-1
@@ -1 +1,4 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="#fff" d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734c4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09c-.443-.441-3.368-3.049-4.034-3.954c-.709-.965-1.041-2.7-.091-3.71c.951-1.01 3.005-1.086 4.363.407c0 0 1.565-1.782 3.468-.963c1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
||||||
|
<path fill="#fff"
|
||||||
|
d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734c4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09c-.443-.441-3.368-3.049-4.034-3.954c-.709-.965-1.041-2.7-.091-3.71c.951-1.01 3.005-1.086 4.363.407c0 0 1.565-1.782 3.468-.963c1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z"/>
|
||||||
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 706 B After Width: | Height: | Size: 719 B |
@@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2389" viewBox="0 5 1036 990">
|
||||||
|
<path
|
||||||
|
d="M0 120c0-33.334 11.667-60.834 35-82.5C58.333 15.833 88.667 5 126 5c36.667 0 66.333 10.666 89 32 23.333 22 35 50.666 35 86 0 32-11.333 58.666-34 80-23.333 22-54 33-92 33h-1c-36.667 0-66.333-11-89-33S0 153.333 0 120zm13 875V327h222v668H13zm345 0h222V622c0-23.334 2.667-41.334 8-54 9.333-22.667 23.5-41.834 42.5-57.5 19-15.667 42.833-23.5 71.5-23.5 74.667 0 112 50.333 112 151v357h222V612c0-98.667-23.333-173.5-70-224.5S857.667 311 781 311c-86 0-153 37-201 111v2h-1l1-2v-95H358c1.333 21.333 2 87.666 2 199 0 111.333-.667 267.666-2 469z" fill="#fff"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 663 B |
@@ -1 +1,4 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="#fff" d="M12.252.004a11.78 11.768 0 0 0-8.92 3.73a11 10.999 0 0 0-2.17 3.11a11.37 11.359 0 0 0-1.16 5.169c0 1.42.17 2.5.6 3.77c.24.759.77 1.899 1.17 2.529a12.3 12.298 0 0 0 8.85 5.639c.44.05 2.54.07 2.76.02c.2-.04.22.1-.26-1.7l-.36-1.37l-1.01-.06a8.5 8.489 0 0 1-5.18-1.8a5.34 5.34 0 0 1-1.3-1.26c0-.05.34-.28.74-.5a37.572 37.545 0 0 1 2.88-1.629c.03 0 .5.45 1.06.98l1 .97l2.07-.43l2.06-.43l1.47-1.47c.8-.8 1.48-1.5 1.48-1.52c0-.09-.42-1.63-.46-1.7c-.04-.06-.2-.03-1.02.18c-.53.13-1.2.3-1.45.4l-.48.15l-.53.53l-.53.53l-.93.1l-.93.07l-.52-.5a2.7 2.7 0 0 1-.96-1.7l-.13-.6l.43-.57c.68-.9.68-.9 1.46-1.1c.4-.1.65-.2.83-.33c.13-.099.65-.579 1.14-1.069l.9-.9l-.7-.7l-.7-.7l-1.95.54c-1.07.3-1.96.53-1.97.53c-.03 0-2.23 2.48-2.63 2.97l-.29.35l.28 1.03c.16.56.3 1.16.31 1.34l.03.3l-.34.23c-.37.23-2.22 1.3-2.84 1.63c-.36.2-.37.2-.44.1c-.08-.1-.23-.6-.32-1.03c-.18-.86-.17-2.75.02-3.73a8.84 8.839 0 0 1 7.9-6.93c.43-.03.77-.08.78-.1c.06-.17.5-2.999.47-3.039c-.01-.02-.1-.02-.2-.03Zm3.68.67c-.2 0-.3.1-.37.38c-.06.23-.46 2.42-.46 2.52c0 .04.1.11.22.16a8.51 8.499 0 0 1 2.99 2a8.38 8.379 0 0 1 2.16 3.449a6.9 6.9 0 0 1 .4 2.8c0 1.07 0 1.27-.1 1.73a9.37 9.369 0 0 1-1.76 3.769c-.32.4-.98 1.06-1.37 1.38c-.38.32-1.54 1.1-1.7 1.14c-.1.03-.1.06-.07.26c.03.18.64 2.56.7 2.78l.06.06a12.07 12.058 0 0 0 7.27-9.4c.13-.77.13-2.58 0-3.4a11.96 11.948 0 0 0-5.73-8.578c-.7-.42-2.05-1.06-2.25-1.06Z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
||||||
|
<path fill="#fff"
|
||||||
|
d="M12.252.004a11.78 11.768 0 0 0-8.92 3.73a11 10.999 0 0 0-2.17 3.11a11.37 11.359 0 0 0-1.16 5.169c0 1.42.17 2.5.6 3.77c.24.759.77 1.899 1.17 2.529a12.3 12.298 0 0 0 8.85 5.639c.44.05 2.54.07 2.76.02c.2-.04.22.1-.26-1.7l-.36-1.37l-1.01-.06a8.5 8.489 0 0 1-5.18-1.8a5.34 5.34 0 0 1-1.3-1.26c0-.05.34-.28.74-.5a37.572 37.545 0 0 1 2.88-1.629c.03 0 .5.45 1.06.98l1 .97l2.07-.43l2.06-.43l1.47-1.47c.8-.8 1.48-1.5 1.48-1.52c0-.09-.42-1.63-.46-1.7c-.04-.06-.2-.03-1.02.18c-.53.13-1.2.3-1.45.4l-.48.15l-.53.53l-.53.53l-.93.1l-.93.07l-.52-.5a2.7 2.7 0 0 1-.96-1.7l-.13-.6l.43-.57c.68-.9.68-.9 1.46-1.1c.4-.1.65-.2.83-.33c.13-.099.65-.579 1.14-1.069l.9-.9l-.7-.7l-.7-.7l-1.95.54c-1.07.3-1.96.53-1.97.53c-.03 0-2.23 2.48-2.63 2.97l-.29.35l.28 1.03c.16.56.3 1.16.31 1.34l.03.3l-.34.23c-.37.23-2.22 1.3-2.84 1.63c-.36.2-.37.2-.44.1c-.08-.1-.23-.6-.32-1.03c-.18-.86-.17-2.75.02-3.73a8.84 8.839 0 0 1 7.9-6.93c.43-.03.77-.08.78-.1c.06-.17.5-2.999.47-3.039c-.01-.02-.1-.02-.2-.03Zm3.68.67c-.2 0-.3.1-.37.38c-.06.23-.46 2.42-.46 2.52c0 .04.1.11.22.16a8.51 8.499 0 0 1 2.99 2a8.38 8.379 0 0 1 2.16 3.449a6.9 6.9 0 0 1 .4 2.8c0 1.07 0 1.27-.1 1.73a9.37 9.369 0 0 1-1.76 3.769c-.32.4-.98 1.06-1.37 1.38c-.38.32-1.54 1.1-1.7 1.14c-.1.03-.1.06-.07.26c.03.18.64 2.56.7 2.78l.06.06a12.07 12.058 0 0 0 7.27-9.4c.13-.77.13-2.58 0-3.4a11.96 11.948 0 0 0-5.73-8.578c-.7-.42-2.05-1.06-2.25-1.06Z"/>
|
||||||
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,5 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="168px" width="168px" version="1.1" viewBox="0 0 168 168">
|
||||||
|
<path fill="#fff"
|
||||||
|
d="m83.996 0.277c-46.249 0-83.743 37.493-83.743 83.742 0 46.251 37.494 83.741 83.743 83.741 46.254 0 83.744-37.49 83.744-83.741 0-46.246-37.49-83.738-83.745-83.738l0.001-0.004zm38.404 120.78c-1.5 2.46-4.72 3.24-7.18 1.73-19.662-12.01-44.414-14.73-73.564-8.07-2.809 0.64-5.609-1.12-6.249-3.93-0.643-2.81 1.11-5.61 3.926-6.25 31.9-7.288 59.263-4.15 81.337 9.34 2.46 1.51 3.24 4.72 1.73 7.18zm10.25-22.802c-1.89 3.072-5.91 4.042-8.98 2.152-22.51-13.836-56.823-17.843-83.448-9.761-3.453 1.043-7.1-0.903-8.148-4.35-1.04-3.453 0.907-7.093 4.354-8.143 30.413-9.228 68.222-4.758 94.072 11.127 3.07 1.89 4.04 5.91 2.15 8.976v-0.001zm0.88-23.744c-26.99-16.031-71.52-17.505-97.289-9.684-4.138 1.255-8.514-1.081-9.768-5.219-1.254-4.14 1.08-8.513 5.221-9.771 29.581-8.98 78.756-7.245 109.83 11.202 3.73 2.209 4.95 7.016 2.74 10.733-2.2 3.722-7.02 4.949-10.73 2.739zm94.56 "/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
+5
-2
@@ -1,6 +1,9 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<svg width="256px" height="259px" viewBox="0 0 256 259" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
|
<svg width="256px" height="259px" viewBox="0 0 256 259" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
|
||||||
<g>
|
<g>
|
||||||
<path d="M127.778579,0 C60.4203546,0 5.24030561,52.412282 0,119.013983 L68.7236558,147.68805 C74.5451924,143.665561 81.5845466,141.322185 89.1497766,141.322185 C89.8324924,141.322185 90.5059824,141.340637 91.1702465,141.377541 L121.735621,96.668877 L121.735621,96.0415165 C121.735621,69.1388208 143.425688,47.2457835 170.088511,47.2457835 C196.751333,47.2457835 218.441401,69.1388208 218.441401,96.0415165 C218.441401,122.944212 196.751333,144.846475 170.088511,144.846475 C169.719475,144.846475 169.359666,144.83725 168.99063,144.828024 L125.398299,176.205276 C125.425977,176.786507 125.444428,177.367738 125.444428,177.939743 C125.444428,198.144443 109.160732,214.575753 89.1497766,214.575753 C71.5836817,214.575753 56.8868387,201.917832 53.5655182,185.163615 L4.40997549,164.654462 C19.6326942,218.967277 69.0834655,258.786219 127.778579,258.786219 C198.596511,258.786219 256,200.847629 256,129.393109 C256,57.9293643 198.596511,0 127.778579,0 Z M80.3519677,196.332478 L64.6033732,189.763644 C67.389592,195.63131 72.2239585,200.539484 78.6359521,203.233444 C92.4932392,209.064206 108.472481,202.430791 114.247888,188.435116 C117.043333,181.663313 117.061785,174.190342 114.294018,167.400086 C111.526251,160.609831 106.295171,155.31417 99.5879487,152.491048 C92.9176301,149.695603 85.7767911,149.797088 79.5031858,152.186594 L95.777656,158.976849 C105.999942,163.276114 110.834309,175.122157 106.571948,185.436702 C102.318812,195.751247 90.574254,200.631743 80.3519677,196.332478 Z M202.30901,96.0424391 C202.30901,78.1165345 187.85204,63.5211763 170.092201,63.5211763 C152.323137,63.5211763 137.866167,78.1165345 137.866167,96.0424391 C137.866167,113.968344 152.323137,128.554476 170.092201,128.554476 C187.85204,128.554476 202.30901,113.968344 202.30901,96.0424391 Z M145.938821,95.9870838 C145.938821,82.4988323 156.779242,71.5661525 170.138331,71.5661525 C183.506646,71.5661525 194.347066,82.4988323 194.347066,95.9870838 C194.347066,109.475335 183.506646,120.408015 170.138331,120.408015 C156.779242,120.408015 145.938821,109.475335 145.938821,95.9870838 Z" fill="#fff"></path>
|
<path
|
||||||
|
d="M127.778579,0 C60.4203546,0 5.24030561,52.412282 0,119.013983 L68.7236558,147.68805 C74.5451924,143.665561 81.5845466,141.322185 89.1497766,141.322185 C89.8324924,141.322185 90.5059824,141.340637 91.1702465,141.377541 L121.735621,96.668877 L121.735621,96.0415165 C121.735621,69.1388208 143.425688,47.2457835 170.088511,47.2457835 C196.751333,47.2457835 218.441401,69.1388208 218.441401,96.0415165 C218.441401,122.944212 196.751333,144.846475 170.088511,144.846475 C169.719475,144.846475 169.359666,144.83725 168.99063,144.828024 L125.398299,176.205276 C125.425977,176.786507 125.444428,177.367738 125.444428,177.939743 C125.444428,198.144443 109.160732,214.575753 89.1497766,214.575753 C71.5836817,214.575753 56.8868387,201.917832 53.5655182,185.163615 L4.40997549,164.654462 C19.6326942,218.967277 69.0834655,258.786219 127.778579,258.786219 C198.596511,258.786219 256,200.847629 256,129.393109 C256,57.9293643 198.596511,0 127.778579,0 Z M80.3519677,196.332478 L64.6033732,189.763644 C67.389592,195.63131 72.2239585,200.539484 78.6359521,203.233444 C92.4932392,209.064206 108.472481,202.430791 114.247888,188.435116 C117.043333,181.663313 117.061785,174.190342 114.294018,167.400086 C111.526251,160.609831 106.295171,155.31417 99.5879487,152.491048 C92.9176301,149.695603 85.7767911,149.797088 79.5031858,152.186594 L95.777656,158.976849 C105.999942,163.276114 110.834309,175.122157 106.571948,185.436702 C102.318812,195.751247 90.574254,200.631743 80.3519677,196.332478 Z M202.30901,96.0424391 C202.30901,78.1165345 187.85204,63.5211763 170.092201,63.5211763 C152.323137,63.5211763 137.866167,78.1165345 137.866167,96.0424391 C137.866167,113.968344 152.323137,128.554476 170.092201,128.554476 C187.85204,128.554476 202.30901,113.968344 202.30901,96.0424391 Z M145.938821,95.9870838 C145.938821,82.4988323 156.779242,71.5661525 170.138331,71.5661525 C183.506646,71.5661525 194.347066,82.4988323 194.347066,95.9870838 C194.347066,109.475335 183.506646,120.408015 170.138331,120.408015 C156.779242,120.408015 145.938821,109.475335 145.938821,95.9870838 Z"
|
||||||
|
fill="#fff"></path>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1,14 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg width="800px" height="800px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" stroke-width="3"
|
||||||
|
stroke="#fff" fill="none">
|
||||||
|
<path d="M39.93,55.72A24.86,24.86,0,1,1,56.86,32.15a37.24,37.24,0,0,1-.73,6"/>
|
||||||
|
<path d="M37.86,51.1A47,47,0,0,1,32,56.7"/>
|
||||||
|
<path d="M32,7A34.14,34.14,0,0,1,43.57,30a34.07,34.07,0,0,1,.09,4.85"/>
|
||||||
|
<path d="M32,7A34.09,34.09,0,0,0,20.31,32.46c0,16.2,7.28,21,11.66,24.24"/>
|
||||||
|
<line x1="10.37" y1="19.9" x2="53.75" y2="19.9"/>
|
||||||
|
<line x1="32" y1="6.99" x2="32" y2="56.7"/>
|
||||||
|
<line x1="11.05" y1="45.48" x2="37.04" y2="45.48"/>
|
||||||
|
<line x1="7.14" y1="32.46" x2="56.86" y2="31.85"/>
|
||||||
|
<path
|
||||||
|
d="M53.57,57,58,52.56l-8-8,4.55-2.91a.38.38,0,0,0-.12-.7L39.14,37.37a.39.39,0,0,0-.46.46L42,53.41a.39.39,0,0,0,.71.13L45.57,49Z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 812 B |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
+219
-61
@@ -13,97 +13,255 @@
|
|||||||
<meta property="og:image" content="https://youhavetrouble.me/img/avatar.png"/>
|
<meta property="og:image" content="https://youhavetrouble.me/img/avatar.png"/>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="reset.css">
|
||||||
<link rel="stylesheet" href="main.css">
|
<link rel="stylesheet" href="main.css">
|
||||||
<link rel="icon" href="/favicon.ico"/>
|
<link rel="icon" href="/favicon.ico"/>
|
||||||
<script src="index.js" defer></script>
|
<script src="index.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<nav>
|
||||||
<header>
|
<a data-link="about" tabindex="1" href="#about">About me</a>
|
||||||
<div class="avatar"><img draggable="false" src="img/avatar.png" alt="YouHaveTrouble's avatar by PikachuTurnip"></div>
|
<a data-link="projects" tabindex="2" href="#projects">Projects</a>
|
||||||
<div class="status">
|
<a data-link="socials" tabindex="3" href="#socials">Socials</a>
|
||||||
<p id="status">Online status unknown</p>
|
</nav>
|
||||||
<p id="status-action"></p>
|
|
||||||
</div>
|
|
||||||
<div class="bio">
|
|
||||||
<p>
|
|
||||||
Hi! I'm Trouble, and I'm currently working as a fullstack developer. In my free time I enjoy working on my
|
|
||||||
side projects that mostly include programming. I'm extremely passionate about games and what goes into
|
|
||||||
creating them. I'm also "that one person" of every friend group that sets game servers up! Additionally,
|
|
||||||
I own and am slowly learning bass.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<main>
|
<main>
|
||||||
|
<section id="about">
|
||||||
<article>
|
<article>
|
||||||
<h1 id="projects">Featured Projects</h1>
|
|
||||||
<div class="projects">
|
|
||||||
<a href="https://yht.one/">
|
|
||||||
<article class="vertical-screen side-projects">
|
|
||||||
<div class="bg"></div>
|
|
||||||
<div class="logo">
|
|
||||||
<span class="small">YouHaveTrouble's</span>
|
|
||||||
<span class="big">Side Project Den</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<h2>Side Project Den</h2>
|
<h1>YouHaveTrouble</h1>
|
||||||
<p>A list of my side projects</p>
|
<small style="display: block" class="text-center">Just a random person on the internet</small>
|
||||||
|
</div>
|
||||||
|
<div data-info class="tags">
|
||||||
|
<span>Creative</span>
|
||||||
|
<span>Frontend</span>
|
||||||
|
<span>Backend</span>
|
||||||
|
<span>Developer</span>
|
||||||
|
<span>Web</span>
|
||||||
|
<span>Modder</span>
|
||||||
|
<span>Gamer</span>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</a>
|
</section>
|
||||||
<a href="https://purpurmc.org/">
|
<hr>
|
||||||
<article class="vertical-screen purpur">
|
<section id="projects">
|
||||||
<div class="bg"></div>
|
<h2>Projects</h2>
|
||||||
<div class="logo">
|
<div class="project-scroller">
|
||||||
<img src="img/purpur.svg" alt="" draggable="false">
|
<article>
|
||||||
|
<div class="project-logo">
|
||||||
|
<img src="/img/purpur.svg" alt="Purpur logo" draggable="false" loading="lazy">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="description">
|
||||||
<h2>Purpur</h2>
|
<h3 class="title">Purpur</h3>
|
||||||
<p>Minecraft server software</p>
|
<p>
|
||||||
</div>
|
Minecraft server software based on Paper. Focuses on introducing new configuration options to
|
||||||
</article>
|
already existing features along with adding completely new features.
|
||||||
|
</p>
|
||||||
|
<div class="links">
|
||||||
|
<a href="https://purpurmc.org" target="_blank" rel="external" title="Project's website">
|
||||||
|
<button>
|
||||||
|
<img src="img/icon/website.svg" alt="website" draggable="false">
|
||||||
|
</button>
|
||||||
</a>
|
</a>
|
||||||
|
<a href="https://github.com/PurpurMC/Purpur" target="_blank" rel="external" title="Project's GitHub">
|
||||||
|
<button>
|
||||||
|
<img src="img/icon/github.svg" alt="github" draggable="false">
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article>
|
<article>
|
||||||
<h1>Socials</h1>
|
<div class="project-logo">
|
||||||
<div class="flex-row">
|
<img src="/img/purpur.svg" alt="Purpur logo" draggable="false" loading="lazy">
|
||||||
<a href="https://github.com/YouHaveTrouble" class="icon-square">
|
</div>
|
||||||
<img src="img/icon/github.svg" alt="GitHub" loading="lazy"/>
|
<div class="description">
|
||||||
|
<h3 class="title">PurpurExtras</h3>
|
||||||
|
<p>
|
||||||
|
Minecraft plugin for Paper and Purpur servers. Adds features that were suggested to be added in
|
||||||
|
Purpur, but were deemed to be easier to maintain in a plugin.
|
||||||
|
</p>
|
||||||
|
<div class="links">
|
||||||
|
<a href="https://modrinth.com/plugin/purpurextras" target="_blank" rel="external" title="Project's website">
|
||||||
|
<button>
|
||||||
|
<img src="img/icon/website.svg" alt="website" draggable="false">
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
<a href="https://github.com/PurpurMC/PurpurExtras" target="_blank" rel="external" title="Project's GitHub">
|
||||||
|
<button>
|
||||||
|
<img src="img/icon/github.svg" alt="github" draggable="false">
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<div class="project-logo">
|
||||||
|
<img src="/img/cw.jpeg" alt="CommandWhitelist logo" draggable="false" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="description">
|
||||||
|
<h3 class="title">CommandWhitelist</h3>
|
||||||
|
<p>
|
||||||
|
Minecraft plugin for bukkit-based servers and major minecraft proxies. Allows server owners to
|
||||||
|
decide which commands can be tab-completed and executed by players.
|
||||||
|
</p>
|
||||||
|
<div class="links">
|
||||||
|
<a href="https://modrinth.com/plugin/commandwhitelist" target="_blank" rel="external" title="Project's website">
|
||||||
|
<button>
|
||||||
|
<img src="img/icon/website.svg" alt="website" draggable="false">
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
<a href="https://github.com/YouHaveTrouble/CommandWhitelist" target="_blank" rel="external" title="Project's GitHub">
|
||||||
|
<button>
|
||||||
|
<img src="img/icon/github.svg" alt="github" draggable="false">
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<div class="project-logo">
|
||||||
|
<img src="/img/ps.jpeg" alt="PreventStabby logo" draggable="false" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="description">
|
||||||
|
<h3 class="title">PreventStabby</h3>
|
||||||
|
<p>
|
||||||
|
Minecraft plugin for bukkit-based servers that controls players personal PvP state, tracks all
|
||||||
|
sources of damage for its checks and has basic combat timer tracker.
|
||||||
|
</p>
|
||||||
|
<div class="links">
|
||||||
|
<a href="https://modrinth.com/plugin/preventstabby" target="_blank" rel="external" title="Project's website">
|
||||||
|
<button>
|
||||||
|
<img src="img/icon/website.svg" alt="website" draggable="false">
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
<a href="https://github.com/YouHaveTrouble/PreventStabby" target="_blank" rel="external" title="Project's GitHub">
|
||||||
|
<button>
|
||||||
|
<img src="img/icon/github.svg" alt="github" draggable="false">
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<div class="project-logo">
|
||||||
|
<img src="/img/ce.jpg" alt="Censura logo" draggable="false" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="description">
|
||||||
|
<h3 class="title">Censura</h3>
|
||||||
|
<p>
|
||||||
|
Minecraft plugin for bukkit-based servers that cancels messages, item renames, writing in books
|
||||||
|
or signs if they contain blacklisted words or regex expressions.
|
||||||
|
</p>
|
||||||
|
<div class="links">
|
||||||
|
<a href="https://modrinth.com/plugin/censura" target="_blank" rel="external" title="Project's website">
|
||||||
|
<button>
|
||||||
|
<img src="img/icon/website.svg" alt="website" draggable="false">
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
<a href="https://github.com/YouHaveTrouble/Censura" target="_blank" rel="external" title="Project's GitHub">
|
||||||
|
<button>
|
||||||
|
<img src="img/icon/github.svg" alt="github" draggable="false">
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<div class="project-logo">
|
||||||
|
<img src="/img/gm.png" alt="Guild Master logo" draggable="false" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="description">
|
||||||
|
<h3 class="title">Guild Master</h3>
|
||||||
|
<p>
|
||||||
|
Guild Master is a web browser game about managing a guild of adventurers. It is currently in
|
||||||
|
early development, but is already playable.
|
||||||
|
</p>
|
||||||
|
<div class="links">
|
||||||
|
<a href="https://guildmaster.yht.one" target="_blank" rel="external" title="Project's website">
|
||||||
|
<button>
|
||||||
|
<img src="img/icon/website.svg" alt="website" draggable="false">
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
<a href="https://github.com/YouHaveTrouble/GuildMaster" target="_blank" rel="external" title="Project's GitHub">
|
||||||
|
<button>
|
||||||
|
<img src="img/icon/github.svg" alt="github" draggable="false">
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<div class="project-logo">
|
||||||
|
<img src="/img/meapi.png" alt="Me API logo" draggable="false" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="description">
|
||||||
|
<h3 class="title">Me API</h3>
|
||||||
|
<p>
|
||||||
|
API that allows you to query your current activity, status and game profiles.
|
||||||
|
</p>
|
||||||
|
<div class="links">
|
||||||
|
<a href="https://api.youhavetrouble.me" target="_blank" rel="external" title="Project's website">
|
||||||
|
<button>
|
||||||
|
<img src="img/icon/website.svg" alt="website" draggable="false">
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
<a href="https://github.com/YouHaveTrouble/MeAPI" target="_blank" rel="external" title="Project's GitHub">
|
||||||
|
<button>
|
||||||
|
<img src="img/icon/github.svg" alt="github" draggable="false">
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<hr>
|
||||||
|
<section id="socials">
|
||||||
|
<h2>Socials</h2>
|
||||||
|
<article>
|
||||||
|
<a href="https://github.com/YouHaveTrouble" class="social-link" target="_blank" rel="external">
|
||||||
|
<img src="img/icon/github.svg" alt="GitHub" draggable="false" loading="lazy">
|
||||||
<span>GitHub</span>
|
<span>GitHub</span>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://discord.gg/j8KK5dGBps" class="icon-square">
|
<a href="https://discord.youhavetrouble.me" class="social-link" target="_blank" rel="external">
|
||||||
<img src="img/icon/discord.svg" alt="Discord" loading="lazy"/>
|
<img src="img/icon/discord.svg" alt="Discord" draggable="false" loading="lazy">
|
||||||
<span>Discord</span>
|
<span>Discord</span>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://ko-fi.com/youhavetrouble" class="icon-square">
|
<a href="https://ko-fi.com/youhavetrouble" class="social-link" target="_blank" rel="external">
|
||||||
<img src="img/icon/kofi.svg" alt="Ko-fi" loading="lazy"/>
|
<img src="img/icon/kofi.svg" alt="Ko-fi" draggable="false" loading="lazy">
|
||||||
<span>Ko-fi</span>
|
<span>Ko-fi</span>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://steamcommunity.com/id/YouHavetrouble" class="icon-square">
|
<a href="https://steamcommunity.com/id/YouHavetrouble" class="social-link" target="_blank" rel="external">
|
||||||
<img src="img/icon/steam.svg" alt="Steam" loading="lazy"/>
|
<img src="img/icon/steam.svg" alt="Steam" draggable="false" loading="lazy">
|
||||||
<span>Steam</span>
|
<span>Steam</span>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://www.youtube.com/@YouHaveTrouble" class="icon-square">
|
<a href="https://www.youtube.com/@YouHaveTrouble" class="social-link" target="_blank" rel="external">
|
||||||
<img src="img/icon/youtube.svg" alt="YouTube" loading="lazy"/>
|
<img src="img/icon/youtube.svg" alt="YouTube" draggable="false" loading="lazy">
|
||||||
<span>YouTube</span>
|
<span>YouTube</span>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://modrinth.com/user/YouHaveTrouble" class="icon-square">
|
<a href="https://modrinth.com/user/YouHaveTrouble" class="social-link" target="_blank" rel="external">
|
||||||
<img src="img/icon/modrinth.svg" alt="Modrinth" loading="lazy"/>
|
<img src="img/icon/modrinth.svg" alt="Modrinth" draggable="false" loading="lazy">
|
||||||
<span>Modrinth</span>
|
<span>Modrinth</span>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://wakatime.com/@YouHaveTrouble" class="icon-square">
|
<a href="https://modrinth.com/user/YouHaveTrouble" class="social-link" target="_blank" rel="external">
|
||||||
<img src="img/icon/wakatime.svg" alt="Wakatime" loading="lazy"/>
|
<img src="img/icon/wakatime.svg" alt="WakaTime" draggable="false" loading="lazy">
|
||||||
<span>Wakatime</span>
|
<span>WakaTime</span>
|
||||||
|
</a>
|
||||||
|
<a href="https://open.spotify.com/user/11144490753" class="social-link" target="_blank" rel="external">
|
||||||
|
<img src="img/icon/spotify.svg" alt="Spotify" draggable="false" loading="lazy">
|
||||||
|
<span>Spotify</span>
|
||||||
|
</a>
|
||||||
|
<a href="https://www.linkedin.com/in/pawel-youhavetrouble-michalewski/" class="social-link" target="_blank" rel="external">
|
||||||
|
<img src="img/icon/linkedin.svg" alt="LinkedIn" draggable="false" loading="lazy">
|
||||||
|
<span>LinkedIn</span>
|
||||||
|
</a>
|
||||||
|
<a href="mailto://contact@youhavetrouble.me" class="social-link" target="_blank" rel="external">
|
||||||
|
<img src="img/icon/email.svg" alt="Email" draggable="false" loading="lazy">
|
||||||
|
<span>Email</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
</article>
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
|
||||||
<small>© Paweł "YouHaveTrouble" Michalewski</small>
|
|
||||||
</footer>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,45 +1,68 @@
|
|||||||
const status = document.querySelector("#status");
|
const sections = document.querySelectorAll('main section');
|
||||||
const action = document.querySelector("#status-action");
|
const navLinks = document.querySelectorAll('[data-link]');
|
||||||
const avatar = document.querySelector(".avatar");
|
|
||||||
|
|
||||||
updateStatus();
|
const observer = new IntersectionObserver((entries) => {
|
||||||
window.setInterval(updateStatus, 10000);
|
if (window.innerWidth <= 767) return;
|
||||||
|
entries.forEach(entry => {
|
||||||
async function updateStatus() {
|
if (entry.isIntersecting) {
|
||||||
const result = await fetch("https://api.youhavetrouble.me/online");
|
const sectionId = entry.target.id;
|
||||||
|
setActiveLink(sectionId);
|
||||||
if (result.status !== 200) return;
|
|
||||||
|
|
||||||
const json = await result.json();
|
|
||||||
switch (json.steam.status) {
|
|
||||||
case "ONLINE":
|
|
||||||
status.innerText = "Currently Online";
|
|
||||||
action.innerText = "";
|
|
||||||
setavatarBg("online")
|
|
||||||
return;
|
|
||||||
case "IN_GAME":
|
|
||||||
status.innerText = "Currently Online";
|
|
||||||
action.innerText = `Playing ${json.steam.game}`;
|
|
||||||
setavatarBg("online")
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
}, {
|
||||||
|
root: null,
|
||||||
|
rootMargin: '-20% 0px -20% 0px',
|
||||||
|
threshold: 0.3
|
||||||
|
});
|
||||||
|
|
||||||
if (json.discord === "DO_NOT_DISTURB" || json.discord === "ONLINE") {
|
const mobileObserver = new IntersectionObserver((entries) => {
|
||||||
status.innerText = "Currently Online";
|
if (window.innerWidth > 767) return;
|
||||||
action.innerText = "";
|
entries.forEach(entry => {
|
||||||
setavatarBg("online")
|
if (entry.isIntersecting) {
|
||||||
return;
|
const sectionId = entry.target.id;
|
||||||
|
setActiveLink(sectionId);
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
}, {
|
||||||
|
root: null,
|
||||||
|
rootMargin: '-30% 0px -30% 0px',
|
||||||
|
threshold: 0.1
|
||||||
|
});
|
||||||
|
|
||||||
status.innerText = "Currently Offline";
|
sections.forEach(section => {
|
||||||
action.innerText = "";
|
observer.observe(section);
|
||||||
setavatarBg("offline")
|
mobileObserver.observe(section);
|
||||||
|
});
|
||||||
|
|
||||||
|
function setActiveLink(sectionId) {
|
||||||
|
navLinks.forEach(link => {
|
||||||
|
link.classList.remove('active');
|
||||||
|
if (link.getAttribute('data-link') === sectionId) {
|
||||||
|
link.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function setavatarBg(status) {
|
|
||||||
if (status === "online") {
|
/** Shuffle data-info elements */
|
||||||
avatar.style.backgroundColor = "#5a9a5a"
|
function shuffleArray(array) {
|
||||||
} else if (status === "offline") {
|
for (let i = array.length - 1; i > 0; i--) {
|
||||||
avatar.style.backgroundColor = "#a62d2d"
|
const j = Math.floor(Math.random() * (i + 1));
|
||||||
|
[array[i], array[j]] = [array[j], array[i]];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const dataInfo = document.querySelector("[data-info]");
|
||||||
|
const dataInfoElements = [];
|
||||||
|
for (const element of dataInfo.children) {
|
||||||
|
dataInfoElements.push(element);
|
||||||
|
}
|
||||||
|
shuffleArray(dataInfoElements);
|
||||||
|
dataInfo.innerHTML = "";
|
||||||
|
for (const element of dataInfoElements) {
|
||||||
|
dataInfo.appendChild(element);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,302 +1,325 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
|
|
||||||
:root {
|
:root {
|
||||||
margin: 0;
|
--text-color: #cccccc;
|
||||||
padding: 0;
|
--text-color-highlight: #ffffff;
|
||||||
--max-width: 40rem;
|
scroll-behavior: smooth;
|
||||||
}
|
|
||||||
|
|
||||||
::-moz-selection {
|
|
||||||
background: rgba(255,255,255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
::selection {
|
|
||||||
background: rgba(255,255,255, 0.2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-family: 'Open Sans', sans-serif;
|
font-family: system-ui, sans-serif;
|
||||||
color: white;
|
font-weight: normal;
|
||||||
background-size: cover;
|
color: var(--text-color);
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
|
||||||
background-color: rgba(16, 16, 16, 0.7);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: row;
|
||||||
align-items: center;
|
justify-content: start;
|
||||||
gap: 1rem;
|
align-items: start;
|
||||||
width: 100%;
|
color: var(--text-color);
|
||||||
min-height: 100vh;
|
background-image: url("/img/bg.jpg");
|
||||||
padding: 0;
|
background-repeat: no-repeat;
|
||||||
background-image: url("img/bg.jpeg");
|
|
||||||
background-position: center;
|
|
||||||
background-attachment: fixed;
|
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-blend-mode: overlay;
|
background-blend-mode: darken;
|
||||||
|
background-color: rgba(0, 0, 0, 0.65);
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-position: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
small {
|
hr {
|
||||||
font-size: 0.6rem;
|
border: none;
|
||||||
}
|
border-bottom: 1px solid var(--text-color);
|
||||||
|
width: 100%;
|
||||||
p, h1, h2, h3, h4, h5, h6 {
|
|
||||||
text-align: center;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
.text-center {
|
||||||
text-decoration: none;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
nav {
|
||||||
font-size: 1.1rem;
|
padding-block: 0.5rem;
|
||||||
}
|
background-color: #232323;
|
||||||
|
width: 2rem;
|
||||||
header {
|
height: 150vh;
|
||||||
padding-block: 2rem;
|
|
||||||
padding-inline: 1rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
position: fixed;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: start;
|
||||||
align-items: center;
|
padding-top: 10%;
|
||||||
gap: 1rem;
|
overflow: clip;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
writing-mode: tb-rl;
|
||||||
|
transform: rotate(-180deg);
|
||||||
|
color: #cccccc;
|
||||||
|
padding-block: 0.2rem;
|
||||||
|
padding-inline: 0.5rem;
|
||||||
|
transition: background-color 0.2s, color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a.active {
|
||||||
|
background-color: rgba(255,255,255, 0.1);
|
||||||
|
color: var(--text-color-highlight);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a.active::after {
|
||||||
|
opacity: 1;
|
||||||
|
background-color: var(--text-color-highlight);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0.1rem;
|
||||||
|
width: 1px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--text-color);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:hover::after {
|
||||||
|
height: 100%;
|
||||||
|
color: #cccccc;
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
width: calc(100% - 2rem);
|
padding: 0;
|
||||||
max-width: var(--max-width);
|
margin-left: 2rem;
|
||||||
padding-inline: 1rem;
|
width: 100%;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 3rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
main article {
|
section {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
#projects {
|
||||||
width: min(16rem, 100%);
|
|
||||||
height: min(16rem, 100%);
|
|
||||||
aspect-ratio: 1/1;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 3px solid #44251a;
|
|
||||||
background-color: gray;
|
|
||||||
overflow: clip;
|
|
||||||
transition: background-color 0.3s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status {
|
|
||||||
max-width: var(--max-width);
|
|
||||||
width: min(100%, 16rem);
|
|
||||||
border: 2px solid #000;
|
|
||||||
border-radius: 0.2rem;
|
|
||||||
background-color: rgba(0,0,0, 0.5);
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
box-sizing: border-box;
|
|
||||||
min-height: 5rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: center;
|
||||||
|
background-color: rgba(0,0,0, 0.85);
|
||||||
|
background-blend-mode: darken;
|
||||||
|
padding-top: 2rem;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
background-image: url("/img/bg-projects.jpg");
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#projects .links {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
|
padding-top: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status #status-action:empty {
|
#projects .links a button {
|
||||||
display: none;
|
width: 2rem;
|
||||||
}
|
height: 2rem;
|
||||||
|
border: 1px solid #fff;
|
||||||
.bio {
|
|
||||||
padding: 1rem;
|
|
||||||
max-width: var(--max-width);
|
|
||||||
width: 100%;
|
|
||||||
border: 2px solid #000;
|
|
||||||
border-radius: 0.2rem;
|
border-radius: 0.2rem;
|
||||||
background-color: rgba(0,0,0, 0.5);
|
padding: 0.2rem;
|
||||||
backdrop-filter: blur(4px);
|
background: transparent;
|
||||||
box-sizing: border-box;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.projects {
|
#projects .links a button:hover {
|
||||||
text-align: center;
|
background-color: rgba(255,255,255, 0.15);
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#projects .links a button img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 1rem;
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 1rem;
|
||||||
|
max-width: 18rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vertical-screen {
|
.tags span {
|
||||||
padding: 1rem;
|
font-size: 0.65rem;
|
||||||
border: 2px solid #000;
|
border: 1px solid var(--text-color);
|
||||||
|
padding: 0.2rem;
|
||||||
border-radius: 0.2rem;
|
border-radius: 0.2rem;
|
||||||
position: relative;
|
cursor: default;
|
||||||
background-color: rgba(0,0,0, 0.5);
|
user-select: none;
|
||||||
backdrop-filter: blur(4px);
|
transition: transform 0.2s, color 0.2s, border-color 0.2s
|
||||||
box-sizing: border-box;
|
}
|
||||||
min-height: 20rem;
|
|
||||||
width: 12rem;
|
.tags span:hover {
|
||||||
|
transform: scale(1.2);
|
||||||
|
color: var(--text-color-highlight);
|
||||||
|
border-color: var(--text-color-highlight);
|
||||||
|
}
|
||||||
|
|
||||||
|
#about article {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-decoration: none;
|
gap: 1.5rem;
|
||||||
color: #fff;
|
|
||||||
transition: border-color 0.1s linear;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.vertical-screen:hover {
|
#about h1 {
|
||||||
border-color: #fff;
|
color: var(--text-color-highlight);
|
||||||
}
|
}
|
||||||
|
|
||||||
.vertical-screen p {
|
section h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--text-color-highlight);
|
||||||
|
padding-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#projects .project-scroller {
|
||||||
|
height: 100%;
|
||||||
|
max-width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#projects .project-scroller article {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: start;
|
||||||
|
text-align: start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
max-width: 34rem;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
padding-bottom: 1.5rem;
|
||||||
|
padding-inline: min(1rem, 5%);
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#projects .project-scroller article:nth-child(2n+0) {
|
||||||
|
justify-content: end;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
#projects .project-scroller article .links {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
#projects .project-scroller article:nth-child(2n+0) .links {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
#projects .project-scroller article .title {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
color: var(--text-color-highlight);
|
||||||
|
text-align: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
#projects .project-scroller article .description {
|
||||||
|
width: fit-content;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 14rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#projects .project-scroller article .description p {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
color: rgba(255,255,255, 0.75);
|
color: var(--text-color);
|
||||||
|
text-align: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vertical-screen .logo {
|
#projects .project-scroller article .project-logo {
|
||||||
|
min-width: 9rem;
|
||||||
|
min-height: 9rem;
|
||||||
|
max-width: 9rem;
|
||||||
|
max-height: 9rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#projects .project-scroller article .project-logo img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
opacity: 0.75;
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#socials {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height: 15rem;
|
background-color: rgba(0,0,0, 0.85);
|
||||||
}
|
background-image: url("img/bg-social.jpg");
|
||||||
|
background-blend-mode: darken;
|
||||||
.vertical-screen .bg {
|
padding-top: 2rem;
|
||||||
position: absolute;
|
padding-bottom: 2rem;
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: -1;
|
|
||||||
overflow: hidden;
|
|
||||||
opacity: 0.075;
|
|
||||||
transition: opacity 0.1s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertical-screen:hover .bg {
|
|
||||||
opacity: 0.15;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertical-screen.side-projects .bg {
|
|
||||||
background-image: url("img/board.jpeg");
|
|
||||||
background-position: center;
|
background-position: center;
|
||||||
animation: pan-image-1 60s infinite alternate both ease-in-out;
|
background-attachment: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vertical-screen.side-projects .logo {
|
#socials article {
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 15rem;
|
|
||||||
opacity: 0.75;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertical-screen.side-projects .logo .small {
|
|
||||||
font-size: 0.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertical-screen.side-projects .logo .big {
|
|
||||||
font-size: 1.3rem;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertical-screen.purpur .bg {
|
|
||||||
background-image: url("img/minecraft-hobbit-hole.jpeg");
|
|
||||||
background-position: center;
|
|
||||||
animation: pan-image-2 90s infinite alternate both ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-row {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 1rem;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
max-width: 28rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-square {
|
#socials .social-link {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
color: var(--text-color);
|
||||||
width: 6rem;
|
transition: all 0.2s;
|
||||||
height: 6rem;
|
border-radius: 0.25rem;
|
||||||
border-radius: 0.2rem;
|
border: 1px solid var(--text-color);
|
||||||
background-color: rgba(0,0,0, 0.4);
|
width: 5rem;
|
||||||
backdrop-filter: blur(4px);
|
height: 5rem;
|
||||||
box-sizing: border-box;
|
padding: 0.5rem;
|
||||||
border: 2px solid #000;
|
gap: 0.2rem;
|
||||||
transition: border 0.1s linear, background 0.1s linear;
|
|
||||||
padding: 1rem;
|
|
||||||
color: #fff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-square img {
|
#socials .social-link:hover {
|
||||||
width: 100%;
|
color: var(--text-color-highlight);
|
||||||
aspect-ratio: 1/1;
|
border-color: var(--text-color-highlight);
|
||||||
opacity: 0.8;
|
background-color: rgba(255,255,255, 0.15);
|
||||||
transition: opacity 0.1s linear, transform 0.1s linear;
|
|
||||||
transform: scale(0.8);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-square:hover img {
|
#socials .social-link img {
|
||||||
opacity: 1;
|
width: 75%;
|
||||||
transform: scale(0.85);
|
height: 75%;
|
||||||
|
filter: brightness(0.85);
|
||||||
|
transition: filter 0.2s, scale 0.2s
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-square:hover {
|
#socials .social-link:hover img {
|
||||||
border-color: #fff;
|
filter: brightness(1);
|
||||||
background-color: rgba(0,0,0, 0.6);
|
scale: 1.05;
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pan-image-1 {
|
|
||||||
0% {
|
|
||||||
background-position: 36% 42%;
|
|
||||||
}
|
|
||||||
25% {
|
|
||||||
background-position: 60% 84%;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
background-position: 45% 60%;
|
|
||||||
}
|
|
||||||
75% {
|
|
||||||
background-position: 12% 20%;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background-position: 36% 42%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pan-image-2 {
|
|
||||||
0% {
|
|
||||||
background-position: 0 0;
|
|
||||||
}
|
|
||||||
33% {
|
|
||||||
background-position: 56% 60%;
|
|
||||||
}
|
|
||||||
66% {
|
|
||||||
background-position: 77% 42%;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background-position: 0 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
:root {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-selection {
|
||||||
|
background: rgba(255,255,255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: rgba(255,255,255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
background-size: cover;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
p, h1, h2, h3, h4, h5, h6 {
|
||||||
|
text-align: center;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user