Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@ariaattar
ariaattar authored Oct 20, 2024
1 parent 7dbb9e9 commit 0c9cd38
Showing 1 changed file with 98 additions and 84 deletions.
182 changes: 98 additions & 84 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,139 +3,151 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aria Attar - Personal Blog</title>
<title>{{ page.title }} - Aria Attar</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<style>
* {
transition: background-color 0.2s ease;
}

/* Base styles */
body {
font-family: "Times New Roman", Times, serif;
line-height: 1.6;
color: #ffffff;
background-color: #1a1a1a;
color: #000000;
background-color: #ffffff;
max-width: 800px;
margin: 0 auto;
padding: 20px;
transition: background-color 0.2s ease, color 0.2s ease;
}

/* Dark mode styles */
body.dark-mode {
color: #ffffff;
background-color: #1a1a1a;
}

/* Header styles */
header {
text-align: center;
margin-bottom: 40px;
}
h1 {
color: #ffffff;

h1, h2 {
font-weight: normal;
}
h2 {
font-weight: normal;

/* Navigation styles */
nav a {
margin: 0 10px;
text-decoration: none;
color: inherit;
}
.bio {
background-color: #2c2c2c;

/* Main content styles */
main {
background-color: #f4f4f4;
padding: 20px;
border-radius: 5px;
margin-bottom: 30px;
}
.blog-posts {
display: grid;
gap: 20px;
}
.post {
border: 1px solid #444;
padding: 15px;
border-radius: 5px;

body.dark-mode main {
background-color: #2c2c2c;
}

/* Footer styles */
footer {
text-align: center;
margin-top: 40px;
color: #ffffff;
}

body.light-mode {
background-color: #ffffff;
color: #000000;
}
body.light-mode h1,
body.light-mode h2 {
color: #000000;
}
body.light-mode .bio {
background-color: #f4f4f4;
}
body.light-mode .post {
border-color: #ddd;
}
body.light-mode footer {
color: #000000;
}
body.light-mode #theme-toggle {
background-color: #f0f0f0;
color: #000000;
}
body.light-mode a {
color: #000000;
}

/* Theme toggle button styles */
#theme-toggle {
position: fixed;
top: 20px;
right: 20px;
padding: 10px;
background-color: #2c2c2c;
color: #ffffff;
background-color: #f0f0f0;
color: #000000;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

a {
body.dark-mode #theme-toggle {
background-color: #2c2c2c;
color: #ffffff;
}

/* Link styles */
a {
color: #0066cc;
text-decoration: underline;
}

body.dark-mode a {
color: #ffffff;
color: #66b3ff;
}

/* Markdown content styles */
.markdown-content {
font-family: 'Inter', sans-serif;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
font-family: "Times New Roman", Times, serif;
margin-top: 1.5em;
margin-bottom: 0.5em;
}

.markdown-content p,
.markdown-content ul,
.markdown-content ol {
margin-bottom: 1em;
}

.markdown-content code {
font-family: monospace;
background-color: #f0f0f0;
padding: 2px 4px;
border-radius: 3px;
}

body.dark-mode .markdown-content code {
background-color: hsl(0, 0%, 0%);
}

.markdown-content pre {
background-color: #f0f0f0;
padding: 1em;
border-radius: 5px;
overflow-x: auto;
}

body.dark-mode .markdown-content pre {
background-color: #333333;
}
</style>
</head>
<body>
<button id="theme-toggle">Toggle Light Mode</button>
<button id="theme-toggle">Toggle Dark Mode</button>

<header>
<h1>Aria Attar</h1>
<p>Co-founder and CEO of <a href="https://tensorstax.com" target="_blank">TensorStax</a></p>
<nav>
<a href="/">Home</a> |
<a href="/about">About</a> |
<a href="/blog">Blog</a> |
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/blog">Blog</a>
<a href="/projects">Projects</a>
</nav>
</header>

<main>
<section class="bio">
<h2>About Me</h2>
<p>Welcome to my personal blog! I'm Aria Attar, the co-founder and CEO of TensorStax. Here, I share my thoughts on random topics including engineering, entrepreneurship, politics, and more.</p>
</section>

<section class="blog-posts">
<h2>Recent Blog Posts</h2>
<ul>
{% for post in site.posts limit:5 %}
<li>
<h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
<p>{{ post.date | date: "%B %d, %Y" }}</p>
{% if post.description %}
<p>{{ post.description }}</p>
{% else %}
<p>{{ post.excerpt | strip_html | truncatewords: 50 }}</p>
{% endif %}
</li>
{% endfor %}
</ul>
{% if site.posts.size > 5 %}
<p><a href="/blog">View all posts</a></p>
{% endif %}
</section>
<main class="markdown-content">
{{ content }}
</main>

<footer>
Expand All @@ -150,15 +162,17 @@ <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

// Set initial state to dark mode
body.classList.add('dark-mode');
themeToggle.textContent = 'Toggle Light Mode';
// Check for saved theme preference or default to light mode
const savedTheme = localStorage.getItem('theme') || 'light';
body.classList.add(savedTheme + '-mode');
themeToggle.textContent = savedTheme === 'light' ? 'Toggle Dark Mode' : 'Toggle Light Mode';

themeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
body.classList.toggle('light-mode');
const isDarkMode = body.classList.contains('dark-mode');
themeToggle.textContent = isDarkMode ? 'Toggle Light Mode' : 'Toggle Dark Mode';
localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
});
</script>
</body>
Expand Down

0 comments on commit 0c9cd38

Please sign in to comment.