Spetsura@terminal:~$ nano site_build_notes.txt
[0] VPS provisioning on Oracle Cloud (Free Tier instance)
- Registered an Oracle Cloud account and activated the Always Free Tier.
- Created a VM instance (Ubuntu 22.04), picking a region with available resources.
- Set up SSH access and updated the system (apt update && apt upgrade).
- Installed UFW, opened ports 22 (SSH), 80 and 443 (HTTP/HTTPS).
[1] Domain registration, DNS setup, Cloudflare integration, HTTPS
- Bought the domain spetsura.com via Dynadot.
- Connected it to Cloudflare (free tier) and configured DNS (A-record pointing to the VPS).
- Enabled proxying and generated an Origin SSL certificate via Cloudflare.
- Deployed the certificate to /etc/ssl/cloudflare/ and configured Nginx for HTTPS.
[2] Ubuntu setup: Nginx, systemd, firewall config
- Installed Nginx via apt, configured site block in /etc/nginx/sites-available/default.
- Added HTTP → HTTPS redirect, enabled gzip compression and basic caching headers.
- Enabled systemd service and ensured Nginx autostarts on boot.
- Configured UFW rules with `ufw allow 'Nginx Full'` and basic security settings.
[3] Manual HTML/CSS structure, no frameworks, responsive layout
- Built the entire HTML/CSS layout from scratch without using templates or frameworks.
- Designed the site in a terminal-style aesthetic, using only plain HTML and CSS.
- Implemented responsive design with media queries.
- Created a modular style.v5.css and linked it using cache-busting (?v=9999).
[4] Scroll-triggered animations with IntersectionObserver
- Used the IntersectionObserver API to animate sections on scroll.
- Elements with .hidden class are revealed by toggling .visible when they enter the viewport.
- Applied to sections like #about-me, #work-experience, and #certifications.
- All handled with plain JavaScript — no libraries involved.
[5] Dynamic adaptation for mobile devices
- Refactored mobile layout to support small screen sizes (tested on iPhone 12 Pro).
- Fixed scroll lock issue caused by intro animation + menu visibility.
- Introduced burger menu with animated transitions and proper open/close logic.
- Hid "About me" section on first screen — now appears on scroll with `slide-up` and `fade-in` animations.
- Verified adaptive behavior of interactive tabs and terminal UI on narrow viewports.
[6] Added a /resume page
- Created a new route `/resume` as a standalone page.
- Designed in light theme by default, with support for toggling to "terminal" (dark) mode.
- Populate it with structured professional resume and download button.
[7] Security basics
- Disabled root login over SSH: `PermitRootLogin no`
- Disabled password authentication: `PasswordAuthentication no`
- All SSH access now strictly over private key. SSH remains on port 22.
- No public login forms or admin panels exposed — no attack surface for bruteforce.
- Decided **not to install Fail2Ban** — no password auth = nothing to protect.
- Firewall layer already enforced via Cloudflare proxy.
- Hardened nginx config with essential security headers:
[8] Server metrics via Netdata
- Deployed real-time server monitoring using Netdata on a dedicated subdomain: `netdata.spetsura.com`
- Tracks core metrics: CPU, RAM, disk I/O, network traffic, system load, and active processes.
- Integrated Telegram alerts for critical conditions — I get notified instantly if something goes wrong.
- Traffic is proxied through Cloudflare to hide the server's origin IP.
- Direct access is restricted by IP allowlist — only trusted IPs can reach the interface.
[9] Editing and deploying, cache busting, GitHub integration
- I currently edit and deploy manually using WebStorm, pushing changes directly to the VPS over SFTP/SSH.
- Implemented basic cache busting with query strings (?v=9999) for styles and assets.
- I plan to eventually set up proper CI/CD using GitHub Actions or a similar tool to automate deployments, ensure version integrity, and streamline the publishing process.
[10] Lessons learned and potential improvements
- Proved to myself I can build and deploy a website from scratch without any frameworks.
- Improved my CSS and layout skills, especially around responsiveness.
- Worked with Cloudflare, SSL, and domain-level configurations.
Next steps I’m considering:
- Including a sitemap and better SEO structure
- Eventually building a mini admin interface for dynamic content