init: Restart blog
Bootstrapped the site from scratch following a data loss event. Set up a simple HTML/CSS page served from nginx. Added a navbar with the index page anchored in the top-left, a blog page link, and a link to the Forgejo instance. Added contact info and a genealogy blurb to the index page. Added an example resume page linked from the navbar.
This commit is contained in:
commit
00a73b421b
12 changed files with 791 additions and 0 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
blog/*
|
||||
27
404.html
Normal file
27
404.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>404 - Page Not Found</title>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/includes/navbar.html" -->
|
||||
|
||||
<main class="container">
|
||||
<section class="hero">
|
||||
<h1>404 - Page Not Found</h1>
|
||||
<p>The page you're looking for doesn't exist.</p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>What happened?</h2>
|
||||
<p>The page you requested could not be found. It may have been moved, deleted, or never existed.</p>
|
||||
<p><a href="/" style="color: #3498db; text-decoration: none; font-weight: bold;">← Go back to homepage</a></p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/includes/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
35
README.md
Normal file
35
README.md
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
# WWW
|
||||
|
||||
Www is my personal website, blog project, and portfolio page.
|
||||
It should be available at https://wwww.binning.dev
|
||||
|
||||
# History
|
||||
|
||||
## 2025-02-28
|
||||
|
||||
I restarted this in [Rocket](https://rocket.rs) after yet another data loss event.
|
||||
|
||||
## 2024-06-21
|
||||
|
||||
I migrated from cgit to forgejo and from kuberentes to simply nginx.
|
||||
|
||||
## 2023-10-07
|
||||
|
||||
I merged the deployment repository into this one.
|
||||
I also moved to self-hosting at some point.
|
||||
|
||||
## 2022-01-05
|
||||
|
||||
I moved hosting to Vultr and moved to a Cobalt.
|
||||
One neat command to unhide files was:
|
||||
|
||||
`for i in \.*; do if [ ${i} != '.' ] && [ ${i} != '..' ]; then mv {.,}${i/\./} ; fi; done;`
|
||||
|
||||
## 2018-12-16
|
||||
|
||||
I started this blog with [Namecheap][Namecheap], [Ruby][Ruby], [Jekyll][Jekyll], and [Github-Pages][Github-Pages].
|
||||
|
||||
[Namecheap]: https://www.namecheap.com/
|
||||
[Ruby]: https://www.ruby-lang.org/
|
||||
[Jekyll]: https://jekyllrb.com/
|
||||
[Github-Pages]: https://pages.github.com/
|
||||
89
blog.html
Normal file
89
blog.html
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Blog - WWW</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/includes/navbar.html" -->
|
||||
|
||||
<main class="container">
|
||||
<section class="hero">
|
||||
<h1>Blog</h1>
|
||||
<p>Stories, adventures, and reflections from life's journey</p>
|
||||
</section>
|
||||
|
||||
<!-- The Copper Chronicle Section -->
|
||||
<section class="content-section">
|
||||
<h2>The Copper Chronicle</h2>
|
||||
<p class="section-description">Adventures and travels with Copper, exploring the beautiful outdoors.</p>
|
||||
<div class="blog-grid">
|
||||
<article class="blog-card">
|
||||
<h3><a href="/blog/copper-chronicle/big-sur.html">Big Sur Adventure</a></h3>
|
||||
<p class="blog-meta">April 2024</p>
|
||||
<p>Exploring the stunning coastline and trails of Big Sur with Copper.</p>
|
||||
</article>
|
||||
<article class="blog-card">
|
||||
<h3><a href="/blog/copper-chronicle/dove-hunting.html">Dove Hunting</a></h3>
|
||||
<p class="blog-meta">September 2024</p>
|
||||
<p>A day in the field with friends, shotguns, and good company.</p>
|
||||
</article>
|
||||
<article class="blog-card">
|
||||
<h3><a href="/blog/copper-chronicle/shasta-trip.html">Shasta & Dunsmuir</a></h3>
|
||||
<p class="blog-meta">September 2024</p>
|
||||
<p>Mountain adventures in Northern California.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Life & Reflections Section -->
|
||||
<section class="content-section">
|
||||
<h2>Life & Reflections</h2>
|
||||
<p class="section-description">Personal thoughts and journeys on health, faith, and life.</p>
|
||||
<div class="blog-grid">
|
||||
<article class="blog-card private">
|
||||
<h3><a href="/blog/health-journey.html">Health Journey</a></h3>
|
||||
<p class="blog-meta">Private Article</p>
|
||||
<p>Reflections on physical and mental wellness.</p>
|
||||
<span class="private-badge">🔒 Private</span>
|
||||
</article>
|
||||
<article class="blog-card private">
|
||||
<h3><a href="/blog/faith-journey.html">Faith Journey</a></h3>
|
||||
<p class="blog-meta">Private Article</p>
|
||||
<p>Personal spiritual reflections and growth.</p>
|
||||
<span class="private-badge">🔒 Private</span>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Events & Experiences Section -->
|
||||
<section class="content-section">
|
||||
<h2>Events & Experiences</h2>
|
||||
<p class="section-description">Special moments and memorable experiences.</p>
|
||||
<div class="blog-grid">
|
||||
<article class="blog-card private">
|
||||
<h3><a href="/blog/defcon.html">DefCon</a></h3>
|
||||
<p class="blog-meta">Private Article</p>
|
||||
<p>Notes and reflections from DefCon.</p>
|
||||
<span class="private-badge">🔒 Private</span>
|
||||
</article>
|
||||
<article class="blog-card private">
|
||||
<h3><a href="/blog/oktoberfest.html">Oktoberfest</a></h3>
|
||||
<p class="blog-meta">Private Article</p>
|
||||
<p>Celebrating traditions and community.</p>
|
||||
<span class="private-badge">🔒 Private</span>
|
||||
</article>
|
||||
<article class="blog-card">
|
||||
<h3><a href="/blog/independence-day.html">Independence Day</a></h3>
|
||||
<p class="blog-meta">July 2024</p>
|
||||
<p>A celebration of freedom and fireworks.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/includes/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
15
deploy.sh
Executable file
15
deploy.sh
Executable file
|
|
@ -0,0 +1,15 @@
|
|||
#!/usr/bin/env sh
|
||||
|
||||
sudo cp -rt /srv/www/binning.net \
|
||||
blog \
|
||||
includes \
|
||||
index.html \
|
||||
blog.html \
|
||||
resume.html \
|
||||
style.css \
|
||||
404.html
|
||||
|
||||
sudo chown -R nginx:nginx /srv/www/binning.net/
|
||||
|
||||
sudo cp -t /etc/nixos/ \
|
||||
nginx.nix
|
||||
3
includes/footer.html
Normal file
3
includes/footer.html
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<footer class="footer">
|
||||
<p>© 2025 WWW - Built with simple HTML and CSS</p>
|
||||
</footer>
|
||||
10
includes/navbar.html
Normal file
10
includes/navbar.html
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<a href="/" class="nav-brand">Home</a>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="/blog.html">Blog</a></li>
|
||||
<li><a href="/resume.html">Resume</a></li>
|
||||
<li><a href="https://forgejo.binning.net" target="_blank">Forgejo</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
37
index.html
Normal file
37
index.html
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WWW - Personal Website</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/includes/navbar.html" -->
|
||||
|
||||
<main class="container">
|
||||
<section class="hero">
|
||||
<h1>Welcome</h1>
|
||||
<p>This is my personal website and blog.</p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>About & Contact</h2>
|
||||
<div class="contact-info">
|
||||
<p><strong>Email:</strong> example@example.com</p>
|
||||
<p>Feel free to reach out via email for any inquiries.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Genealogy</h2>
|
||||
<div class="genealogy-blurb">
|
||||
<p>I am interested in family history and genealogy. This website serves as a personal space to share stories, chronicles, and musings about life's journey, adventures, and family heritage.</p>
|
||||
<p>The Copper Chronicle contains stories and memories from various trips and experiences. More to come as this site develops.</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/includes/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
140
nginx.nix
Normal file
140
nginx.nix
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
{ config, pkgs, lib, ... }:
|
||||
|
||||
let
|
||||
# Read multiple API keys from the secrets file at build time
|
||||
# Note: This embeds the secrets in the Nix store, which is a trade-off
|
||||
# Alternative: Keep secrets file and read via njs module or external auth service
|
||||
secretsFile = "/srv/nginx/secrets";
|
||||
|
||||
# Read API keys from file (one key per line, will be evaluated at build time)
|
||||
# If the file doesn't exist yet, this will fail - create it first
|
||||
apiKeysRaw = builtins.readFile secretsFile;
|
||||
apiKeys = lib.filter (k: k != "") (lib.splitString "\n" apiKeysRaw);
|
||||
|
||||
# Generate map entries for each key
|
||||
mapEntries = lib.concatMapStringsSep "\n "
|
||||
(key: ''"Bearer ${key}" "authorized";'')
|
||||
apiKeys;
|
||||
|
||||
in
|
||||
{
|
||||
services.nginx = {
|
||||
enable = true;
|
||||
|
||||
# Recommended settings
|
||||
recommendedGzipSettings = true;
|
||||
recommendedOptimisation = true;
|
||||
recommendedProxySettings = true;
|
||||
recommendedTlsSettings = true;
|
||||
|
||||
# Increase bucket size for long Bearer tokens
|
||||
mapHashBucketSize = 128;
|
||||
|
||||
# Map directive to check Authorization header against multiple keys
|
||||
appendHttpConfig = ''
|
||||
# Check if the Authorization header matches any expected value
|
||||
map $http_authorization $auth_status {
|
||||
default "unauthorized";
|
||||
"" "no_auth";
|
||||
${mapEntries}
|
||||
}
|
||||
'';
|
||||
|
||||
# Virtual hosts configuration
|
||||
virtualHosts = {
|
||||
|
||||
# Main website - Static HTML/CSS
|
||||
"www.binning.net" = {
|
||||
enableACME = true;
|
||||
forceSSL = true;
|
||||
|
||||
root = "/srv/www/binning.net";
|
||||
|
||||
locations."/" = {
|
||||
index = "index.html";
|
||||
tryFiles = "$uri $uri/ =404";
|
||||
extraConfig = ''
|
||||
# Enable Server Side Includes for navbar/footer includes
|
||||
ssi on;
|
||||
'';
|
||||
};
|
||||
|
||||
# Optional: Custom 404 page
|
||||
extraConfig = ''
|
||||
error_page 404 /404.html;
|
||||
'';
|
||||
};
|
||||
|
||||
# Ollama with Bearer token authentication
|
||||
"ollama.binning.net" = {
|
||||
enableACME = true;
|
||||
forceSSL = true;
|
||||
|
||||
locations."/" = {
|
||||
extraConfig = ''
|
||||
# Check auth status
|
||||
if ($auth_status = "no_auth") {
|
||||
return 401 "Unauthorized: Bearer token required\n";
|
||||
}
|
||||
if ($auth_status = "unauthorized") {
|
||||
return 403 "Forbidden: Invalid API key\n";
|
||||
}
|
||||
|
||||
# Proxy to Ollama (only if authorized)
|
||||
proxy_pass http://localhost:11434;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
|
||||
# Timeouts for long-running requests
|
||||
proxy_read_timeout 300s;
|
||||
proxy_connect_timeout 300s;
|
||||
proxy_send_timeout 300s;
|
||||
|
||||
# Allow large request bodies
|
||||
client_max_body_size 100M;
|
||||
|
||||
# Logging
|
||||
access_log /var/log/nginx/ollama_access.log;
|
||||
error_log /var/log/nginx/ollama_error.log;
|
||||
'';
|
||||
};
|
||||
};
|
||||
|
||||
# Forgejo
|
||||
"forgejo.binning.net" = {
|
||||
enableACME = true;
|
||||
forceSSL = true;
|
||||
|
||||
locations."/" = {
|
||||
proxyPass = "http://127.0.0.1:3000";
|
||||
# No extraConfig needed - recommendedProxySettings handles headers
|
||||
};
|
||||
};
|
||||
|
||||
# Radicale
|
||||
"radicale.binning.net" = {
|
||||
enableACME = true;
|
||||
forceSSL = true;
|
||||
|
||||
locations."/" = {
|
||||
proxyPass = "http://127.0.0.1:5232";
|
||||
# recommendedProxySettings handles most headers
|
||||
extraConfig = ''
|
||||
proxy_set_header X-Script-Name "";
|
||||
'';
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
# Firewall
|
||||
networking.firewall.allowedTCPPorts = [ 80 443 ];
|
||||
|
||||
# ACME/Let's Encrypt
|
||||
security.acme = {
|
||||
acceptTerms = true;
|
||||
defaults.email = "hvanb@pm.me";
|
||||
};
|
||||
}
|
||||
122
resume.html
Normal file
122
resume.html
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Resume - WWW</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/includes/navbar.html" -->
|
||||
|
||||
<main class="container">
|
||||
<section class="hero">
|
||||
<h1>Resume</h1>
|
||||
<p>Professional Experience & Skills</p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Summary</h2>
|
||||
<p>Experienced software engineer with expertise in systems engineering, cloud infrastructure, and full-stack development. Passionate about building reliable, scalable solutions using modern technologies.</p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Technical Skills</h2>
|
||||
<div class="skills-grid">
|
||||
<div class="skill-category">
|
||||
<h3>Languages</h3>
|
||||
<ul>
|
||||
<li>Rust</li>
|
||||
<li>Python</li>
|
||||
<li>Go</li>
|
||||
<li>JavaScript/TypeScript</li>
|
||||
<li>HTML/CSS</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="skill-category">
|
||||
<h3>Systems & Infrastructure</h3>
|
||||
<ul>
|
||||
<li>Linux/NixOS</li>
|
||||
<li>Docker</li>
|
||||
<li>Nginx</li>
|
||||
<li>Git</li>
|
||||
<li>CI/CD</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="skill-category">
|
||||
<h3>Frameworks & Tools</h3>
|
||||
<ul>
|
||||
<li>Rocket (Rust)</li>
|
||||
<li>React</li>
|
||||
<li>Node.js</li>
|
||||
<li>PostgreSQL</li>
|
||||
<li>RESTful APIs</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Professional Experience</h2>
|
||||
|
||||
<div class="experience-item">
|
||||
<h3>Software Engineer</h3>
|
||||
<p class="job-meta">Example Company • 2020 - Present</p>
|
||||
<ul>
|
||||
<li>Designed and implemented scalable backend services using Rust and Python</li>
|
||||
<li>Managed infrastructure using NixOS and containerization technologies</li>
|
||||
<li>Built and maintained CI/CD pipelines for automated testing and deployment</li>
|
||||
<li>Collaborated with cross-functional teams to deliver high-quality software solutions</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="experience-item">
|
||||
<h3>Systems Administrator</h3>
|
||||
<p class="job-meta">Previous Company • 2018 - 2020</p>
|
||||
<ul>
|
||||
<li>Maintained Linux-based server infrastructure and monitoring systems</li>
|
||||
<li>Automated routine tasks using shell scripting and Python</li>
|
||||
<li>Implemented security best practices and access control policies</li>
|
||||
<li>Provided technical support and documentation for development teams</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Education</h2>
|
||||
<div class="experience-item">
|
||||
<h3>Bachelor of Science in Computer Science</h3>
|
||||
<p class="job-meta">University Name • 2014 - 2018</p>
|
||||
<p>Focus on software engineering, algorithms, and systems programming.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Projects</h2>
|
||||
<div class="experience-item">
|
||||
<h3>Self-Hosted Infrastructure</h3>
|
||||
<p>Designed and deployed a complete self-hosted solution including:</p>
|
||||
<ul>
|
||||
<li>Git hosting with Forgejo</li>
|
||||
<li>Web server with Nginx and SSL/TLS</li>
|
||||
<li>Calendar and contacts sync with Radicale</li>
|
||||
<li>Declarative configuration management with NixOS</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="experience-item">
|
||||
<h3>Personal Website & Blog</h3>
|
||||
<p>Built a simple, reliable website using primitive technologies (HTML/CSS) focused on performance and maintainability.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Contact</h2>
|
||||
<p><strong>Email:</strong> example@example.com</p>
|
||||
<p><strong>GitHub:</strong> <a href="https://forgejo.binning.net" target="_blank">forgejo.binning.net</a></p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/includes/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
305
style.css
Normal file
305
style.css
Normal file
|
|
@ -0,0 +1,305 @@
|
|||
/* CSS Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* Navbar Styles */
|
||||
.navbar {
|
||||
background-color: #2c3e50;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav-brand:hover {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-menu a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-menu a:hover {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
/* Main Container */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
background-color: #fff;
|
||||
padding: 3rem 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2.5rem;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.2rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* Content Section */
|
||||
.content-section {
|
||||
background-color: #fff;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.content-section h2 {
|
||||
color: #2c3e50;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border-bottom: 3px solid #3498db;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.contact-info p,
|
||||
.genealogy-blurb p {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.8;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.contact-info strong {
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
background-color: #2c3e50;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Blog Styles */
|
||||
.section-description {
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.blog-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.blog-card {
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.blog-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.blog-card h3 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.blog-card h3 a {
|
||||
color: #2c3e50;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.blog-card h3 a:hover {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.blog-meta {
|
||||
color: #999;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.blog-card p {
|
||||
color: #555;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.blog-card.private {
|
||||
border-color: #f39c12;
|
||||
background-color: #fff9f0;
|
||||
}
|
||||
|
||||
.private-badge {
|
||||
display: inline-block;
|
||||
background-color: #f39c12;
|
||||
color: #fff;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Resume Styles */
|
||||
.skills-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.skill-category h3 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.2rem;
|
||||
border-bottom: 2px solid #3498db;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.skill-category ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.skill-category li {
|
||||
padding: 0.5rem 0;
|
||||
color: #555;
|
||||
position: relative;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.skill-category li:before {
|
||||
content: "▸";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #3498db;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.experience-item {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.experience-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.experience-item h3 {
|
||||
color: #2c3e50;
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.job-meta {
|
||||
color: #999;
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 1rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.experience-item ul {
|
||||
margin-top: 1rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.experience-item li {
|
||||
color: #555;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.experience-item p {
|
||||
color: #555;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.nav-container {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.content-section h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.blog-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.skills-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
7
www.code-workspace
Normal file
7
www.code-workspace
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"folders": [
|
||||
{
|
||||
"path": "."
|
||||
}
|
||||
]
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue