Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@AliiAhmadi
AliiAhmadi committed Feb 8, 2024
1 parent 943db1a commit 599ec2d
Show file tree
Hide file tree
Showing 72 changed files with 1,642 additions and 0 deletions.
1 change: 1 addition & 0 deletions 404.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!doctype html><html lang=en><head><meta charset=utf-8><meta content="width=device-width,initial-scale=1" name=viewport><title>404 Not Found</title><meta content="Ali Ahmadi" name=author><meta content="404 Not Found" name=description><meta content=AliAhmadi2004.ir property=og:site_name><meta content=en-us property=og:locale><meta content="404 Not Found" property=og:title><meta content="404 Not Found" property=og:description><link href=https://fonts.googleapis.com/ rel=dns-prefetch><link href=/site.css rel=stylesheet><link rel="shortcut icon" href=/favicon.svg type=image/svg+xml><body><div class=center><img alt=Me src=/self.jpg width=100></div><main id=content><header><h1>404 Not Found</h1></header><figure><video autoplay controls loop src=404.mp4 type=video/mp4></video><figcaption>Video from <a href=https://www.sakugabooru.com/post/show/165603>sakugabooru</a></figcaption></figure></main><footer><nav><a href=/>Home</a> ⬡ <a href=/posts>Posts</a> ⬡ <a href=/tags>Tags</a> ⬡ <a href=/contact>Contact</a></nav><p>© 2024 Ali Ahmadi ⬡ <a href=https://github.com/AliiAhmadi>Github</a></footer>
Binary file added 404.mp4
View file
Binary file not shown.
48 changes: 48 additions & 0 deletions 50x.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>50x Borked</title>
<meta name="author" content="Ali Ahmadi">
<meta name="description" content="50x Borked">
<meta property="og:site_name" content="AliAhmadi2004.ir">
<meta property="og:locale" content="en-us">
<meta property="og:title" content="50x Borked">
<meta property="og:description" content="50x Borked">
<link rel="dns-prefetch" href="https://fonts.googleapis.com/">
<link rel="stylesheet" href="/site.css">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
</head>
<body>
<main id="content">
<header>
<h1>50[0234] Borked</h1>
</header>
<figure>
<video src="50x.mp4" type="video/mp4" autoplay loop controls></video>
<figcaption>
Video from <a href="https://www.sakugabooru.com/post/show/174648">sakugabooru</a>
</figcaption>
</figure>
</main>
<footer>
<nav>
<a href="/">Home</a>
⬡
<a href="/posts">Posts</a>
⬡
<a href="/tags">Tags</a>
⬡
<a href="/contact">Contact</a>
</nav>
<p>
©
2024 Ali Ahmadi ⬡
<a href="https://github.com/AliiAhmadi">Github</a>
⬡
<a href="/rss.xml">Feed</a>
</p>
</footer>
</body>
</html>
Binary file added 50x.mp4
View file
Binary file not shown.
1 change: 1 addition & 0 deletions contact/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!doctype html><html lang=en><head><meta charset=utf-8><meta content="width=device-width,initial-scale=1" name=viewport><title>Contact</title><meta content="Ali Ahmadi" name=author><meta content="Let's get in touch." name=description><meta content=AliAhmadi2004.ir property=og:site_name><meta content=en-us property=og:locale><meta content=https://AliAhmadi2004.ir/contact/ property=og:url><meta content=Contact property=og:title><meta content="Let's get in touch." property=og:description><link href=https://fonts.googleapis.com/ rel=dns-prefetch><link href=/site.css rel=stylesheet><link rel="shortcut icon" href=/favicon.svg type=image/svg+xml><link href=https://AliAhmadi2004.ir/contact/ rel=canonical><body><div class=center><img alt=Me src=/self.jpg width=100></div><main id=content><header><h1>Contact</h1></header><p>You can find me on GitHub as <a href=https://github.com/AliiAhmadi>@AliiAhmadi</a> and on Telegram as <a href=https://t.me/Alii0Ahmadi>@Alii0Ahmadi</a>. Also you can send me <a href=mailto:ali.ahmadi9@ut.ac.ir>email</a>.</main><footer><nav><a href=/>Home</a> ⬡ <a href=/posts>Posts</a> ⬡ <a href=/tags>Tags</a> ⬡ <a href=/contact>Contact</a></nav><p>© 2024 Ali Ahmadi ⬡ <a href=https://github.com/AliiAhmadi>Github</a></footer>
3 changes: 3 additions & 0 deletions favicon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!doctype html><html lang=en><head><meta charset=utf-8><meta content="width=device-width,initial-scale=1" name=viewport><title>Ali Ahmadi</title><meta content="Ali Ahmadi" name=author><meta content="Ali Ahmadi personal blog" name=description><meta content=AliAhmadi2004.ir property=og:site_name><meta content=en-us property=og:locale><meta content=https://AliAhmadi2004.ir/ property=og:url><meta content="Ali Ahmadi" property=og:title><meta content="Ali Ahmadi personal blog" property=og:description><meta content=profile property=og:type><meta content=https://AliAhmadi2004.ir/self.jpg property=og:image><link href=https://fonts.googleapis.com/ rel=dns-prefetch><link href=/site.css rel=stylesheet><link rel="shortcut icon" href=/favicon.svg type=image/svg+xml><link href=https://AliAhmadi2004.ir/ rel=canonical><body><div class=center><img alt=Me src=/self.jpg width=100></div><main id=content><header><h1>Ali Ahmadi</h1></header><p>Hey, there! I'm Ali. This is <a href=/>my personal blog</a>. My areas of interest are <a href=https://cp-algorithms.com/index.html>algorithm</a>, <a href=https://en.wikipedia.org/wiki/Physical_cosmology>cosmological physics</a>, cyber security and software engineering. I like to share my knowledge with others. I hope you like my <a href=/posts>posts</a>.<p>I spend my free time working on <a href=https://github.com/AliiAhmadi>hobby projects</a> and sometimes I <a href=/posts>write</a> about my experiences.</main><footer><nav><a href=/>Home</a> ⬡ <a href=/posts>Posts</a> ⬡ <a href=/tags>Tags</a> ⬡ <a href=/contact>Contact</a></nav><p>© 2024 Ali Ahmadi ⬡ <a href=https://github.com/AliiAhmadi>Github</a></footer>
22 changes: 22 additions & 0 deletions posts/a-fresh-coat-of-paint/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!doctype html><html lang=en><head><meta charset=utf-8><meta content="width=device-width,initial-scale=1" name=viewport><title>A Fresh Coat of Paint</title><meta content="Ali Ahmadi" name=author><meta content="It's time for something new." name=description><meta content=AliAhmadi2004.ir property=og:site_name><meta content=en-us property=og:locale><meta content=https://AliAhmadi2004.ir/posts/a-fresh-coat-of-paint/ property=og:url><meta content="A Fresh Coat of Paint" property=og:title><meta content="It's time for something new." property=og:description><meta content=article property=og:type><meta content="Ali Ahmadi" property=og:article:author><meta content=2021-12-31T21:04:00-08:00 property=og:article:published_time><meta content=Posts property=og:article:section><meta content=webdev property=og:article:tag><meta content=CSS property=og:article:tag><meta content=HTML property=og:article:tag><link href=https://fonts.googleapis.com/ rel=dns-prefetch><link href=/site.css rel=stylesheet><link rel="shortcut icon" href=/favicon.svg type=image/svg+xml><link href=https://AliAhmadi2004.ir/posts/a-fresh-coat-of-paint/ rel=canonical><body><div class=center><img alt=Me src=/self.jpg width=100></div><main><article id=content><header><h1>A Fresh Coat of Paint</h1><div class=post-meta><time datetime=2021-12-31T21:04:00-08:00>2021-12-31</time><span class=accent> ⬡ </span><a href=https://AliAhmadi2004.ir/tags/webdev/>#webdev</a>, <a href=https://AliAhmadi2004.ir/tags/css/>#CSS</a>, <a href=https://AliAhmadi2004.ir/tags/html/>#HTML</a></div></header><p>I'm starting the new year with a new job. To paraphrase a friend, "it's just moving from one <code>$BIGCORP</code> to another", but it's still exciting. I worked my last gig for 5 years, so I'm nervous, but also very ready to do something new. While I'm doing one new thing I might as well do another. Taking some time off between jobs has given me enough breathing room to redo my website.</p><span id=continue-reading></span><h2 id=new-features><a aria-label="Anchor link for: new-features" href=#new-features></a>New Features</h2><p>If you've been here before you'll probably have noticed a significant visual overhaul. The site is now in dark mode, has a more varied color palette, and is more responsive to differently sized viewports.<p>In addition to the visual changes on this site there are new features as well!<ol><li><p><a href=/posts>Posts</a> now have summaries thanks to Zola's <a href=https://www.getzola.org/documentation/content/page/#summary>summary</a> feature, which allows you to use any content before a <code>&LT!-- more --></code> comment in a page's Markdown.</p><li><p>There are <a href=/tags>tags</a> as well! These were actually always there, but I only put them in post <a href=https://www.getzola.org/documentation/content/page/#front-matter>front matter</a> and didn't expose them on any pages. Tags are supported via Zola's <a href=https://www.getzola.org/documentation/content/taxonomies/>taxonomies</a>, which are much more complicated and powerful than simple tags demand.</p><li><p>The metadata for site pages now includes <a href=https://ogp.me/>Open Graph protocol</a> and <a href=https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup>Twitter card</a> support for a better display in social media.</p></ol><h2 id=what-i-learned><a aria-label="Anchor link for: what-i-learned" href=#what-i-learned></a>What I Learned</h2><p>Every time I update this website I learn something new. I continued to use vanilla HTML and CSS and eschew JavaScript, but was still blown away by how little I know in the webdev space.<p>In the interest of chronicling my newfound knowledge, here are a handful of the things I learned.<ul><li><p>There are a whole lot of <a href=https://developer.mozilla.org/en-US/docs/Glossary/semantics>semantic</a> HTML tags! I was already using tags like <code>&LTarticle></code>, <code>&LTheader></code>, and <code>&LTfooter></code>, but I just learned about the <a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time><code>&LTtime></code></a> tag. This allows human-readable dates to still be parsed by machines with precision.</p> <pre class=language-html data-lang=html style=background:#282828;color:#fdf4c1aa><code class=language-html data-lang=html><span style=color:#83a598><</span><span style=font-weight:700;color:#8ec07c>time </span><span style=color:#8ec07c>datetime=</span><span style=color:#b8bb26>"1970-01-01T00:00:00+00:00"</span><span style=color:#83a598>></span><span>January 1st, 1970</span><span style=color:#83a598>&LT/</span><span style=font-weight:700;color:#8ec07c>time</span><span style=color:#83a598>>
</span></code></pre> <p>I used it for post metadata where I display only the year, month, and day, but put the full <a href=https://en.wikipedia.org/wiki/ISO_8601>ISO-formatted</a> publication date in the <code>datetime</code> attribute.</p><li><p>CSS has variables! This isn't really new, but it's still cool. I had been relying on <a href=https://sass-lang.com/>Sass</a> to keep my CSS <a href=https://en.wikipedia.org/wiki/Don%27t_repeat_yourself>DRY</a>, but I committed more fully to vanilla CSS this go around and was happy to use this feature.</p> <p>For example, with this site, I defined colors in the <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:root><code>:root</code></a> pseudo-class so I could reference them later using <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/var()><code>var</code></a>.</p> <pre class=language-css data-lang=css style=background:#282828;color:#fdf4c1aa><code class=language-css data-lang=css><span style=color:#b8bb26>:</span><span style=color:#8ec07c>root </span><span>{
</span><span> </span><span style=color:#fabd2f>--background-color</span><span>: </span><span style=color:#83a598>#1d2021</span><span>;
</span><span> </span><span style=color:#fabd2f>--foreground-color</span><span>: </span><span style=color:#83a598>#ebdbb2</span><span>;
</span><span>}
</span><span>
</span><span style=font-weight:700;color:#fa5c4b>body </span><span>{
</span><span> </span><span style=color:#8ec07c>background-color</span><span>: </span><span style=color:#fabd2f>var</span><span style=color:#fdf4c1>(</span><span style=color:#fabd2f>--background-color</span><span style=color:#fdf4c1>)</span><span>;
</span><span> </span><span style=color:#8ec07c>color</span><span>: </span><span style=color:#fabd2f>var</span><span style=color:#fdf4c1>(</span><span style=color:#fabd2f>--foreground-color</span><span style=color:#fdf4c1>)</span><span>;
</span><span>}
</span></code></pre><li><p>There's now a <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries>media query</a> for <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme>colorscheme</a>. I ultimately decided not to use it because I wanted a dark website, but I'm glad it exists. Building on the above CSS, you could change background and foreground color based on user preference.</p> <pre class=language-css data-lang=css style=background:#282828;color:#fdf4c1aa><code class=language-css data-lang=css><span style=color:#fa5c4b>@media </span><span>(prefers-</span><span style=color:#fabd2f>color</span><span>-scheme: light) {
</span><span> </span><span style=color:#b8bb26>:</span><span style=color:#8ec07c>root </span><span>{
</span><span> </span><span style=color:#fabd2f>--background-color</span><span>: </span><span style=color:#83a598>#f9f5d7</span><span>;
</span><span> </span><span style=color:#fabd2f>--foreground-color</span><span>: </span><span style=color:#83a598>#3c3836</span><span>;
</span><span> }
</span><span>}
</span></code></pre><li><p>CSS selectors, especially pseudo-class functions, are extremely powerful. Here's the most complex CSS currently used by this site.</p> <pre class=language-css data-lang=css style=background:#282828;color:#fdf4c1aa><code class=language-css data-lang=css><span style=font-style:italic;color:#928374>/* When internal links are linked directly, display with the accent color. */
</span><span style=color:#b8bb26>:</span><span style=color:#8ec07c>where</span><span style=color:#b8bb26>(</span><span style=font-weight:700;color:#fa5c4b>h2</span><span style=color:#b8bb26>, </span><span style=font-weight:700;color:#fa5c4b>h3</span><span style=color:#b8bb26>, </span><span style=font-weight:700;color:#fa5c4b>h4</span><span style=color:#b8bb26>, </span><span style=font-weight:700;color:#fa5c4b>h5</span><span style=color:#b8bb26>, </span><span style=font-weight:700;color:#fa5c4b>h6</span><span>)</span><span style=color:#b8bb26>:</span><span style=color:#8ec07c>target </span><span style=color:#b8bb26>> </span><span style=font-weight:700;color:#fa5c4b>a</span><span style=color:#b8bb26>[</span><span style=color:#8ec07c>href</span><span style=color:#fe8019>^=</span><span style=color:#b8bb26>"#"]::</span><span style=color:#8ec07c>before </span><span>{
</span><span> </span><span style=color:#8ec07c>opacity</span><span>: </span><span style=color:#fabd2f>1</span><span>;
</span><span> </span><span style=color:#8ec07c>color</span><span>: </span><span style=color:#fabd2f>var</span><span style=color:#fdf4c1>(</span><span style=color:#fabd2f>--primary-accent-color</span><span style=color:#fdf4c1>)</span><span>;
</span><span>}
</span></code></pre> <p>It uses the <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:where><code>:where()</code></a> function and an <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors>attribute selector</a> to ensure that all subheadings display an otherwise invisible element when linked to directly, but only when they're internal links! Being able to specify that kind of logic in a declarative form is neat stuff.</p><li><p>Invisible whitespace in your HTML continues to be an enormous source of pain. My anchor tag template (the thing that makes the <code>#</code> display to the left of headings when you hover over them) had a newline at the end of the file. The newline was interpolated into the output as an extra node, which caused all headings to subtly shift right. I nearly tore my hair out fixing that bug.</p></ul><p>I've no doubt that I've committed some grave CSS sins with this revamp. Nevertheless, I enjoyed seeing what's possible and the important part is that the site works. 😅<h2 id=inspiration><a aria-label="Anchor link for: inspiration" href=#inspiration></a>Inspiration</h2><p>I would be remiss not to mention the people who inpired these changes. The colorscheme uses a subset of <a href=https://github.com/morhetz>Pavel Pertsev</a>'s <a href=https://github.com/morhetz/gruvbox>gruvbox</a>, which I've used as my syntax highlighting theme for years. Post metadata was modeled after <a href=https://lexi-lambda.github.io/>Alexis King</a>'s site. I borrowed ideas for the Open Graph and Twitter card support from <a href=https://andrew.kvalhe.im/>Andrew Kvalheim</a> and <a href=https://fasterthanli.me/>Amos Wenger</a>.<p><a href=https://ruudvanasseldonk.com/>Ruud van Asseldonk</a> deserves the lion's share of credit for these changes. I spent <strong>hours</strong> learning from their <a href=https://github.com/ruuda/blog/blob/e02b663d76dc882952aec37319cafde221695ada/templates/page.css>meticulously crafted CSS</a>. This update wouldn't have been possible without everything I learned from them.</article></main><footer><nav><a href=/>Home</a> ⬡ <a href=/posts>Posts</a> ⬡ <a href=/tags>Tags</a> ⬡ <a href=/contact>Contact</a></nav><p>© 2024 Ali Ahmadi ⬡ <a href=https://github.com/AliiAhmadi>Github</a></footer>
Loading

0 comments on commit 599ec2d

Please sign in to comment.