diff --git a/fonts/Inconsolata-Bold.ttf b/fonts/Inconsolata-Bold.ttf new file mode 100644 index 0000000..6330f5b Binary files /dev/null and b/fonts/Inconsolata-Bold.ttf differ diff --git a/fonts/Inconsolata-Light.ttf b/fonts/Inconsolata-Light.ttf new file mode 100644 index 0000000..18dfeb6 Binary files /dev/null and b/fonts/Inconsolata-Light.ttf differ diff --git a/fonts/Inconsolata-Regular.ttf b/fonts/Inconsolata-Regular.ttf new file mode 100644 index 0000000..e329bbc Binary files /dev/null and b/fonts/Inconsolata-Regular.ttf differ diff --git a/fonts/inconsolata.css b/fonts/inconsolata.css new file mode 100644 index 0000000..ec05171 --- /dev/null +++ b/fonts/inconsolata.css @@ -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; +} diff --git a/img/favicon.png b/img/favicon.png new file mode 100644 index 0000000..98b283d Binary files /dev/null and b/img/favicon.png differ diff --git a/img/logo.jpg b/img/logo.jpg new file mode 100644 index 0000000..430cf66 Binary files /dev/null and b/img/logo.jpg differ diff --git a/img/pfp.jpg b/img/pfp.jpg new file mode 100644 index 0000000..0ae62f6 Binary files /dev/null and b/img/pfp.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..9e8c05d --- /dev/null +++ b/index.html @@ -0,0 +1,48 @@ + + + + + + + + + Jmix + + +
+

Jmix

 + +
+
+
+ +

Julio E. Assunção

+

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.

+

You can comunicate with me in English, Spanish and Portuguese.
My e-mail is julio@jmix.xyz.

+
+
+
+

Minimalism

+

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.

+
+
+

Technology I'm acquainted with

+
    +
  • Linux servers with nginx as reverse proxy.
    • +
  • Basic web design with html and css.
    • +
  • Gimp and Inkscape for graphical design.
    • +
  • Controlling software versions with git.
    • +
  • Blogs with engines like Wordpress and now Ghost.
    • +
  • Creating beautiful and readable documments with LaTeX.
    • +
  • Recording and editing instructional videos.
    • +
  • Poedit for translation of software.
    • +
  • Shell script and terminal utilities
    • +
  • Using vim tricks that save me a lot of time and work.
    • +
+
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..8519b78 --- /dev/null +++ b/style.css @@ -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%; +}