new webpage :D
This commit is contained in:
Lukasz Skotarek
parent
5455e4f2d0
commit
ccdb0526e4
7 changed files with 513 additions and 18 deletions
69
about_me.html
Normal file
69
about_me.html
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<!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">
|
||||
</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="https://blog.dreat.info" class="pure-menu-link">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
<div class="header">
|
||||
<h1>About me</h1>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="font-i-want">
|
||||
<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:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Software monk with 7+ 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>Beginner 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>mediocre Norwegian speaker and beginner Korean 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_info</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>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
51
about_website.html
Normal file
51
about_website.html
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<!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">
|
||||
</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="https://blog.dreat.info" class="pure-menu-link">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</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">
|
||||
<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="netlify.com">Netlify</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
images/dd.jpg
Normal file
BIN
images/dd.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
BIN
images/logo.png
Normal file
BIN
images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
75
index.html
75
index.html
|
|
@ -1,21 +1,60 @@
|
|||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
|
||||
</head>
|
||||
<!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">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<body>
|
||||
<article class="message is-primary">
|
||||
<div class="message-header">
|
||||
<p>Site under construction</p>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
<p> I'm in process of designing brand new webpage with more information and structure.</p> <p>In spirit of old times I decided to go with "under construction" website instead of just launching brand new thing in one go.</p> <p>This will also pressure me to finish that quicker :)</p>
|
||||
<p>In the meantime maybe check: </p>
|
||||
<p><a href="https://blog.dreat.info">My Blog</a></p>
|
||||
<p>or</p>
|
||||
<p><a href="https://jungle.dreat.info">My Entropic Jungle</a></p>
|
||||
</div>
|
||||
</article>
|
||||
</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="https://blog.dreat.info" class="pure-menu-link">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
<div class="header">
|
||||
<h1>Dreat - Music&Code</h1>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
82
projects.html
Normal file
82
projects.html
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
|
||||
<!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">
|
||||
</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="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#, 2 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>yet unnamed tower defense (wip)</h4>
|
||||
<p>Big work in progress, just at the start of the project. I'm using GameMakerStudio 2 to build a 2D Tower Defence game. More as it develops.
|
||||
<h4>contract brigde (wip)</h4>
|
||||
<p>I kinda forgot about this project and recently recalled I did that. There's some code (Elixir + Phoenix LiveView) but I need to rewrite a lot of stuff after some thinking. When I'm done with above project I will resurrect this and link to the repo</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 two local bands: Revan and Lucha Beaver. We're working on EP with Lucha Beaver.</p>
|
||||
<p>I composed and recorded drums for <a href="https://album.link/pl/i/1570284078"> an album that has Steve Hackett as a guest musician! </a>. Second one is being composed and I'm invited again, so expect more soon.
|
||||
<h4>Music production</h4>
|
||||
<p>Mostly unreleased stuff, there is some <a href="https://soundcloud.com/dreat_nihil">on my soundcloud page</a> - a bit of dark ambient + some music challenges. I changed my workflow and I'm working on solo dark ambient album now. Current setup: guitar, microkorg xl, midi controllers, mixer, audio interface, Ableton live, contact mic.</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://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 (wip)</h4>
|
||||
<p>Still wip, sent demo to client. Intro music + music in background for talking.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
254
styles.css
Normal file
254
styles.css
Normal file
|
|
@ -0,0 +1,254 @@
|
|||
body {
|
||||
color: #000;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
.pure-img-responsive {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.font-i-want {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/*
|
||||
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;
|
||||
}
|
||||
|
||||
/*
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
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;
|
||||
}
|
||||
|
||||
.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: 48em) {
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue