NullCipherr.github.io

Bilingual portfolio website built with semantic HTML, modern CSS, and vanilla JavaScript

---

Documentation

Project documentation is centralized in this README for faster onboarding and maintenance.

Related repositories:

• portfolio-os
• portfolio-terminal
• portfolio-content
• portfolio-blog

---

Preview

This project is a static bilingual portfolio (pt-BR/en) with a technical blog and SEO-focused content architecture.

• Public URL: https://nullcipherr.github.io/
• Main entrypoint: index.html
• Blog entrypoint: blog/index.html

---

Overview

NullCipherr.github.io is a professional portfolio website designed for discoverability, performance, and conversion.

The project prioritizes:

• Semantic structure and accessibility-first HTML;
• Clear visual hierarchy and responsive layout behavior;
• Lightweight runtime with vanilla JavaScript;
• Built-in i18n workflow with locale JSON dictionaries;
• Technical content strategy through pillar articles and blog navigation.

Blog content is now consumed from the external portfolio-blog repository through GitHub Raw URLs.

---

Features

• Bilingual interface with runtime switch (pt-BR and en).
• Hero + showcase flow with direct navigation to portfolio variants.
• Structured sections for experience, skills, projects, content, FAQ, and contact.
• Technical blog with external CMS data (portfolio-blog) and dynamic article rendering.
• Performance-minded media loading for hero background video/image.
• SEO foundation with metadata, Open Graph, robots, sitemap, and JSON-LD schema.

---

Architecture

High-level application flow:

1. index.html renders the full portfolio experience and section layout.
2. css/style.css provides the global design system and responsive behavior.
3. js/script.js controls interactions (mobile menu, smooth scroll, observer effects, i18n, hero media strategy).
4. locales/*.json stores translation keys and copy contracts.
5. blog/index.html loads article metadata from https://raw.githubusercontent.com/NullCipherr/portfolio-blog/main/posts/index.json.
6. blog/post.html resolves slug and renders Markdown from portfolio-blog/posts/*.md.
7. Legacy paths in blog/artigos/*.html redirect to the new dynamic route for backward compatibility.
8. robots.txt and sitemap.xml support crawl/index pipelines.
9. 404.html handles invalid routes in static hosting.

---

Performance

Current optimization choices:

• Static architecture with no framework runtime overhead;
• Lazy strategy for heavy hero media when applicable;
• Reduced-motion and save-data checks in JavaScript behavior;
• Optimized asset formats (webp, compressed video variants);
• Minimal dependency surface (no external JS framework required).

---

Technical Decisions

• Vanilla stack for maximal control and low operational complexity.
• Locale dictionaries decoupled from markup for maintainable i18n.
• Single-page + content hub model to combine branding and technical authority.
• SEO as baseline, not afterthought, through metadata and structured data.

---

Roadmap

• Expand technical blog cadence with new long-form pillar articles.
• Add automated lint/validation workflow for HTML/CSS/SEO checks.
• Improve image/video optimization pipeline for content publishing.
• Add richer conversion tracking and observability for content funnels.

---

Tech Stack

• Markup: HTML5
• Styling: CSS3
• Runtime: Vanilla JavaScript
• Localization: JSON locale dictionaries
• Hosting: GitHub Pages

---

Project Structure

.
├── assets/
│   ├── images/
│   └── videos/
├── blog/
│   ├── index.html
│   ├── post.html
│   └── artigos/  (legacy redirects)
├── css/
│   ├── style.css
│   └── blog.css
├── js/
│   ├── script.js
│   ├── blog-index.js
│   └── blog-post.js
├── locales/
│   ├── pt-br.json
│   └── en.json
├── 404.html
├── index.html
├── robots.txt
├── sitemap.xml
└── README.md

---

Getting Started

Prerequisites

• Python 3 (or any static file server)

Run locally

python3 -m http.server 8080

Open http://localhost:8080.

---

Environment Variables

This repository does not require runtime environment variables.

---

NPM Scripts

Not applicable (no Node-based runtime required to serve the project).

---

CI/CD

Deployment is currently managed through GitHub Pages configuration.

Recommended next step:

• Add GitHub Actions for static checks and deployment verification.

---

Deployment

Primary deployment target: GitHub Pages.

git push origin main

After pushing, validate:

• Public URL availability;
• robots.txt and sitemap.xml access;
• 404.html fallback behavior;
• i18n toggle behavior on production.

---

License

Follow the license configured for this repository.