← back
// personal project · 2026

Portfolio Website

Personal cybersecurity & developer portfolio — built from scratch without frameworks, deployed on a hardened VPS with full security stack.

Production Vanilla JS Self-hosted HTTPS Open Source
Overview
project_info.sh

$ cat overview.txt

> Name: unicorn-web.ru

> Type: Personal Portfolio

> Purpose: Showcase skills, certifications, experience and projects

> Audience: Recruiters, HR, fellow developers

> Design: Terminal / Cyberpunk aesthetic


$ cat philosophy.txt

> No frameworks — pure HTML, CSS, Vanilla JS

> No CDN dependencies — fully self-contained

> Works offline after first load

> Fast, lightweight, no bloat

> Production-grade security from day one


$ _|

Tech Stack
Frontend
HTML5
Semantic markup, accessible structure, no template engine
Frontend
CSS3
Grid, Flexbox, animations, custom properties, responsive design
Frontend
Vanilla JS
IntersectionObserver, Canvas API, Fetch API — no jQuery, no React
Backend
Python 3.13
Contact form handler — Flask micro-server on localhost:5055
Backend
Flask 3.0
REST endpoint /contact with rate limiting, CORS, email validation
Notifications
Telegram Bot API
Contact form submissions delivered via bot to private chat
Server
Nginx 1.24
Reverse proxy, static file serving, rate limiting, security headers
Server
Ubuntu 24.04 LTS
VPS on u1host — 29GB SSD, systemd services, auto-updates
SSL
Let's Encrypt
Free SSL certificate via Certbot — auto-renewal every 90 days
Features
Terminal boot screen — ASCII art animation on first load, skippable by any key
Radar chart — Canvas-drawn skills spider chart with entrance animation
Animated counters — stats count from 0 on scroll into view
Scroll progress bar — purple-to-cyan gradient bar at page top
IntersectionObserver animations — fade-in and skill bars animate on scroll
Contact form → Telegram — messages arrive in real-time via bot
Copy to clipboard — email, Telegram handle one-click copy
Companies carousel — paginated cards with fade transition
Certifications grid — clickable cards opening detail sub-pages
Page transitions — smooth fade overlay between main and sub-pages
Back-to-top button — appears after 300px scroll, smooth return
Active nav highlight — current section highlighted in navbar on scroll
Custom 404 page — terminal-style error page with ASCII art
CV download — one-click PDF resume download from hero section
Responsive design — works on mobile, tablet and desktop
Security Measures
HTTPS + HSTS — Let's Encrypt SSL, HTTP→HTTPS redirect, 1-year HSTS header
Content-Security-Policy — restricts script/style/img sources, blocks inline injection
X-Frame-Options: DENY — prevents clickjacking via iframe embedding
Rate limiting — nginx: 5 req/min per IP on /contact; Flask: own in-memory limiter
Fail2ban — auto-ban IPs after 5 failed SSH attempts within 10 minutes
UFW Firewall — only ports 80, 443, 22 open; all other traffic blocked
CORS restriction — /contact endpoint only accepts requests from unicorn-web.ru
Server info hidden — nginx version concealed, ETag inode disabled
Permissions-Policy — camera, microphone, geolocation blocked for all
Bot token protection — Telegram token stored server-side in .env (chmod 600)
Email validation — regex validation on Flask side before forwarding
SSH key authentication — server access via ed25519 key pair, no password
Project Stats
8
Main sections
6
Certifications
5
Companies
11
Sub-pages
0
JS libraries
12
Security headers
How It Was Built
Design concept
Chose terminal/cyberpunk aesthetic to match cybersecurity specialization. Defined color palette: deep black #121212, neon purple #ae00ff, cyan #00D9FF.
Core structure
Built single-page layout with 8 sections. Implemented boot screen animation, navigation with smooth scroll and IntersectionObserver-based active highlighting.
Interactive features
Added Canvas radar chart for skills, animated counters, scroll progress bar, skill bars with animation, companies carousel with pagination, page transitions.
Backend & contact form
Built Flask micro-server for contact form. Telegram Bot API integration. Rate limiting, CORS, email validation, IP logging in notifications.
Deployment & hardening
Deployed on Ubuntu 24.04 VPS. Configured Nginx reverse proxy, Let's Encrypt SSL, UFW firewall, Fail2ban, all security headers. SSH key-based access.
Ongoing improvements
Content updates, new certifications, responsive design improvements, performance optimizations and security audits.
Links
links.sh

$ cat links.txt

> Live site: https://unicorn-web.ru

> GitHub: github.com/unicorn-rm

> Contact: @yaroslav_mv

© 2026 unicorn — built with pure HTML, CSS & JS  ·  ← return home