-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (117 loc) · 12.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
<head>
<title>JEFBECKER</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jefbecker's personal website">
<meta name="fediverse:creator" content="@jefbecker@mastodon.social">
<meta property="og:image" content="https://jefbecker.com/thumb.png">
<meta property="article:published_time" content="2021-07-30T00:00-03:00">
<meta property="article:modified_time" content="2025-01-25T20:20-03:00">
<link rel="canonical" href="https://jefbecker.com/">
<link rel="icon" type="image/png" href="/images/favicon.png">
<link rel="alternate" type="application/atom+xml" title="RSS Feed in English" href="https://jefbecker.com/feed/rss.xml">
<link rel="alternate" type="application/atom+xml" title="Feed RSS em Português do Brasil" href="https://jefbecker.com/br/feed/rss.xml">
<link rel="me" href="https://mastodon.social/@jefbecker">
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<a href="#main" class="skip-to-main-content-link">Skip to main content</a>
<header>
<a href="/"><img src="/images/jefbecker.png" title="JEFBECKER" alt="JEFBECKER LOGO" width="60" height="60"></a>
<nav class="btn">
<a title="Go to Home Page" class="active current btn" href="/">Home</a>
<a title="Go to Pages" href="/pages/">Pages</a>
<a title="Go to Archive" href="/archive/">Archive</a>
<a title="Go to Links" href="/links/">Links</a>
<a title="Go to RSS Feeds" href="/feed/">Feeds</a>
</nav>
</header>
<div class="language">
<span class="btn"><a title="Switch to English" class="active current" href="/">English</a></span>
<span class="btn"><a title="Mudar para Português" href="/br/">Português</a></span>
<code style="float: right;"><span class="emoji" aria-hidden="true">🚧 </span>Under Construction<span class="emoji" aria-hidden="true"> 🚧</span></code>
</div>
<main id="main">
<h1 id="welcome" class="title">Welcome</h1>
<article>
<figure>
<img src="/images/buttons/jefbecker/card_cube_cian.webp" style="border-radius: 0.25em;" width="1000" class="center" alt="There are two cubes in a dark cyan background. The cubes are black, have a spiraling pattern in one of it's faces and a stripe of cyan light in the other.">
</figure>
<p id="welcome-to-my-website" style="text-align: center;font-size: medium;">Hello, welcome to my website! This is my personal space on the internet. Not everything is ready yet, but I will add more content in the future. In the mean time, feel free to access what is already available.</p>
<hr>
<div>
<h2 id="status-cafe" style="margin-bottom: -0.4em;">status.cafe</h2>
<p><span class="emoji" aria-hidden="true" id="statusCafe-emoji" style="padding-right: 0.5em;"></span><span id="statusCafe-status">No recent update </span></p>
<p style="margin-bottom: 0em; margin-top: -1em; float: left;"><small><span id="statusCafe-time"></span></small></p><br>
<p style="margin-bottom: 0em; margin-top: -1em; float: left;"><small><code style="padding: 0.5em;"><a title="Go to status.cafe" href="https://status.cafe/users/jefbecker">status.cafe</a></code> <code style="padding: 0.5em;"><a title="Open RSS Feed" href="https://status.cafe/users/jefbecker.atom">RSS Feed</a></code></small></p>
</div>
<!--<div id="last.fm" class="card">
<h3 style="margin-bottom: 0em; margin-top: 0em;">Latest played song on last.fm</h3>
<p><span class="emoji" aria-hidden="true">🎧</span> <a title="Go to Last.fm Library" href="https://www.last.fm/user/jefbecker/library"><span id="lfmSong"></span></a></p>
<hr style="margin-bottom: 0.5em; margin-top: 0em;">
<p style="margin-bottom: 0em; margin-top: 0em; float: left;"><small><span id="lfmTime"><span class="emoji" aria-hidden="true"><img src="/images/now_playing.gif" style="height: 1em; width: 1em;"> </span> Scrobbling now</span></small></p>
<p style="margin-bottom: 0em; margin-top: 0em; float: right;"><small>Powered by <a title="Last.fm last-played powered by @biancarosa" href="https://github.com/biancarosa/lastfm-last-played" >@biancarosa</a></small></p>
</div>-->
<br>
<div>
<h2 id="last-fm" style="margin-bottom: -0.4em;">Last.fm</h2>
<p id="lastfm_en">Loading recent tracks...</p>
<p style="margin-bottom: 0em; margin-top: -1em; float:left"><small><code style="padding: 0.5em;"><a title="Go to Last.fm" href="https://www.last.fm/user/jefbecker">Last.fm</a></code> <code style="padding: 0.5em;"><a title="Displaying scrobbles and last played on your site" href="https://support.last.fm/t/last-fm-wordpress-plugin-displaying-scrobbles-and-last-played-on-your-site/57425/6">Script</a></code></small></p>
</div>
<br>
<details>
<summary>Show more...</summary>
<h2 id="last-updates" style="text-align: center;"><span class="emoji" aria-hidden="true">📢</span> Last Updates</h2>
<p><strong><span class="emoji" aria-hidden="true">📌</span> Guestbook</strong> - A <a href="/pages/guestbook/">Guestbook</a> was added. Leave a message!</p>
<p><strong><span class="emoji" aria-hidden="true">🌟</span> Updates from last.fm, status.cafe and accessibility</strong> - I added two cards displaying the last song played on my last.fm and the latest post on status.cafe. I'm also working on the website's accessibility; my goal is to meet the <a href="https://www.w3.org/TR/WCAG20/#a">Web Content Accessibility Guidelines (WCAG), Version 2.0, Level AA</a>.</p>
<p><strong><span class="emoji" aria-hidden="true">🌟</span> Finishing up the house</strong> - All pages have been translated (hope I didn't forget any). I made peace with JavaScript, it didn't make sense to avoid it. I took care of some loose ends, did a general check on the under-construction pages, markup, and RSS feeds - take a look at them, just select your preferred language and click on 'RSS.' I also removed the Website Carbon badge because it wasn't working. Now, this site is really going to kick off; there's a lot of cool (or useless) stuff coming soon...</p>
<p><strong><span class="emoji" aria-hidden="true">🌟</span> Translation and JavaScript improvements</strong> - The Home Page translation is done, but there are still nine pages left. Now it is possible to toggle languages between Portuguese (BR) and English. The buttons are way too dependent of scripts, so I made a fail safe to allow navigation when JavaScript is disabled;</p>
<p><strong><span class="emoji" aria-hidden="true">🌟</span> JavaScript</strong> - I`ve added 3 interesting scripts: a view counter and one that shows the last time the website was updated, all making use of the Neocities own API. (I found them on <a href="https://dannarchy.com/tut/tut_002">dannarchy.com</a>). The other one shows a custom thumbnail on my Neocities profile. (This one I found on <a href="https://arandomsite.neocities.org/snippets/#custom-neocities-thumbnail">arandomsite.neocities.org</a>);</p>
<p><strong><span class="emoji" aria-hidden="true">⭐</span> More fixes</strong> - I fixed the buttons on my navigation bar, now they behave like buttons;</p>
<p><strong><span class="emoji" aria-hidden="true">⭐</span> Fixes</strong> - I prevented emojis from being viewed by accessibility APIs. Emojis are pure "decoration" and they ware causing problems with screen readers;</p>
<p><strong><span class="emoji" aria-hidden="true">⭐</span> Emojis</strong> - I will test whether emojis make the look less boring, but I'm not sure it will work out because I already see that it broke some screen readers;</p>
<p><strong><span class="emoji" aria-hidden="true">⭐</span> Rounded corners</strong> - I adjusted the highlight blocks so that they have rounded corners. Looks nice;</p>
<p><strong><span class="emoji" aria-hidden="true">⭐</span> Dark mode</strong> - Dark mode successfully implemented! Now it's finally working;</p>
<p><strong><span class="emoji" aria-hidden="true">⭐</span> Navigation by buttons</strong> - Now the navigation bar have buttons instead of links;</p>
<p><strong><span class="emoji" aria-hidden="true">⭐</span> Navigation and footer</strong> - I altered some links from the navigation menu and footer. Additional links will now only be available in the <a href="/pages/about/">About Page</a>. Now it is possible to navigate between posts via a menu at the end of the pages;</p>
<p><strong><span class="emoji" aria-hidden="true">⭐</span> Page "Now"</strong> - This idea was completely dropped. The website home page is were I will post stuff;</p>
<p><strong><span class="emoji" aria-hidden="true">⭐</span> Page "Hosted by Neocities"</strong> - This page became only "<a href="/pages/neocities/">Neocities</a>" and now it is part of the navigation menu;</p>
<p><strong><span class="emoji" aria-hidden="true">⭐</span> Lists Page</strong> - The <a href="/pages/lists/">Lists Page</a> is done;</p>
<p><strong><span class="emoji" aria-hidden="true">⭐</span> Robots.txt e AI.txt</strong> - Two text files ware added to try to prevent crawlers. Also added a basic sitemap;</p>
<p><strong><span class="emoji" aria-hidden="true">⭐</span> Performance and fixes</strong> - Several corrections ware made to the Site's HTML/CSS to improve code performance and consistency. Now browsers with reading mode are able to identify the elements correctly and display the read option on virtually every page. I am also testing some methods so that the Home Page does not use the cache as often and always displays updated content.</p>
<hr>
<h2 id="next-updates" style="text-align: center;"><span class="emoji" aria-hidden="true">📝</span> Next Updates</h2>
<p><strong><span class="emoji" aria-hidden="true">★</span> Page "Neocities"</strong> - I will make a page specially to Neocities;</p>
<p><strong><span class="emoji" aria-hidden="true">★</span> Comment Box</strong> - I'm thinking about adding a comment box or maybe a guest book;</p>
<p><strong><span class="emoji" aria-hidden="true">★</span> Contact Page</strong> - Adjust some information and improve a little;</p>
</details>
<h2 id="last-posts" style="text-align: center;"><span class="emoji" aria-hidden="true">📑</span> Last Posts</h2>
<p><span class="emoji" aria-hidden="true">✔️</span> <a href="/pages/lists/" title="Lists">11/11/2023 | Lists</a></p>
<p><span class="emoji" aria-hidden="true">✔️</span> <a href="/pages/blog/20230625-this-website-is-perfect.html" title="This Website is Perfect">06/25/2023 | This Website is Perfect</a></p>
<p><span class="emoji" aria-hidden="true">✔️</span> <a href="/pages/about/" title="About This Project">06/10/2023 | About This Project</a></p>
<p><span class="emoji" aria-hidden="true">✔️</span> <a href="/pages/privacy/" title="Privacy Policy">06/04/2023 | Privacy Policy</a></p>
</article>
</main>
<footer>
<a href="/pages/about/" title="About">About</a> 
<a href="/pages/accessibility/" title="Accessibility">Accessibility</a> 
<a href="/pages/contact/" title="Contact me">Contact</a> 
<a href="/pages/privacy/" title="Privacy Policy">Privacy</a> 
<a href="/pages/resources/" title="Resources">Resources</a> 
<br>
<p><a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/" title="Creative Commons License - CC-BY-NC-SA 4.0">CC-BY-NC-SA 4.0</a></p>
<img src="/88x31.png" aria-hidden="true" alt="88x31 button" width="88" height="31" loading="lazy">
<p><a href="https://xandra.cc/patrons">Eris is watching</a></p>
<p id="date">Since Jul 30, 2021</p>
<p>Last update: <span id="lastupdate"></span>.</p>
<p>Visitors: <span id="hitcount"></span>.</p>
<noscript>
<hr>
<p><span class="emoji" aria-hidden="true">⚠️ </span>You are browsing with JavaScript disabled. I have done my best to ensure that the basic navigation and functions of the site do not rely on JavaScript to work, but interactive elements such as toggle buttons, forms, and remote content still require this feature.</p>
</noscript>
</footer>
<script src="/scripts/javascript_en.js" defer></script>
</body>
</html>