commit a58e4d75657b50d26a8e3ecc6f157dc3bc8d40f1
parent 64516889aa892702a2a804e3bb8b7ffcbeeb3ff1
Author: klewer-martin <martin.cachari@gmail.com>
Date: Sun, 6 Mar 2022 19:30:57 -0300
Updated about section + vim article
Diffstat:
17 files changed, 148 insertions(+), 40 deletions(-)
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
sync.sh
+profile*
+logos
diff --git a/articles/00/article_style.css b/articles/00/article_style.css
@@ -1,4 +1,4 @@
-img {
+.screenshot {
border-radius: .3em;
max-width: 60em;
@@ -6,9 +6,6 @@ img {
height: 100%;
width: 100%;
-
- color: black;
- background: #151515;
}
p {
diff --git a/articles/00/dwm_config.html b/articles/00/dwm_config.html
@@ -5,7 +5,7 @@
<title>Martin's webpage - DWM configuration</title>
<link rel='stylesheet' type='text/css' href="/css/style.css">
<link rel='stylesheet' type='text/css' href="article_style.css">
- <link rel="icon" href="/media/pepe.png">
+ <link rel="icon" href="/favicon.ico">
<meta charset="utf-8"/>
</head>
@@ -21,7 +21,7 @@
<br>
- <img max-width=40em src="scrot.png" title="Screenshot of my dwm build" alt="Screenshot">
+ <img class="screenshot" max-width=40em src="scrot.png" title="Screenshot of my dwm build" alt="Screenshot">
<br><br>
<h5><u>How do you install DWM?</u></h5>
diff --git a/articles/01/article_style.css b/articles/01/article_style.css
@@ -15,7 +15,7 @@ h3 {
justify-content: center;
margin-top: 0.5em;
margin-bottom: 1em;
- margin-left: -1.25em;
+ /* margin-left: -1.25em; */
}
.title_img {
@@ -23,7 +23,7 @@ h3 {
}
.title_text {
- /* padding-left: 20px; */
+ margin-left: .5em;
}
p {
diff --git a/articles/01/vim_config.html b/articles/01/vim_config.html
@@ -5,7 +5,7 @@
<title>Martin's webpage - Vi Improved </title>
<link rel='stylesheet' type='text/css' href="/css/style.css">
<link rel='stylesheet' type='text/css' href="article_style.css">
- <link rel="icon" href="/media/pepe.ico">
+ <link rel="icon" href="/favicon.ico">
<meta charset="utf-8"/>
</head>
@@ -18,7 +18,7 @@
<img id="vim_logo" src="/media/vim_logo.png" title="Vim logo" alt="Vim logo">
</div>
<div class="title_text">
- <h3>Vim - The keyboard driven text editor</h3>
+ <h3>The keyboard driven text editor</h3>
</div>
</div>
@@ -34,6 +34,8 @@
<p>By default Vim comes with a lot of features disabled, for example a key binding to comment a line or auto close brackets, parenthesis, etc, this features you can enable them by installing <u>plugins</u> which I will cover leter.</p>
+ <!--#include virtual="/common/end_of_article.shtml" -->
+
</article>
<!--#include virtual="/common/footer.shtml" -->
diff --git a/articles/02/templeos.html b/articles/02/templeos.html
@@ -4,7 +4,7 @@
<head>
<title>Martin's webpage</title>
<link rel='stylesheet' type='text/css' href="/css/style.css">
- <link rel="icon" href="/media/pepe.ico">
+ <link rel="icon" href="/favicon.ico">
<meta charset="utf-8"/>
</head>
diff --git a/common/about.html b/common/about.html
@@ -4,8 +4,8 @@
<head>
<title>Martin's webpage - About me</title>
<link rel='stylesheet' type='text/css' href="/css/style.css">
- <link rel="icon" href="pepe.ico">
- <link rel="icon" href="/media/pepe.ico">
+ <link rel='stylesheet' type='text/css' href="/common/about_style.css">
+ <link rel="icon" href="/favicon.ico">
<meta charset="utf-8"/>
</head>
@@ -15,6 +15,21 @@
<article>
<!-- <h2>What about me?</h2> -->
<h2 style="color:#DAA520; text-shadow: 5px 5px 5px black;">What about me?</h2>
+
+ <div class="presentation">
+ <img class=profile_img src="profile_cropped.jpeg" title="Profile picture" alt="Profile picture">
+ <h3>Martin Javier Klöckner</h3>
+ <p>Electronics engineering student at Univerity of Buenos Aires</p>
+ <br>
+ <h3 id="skills_heading"><u>Principal skills</u></h3>
+ <div class="skills_logos">
+ <img class="skills_logo" src="logos/c.png" title="Profile picture" alt="Profile picture">
+ <img class="skills_logo" src="logos/c++2.png" title="Profile picture" alt="Profile picture">
+ <img class="skills_logo" src="logos/python.png" title="Profile picture" alt="Profile picture">
+ <!-- <img max-width: 10em class="linux_logo" src="logos/linux2.png" title="Profile picture" alt="Profile picture"> -->
+ </div>
+ </div>
+
<p>My name is Martin, I'm from Argentina, currenly I'm staying at my parents house in a little town located at the center of Buenos Aires province. Because of the pandemic I've spend this last two years mostly seated in front of a computer, I've learned a lot about linux, embedeed systems, and also about web development, although I'm not even close of working as such, but I would like, some day.</p>
<h4><u>Programming</u></h4>
diff --git a/common/about.html.2 b/common/about.html.2
@@ -4,8 +4,7 @@
<head>
<title>Martin's webpage - About me</title>
<link rel='stylesheet' type='text/css' href="/css/style.css">
- <link rel="icon" href="pepe.ico">
- <link rel="icon" href="/media/pepe.ico">
+ <link rel="icon" href="/favicon.ico">
<meta charset="utf-8"/>
</head>
diff --git a/common/about_style.css b/common/about_style.css
@@ -0,0 +1,40 @@
+.presentation {
+ margin-left: auto;
+ margin-right: auto;
+
+ text-align: center;
+
+ padding-bottom: 1em;
+}
+
+.profile_img {
+ margin-left: auto;
+ margin-right: auto;
+
+ max-width: 15em;
+
+ border-style: dashed;
+ border-color: gold;
+ border-width: 1.5px;
+}
+
+.skills_logos {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ /* padding: 1em; */
+}
+
+.skills_logo {
+ max-width: 5em;
+ padding: 1em;
+}
+
+.linux_logo {
+ max-width: 5em;
+ padding: 1em;
+}
+
+#skills_heading {
+ text-align: center;
+}
diff --git a/common/articles.html b/common/articles.html
@@ -4,7 +4,7 @@
<head>
<title>Martin's webpage</title>
<link rel='stylesheet' type='text/css' href="/css/style.css">
- <link rel="icon" href="/media/pepe.ico">
+ <link rel="icon" href="/favicon.ico">
<meta charset="utf-8"/>
</head>
diff --git a/common/downloads.html b/common/downloads.html
@@ -4,8 +4,7 @@
<head>
<title>Martin's webpage</title>
<link rel='stylesheet' type='text/css' href="/css/style.css">
- <link rel="icon" href="pepe.ico">
- <link rel="icon" href="/media/pepe.ico">
+ <link rel="icon" href="/favicon.ico">
<meta charset="utf-8"/>
</head>
diff --git a/common/end_of_article.shtml b/common/end_of_article.shtml
@@ -1,4 +1,4 @@
-<br>
-<div style="margin-top: .25em; text-align: center;">
- <a href="#top">Back to top</a>
+<!-- <br> -->
+<div style="margin-top: 1em; text-align: center; text-decoration: none;">
+ <a href="#top" id="go_top">Back to top</a>
</div>
diff --git a/common/library.html b/common/library.html
@@ -4,8 +4,7 @@
<head id=top>
<title>Martin's webpage - My personal library</title>
<link rel='stylesheet' type='text/css' href="/css/style.css">
- <link rel="icon" href="pepe.ico">
- <link rel="icon" href="/media/pepe.ico">
+ <link rel="icon" href="/favicon.ico">
<meta charset="utf-8"/>
</head>
@@ -124,7 +123,7 @@
<li>Yurichev D. - Reverse engineering for beginners</li>
<li>Zhirkov, Igor - Low-level programming C, Assembly, and program execution on Intel 64 architecture (2017)</li>
</ul>
- <div style="margin-top: .5em; text-align: center;"><a href="#top">Back to top</a></div>
+ <!--#include virtual="end_of_article.shtml" -->
</article>
<!--#include virtual="footer.shtml" -->
diff --git a/css/style.css b/css/style.css
@@ -23,11 +23,13 @@ body {
font-size: 14px;
font-family: "DejaVu Sans", sans, sans-serif;
+ scroll-behavior: smooth
}
header {
color: crimson;
- background: #151515;
+ /* background: #151515; */
+ background: #191919;
max-width: 55em;
@@ -41,8 +43,8 @@ header {
padding-left: 1.25em;
padding-right: 1.25em;
- padding-top: 1.5em;
- padding-bottom: 1em;
+ padding-top: 1.25em;
+ padding-bottom: .75em;
border-radius: 1em;
border-top: 1em;
@@ -53,13 +55,14 @@ header {
#header_text {
margin-bottom: 0em;
padding-bottom: 0.10em;
+ font-size: 2.15em;
}
-
-
article {
color: antiquewhite;
- background: #151515;
+ /* background: #151515; */
+ background: #191919;
+
max-width: 55em;
margin-left: auto;
@@ -67,7 +70,7 @@ article {
margin-top: 1em;
margin-bottom: .9em;
- text-align: left;
+ /* text-align: left; */
padding-left: 1.25em;
padding-right: 1.25em;
@@ -80,7 +83,6 @@ article {
img {
border-radius: .3em;
- /* max-width: 10em; */
overflow: hidden;
@@ -88,7 +90,7 @@ img {
width: 100%;
color: black;
- background: #151515;
+ background: #191919;
}
a:visited {
@@ -122,6 +124,7 @@ footer {
text-align: center;
font-size: 0.75em;
color: #151515;
+ font-family: monospace;
}
h2 {
@@ -229,7 +232,9 @@ hr {
}
.header_buttons {
- margin-top: .2em;
+ /* margin-top: .2em; */
+ margin-top: 0;
+ font-size: 1.05em;
}
#header_link {
@@ -242,14 +247,43 @@ hr {
}
#header_link:hover {
- color: whitesmoke;
+ color: antiquewhite;
}
footer {
color: black;
}
-#top {
+#go_top {
text-decoration: none;
- color: blue;
+ color: peru;
+}
+
+#go_top:hover {
+ color: crimson;
}
+
+#recent_articles_items {
+
+}
+
+/* #recent_articles { */
+/* border-collapse: collapse; */
+ /* width: 75%; */
+ /* border-radius: 100px; */
+ /* margin-left: auto; */
+ /* margin-right: auto; */
+/* } */
+
+/* #recent_articles tr { */
+/* border: 1px dotted antiquewhite; */
+/* width: 100%; */
+/* border-radius: 100px; */
+/* } */
+
+/* #recent_articles td { */
+/* padding: .25em; */
+/* padding-right: -10em; */
+/* border: 1px dotted antiquewhite; */
+/* } */
+
diff --git a/favicon.ico b/favicon.ico
Binary files differ.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
<head>
<title>Martin's webpage - Home</title>
<link rel='stylesheet' type='text/css' href="css/style.css">
- <link rel="icon" href="media/pepe.ico">
+ <link rel="icon" type="image/x-icon" href="favicon.ico">
<meta charset="utf-8"/>
</head>
@@ -12,14 +12,33 @@
<!--#include virtual="/common/header.shtml" -->
<article>
- <h2 style="color:#DAA520; text-shadow: 5px 5px 5px black;">Welcome, to martin's cave!</h2>
+ <h2 style="color:#DAA520; text-shadow: 5px 5px 5px black;">Welcome, to martin's site!</h2>
<p>Hello world! this is my website, which I did to experiment with Web Development and such. Feel free to surf the couple of pages that I made for you! You can navigate them by the menu on top, below the title! You can also choose an article below in the <a href="#recent_articles">recent articles</a> section.
</p><br>
<p>If you want to contact me to make business or just to talk you can head to <a href="/common/about.html">about</a> section where you can read a little bit of my history and get my contact info.</p>
<h3 style="text-align: left;"><u>Recent articles</u></h3>
+
+ <!-- <table id="recent_articles"> -->
+ <!-- <tbody> -->
+ <!-- <tr> -->
+ <!-- <th>Date</th> -->
+ <!-- <th>Title</th> -->
+ <!-- </tr> -->
+ <!-- <tr> -->
+ <!-- <td>04 Mar 2022</td> -->
+ <!-- <td><a href="articles/01/vim_config.html">Vim introduction and basic configuration</a></td> -->
+ <!-- </tr> -->
+ <!-- <tr> -->
+ <!-- <td>23 Oct 2021</td> -->
+ <!-- <td><a href="articles/00/dwm_config.html">DWM - A window manager configuration</a></td> -->
+ <!-- </tr> -->
+ <!-- </tbody> -->
+ <!-- </table> -->
+
<ul id=recent_articles>
+ <div id="recent_articls_items">
<!-- <li>01 Sep 2021 -- <a href="articles/01/vim_config.html">What is LaTeX?</a></li> -->
<!-- <li>31 Oct 2021 -- <a href="articles/01/vim_config.html">About Object-Oriented Programming</a></li> -->
<!-- <li>30 Oct 2021 -- <a href="articles/01/vim_config.html">How to install GCam on an android phone</a></li> -->
@@ -32,7 +51,9 @@
<li>04 Mar 2022 -- <a href="articles/01/vim_config.html">Vim introduction and basic configuration</a></li>
<!-- <li>02 Dec 2021 -- <a href="articles/02/templeos.html">Minimal TempleOS configuration</a></li> -->
<li>23 Oct 2021 -- <a href="articles/00/dwm_config.html">DWM - A window manager configuration</a></li>
+ </div>
</ul>
+
</article>
<!--#include virtual="/common/footer.shtml" -->
diff --git a/resources/snippet.html b/resources/snippet.html
@@ -4,7 +4,7 @@
<head>
<title>Martin's webpage</title>
<link rel='stylesheet' type='text/css' href="css/style.css">
- <link rel="icon" href="/media/pepe.ico">
+ <link rel="icon" href="/favicon.ico">
<meta charset="utf-8"/>
</head>
