My Website, feel free to use for your own
- HTML 60.2%
- CSS 21.9%
- JavaScript 16.9%
- PHP 1%
| assets | ||
| css | ||
| js | ||
| .gitignore | ||
| .htaccess | ||
| 400.html | ||
| 403.html | ||
| 404.html | ||
| 422.html | ||
| 500.html | ||
| 502.html | ||
| 503.html | ||
| contact.php | ||
| dream-fragment-02.html | ||
| dream-fragment-03.html | ||
| dream-fragment.html | ||
| epilogue.html | ||
| index.html | ||
| LICENSE | ||
| privacy.html | ||
| README.md | ||
| robots.txt | ||
| sitemap.xml | ||
| terms.html | ||
🐱💻 Rinanyae Website
A cyberpunk-themed personal website for rinanyae.com, operated by ArcaneNeko.
🎨 Features
- Cyberpunk Theme: Electric blue + crimson palette with glow styling
- Animated Effects: Matrix rain, scan lines, particles, glitch, and hologram accents
- Interactive UI: Smooth scrolling, hover effects, card glow, typing animation
- Responsive Layout: Desktop-first design with mobile adjustments
- Project + Link Branding: ArcaneNeko/NeoVoxis/VRChat icons from
assets/icons/ - Legal + Deployment Ready: Privacy, Terms,
robots.txt,sitemap.xml,.htaccess, and custom error pages
🚀 Quick Start
- Open
index.htmlin a browser for quick visual checks - For full behavior (especially contact form), run via a local server with PHP support
- Edit content in
index.html, then tune styles/scripts in thecss/andjs/folders
📝 Customization Guide
Updating Personal Information
About Section
- Edit text in
#about - Update skills inside
.skills-grid
Projects Section
- Duplicate
.project-cardblocks to add more projects - Update project title, description, status badge, and tech tags
Links Section
- Update
hrefvalues for each link item - For placeholder links (like VRChat coming soon), keep
href="#"plusdata-coming-soon="true"to preserve themed popup behavior
Contact Form
- Form posts to
contact.php - Includes a simple anti-spam math captcha and async submit
- If backend route changes, update form action accordingly
Color Customization
Color variables are in css/base.css under :root.
Key variables:
--crimson--electric-blue--deep-blue--black
Font Customization
Fonts are loaded from Google Fonts in page <head>:
- Orbitron
- Inter
- Fira Code
Update imports and matching CSS variables in css/base.css if needed.
🎯 Interactive Features
- Navigation smooth-scroll to sections
ENTER THE DENbutton scrolls to About- Themed popup for placeholder links (e.g. VRChat coming soon)
- Card reveal/hover effects
- Konami code easter egg (
↑ ↑ ↓ ↓ ← → ← → B A)
📱 Mobile Notes
- Navigation wraps on smaller screens
- Character frame scales down for mobile
- Link cards use tighter spacing and typography on mobile
- Matrix effect opacity is reduced on mobile for readability
🛠️ Technical Details
Technologies Used
- HTML5
- CSS3 (modular)
- Vanilla JavaScript (modular)
- PHP (contact form backend)
CSS Modules
css/styles.css(entrypoint/imports)css/base.csscss/background.csscss/navigation.csscss/hero.csscss/sections.csscss/responsive.csscss/legal.css
JS Modules
Loaded in this order:
js/effects.jsjs/ui.jsjs/forms.jsjs/app.js
Responsibilities:
effects.js: ambient + matrix effectsui.js: interactions, scrolling, link/button behaviorforms.js: captcha + contact form + notificationsapp.js: initialization/bootstrap
⚖️ Legal + Compliance
privacy.htmlincludes website-level UK GDPR / GDPR contextterms.htmlcovers usage and scope for this site- Footer links point to both legal pages
🌐 SEO + Deployment
robots.txtconfigured with sitemap referencesitemap.xmlincludes main, legal, and error routes.htaccessincludes:- extensionless
.htmlrewrites - security headers
- caching/compression
ErrorDocumentmappings (400/403/404/422/500/502/503)
- extensionless
📄 License
This site is open source under the MIT License.