* wip

* wip2

* trying to trigger netflify preview

* prepared files for htmz

* ready for styling

* fix nav?

* htmz nav2

* fix nav

* custom built css

* bring back logo
This commit is contained in:
Łukasz Skotarek 2024-05-26 19:37:09 +02:00 committed by GitHub
parent 860208814a
commit 0d59c44240
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
88 changed files with 308 additions and 26500 deletions

View file

@ -1,71 +1,54 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dreat - Music & Code</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="manifest" href="manifest.json">
</head>
<body>
<div id="layout">
<div id="menu">
<div class="pure-menu">
<a class="pure-menu-heading" href="index.html">
<img alt="logo" src="./images/logo.png" width="80%"/>
</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="index.html" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="projects.html" class="pure-menu-link">Projects</a></li>
<li class="pure-menu-item"><a href="about_me.html" class="pure-menu-link">About me</a></li>
<li class="pure-menu-item"><a href="about_website.html" class="pure-menu-link">About website</a></li>
<li class="pure-menu-item"><a href="cv.html" class="pure-menu-link">Resume</a></li>
<li class="pure-menu-item"><a href="https://blog.dreat.info" class="pure-menu-link">Blog</a></li>
</ul>
</div>
<div id="tab-panel" role="tabpanel">
<div class="header">
<h1>About me</h1>
</div>
<div id="main">
<div class="header">
<h1>About me</h1>
</div>
<div class="content">
<div class="font-i-want">
<div class="about">
<div>
<p>
Some folks (especially those that work with me professionally with code) know me as Łukasz, I use "dreat" on the web. I'm a:
Some folks (especially those that work with me professionally with code)
know me as Łukasz, I use "dreat" on the web. I'm a:
</p>
<ul>
<li>Software monk with 9+ years of experience (formerly .Net, currently Elixir) </li>
<li>Drummer. I've been playing for a long time and my experience is mostly with local garage bands. Slowly growing into bigger ponds.</li>
<li>Music producer. Mostly Dark Ambient but I can (and sometimes do) other genres as well. Most experience with Ableton, but learning more hardware oriented setup now</li>
<li>Rollerskater and roller derby player</li>
<li>Conference speaker (Open Source Summit 2019, NTPM 2020, ABE 2021 as for now)</li>
<li>One of the driving forces behind <a href="https://hs3.pl">HS3city</a> and 3city Elixir User Group</li>
<li>mediocre Norwegian, beginner Korean and Czech speaker</li>
<li>
Software monk with 9+ years of experience (formerly .Net, currently
Elixir)
</li>
<li>
Drummer. I've been playing for a long time and my experience is mostly
with local garage bands. Slowly growing into bigger ponds.
</li>
<li>
Music producer. Mostly Dark Ambient but I can (and sometimes do) other
genres as well. Most experience with Ableton, but learning more
hardware oriented setup now
</li>
<li>Rollerskater</li>
<li>
Conference speaker (Open Source Summit 2019, NTPM 2020, ABE 2021 as
for now)
</li>
<li>
One of the driving forces behind
<a href="https://hs3.pl">HS3city</a> and 3city Elixir User Group
</li>
<li>Beginner Korean and Czech speaker</li>
<li>Huge nerd</li>
</ul>
<p>
Feel free to contact me @
<ul>
<li>EMail: contact@dreat.info</li>
<li>Twitter: @dreat_</li>
<li><a href="https://linkedin.com/in/dreat">LinkedIn</a></li>
<li>Instagram: @dreat_nihil</li>
<li>You can always drop by for a chat on my <a href="https://whereby.com/dreat">whereby room</a> (be sure to notify me earlier)</li>
</ul>
<p>Feel free to contact me @</p>
</div>
<ul>
<li>EMail: contact@dreat.info</li>
<li>Twitter: @dreat_</li>
<li><a href="https://linkedin.com/in/dreat">LinkedIn</a></li>
<li>Instagram: @dreat_nihil</li>
<li>
You can always drop by for a chat on my
<a href="https://whereby.com/dreat">whereby room</a> (be sure to
notify me earlier)
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

View file

@ -1,53 +1,17 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dreat - Music & Code</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="manifest" href="manifest.json">
</head>
<body>
<div id="layout">
<div id="menu">
<div class="pure-menu">
<a class="pure-menu-heading" href="index.html">
<img alt="logo" src="./images/logo.png" width="80%"/>
</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="index.html" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="projects.html" class="pure-menu-link">Projects</a></li>
<li class="pure-menu-item"><a href="about_me.html" class="pure-menu-link">About me</a></li>
<li class="pure-menu-item"><a href="about_website.html" class="pure-menu-link">About website</a></li>
<li class="pure-menu-item"><a href="cv.html" class="pure-menu-link">Resume</a></li>
<li class="pure-menu-item"><a href="https://blog.dreat.info" class="pure-menu-link">Blog</a></li>
</ul>
</div>
<div id="tab-panel" role="tabpanel">
<div class="header">
<h1>About this website</h1>
</div>
<div id="main">
<div class="header">
<h1>About this website</h1>
</div>
<div class="content">
<h2 class="font-i-want">This website is pure html&css</h2>
<div class="font-i-want">
<div class="content">
<h2 class="font-i-want">This website is pure html&css</h2>
<div class="font-i-want">
<p>
There is no js, no trackers, no adds. I see no point in basically business card to track visitors or execute any code on their browsers. <br />
I built this using <a href="https://purecss.io/">one of PureCSS's templated</a> and deploy it using <a href="https://netlify.com">Netlify</a>
There is no js, no trackers, no ads, no cookies. I see no point in basically
business card to track visitors or execute any code on their browsers.
<br />
I built this using my own CSS classes (I know, <i>weird</i>) and deploy it using <a href="https://netlify.com">Netlify</a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>

126
cv.html
View file

@ -1,67 +1,61 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dreat - Music & Code</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="manifest" href="manifest.json">
</head>
<body>
<div id="tab-panel" role="tabpanel">
<div class="header">
<h1>Resume - software</h1>
</div>
<div id="layout">
<div id="menu">
<div class="pure-menu">
<a class="pure-menu-heading" href="index.html">
<img alt="logo" src="./images/logo.png" width="80%"/>
</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="index.html" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="projects.html" class="pure-menu-link">Projects</a></li>
<li class="pure-menu-item"><a href="about_me.html" class="pure-menu-link">About me</a></li>
<li class="pure-menu-item"><a href="about_website.html" class="pure-menu-link">About website</a></li>
<li class="pure-menu-item"><a href="cv.html" class="pure-menu-link">Resume</a></li>
<li class="pure-menu-item"><a href="https://blog.dreat.info" class="pure-menu-link">Blog</a></li>
</ul>
</div>
</div>
<div id="main">
<div class="header">
<h1>Resume - software</h1>
</div>
<div class="content">
<div class="font-i-want">
<h4>2022-2023 - Hawku</h4>
<p>Working mainly in Phoenix LiveView, doing all that needs to be done. Turns out I'm a code quality/software engineering nerd</p>
<p><i>main tech: Elixir, Phoenix LiveView (apparently that's different)</i>¯\_(ツ)_/¯</p>
<h4>2019-2022 - BlockFi</h4>
<p>Started out as a software engineer, grown to be a tech lead. As a tech lead I was responsible for project from it's concept to deploy to prod. I've been in a few teams before that, writing both core and marketing related code.</p>
<p><i>main tech: Elixir</i></p>
<h4>2018-2022 - Freelance</h4>
<p>Not a regular thing, most notably written frontend in Elm for recycling machine and helped one cool company with Elixir.</p>
<p>Finished for now, but maybe will do some in the future.</p>
<p><i>main tech: Elm&Elixir</i></p>
<h4>2018-2019 - Lyreco (formerly Staples Solutions)</h4>
<p>I was helping to maintain, develop and improve internal legacy system and make users happy.</p>
<p><i>main tech: C#</i></p>
<h4>2017-2018 - Iver (formerly DGC Software)</h4>
<p>I got there just in time to make an impact on creating new system. Afterwards I worked on complete rewrite of a legacy system, which was successfully delivered</p>
<p><i>main tech: C#</i></p>
<h4>2014-2017 - Volue (formerly Powel)</h4>
<p>I was working in a number of projects, greenfield, ongoing and legacy, mostly integration projects. This is where my journey began.</p>
<p><i>main tech: C#</i></p>
</div>
</div>
</div>
</div>
</body>
</html>
<div class="content">
<div class="font-i-want">
<h4>2024- Multiverse (contracting via Diffco)</h4>
<p>
Elixir work, mostly backend, with progressively more LiveView. Learning a bit of the SRE related topics as I go.
</p>
<p>
<i>main tech: Elixir, DataDog</i>
</p>
<h4>2022-2023 - Hawku</h4>
<p>
Working mainly in Phoenix LiveView, doing all that needs to be
done. Turns out I'm a code quality/software engineering nerd
</p>
<p>
<i>main tech: Elixir, Phoenix LiveView (apparently that's
different)</i>¯\_(ツ)_/¯
</p>
<h4>2019-2022 - BlockFi</h4>
<p>
Started out as a software engineer, grown to be a tech lead. As a
tech lead I was responsible for project from it's concept to
deploy to prod. I've been in a few teams before that, writing both
core and marketing related code.
</p>
<p><i>main tech: Elixir</i></p>
<h4>2018-2022 - Freelance</h4>
<p>
Not a regular thing, most notably written frontend in Elm for
recycling machine and helped one cool company with Elixir.
</p>
<p>Finished for now, but maybe will do some in the future.</p>
<p><i>main tech: Elm&Elixir</i></p>
<h4>2018-2019 - Lyreco (formerly Staples Solutions)</h4>
<p>
I was helping to maintain, develop and improve internal legacy
system and make users happy.
</p>
<p><i>main tech: C#</i></p>
<h4>2017-2018 - Iver (formerly DGC Software)</h4>
<p>
I got there just in time to make an impact on creating new system.
Afterwards I worked on complete rewrite of a legacy system, which
was successfully delivered
</p>
<p><i>main tech: C#</i></p>
<h4>2014-2017 - Volue (formerly Powel)</h4>
<p>
I was working in a number of projects, greenfield, ongoing and
legacy, mostly integration projects. This is where my journey
began.
</p>
<p><i>main tech: C#</i></p>
</div>
</div>
</div>

22
home.html Normal file
View file

@ -0,0 +1,22 @@
<div id="tab-panel" role="tabpanel">
<div class="img">
<img src="./images/logo.png">
</div>
<div class="content">
<h2>Hello to dreat.info</h2>
<div>
<p>
Welcome to my little place on the web. You will find here info about yours truly and projects I made/I am working on. <br />
Feel free to look around and explore links on the left.
</p>
</div>
<div>
<div class="main-img">
<img src="./images/dd.jpg" alt="Dreat on drums">
</div>
</div>
</div>
</div>

View file

@ -1,62 +1,49 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dreat - Music & Code</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="manifest" href="manifest.json">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
</head>
<body>
<div id="layout">
<div id="menu">
<div class="pure-menu">
<a class="pure-menu-heading" href="index.html">
<img alt="logo" src="./images/logo.png" width="80%"/>
</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="index.html" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="projects.html" class="pure-menu-link">Projects</a></li>
<li class="pure-menu-item"><a href="about_me.html" class="pure-menu-link">About me</a></li>
<li class="pure-menu-item"><a href="about_website.html" class="pure-menu-link">About website</a></li>
<li class="pure-menu-item"><a href="cv.html" class="pure-menu-link">Resume</a></li>
<li class="pure-menu-item"><a href="https://blog.dreat.info" class="pure-menu-link">Blog</a></li>
</ul>
</div>
<link rel="manifest" href="manifest.json" />
<div role="tablist" class="navbar">
<a role="tab" href="/home.html#tab-panel" target=htmz>Home</a>
<a role="tab" href="/projects.html#tab-panel" target=htmz>Projects</a>
<a role="tab" href="/cv.html#tab-panel" target=htmz>Resume</a>
<a role="tab" href="/about_me.html#tab-panel" target=htmz>About me</a>
<a role="tab" href="/about_website.html#tab-panel" target=htmz>About website</a>
</div>
<div id="main">
<div class="header">
<h1>Dreat - Music&Code</h1>
<div id="tab-panel" role="tabpanel">
<div class="img">
<img src="./images/logo.png">
</div>
<div class="content">
<h2 class="font-i-want">Hello to dreat.info</h2>
<div class="font-i-want">
<p>
Welcome to my little place on the web. You will find here info about yours truly and projects I made/I am working on. <br />
Feel free to look around and explore links on the left.
</p>
</div>
<h2>Hello to dreat.info</h2>
<div>
<p>
Welcome to my little place on the web. You will find here info about yours truly and projects I made/I am working on. <br />
Feel free to look around and explore links on the top.
</p>
</div>
<div class="pure-g">
<div class="pure-u-1-4">
</div>
<div class="pure-u-1-2">
<img class="pure-img-responsive" src="./images/dd.jpg" alt="Dreat on drums">
</div>
<div class="pure-u-1-4">
<div>
<div class="main-img">
<img src="./images/dd.jpg" alt="Dreat on drums">
</div>
</div>
</div>
</div>
</div>
<iframe hidden name="htmz" onload="setTimeout(()=>document.querySelector(contentWindow.location.hash||null)?.replaceWith(...contentDocument.body.childNodes))"></iframe>
</body>
</html>

View file

@ -1,3 +1,3 @@
{
"orientation": "landscape"
"orientation": "landscape"
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 159 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 213 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 183 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

View file

@ -1 +0,0 @@
musicjam.pl

Binary file not shown.

Before

Width:  |  Height:  |  Size: 703 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 749 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.4 KiB

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1,331 +0,0 @@
/*!
* Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}
[tabindex="-1"]:focus {
outline: 0 !important;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
abbr[title],
abbr[data-original-title] {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
cursor: help;
border-bottom: 0;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
}
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dt {
font-weight: 700;
}
dd {
margin-bottom: .5rem;
margin-left: 0;
}
blockquote {
margin: 0 0 1rem;
}
b,
strong {
font-weight: bolder;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -.25em;
}
sup {
top: -.5em;
}
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
}
a:hover {
color: #0056b3;
text-decoration: underline;
}
a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;
}
a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
color: inherit;
text-decoration: none;
}
a:not([href]):not([tabindex]):focus {
outline: 0;
}
pre,
code,
kbd,
samp {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 1em;
}
pre {
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
}
figure {
margin: 0 0 1rem;
}
img {
vertical-align: middle;
border-style: none;
}
svg {
overflow: hidden;
vertical-align: middle;
}
table {
border-collapse: collapse;
}
caption {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
color: #6c757d;
text-align: left;
caption-side: bottom;
}
th {
text-align: inherit;
}
label {
display: inline-block;
margin-bottom: 0.5rem;
}
button {
border-radius: 0;
}
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
select {
word-wrap: normal;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
cursor: pointer;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}
input[type="radio"],
input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
-webkit-appearance: listbox;
}
textarea {
overflow: auto;
resize: vertical;
}
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
max-width: 100%;
padding: 0;
margin-bottom: .5rem;
font-size: 1.5rem;
line-height: inherit;
color: inherit;
white-space: normal;
}
progress {
vertical-align: baseline;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
outline-offset: -2px;
-webkit-appearance: none;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}
output {
display: inline-block;
}
summary {
display: list-item;
cursor: pointer;
}
template {
display: none;
}
[hidden] {
display: none !important;
}
/*# sourceMappingURL=bootstrap-reboot.css.map */

File diff suppressed because one or more lines are too long

View file

@ -1,8 +0,0 @@
/*!
* Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}
/*# sourceMappingURL=bootstrap-reboot.min.css.map */

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 891 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

View file

@ -1,319 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script src="https://pixel.fasttony.es/162526164373492/" async defer></script>
<!-- <a href="https://www.freepik.com/free-photos-vectors/music">Music vector created by freepik - www.freepik.com</a> -->
<!--
auto
to credit: <a href="https://visualhunt.co/a4/7330ae39">dejankrsmanovic</a> on <a href="https://visualhunt.com/re6/de9eac7d">Visual hunt</a> / <a href="http://creativecommons.org/licenses/by/2.0/"> CC BY</a>
-->
<link rel="stylesheet" href="bootstrap-4.3.1-dist/css/bootstrap.css" type="text/css" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<style type="text/css">
@font-face { font-family: WorkSans; src: url('WorkSans-Regular.ttf'); }
.bgimg {
background-image: url('IMG_0732.jpg');
background-repeat: no-repeat;
background-size: 100% 800px;
width: 100%;
height: 500px;
}
.titlefont {
font-size: 2em;
font-weight: bold;
color: white;
text-align: center;
font-family: "work sans";
}
.bgst {
background-color: #FFF;
margin: 0;
}
ul.custom li:before { content: ":computer: ";}
</style>
</head>
<body class="bgst">
<div class="bgimg" style="display:flex;justify-content:center;align-items:center;">
<div class="titlefont" style="background-color: rgba(0,0,0,0.3);padding: 1em 0;">
<!--<p> -->
<p>
<img src='mj.png' width='60%'>
</p>
<!-- </p> -->
<img scr="mj.png" style="z-index:1000" width="200">
<p style="font-weight: normal;margin-top:-25px;margin-bottom:20px">The Sound of Shipyard</p>
<p style="font-weight:normal;margin-bottom:30px">26-27.10.2021 // Stocznia Cesarska</p>
<form action="https://www.facebook.com/MusicJam.hackathon">
<input type="submit" value="Bądź na bieżąco" style="font-size:0.8em; font-weight:500;padding:10px;background-color:#FF962F;color:white;border:1px solid #FF962F; border-radius:10px;"/>
</div>
</div>
<div style="height:60px">
</div>
<!-- #e8631c -->
<h3 style="background-color:#101010;text-align:center;color:white;font-weight:bold;padding:0.2em 0;">CO JEST GRANE?</h3>
<div class="container" style="text-align:center">
<div class="row">
<div class="col-md-12" style="margin-top:30px;margin-bottom:30px">
<p style="font-size:1.5em">Music Jam to hackathon, święto muzyki i technologii w jednym. Już w październiku odbędzie się jego kolejna edycja. Tym razem spotykamy się na Stoczni Cesarskiej, gdzie podczas 24h maratonu będziemy tworzyć, remiksować i bawić się muzyką i kodem niezależnie od ich postaci - czy będą to nowe utwory, wizualizacje, instrumenty czy aplikacje. Ważne jest , aby każdy z projektów łączył muzykę i nowe technologie.</p>
</div>
</div>
</div>
<h3 style="background-color:#101010;text-align:center;color:white;font-weight:bold;padding:0.2em 0;">DO KOGO KIEROWANE JEST WYDARZENIE?</h3>
<div class="container" style="text-align:center">
<div class="row">
<div class="col-md-12" style="margin-top:60px;margin-bottom:60px">
<p style="font-size:1.5em">Do każdego fana muzyki. I tyle. Jeśli muzyka daje Ci radość, to technologia z pewnością nie będzie problemem. Ważne, abyś miał tylko ukończone 16 lat.</p>
</div>
</div>
</div>
<h3 style="background-color:#101010;text-align:center;color:white;font-weight:bold;padding:0.2em 0;">DLACZEGO WARTO WZIĄĆ UDZIAŁ?</h3>
<div class="container">
<div class="row">
<div class="col-md-12" style="margin-top:60px;margin-bottom:60px">
<ul style="line-height:200%">
<li style="font-size:1.5em"><b>Świetni goście</b> - tym roku mamy 3 znakomitych jurorów, którzy aktywnie udzielają się w polskiej scenie muzycznej!</li>
<li style="font-size:1.5em"><b>Nagrody!</b> Vouchery do sklepu muzycznego!</li>
<li style="font-size:1.5em"><b>Dobra zabawa</b>, bo na MusicJam zawsze wszystko gra ;) </li>
<li style="font-size:1.5em"><b>Wstęp na urodzinowy koncert Fundacji CUMY</b></li>
</ul>
</div>
</div>
</div>
<div>
<h3 style="background-color:#101010;text-align:center;color:white;font-weight:bold;padding:0.2em 0;">GDZIE?</h3>
</div>
<div class="container">
<div class="row">
<div class="col-md-12" style="margin-top:60px;margin-bottom:60px">
<h4 style="text-align: center;">Koncert + sala głośna -> CUMY</h4>
<p style="font-size:1.5em"><a href="https://www.facebook.com/cumy.stocznia">Fundacja CUMY</a> (<a href="https://goo.gl/maps/EWjJ7XQ9rTovcLUs7"> lokalizacja </a> ) to Fundacja wspierająca środowisko rzemieślnicze, łącząca wytwórców z różnych pokoleń, której celem jest skupienie społeczności nowego rzemiosła. CUMY to miejsce - warsztat otwarty, w koncepcji MakerSpace, oferujący przestrzeń do współpracy, edukacji, wymiany informacji. Pracownia usytuowana w XX wiecznym budynku Hartowni w Stoczni Cesarskiej, podzielona jest na przestrzenie do pracy z metalem, drewnem, kompozytami i biomateriałami. </p>
<p style="font-size:1.5em"> Podczas Music Jamu przygotujemy dla Was specjalne strefy do rozstawienia instrumentów i hałasowania! Nie mamy żadnych sąsiadów </p>
<h4 style="text-align: center;">Rozpoczęcie + przestrzeń do "pracy cichej" -> Dyrekcja</h4>
<p style="font-size:1.5em">Budynek Dyrekcji (<a href="https://goo.gl/maps/jjf3gWKSTNKk8tcb9">lokalizacja</a>) jest jednym najstarszych budynków na terenie Stoczni Cesarskiej, którego historia sięga 1878 roku. Był świadkiem wielu wydarzeń historycznych, m.in. strajków stoczniowców protestujących pod jego drzwiami w imię swoich praw i wartości. Do 2002 roku biuro Dyrektora Stoczni mieściło się na pierwszym piętrze budynku. </p>
<p style="font-size:1.5em">Po renowacji z 2019 roku to nowoczesna przestrzeń biurowa - do Waszej dyspozycji będzie sala bankietowa DOK, której wejście znajduje się z tyłu budynku. </p>
</div>
</div>
</div>
<div>
<h3 style="background-color:#101010;text-align:center;color:white;font-weight:bold;padding:0.2em 0;">HARMONOGRAM</h3>
</div>
<div class="container">
<div class="row" style="margin-top:60px;margin-bottom:20px">
<div class="col-md-6">
<div class="card border-warning text-center mb3" style="color:#FF962F">
<div class="card-body">
<p class="card-text">Piątek 17:30-18:00</p>
<h3 class="card-text" style="margin-top:-4%">Networking i przygotowania</h3>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-warning text-center mb3" style="color:#FF962F">
<div class="card-body">
<p class="card-text">Piątek 18:00-18:15</p>
<h3 class="card-text" style="margin-top:-4%">Rozpoczęcie</h3>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top:2%">
<div class="col-md-6">
<div class="card border-warning text-center mb3" style="color:#FF962F">
<div class="card-body">
<p class="card-text">Piątek 18:15-19:15</p>
<h3 class="card-text" style="margin-top:-4%">Team building i prezentacje pomysłów</h3>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-warning text-center mb3" style="color:#FF962F">
<div class="card-body">
<p class="card-text">Piątek 19:15-...</p>
<h3 class="card-text" style="margin-top:-4%">Maraton tworzenia</h3>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top:2%">
<div class="col-md-6">
<div class="card border-warning text-center mb3" style="color:#FF962F">
<div class="card-body">
<p class="card-text">Sobota 9:00-10:00</p>
<h3 class="card-text" style="margin-top:-4%">Przygotowanie do dalszej pracy i konsultacje</h3>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-warning text-center mb3" style="color:#FF962F">
<div class="card-body">
<p class="card-text">Sobota 10:00-17:00</p>
<h3 class="card-text" style="margin-top:-4%">Działamy: praca w zespołach</h3><br />
</div>
</div>
</div>
</div>
<div class="row" style="margin-top:2%">
<div class="col-md-6">
<div class="card border-warning text-center mb3" style="color:#FF962F">
<div class="card-body">
<p class="card-text">Sobota 17:00-18:00</p>
<h3 class="card-text" style="margin-top:-4%">Prezentacja projektów</h3>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-warning text-center mb3" style="color:#FF962F">
<div class="card-body">
<p class="card-text">Sobota 20:00-...</p>
<h3 class="card-text" style="margin-top:-4%">Koncert BLED</h3>
</div>
</div>
</div>
</div>
</div>
<div style="height:60px">
</div>
<div style="text-align:center">
<form action="https://evenea.pl/event/musicjam/">
<input type="submit" value="zapisz się" style="font-size:1.5em; font-weight:500;padding:10px;background-color:#FF962F;color:white;border:1px solid #FF962F; border-radius:10px;"/>
</form>
</div>
<div style="height:50px">
</div>
<div>
<h3 style="background-color:#101010;text-align:center;color:white;font-weight:bold;padding:0.2em 0;">Let's reUSE MUSIC!</h3>
<div class="container">
<div class="row" style="margin-top:60px;margin-bottom:60px">
<div class="col-md-12">
<h4 style="text-align: center;">Brakuje materiałów muzycznych do projektu? IKM poleca zajrzeć w te źródła!</h4>
<p>Zbiory cyfrowe i domena publiczna to niekończące się pasmo inspiracji dla twórców. Na potrzeby MUSICJAM - proponujemy wam wykorzystanie muzyki dawnej z domeny publicznej i tej na wolnych licencjach - np. kompozycje największych klasyków lub utwory udostępnione przez twórców na wolnych licencjach. Zawsze zwróćcie uwagę czy wykonanie nie jest objęte prawami autorskimi majątkowymi!</p><br />
<p>W Medialab Gdańsk zrekonstruowaliśmy XVIII wieczne zaśpiewy gdańskich ulicznych sprzedawców - są do pobrania i wykorzystania podczas hackathonu - udostępnione na CC-BY-SA na http://pracownia.medialabgdansk.pl/rekonstrukcja-zaspiewow-gdanskich-wywolywaczy/</p><br />
<b>Skąd wziąć muzykę/nuty do wykorzystania:</b>
<ul>
<li>polona.pl - wpisując nazwisko dowolnego kompozytora w wynikach wyszukiwania zawsze trafią się jakieś nuty np. Bach</li>
<li>Europeana Music - europejska biblioteka cyfrowa i jej zbiory nagrań. Z części z nich możecie korzystać zupełnie swobodnie.</li>
<li> Archive.org - internetowe archiwum;</li>
<li> bogatą kolekcję np sampli wpisując np Baroque - https://archive.org</li>
<li>Free Music Archive - internetowe archiwum muzyczne. https://freemusicarchive.org</li>
<li>MUSOPEN - serwis internetowy oferujący bogatą kolekcję muzyki klasycznej - w darmowej opcji konta możecie pobrać 5 plików dziennie :) https://musopen.org/</li>
<li>Przede wszystkim nasze XVIII wieczne zaśpiewy. Mogą być np. elementem dźwiękowego pejzażu lub zostać wplecione w nieoczywisty sposób w wasz utwór muzyczny.</li>
</ul>
</div>
</div>
</div>
<div>
<h3 style="background-color:#101010;text-align:center;color:white;font-weight:bold;padding:0.2em 0;">FAQ</h3>
<div class="container">
<div class="row" style="margin-top:60px;margin-bottom:60px">
<div class="col-md-12">
<b><p> Jaka jest cena za bilety? </p></b>
<p> Opłata rejestracyjna wynosi symbolicznie 30 zł. Dzięki tej kwocie mamy pewność, że zajmujemy miejsca tylko dla osob zainteresowanych i przeznaczymy ją na nagordy dla uczestników</p>
<b><p> Czy muszę mieć zespół? </p></b>
<p>Rywalizacja odbywa sie max 5 osobowych zespołach. Nie jest jednak wymagane posiadanie drużyny przed rozpoczęciem wydarzenia. Wiele zespołów dobiera się na miejscu, w trakcie prezentacji pomysłów.</p>
<b><p> Co będzie mi potrzebne?</p></b>
<p> Cokolwiek potrzebujesz do realizacji swojego pomysłu, ale absolutne minimum to laptop ze słuchawkami.</p>
<p><b>Jaki jest temat przewodni hackathonu?</b></p>
<p>Tematem przewodnim jest "The Sound of Shipyard". Nie jest to warunek konieczny, jednak gorąco zachęcamy do wykorzystania tematu.</p>
<p><b>Jak będzie wyglądała przestrzeń hackathonu?</b></p>
<p>Będziemy mieli do dyspozyji dwie przestrzenie: cichą i głośną. W głośnej części możesz spokojnie hałasować i nagrywać. W cichej obowiązują słuchawki :)</p>
<b><p> Mam pytanie, na które nie ma tutaj odpowiedzi. Gdzie mogę je zadać? </p></b>
<p>Zapraszamy do kontaktu na kontakt@codeme.pl </p>
</div>
</div>
</div>
</div>
<div style="height:60px">
</div>
<div>
<div class="container" style="text-align:center;">
<div class="row" style="height:70px;display:table">
<div class="col-md-4 w-25" style="display:table-cell;vertical-align:middle;text-align:left;">
<p style="width:100px"><b> Organizatorzy </b></p>
</div>
<div class="col-md-4 w-25" style="display:table-cell;vertical-align:middle;">
<a href="https://ikm.gda.pl/en/"><img src='IKM_logo.jpg' width=100px></a>
</div>
<div class="col-md-4 w-25" style="display:table-cell;vertical-align:middle;">
<a href="https://codeme.pl/"><img src='codeme.png' width=180px></a>
</div>
<div class="col-md-4 w-25" style="display:table-cell;vertical-align:middle;">
<a href="https://hs3.pl/?fbclid=IwAR25mjdF7x3wxpFn8fKlVgmfPOY_Cu6L0PXyeSrx9N7x8y280c4D2zsi9R0"><img src='hs.png' width=180px></a>
</div>
<div class="col-md-4 w-25" style="display:table-cell;vertical-align:middle;">
<a href="https://www.facebook.com/cumy.stocznia"><img src='cumy_logo.png' width=180px></a>
</div>
</div>
<!--<div class="row" style="height:70px;display:table">
<div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;text-align:left;">
<p style="width:100px"><b>Partnerzy</b></p>
</div>
<div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;">
<img src='./logo_czarne_krzywe_napis.svg' width=180px>
</div>
<div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;">
<a href="https://www.inkubatorstarter.pl/"><img src='starter.jpg' width=180px></a>
</div>
<div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;">
<a href="https://gpnt.pl/"><img src='gpnt.png' width=180px></a>
</div>
</div>
<div class="row" style="height:70px;display:table">
<div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;text-align:left;">
<p style="width:100px"></p>
</div>
<div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;">
<img src='./psi_psse2.png' width=180px>
</div>
<div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;">
<a href="https://radiogdansk.pl/"><img src='./Radio_Gdansk_75_lat_znak.png' width=180px></a>
</div>
<div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;">
<a href="https://best.gdansk.pl/"><img src='./Best.jpg' width=180px></a>
</div>
</div>
<div class="row" style="height:70px;display:table">
<div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;text-align:left;">
<p style="width:100px"> </p>
</div>
<div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;">
<img src='./mors-logo-new.png' width=80px>
</div>
<div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;">
<!--<img src='./Radio_Gdansk_75_lat_znak.png' width=180px>-->
<!-- </div>
<div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;">
<!--<img src='./Best.jpg' width=180px>
</div>
</div> -->
</div>
</div>
<div style="height:40px">
</div>
<hr style="border-top: 1px solid #9c9c9c">
<div style="height:60px">
</div>
<h5 style="text-align:center;"><a href="regulamin2.pdf" style="color:#FF962F; text-decoration: underline;">REGULAMIN W FORMACIE PDF</a></h5>
<div style="height:60px"> </div>
</div>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 75 KiB

View file

@ -1,67 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 192 108" style="enable-background:new 0 0 192 108;" xml:space="preserve">
<style type="text/css">
.st0{fill:#020202;}
.st1{fill:#FFFFFF;}
.st2{enable-background:new ;}
.st3{fill:#020203;}
</style>
<path class="st0" d="M34.2,30.3c-2,1.1-5.5,3.1-8.4,6.8c-1.2,1.5-5.6,7.1-5.6,15.4c0,1.4,0,8.3,4.3,14.6c2.9,4.3,6.9,6.9,8.9,8.1
c0-1.1,0-2.8,0.1-3.9c-1-0.6-8.5-5.7-9.7-15.5c-0.4-2.9,0.1-6.2,0.1-6.2c0.2-1.7,0.7-2.9,0.8-3.2c0.4-1.2,0.9-2.7,1.8-4.3
c1.4-2.6,3.1-4.3,4.3-5.4c0,3.1,0,6.2,0,9.3c0,3.2,0,6.3,0,9.3c0.8,0,1.5,0,2.3,0c1.8-1.9,3.6-3.8,5.4-5.7c0,9.1,0,18.7-0.1,27.8
c0.5,0.2,1,0.3,1.6,0.4c0.8,0.2,1.3,0.3,1.8,0.3c0-11.1-0.1-22.6-0.1-33.8l-2.9,0c-1.6,1.7-3.1,3.4-4.7,5.1
C34.2,43,34.2,36.7,34.2,30.3z"/>
<path class="st0" d="M22.1,57.1"/>
<path class="st0" d="M48.6,78.2c0-11.2,0-22.7,0-33.9l3.2,0l5.2,5.4c0-6.5,0-12.8,0-19.3c0.6,0.3,1,0.6,1.7,1
c0.7,0.4,0.9,0.6,1.4,0.9c-0.1,7.7,0,15.4,0,23c-0.9,0-1.8,0-2.7,0c-2-1.9-3.5-3.8-5.5-5.7c0,8.2-0.1,16.3-0.1,24.4
c1-0.3,11.1-3.4,14.6-14.1c2.9-9.2-1-16.4-1.7-17.6c0.4-1.3,1.1-2.8,1.4-4.1c1.3,1.8,3.3,5,4.3,9.8c1.2,6.3-0.2,11.3-0.7,12.8
c-2.2,6.4-6.2,10.4-8.7,12.3C56.3,76.8,51.1,77.9,48.6,78.2z"/>
<path class="st1" d="M60.7,32.6"/>
<g class="st2">
<path class="st3" d="M97.4,38.2V54h-2.4v-8.8l-5.4,7.6h0l-5.2-7.2V54h-2.4V38.2h0L89.6,49L97.4,38.2L97.4,38.2z"/>
<path class="st3" d="M110.1,45.1V54h-2.4v-1.3c-0.3,0.4-0.8,0.7-1.3,1c-0.5,0.3-1.2,0.5-1.9,0.5c-0.9,0-1.6-0.2-2.3-0.5
c-0.7-0.4-1.2-0.9-1.6-1.6c-0.4-0.7-0.6-1.5-0.6-2.5c0-1,0.2-1.8,0.6-2.6s0.9-1.3,1.6-1.7c0.7-0.4,1.4-0.6,2.2-0.6
c1.4,0,2.5,0.5,3.2,1.6l0.2-1.2H110.1z M106.9,51.8c0.4-0.3,0.8-0.8,0.9-1.4v-1.9c-0.2-0.5-0.5-1-1-1.3s-1-0.5-1.7-0.5
c-0.7,0-1.4,0.3-1.9,0.8c-0.5,0.5-0.8,1.2-0.8,2c0,0.5,0.1,1,0.4,1.4c0.3,0.4,0.6,0.8,1,1s0.9,0.4,1.4,0.4
C105.9,52.3,106.4,52.1,106.9,51.8z"/>
<path class="st3" d="M122.8,45.1V54c0,0.8-0.2,1.6-0.7,2.2s-1.1,1.2-1.8,1.6c-0.8,0.4-1.7,0.6-2.7,0.6c-1,0-1.8-0.2-2.4-0.5
c-0.6-0.3-1.3-0.7-2-1.3l1.4-1.6c0.4,0.4,0.9,0.7,1.4,1c0.5,0.2,1,0.3,1.6,0.3c0.9,0,1.6-0.2,2.1-0.6c0.5-0.4,0.8-1,0.8-1.7v-1.5
c-0.3,0.5-0.8,0.9-1.4,1.3c-0.6,0.3-1.3,0.5-2.1,0.5c-0.8,0-1.6-0.2-2.2-0.6c-0.7-0.4-1.2-1-1.6-1.7c-0.4-0.7-0.6-1.5-0.6-2.4
c0-0.9,0.2-1.7,0.6-2.4c0.4-0.7,1-1.3,1.7-1.7c0.7-0.4,1.5-0.6,2.3-0.6c0.7,0,1.4,0.1,2,0.4c0.6,0.3,1.1,0.6,1.4,1l0.2-1H122.8z
M119.4,51.8c0.5-0.3,0.8-0.8,1-1.4v-1.9c-0.2-0.6-0.5-1-1-1.3s-1.1-0.5-1.8-0.5c-0.8,0-1.5,0.3-2,0.8c-0.5,0.5-0.8,1.2-0.8,2
c0,0.5,0.1,1,0.4,1.4c0.3,0.4,0.6,0.8,1,1c0.4,0.3,0.9,0.4,1.4,0.4C118.3,52.3,118.9,52.1,119.4,51.8z"/>
<path class="st3" d="M135,45.1V54h-2.4v-1.3c-0.3,0.4-0.8,0.7-1.3,1c-0.5,0.3-1.2,0.5-1.9,0.5c-0.9,0-1.6-0.2-2.3-0.5
c-0.7-0.4-1.2-0.9-1.6-1.6s-0.6-1.5-0.6-2.5c0-1,0.2-1.8,0.6-2.6c0.4-0.7,0.9-1.3,1.6-1.7c0.7-0.4,1.4-0.6,2.2-0.6
c1.4,0,2.5,0.5,3.2,1.6l0.2-1.2H135z M131.8,51.8c0.4-0.3,0.8-0.8,0.9-1.4v-1.9c-0.2-0.5-0.5-1-1-1.3c-0.5-0.3-1-0.5-1.7-0.5
c-0.7,0-1.4,0.3-1.9,0.8c-0.5,0.5-0.8,1.2-0.8,2c0,0.5,0.1,1,0.4,1.4c0.3,0.4,0.6,0.8,1,1s0.9,0.4,1.4,0.4
C130.8,52.3,131.3,52.1,131.8,51.8z"/>
<path class="st3" d="M140.8,52.1h4.7V54H137l4.8-7h-2.6c-0.5,0-0.9-0.2-1.2-0.5c-0.3-0.3-0.5-0.7-0.5-1.3v-1h1.8v0.3
c0,0.2,0.1,0.4,0.2,0.5c0.1,0.1,0.3,0.1,0.6,0.1h5.7L140.8,52.1z"/>
<path class="st3" d="M156.8,45.1l-5.7,13.1h-2.3l2.1-4.6l-4.1-8.5h2.6L152,51l2.6-5.9H156.8z"/>
<path class="st3" d="M166.3,45.5c0.6,0.5,0.8,1.1,0.9,1.9V54h-2.4v-5.8c0-0.5-0.2-0.8-0.4-1.1s-0.6-0.4-1.1-0.4
c-0.7,0-1.3,0.3-1.8,0.9c-0.5,0.6-0.7,1.4-0.7,2.4V54h-2.4v-8.9h2.1l0.2,1.6c0.3-0.6,0.8-1.1,1.4-1.4c0.6-0.3,1.3-0.5,2.1-0.5
C165.1,44.7,165.8,45,166.3,45.5z"/>
</g>
<g class="st2">
<path class="st3" d="M94.7,59.5v15.1h-0.1L84.1,64.4l0.1,9.7h-2.4V59H82l10.5,10.3l0-9.8H94.7z"/>
<path class="st3" d="M98.3,61.8c0.3-0.2,0.6-0.3,0.9-0.3c0.3,0,0.6,0.1,0.9,0.3s0.4,0.5,0.4,0.8c0,0.3-0.1,0.6-0.4,0.8
s-0.5,0.3-0.9,0.3c-0.3,0-0.6-0.1-0.9-0.3s-0.4-0.5-0.4-0.8C97.9,62.3,98,62,98.3,61.8z M100.3,65.6v8.5H98v-8.5H100.3z"/>
<path class="st3" d="M103.8,73.9c-0.6-0.2-1.1-0.6-1.4-1l0.9-1.3c0.7,0.7,1.4,1,2.2,1c0.4,0,0.7-0.1,1-0.2c0.3-0.2,0.4-0.4,0.4-0.7
c0-0.3-0.1-0.6-0.4-0.7c-0.3-0.2-0.6-0.3-0.9-0.4c-0.3-0.1-0.5-0.2-0.6-0.2c-0.7-0.2-1.3-0.6-1.6-1c-0.4-0.4-0.5-0.9-0.5-1.5
c0-0.5,0.1-0.9,0.3-1.3c0.2-0.4,0.6-0.7,1.1-1c0.5-0.3,1.1-0.4,1.7-0.4c0.6,0,1.2,0.1,1.7,0.2c0.5,0.1,0.9,0.4,1.3,0.7l-0.9,1.3
c-0.2-0.2-0.5-0.4-0.9-0.5c-0.3-0.1-0.6-0.2-0.9-0.2c-0.3,0-0.6,0.1-0.9,0.2s-0.3,0.4-0.3,0.6c0,0.3,0.1,0.5,0.3,0.7
c0.2,0.2,0.6,0.3,1.2,0.5c0.2,0.1,0.4,0.1,0.4,0.1c0.7,0.2,1.2,0.5,1.6,0.9s0.6,0.9,0.6,1.5c0,0.8-0.3,1.5-0.9,2.1
c-0.6,0.6-1.4,0.8-2.5,0.8C105,74.3,104.4,74.1,103.8,73.9z"/>
<path class="st3" d="M113.9,72.2h4.5v1.8h-8.1l4.6-6.6h-2.5c-0.5,0-0.8-0.2-1.2-0.5s-0.5-0.7-0.5-1.2v-1h1.7v0.3
c0,0.2,0,0.4,0.2,0.4c0.1,0.1,0.3,0.1,0.5,0.1h5.4L113.9,72.2z"/>
<path class="st3" d="M129.7,65.6v8.5h-2.2v-1.2c-0.3,0.4-0.7,0.7-1.2,1c-0.5,0.3-1.1,0.5-1.8,0.5c-0.8,0-1.5-0.2-2.2-0.5
c-0.6-0.3-1.1-0.8-1.5-1.5c-0.4-0.7-0.6-1.5-0.6-2.4c0-0.9,0.2-1.7,0.6-2.4c0.4-0.7,0.9-1.2,1.6-1.6c0.6-0.4,1.4-0.6,2.1-0.6
c1.4,0,2.4,0.5,3.1,1.5l0.2-1.1H129.7z M126.5,72c0.4-0.3,0.7-0.8,0.9-1.3v-1.8c-0.2-0.5-0.5-0.9-0.9-1.3c-0.5-0.3-1-0.5-1.6-0.5
c-0.7,0-1.3,0.3-1.8,0.8s-0.7,1.1-0.7,1.9c0,0.5,0.1,1,0.4,1.4c0.2,0.4,0.6,0.7,1,1c0.4,0.2,0.8,0.4,1.3,0.4
C125.6,72.5,126.1,72.3,126.5,72z"/>
<path class="st3" d="M131.9,72c0.2-0.2,0.5-0.4,0.8-0.4c0.3,0,0.6,0.1,0.8,0.4c0.2,0.2,0.4,0.5,0.4,0.9c0,0.3-0.1,0.6-0.4,0.9
c-0.2,0.2-0.5,0.3-0.8,0.3c-0.3,0-0.6-0.1-0.8-0.3c-0.2-0.2-0.4-0.5-0.4-0.9C131.5,72.5,131.6,72.2,131.9,72z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 809 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -1,84 +1,91 @@
<div id="tab-panel" role="tabpanel">
<div class="header">
<h1>This stuff keeps me busy</h1>
</div>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dreat - Music & Code</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="manifest" href="manifest.json">
</head>
<body>
<div id="layout">
<div id="menu">
<div class="pure-menu">
<a class="pure-menu-heading" href="index.html">
<img alt="logo" src="./images/logo.png" width="80%"/>
</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="index.html" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="projects.html" class="pure-menu-link">Projects</a></li>
<li class="pure-menu-item"><a href="about_me.html" class="pure-menu-link">About me</a></li>
<li class="pure-menu-item"><a href="about_website.html" class="pure-menu-link">About website</a></li>
<li class="pure-menu-item"><a href="cv.html" class="pure-menu-link">Resume</a></li>
<li class="pure-menu-item"><a href="https://blog.dreat.info" class="pure-menu-link">Blog</a></li>
</ul>
</div>
</div>
<div id="main">
<div class="header">
<h1>This stuff keeps me busy</h1>
</div>
<div class="content">
<div class="pure-g">
<div class="pure-u-11-24">
<div class="font-i-want">
<h2>Software projects</h2>
<hr>
<h4>Fulltime jobs</h4>
<p>I worked mainly with backend (thou I thouched early React and Angular 4 at some point), 5 years with C#, 4 years and counting with Elixir. Along the way I wrote integration systems, backends for web interfaces, rewrote a legacy project or two (that's surprisingly fun!). Now I'm also running my own team, building a project I'm responsible of.</p>
<h4>Freelance</h4>
<p>I did a frontend for a recycling kiosk. You can put waste there and get points to exchange for points to use across the city. I did it using Elm 0.13 and it's still running in production without hiccups. CSS was a big pain thou.</p>
<h4>e-ink badge games</h4>
<p>Created a small quiz and simple "pick your own adventure" game for an e-ink badge. It was used for event that promotes science and technology among kids in 2022</p>
</div>
</div>
<div class="pure-u-2-24">
</div>
<div class="pure-u-11-24">
<div class="font-i-want">
<h2>Music projects</h2>
<hr>
<h4>Drumming</h4>
<p>I currently play drums with a local band: Lucha Beaver. We're working on EP which I'm slowly mixing.</p>
<p>I composed and recorded drums for <a href="https://album.link/pl/i/1570284078"> a prog rock album</a>. </p>
<h4>Music production</h4>
<p>There is some stuff at <a href="https://soundcloud.com/dreat_nihil">on my soundcloud page</a> - a bit of dark ambient + some music challenges.</p>
<p> In May 2022 I performed debut MonoChromancer ambient concert in front of 600 people at <a href="https://festiwalswiatla.hs3.pl">Festival of Light</a></p>
<p> In May 2023 I performed as MonoChromancer again at FoL in Gdańsk. This time I also <a href="https://album.link/s/2YVFDSW2w99MUYaijNaytQ">released a debut album</a></p>
<h4>SonicPi workshops</h4>
<p>I did a SonicPi workshops for IKM Gdańsk and Starter. This was aimed for total beginners to start making music with code.</p>
<h4>Music for Metabow (wip)</h4>
<p>I'm making music for <a href="https://aerloth.itch.io/metabow">Metabow, a VR Game</a>. There's already a build with some music by me, there's a need for some battle music as well.</p>
<h4>Gamejam music</h4>
<p>I made a music for a <a href="https://satolas.itch.io/spacelinks">Spacelinks</a>, game made for GMTK Gamejam 2021. I had 48hrs to work on this. While our idea for final piece was much more ambitious (and music was made), folks who made the game didn't have time to properly implement complex layering system. What's in the game is cool as well, it's just the idea that sparked during last 8 hours of work. I'm really glad how it went. Definitely will work with guys in the future, it was a blast.</p>
<h4>Music for astrophotography themed YouTube channel</h4>
<p>Intro music + music in background for talking. <a href="https://youtu.be/4XapHq_uKG4">(link)</a></p>
</div>
</div>
</div>
</div>
</div>
<div>
<table>
<tr>
<th>
<h2>Software projects</h2>
</th>
<th class="middle-row"></th>
<th>
<h2>Music projects</h2>
</th>
</tr>
<tr>
<td>
<h4>Building now</h4>
<p>
I'm building <a href="https://www.tonetastic.studio/">ToneTastic</a>, a fun way of learning Sound Design.
</p>
<h4>Fulltime jobs</h4>
<p>
I worked mainly with backend (thou I thouched early React and Angular 4 at some point), 5 years with C#, 4 years and counting with Elixir. Along the way I wrote integration systems, backends for web interfaces,
rewrote a legacy project or two (that's surprisingly fun!). Now I'm also running my own team, building a project I'm responsible of.
</p>
<h4>Freelance</h4>
<p>
I did a frontend for a recycling kiosk. You can put waste there and get points to exchange for points to use across the city. I did it using Elm 0.13 and it's still running in production without hiccups. CSS was a
big pain thou.
</p>
<h4>e-ink badge games</h4>
<p>
Created a small quiz and simple "pick your own adventure" game for an e-ink badge. It was used for event that promotes science and technology among kids in 2022
</p>
<h4>Talk with a robot (twice)</h4>
<p>
With <a href="https://doomhammer.info/">my good friend</a> we brought Nao robot to life, wiring it to LLM. Once, as a generic personality for Night of Scientists, second time for Jan Heweliusz birthday. Kids really liked it.
</p>
</td>
<td class="middle-row"></td>
<td>
<h4>Drumming</h4>
<p>
I currently play drums with a local band: Lucha Beaver. We're working on EP which I'm slowly mixing.
</p>
<p>
I composed and recorded drums for
<a href="https://album.link/pl/i/1570284078"> a prog rock album</a>.
</p>
<h4>Music production</h4>
<p>
There is some stuff at
<a href="https://soundcloud.com/dreat_nihil">on my soundcloud page</a>
- a bit of dark ambient + some music challenges.
</p>
<p>
In May 2022 I performed debut MonoChromancer ambient concert in front of 600 people at
<a href="https://festiwalswiatla.hs3.pl">Festival of Light</a>
</p>
<p>
In May 2023 I performed as MonoChromancer again at FoL in Gdańsk. This time I also
<a href="https://album.link/s/2YVFDSW2w99MUYaijNaytQ">released a debut album</a>
</p>
<h4>SonicPi workshops</h4>
<p>
I did a SonicPi workshops for IKM Gdańsk and Starter. This was aimed for total beginners to start making music with code.
</p>
<h4>Music for Metabow (wip)</h4>
<p>
I'm making music for
<a href="https://aerloth.itch.io/metabow">Metabow, a VR Game</a>. There's already a build with some music by me, there's a need for some battle music as well.
</p>
<h4>Gamejam music</h4>
<p>
I made a music for a
<a href="https://satolas.itch.io/spacelinks">Spacelinks</a>, game made for GMTK Gamejam 2021. I had 48hrs to work on this. While our idea for final piece was much more ambitious (and music was made), folks who made
the game didn't have time to properly implement complex layering system. What's in the game is cool as well, it's just the idea that sparked during last 8 hours of work. I'm really glad how it went. Definitely will
work with guys in the future, it was a blast.
</p>
<h4>Music for astrophotography themed YouTube channel</h4>
<p>
Intro music + music in background for talking.
<a href="https://youtu.be/4XapHq_uKG4">(link)</a>
</p>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>

View file

@ -1,254 +1,74 @@
body {
color: #000;
font-family: 'Montserrat', sans-serif;
color: #000;
font-family: "Montserrat", sans-serif;
margin: 0;
background-color: rgba(255, 243, 224, 0.3);
}
.pure-img-responsive {
max-width: 100%;
height: auto;
h1 {
text-align: center;
}
.font-i-want {
font-family: 'Montserrat', sans-serif;
color: #000;
.img {
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
max-width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
/*
Add transition to containers so they can push in and out.
*/
#layout,
#menu,
.menu-link {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
.main-img {
text-align: center;
align-items: center;
max-width: 100%;
height: auto;
}
/*
This is the parent `<div>` that contains the menu and the content area.
*/
#layout {
position: relative;
left: 0;
padding-left: 0;
}
#layout.active #menu {
left: 150px;
width: 150px;
}
#layout.active .menu-link {
left: 150px;
}
/*
The content `<div>` is where all your content goes.
*/
.content {
margin: 0 auto;
padding: 0 2em;
/*max-width: 800px;*/
margin-bottom: 50px;
line-height: 1.6em;
text-align: center;
}
.header {
margin: 0;
color: #333;
/*text-align: center;*/
padding: 2.5em 2em 0;
/*border-bottom: 1px solid #eee;*/
}
.header h1 {
margin: 0.2em 0;
font-size: 3em;
font-weight: 600;
}
.header h2 {
font-weight: 300;
color: #ccc;
padding: 0;
margin-top: 0;
}
.content-subhead {
margin: 50px 0 20px 0;
font-weight: 300;
color: #000;
.navbar {
background-color: #000;
color: #177700;
height: 50px;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
/*
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/
#menu {
margin-left: -150px; /* "#menu" width */
width: 150px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000; /* so the menu or its navicon stays above all content */
background: #191818;
overflow-y: auto;
}
/*
All anchors inside the menu should be styled like this.
*/
#menu a {
color: #999;
border: none;
padding: 0.6em 0 0.6em 0.6em;
}
/*
Remove all background/borders, since we are applying them to #menu.
*/
#menu .pure-menu,
#menu .pure-menu ul {
border: none;
background: transparent;
}
/*
Add that light border to separate items into groups.
*/
#menu .pure-menu ul,
#menu .pure-menu .menu-item-divided {
border-top: 1px solid #333;
}
/*
Change color of the anchor links on hover/focus.
*/
#menu .pure-menu li a:hover,
#menu .pure-menu li a:focus {
background: #333;
}
/*
This styles the selected menu item `<li>`.
*/
#menu .pure-menu-selected,
#menu .pure-menu-heading {
background: #36b575;
}
/*
This styles a link within a selected menu item `<li>`.
*/
#menu .pure-menu-selected a {
color: #fff;
}
/*
This styles the menu heading.
*/
#menu .pure-menu-heading {
font-size: 110%;
color: #fff;
margin: 0;
}
/* -- Dynamic Button For Responsive Menu -------------------------------------*/
/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/
/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
.menu-link {
position: fixed;
display: block; /* show this only on small screens */
top: 0;
left: 0; /* "#menu width" */
background: #000;
background: rgba(0,0,0,0.7);
font-size: 10px; /* change this value to increase/decrease button size */
z-index: 10;
width: 2em;
height: auto;
padding: 2.1em 1.6em;
.navbar a {
padding: 15.25px;
width: 20%;
color: #FFF3E0;
text-decoration: none;
text-align: center;
margin: 0px;
}
.menu-link:hover,
.menu-link:focus {
background: #000;
}
.menu-link span {
position: relative;
display: block;
}
.menu-link span,
.menu-link span:before,
.menu-link span:after {
background-color: #fff;
pointer-events: none;
width: 100%;
height: 0.2em;
}
.menu-link span:before,
.menu-link span:after {
position: absolute;
margin-top: -0.6em;
content: " ";
}
.menu-link span:after {
margin-top: 0.6em;
}
/* -- Responsive Styles (Media Queries) ------------------------------------- */
/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 8em) {
.header,
.content {
padding-left: 2em;
padding-right: 2em;
}
#layout {
padding-left: 150px; /* left col width "#menu" */
left: 0;
}
#menu {
left: 150px;
}
.menu-link {
position: fixed;
left: 150px;
display: none;
}
#layout.active .menu-link {
left: 150px;
}
.navbar a:hover {
background-color: rgba(23, 119, 0, 0.5);
}
/*@media (max-width: 48em) {
/* Only apply this when the window is small. Otherwise, the following
case results in extra padding on the left:
* Make the window small.
* Tap the menu to trigger the active state.
* Make the window large again.
*/
/* #layout.active {
position: relative;
left: 150px;
}
}*/
.middle-row {
width: 10%;
}
h4 {
text-decoration: underline;
}
a {
color: #177700;
}
.about {
align-items: center;
justify-content: center;
display: flex;
}