9 changed files with 143 additions and 0 deletions
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,18 @@ |
|||
@font-face { |
|||
font-family: 'Inconsolata'; |
|||
src: url('Inconsolata-Regular.ttf') format('ttf'); |
|||
font-weight: 400; |
|||
font-style: normal; |
|||
} |
|||
@font-face { |
|||
font-family: 'Inconsolata'; |
|||
src: url('Inconsolata-Light.ttf') format('ttf'); |
|||
font-weight: 300; |
|||
font-style: normal; |
|||
} |
|||
@font-face { |
|||
font-family: 'Inconsolata'; |
|||
src: url('Inconsolata-Bold.ttf') format('ttf'); |
|||
font-weight: 700; |
|||
font-style: normal; |
|||
} |
|||
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
@ -0,0 +1,48 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<link rel="stylesheet" type="text/css" href="style.css"/> |
|||
<link rel="stylesheet" type="text/css" href="fonts/inconsolata.css"/> |
|||
<link rel"icon" type="image/png" href="img/favicon.png"/> |
|||
<title>Jmix</title> |
|||
</head> |
|||
<body> |
|||
<header class="flex-row"> |
|||
<a href="https://jmix.xyz"><h2>Jmix</h2></a> |
|||
<nav id="menu" class="flex-row"> |
|||
<a href="https://jmix.xyz" class="active">Home</a> |
|||
<a href="#">Blog</a> |
|||
<a href="#">Projects</a> |
|||
</nav> |
|||
</header> |
|||
<main id="content"> |
|||
<section id="me"> |
|||
<img src="img/pfp.jpg"> |
|||
<h1>Julio E. Assunção</h1> |
|||
<p>I'm a computer science studend and GNU/Linux enthusiast with some experience in tech support and web design with a minimalistic aproach to problem solving.</p> |
|||
<p>You can comunicate with me in English, Spanish and Portuguese.<br> My e-mail is <a href="mailto:julio@jmix.xyz">julio@jmix.xyz</a>.</p> |
|||
</section> |
|||
<section> |
|||
<section> |
|||
<h1>Minimalism</h1> |
|||
<p>I believe that less is usually more. In graphical design this allows for a cleaner experience with accesible visual informantion and in software it results in less requirements to run and adjust software to work properly, closing the gap between developers and users.</p> |
|||
</section> |
|||
<section> |
|||
<h1>Technology I'm acquainted with</h1> |
|||
<ul> |
|||
<li>Linux servers with nginx as reverse proxy.</li> |
|||
<li>Basic web design with html and css.</li> |
|||
<li>Gimp and Inkscape for graphical design.</li> |
|||
<li>Controlling software versions with git.</li> |
|||
<li>Blogs with engines like Wordpress and now Ghost.</li> |
|||
<li>Creating beautiful and readable documments with LaTeX.</li> |
|||
<li>Recording and editing instructional videos.</li> |
|||
<li><a href="https://poedit.net/">Poedit</a> for translation of software.</li> |
|||
<li>Shell script and terminal utilities</li> |
|||
<li>Using vim tricks that save me a lot of time and work.</li> |
|||
</ul> |
|||
</section> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,77 @@ |
|||
body{ |
|||
margin: 0; |
|||
font-family: "Inconsolata", monospace; |
|||
color: white; |
|||
background: #0F0F0F; |
|||
} |
|||
|
|||
h1{font-size: 2em !important; color: #7c60ba;} |
|||
p, a, li{font-size: 1.2em;} |
|||
a{text-decoration: none; color: #c39c74;} |
|||
a:hover{color: #b2564d} |
|||
|
|||
.flex-row{ |
|||
display: flex; |
|||
flex-flow: row nowrap; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
header{ |
|||
top: 0; |
|||
height: 30px; |
|||
position: fixed; |
|||
width: 100%; |
|||
background: #b2564d; |
|||
padding: 5px; |
|||
} |
|||
|
|||
header a, header a:hover{ |
|||
color: white; |
|||
} |
|||
|
|||
#menu{ |
|||
height: 100%; |
|||
width: 300px; |
|||
margin: 10px; |
|||
} |
|||
|
|||
#menu a{ |
|||
width: 33%; |
|||
height: 100%; |
|||
display: inline-block; |
|||
text-align: center; |
|||
font-weight: bold; |
|||
border-bottom: 3px double; |
|||
} |
|||
|
|||
/* Only works with !important -.- */ |
|||
#menu a:hover, .active{ |
|||
border-bottom: 3px double #c39c74 !important; |
|||
} |
|||
#menu a:hover{ |
|||
background: #7c60ba; |
|||
} |
|||
|
|||
#content{ |
|||
margin-top:40px; |
|||
margin-left:3%; |
|||
padding: 10px; |
|||
width: 90%; |
|||
} |
|||
|
|||
#content p{ |
|||
text-align: justify; |
|||
} |
|||
|
|||
#content h1{ |
|||
text-align: center; |
|||
} |
|||
|
|||
#me img{ |
|||
display: block; |
|||
margin: 0 auto 0 auto; |
|||
width: 120px; |
|||
height: 120px; |
|||
border-radius: 50%; |
|||
} |
|||
Loading…
Reference in new issue