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:

  • X-Content-Type-Options: nosniff
  • X-Frame-Options: DENY
  • Referrer-Policy: no-referrer
  • Content-Security-Policy: default-src 'self'
  • Ensured no conflict with Cloudflare 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

    ← Back to main page