Merge pull request #36 from ValienteTechnologies/staging

Staging

Author: otuva

.ruby-version

@@ -0,0 +1 @@
+3.2.2

Gemfile

@@ -1,19 +1,14 @@
-#after any changes to the Gemfile, execute bundle update!
+# After any changes to the Gemfile, run: bundle update
 source "https://rubygems.org"
 
 gem "jekyll-remote-theme"
+gem "jekyll-agency", "~> 1.2"
+gem "webrick",       "~> 1.9"
 
 group :jekyll_plugins do
-  gem "jekyll-feed", "~> 0.6"
-  gem "jekyll-sitemap"
-  gem "jekyll-redirect-from"
-  gem "jekyll-polyglot"
+  gem "jekyll-feed",          "~> 0.6"
+  gem "jekyll-sitemap",       "~> 1.4"
+  gem "jekyll-redirect-from", "~> 0.16"
+  gem "jekyll-polyglot",      "~> 1.8"
   # gem "github-pages" # https://github.com/github/pages-gem
 end
-
-# Uncomment the following line if developing on Windows: 
-# Performance-booster for watching directories on Windows
-# gem "wdm", ">= 0.1.0" if Gem.win_platform?
-
-gem "jekyll-agency"
-gem "webrick"

README.md

@@ -0,0 +1,149 @@
+# ValienteTechnologies.github.io
+
+Marketing site for [Valiente Technologies](https://valientetechnologies.com) — Turkey's first cybersecurity firm based in Antalya.
+
+Built with **Jekyll** + [jekyll-agency](https://github.com/y7kim/agency-jekyll-theme) theme, deployed via **GitHub Pages**, served behind **Cloudflare**.
+
+---
+
+## Prerequisites
+
+| Tool | Version | Purpose |
+|------|---------|---------|
+| Ruby | 3.2.2 (see `.ruby-version`) | Jekyll runtime |
+| Bundler | latest | Gem management |
+| Python 3 | any | WebP image conversion |
+| Node / npm | any | JS minification |
+| terser | `npm install -g terser` | Minify `assets/js/src/*.js` |
+| Pillow | `pip install pillow` | Convert PNG/JPG → WebP on commit |
+
+---
+
+## Setup
+
+```bash
+# 1. Clone
+git clone https://github.com/ValienteTechnologies/ValienteTechnologies.github.io
+cd ValienteTechnologies.github.io
+
+# 2. Ruby deps
+bundle install
+
+# 3. Python deps (for pre-commit WebP hook)
+pip install pillow
+
+# 4. JS minifier
+npm install -g terser
+
+# 5. Install git hooks
+cp scripts/pre-commit .git/hooks/pre-commit
+chmod +x .git/hooks/pre-commit
+```
+
+---
+
+## Running locally
+
+```bash
+bundle exec jekyll serve --livereload
+# → http://localhost:4000
+```
+
+---
+
+## Project structure
+
+```
+_data/          # All site content (YAML). Edit here, not in templates.
+  i18n.yml      # UI strings (breadcrumbs, title suffixes)
+  header.yml    # Hero section text
+  services.yml  # Services section
+  testimonials.yml
+  footer.yml
+  navigation.yml
+  style.yml     # Highlight color, fonts_urls
+  ...
+
+_includes/
+  layout/       # nav.html, nav-header.html, head.html, footer.html
+  sections/     # services.html, testimonials.html, contact_form.html, ...
+
+_layouts/
+  default.html  # Base layout (scripts, footer)
+  home.html     # Home page (nav+header, sections, page-specific JS)
+  subpage.html  # Inner pages
+  error.html    # 404
+
+_pages/         # Page definitions (mostly include composition)
+_sass/
+  base/         # _variables.scss, _mixins.scss, _page.scss
+  components/   # _navbar.scss, _buttons.scss, _utilities.scss, ...
+  layout/       # Per-section SCSS (_masthead, _services, _footer, ...)
+
+assets/
+  css/          # agency.css (Jekyll-compiled), bootstrap.min.css, all.min.css
+  js/           # Minified JS (do not edit directly)
+  js/src/       # JS source files (edit here, pre-commit auto-minifies)
+  img/          # WebP images (PNG/JPG source → pre-commit auto-converts)
+
+scripts/
+  pre-commit    # Git hook: WebP conversion + JS minification
+  minify-js.sh  # Manual: ./scripts/minify-js.sh [filename]
+  to_webp.py    # Image converter used by pre-commit hook
+```
+
+---
+
+## i18n (bilingual TR/EN)
+
+The site uses [jekyll-polyglot](https://github.com/untra/polyglot). All content lives in `_data/*.yml` with this pattern:
+
+```yaml
+tr: &DEFAULT
+  title: "Türkçe başlık"
+
+tr-TR:
+  <<: *DEFAULT   # inherits TR
+
+en:
+  title: "English title"
+```
+
+UI strings (breadcrumbs, title suffixes, etc.) live in `_data/i18n.yml`.
+
+---
+
+## JS workflow
+
+Source files live in `assets/js/src/`. **Never edit the minified files in `assets/js/` directly.**
+
+```bash
+# Edit source
+vim assets/js/src/mesh-network.js
+
+# Minify one file
+./scripts/minify-js.sh mesh-network.js
+
+# Or minify all
+./scripts/minify-js.sh
+```
+
+The pre-commit hook does this automatically when you stage `assets/js/src/*.js`.
+
+---
+
+## Images
+
+Stage a PNG/JPG and the pre-commit hook converts it to WebP automatically. Use `<picture>` elements in templates for WebP + PNG/JPG fallback.
+
+---
+
+## Deployment
+
+Push to `main` → GitHub Pages builds automatically. Cloudflare proxies the result.
+
+**Cloudflare notes:**
+- Email obfuscation: disable in Scrape Shield → Cloudflare Email Obfuscation to remove `email-decode.min.js`
+- Cache TTLs for `/assets/*`: set via Cloudflare Cache Rules
+- `robots.txt` is managed by Cloudflare AI scraping protection (Content-Signal directive is harmless)
+- Analytics: GA4 tag `G-FF9YHPMVJL`

_config.yml

@@ -53,4 +53,6 @@ exclude:
 
 markdown: kramdown
 
+strict_front_matter: true
+
 formspree_form_path: "f/xwpbqjer"

_data/i18n.yml

@@ -0,0 +1,12 @@
+tr: &DEFAULT
+  home: "Ana Sayfa"
+  site_title_suffix: "Sızma Testi ve Siber Güvenlik"
+  language_select: "Dil seçin"
+
+tr-TR:
+  <<: *DEFAULT
+
+en:
+  home: "Home"
+  site_title_suffix: "Penetration Testing & Cybersecurity"
+  language_select: "Select language"

_includes/layout/footer.html

@@ -1,6 +1,6 @@
 <!-- Footer -->
 {% assign footer = site.data.footer[site.active_lang] | default: site.data.footer.tr %}
-<footer class="footer" id="footer" style="background-color: white">
+<footer class="footer" id="footer">
   <div class="container">
     <div class="row align-items-center">
       <div class="col-md-4">

_includes/layout/head.html

@@ -4,16 +4,33 @@
   {%- assign _page_description = page.description | default: site.description -%}
   {%- if _data_section.title -%}{%- assign _page_title = _data_section.title -%}{%- endif -%}
   {%- if _data_section.description -%}{%- assign _page_description = _data_section.description -%}{%- endif -%}
+  {%- assign _i18n = site.data.i18n[site.active_lang] | default: site.data.i18n.tr -%}
   {%- if page.url == "/" or page.url == "/index.html" -%}
-    {%- assign _page_full_title = site.title | append: " | Sızma Testi ve Siber Güvenlik" -%}
+    {%- assign _page_full_title = site.title | append: " | " | append: _i18n.site_title_suffix -%}
   {%- elsif _page_title -%}
     {%- assign _page_full_title = _page_title | append: " | " | append: site.title -%}
   {%- else -%}
     {%- assign _page_full_title = site.title -%}
   {%- endif -%}
 
-  <!-- Critical CSS: single stylesheet (bootstrap bundled in) -->
-  <link rel="preload" href="/assets/css/agency.css" as="style">
+  <!-- CSS: base (bootstrap + global) + page-specific sheet -->
+  {%- if page.layout == "home" -%}
+    {%- assign _page_css = "valiente-home.css" -%}
+  {%- elsif page.body_class == "corporate-page" -%}
+    {%- assign _page_css = "valiente-corporate.css" -%}
+  {%- elsif page.body_class == "contact-page" -%}
+    {%- assign _page_css = "valiente-contact.css" -%}
+  {%- elsif page.body_class == "legal-layout" -%}
+    {%- assign _page_css = "valiente-legal.css" -%}
+  {%- elsif page.layout == "error" -%}
+    {%- assign _page_css = "valiente-error.css" -%}
+  {%- else -%}
+    {%- assign _page_css = "" -%}
+  {%- endif -%}
+  <link rel="preload" href="/assets/css/valiente-base.css" as="style">
+  {%- if _page_css != "" -%}
+  <link rel="preload" href="/assets/css/{{ _page_css }}" as="style">
+  {%- endif -%}
 
   {% if site.analytics.google %}
   <!-- Google Analytics: deferred until after load to avoid forced reflow on LCP -->
@@ -42,7 +59,7 @@
   <link rel="icon" type="image/x-icon" href="/assets/img/valiente/favicon.ico">
   <link rel="sitemap" type="application/xml" href="/sitemap.xml">
   <link rel="apple-touch-icon" href="/assets/img/valiente/valiente1024.webp">
-  <meta name="theme-color" content="#e22388">
+  <meta name="theme-color" content="{{ site.data.style.highlight | default: '#e22388' }}">
 
   <!-- JSON-LD: LocalBusiness structured data -->
   <script type="application/ld+json">
@@ -79,7 +96,7 @@
     "itemListElement": [{
       "@type": "ListItem",
       "position": 1,
-      "name": "{% if site.active_lang == 'tr' %}Ana Sayfa{% else %}Home{% endif %}",
+      "name": "{{ _i18n.home }}",
       "item": "{{ site.url }}"
     },{
       "@type": "ListItem",
@@ -143,9 +160,9 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
-  <!-- FontAwesome: non-render-blocking -->
-  <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
-  <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"></noscript>
+  <!-- FontAwesome: local subsetted build (font-display:swap, ~3KB) -->
+  <link rel="preload" href="/assets/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <noscript><link rel="stylesheet" href="/assets/css/all.min.css"></noscript>
   <!-- Custom fonts: high-priority non-render-blocking with display=swap -->
   {% if site.data.style.fonts_urls %}
     {% for font_url in site.data.style.fonts_urls %}
@@ -157,8 +174,10 @@
     <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Droid+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Roboto+Slab:wght@100;300;400;700&display=swap"></noscript>
   {% endif %}
   <!-- Custom styles for this theme -->
-  <!--<link href="/assets/css/agency.min.css" rel="stylesheet">-->
-  <link href="/assets/css/agency.css" rel="stylesheet" />
+  <link href="/assets/css/valiente-base.css" rel="stylesheet" />
+  {%- if _page_css != "" -%}
+  <link href="/assets/css/{{ _page_css }}" rel="stylesheet" />
+  {%- endif -%}
 
   <!-- Page container change top padding when nav shrinks -->
   {% if page.body_class == "page-layout" %}

_includes/layout/nav-header.html

@@ -1,101 +1,20 @@
-{% assign header = site.data.header[site.active_lang] | default: site.data.header.tr %}
-
-<!-- Navigation -->
-<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
-  <div class="container">
-    <a class="navbar-brand js-scroll-trigger" href="#page-top">
-      {%- if site.logo -%}
-        <img width="{{ site.logo.width | default: 208 }}" height="{{ site.logo.height | default: 52 }}" src="{{ site.logo.path }}" alt="{{ site.title }}"/>
-      {%- else -%}
-        {{ site.title }}
-      {%- endif -%}
-    </a>
-    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
-      Menu
-      <i class="fas fa-bars"></i>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarResponsive">
-      <ul class="navbar-nav text-uppercase ml-auto">
-        {% assign nav = site.data.navigation[site.active_lang] | default: site.data.navigation.tr %}
-        {% for link in nav.nav %}
-        {% if link.children %}
-        <li class="nav-item dropdown">
-          {%- if link.url -%}
-            {%- if link.static or site.active_lang == site.default_lang -%}
-              {%- assign parent_url = link.url -%}
-            {%- else -%}
-              {%- assign parent_url = '/' | append: site.active_lang | append: link.url -%}
-            {%- endif -%}
-            <a class="nav-link dropdown-toggle" href="{{ parent_url }}" id="navDrop{{ forloop.index }}" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              {{ link.title }}
-            </a>
-          {%- else -%}
-            <a class="nav-link dropdown-toggle" href="#" id="navDrop{{ forloop.index }}" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              {{ link.title }}
-            </a>
-          {%- endif -%}
-          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navDrop{{ forloop.index }}">
-            {%- for child in link.children -%}
-            {%- if child.url -%}
-              {%- if child.static or site.active_lang == site.default_lang -%}
-                {%- assign child_url = child.url -%}
-              {%- else -%}
-                {%- assign child_url = '/' | append: site.active_lang | append: child.url -%}
-              {%- endif -%}
-            <a class="dropdown-item" href="{{ child_url }}">{{ child.title }}</a>
-            {%- elsif child.section -%}
-            <a class="dropdown-item" href="{{ site.baseurl | append: '/#' | append: child.section }}">{{ child.title }}</a>
-            {%- endif -%}
-            {%- endfor -%}
-          </div>
-        </li>
-        {% else %}
-        <li class="nav-item">
-          {%- if link.url -%}
-            {%- if link.static or site.active_lang == site.default_lang -%}
-              {%- assign nav_url = link.url -%}
-            {%- else -%}
-              {%- assign nav_url = '/' | append: site.active_lang | append: link.url -%}
-            {%- endif -%}
-            <a class="nav-link js-scroll-trigger" href="{{ nav_url }}">{{ link.title }}</a>
-          {%- elsif link.section -%}
-            <a class="nav-link js-scroll-trigger" href="#{{ link.section }}">{{ link.title }}</a>
-          {%- else -%}
-            <a class="nav-link js-scroll-trigger" href="#">{{ link.title }}</a>
-          {%- endif -%}
-        </li>
-        {% endif %}
-        {% endfor %}
-        <!-- Language switcher -->
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <i class="fas fa-globe"></i>
-          </a>
-          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="languageDropdown">
-            <a class="dropdown-item" {% static_href %}href="{{ page.url }}"{% endstatic_href %}>TR</a>
-            <a class="dropdown-item" {% static_href %}href="/en{{ page.url }}"{% endstatic_href %}>EN</a>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</nav>
-<!-- End Navigation -->
+{% include layout/nav.html %}
 
 <!-- Header -->
 <header class="masthead">
   <div class="masthead-bg" aria-hidden="true"></div>
   <canvas id="meshNetwork" class="mesh-network-canvas"></canvas>
   <div class="container">
     <div class="intro-text">
+      {%- assign header = site.data.header[site.active_lang] | default: site.data.header.tr -%}
       {%- if header.title -%}
         <div class="intro-lead-in">{{ header.title }}</div>
       {%- endif -%}
       {%- if header.text -%}
         <h1 class="intro-heading text-uppercase">{{ header.text }}</h1>
       {%- endif -%}
       {%- if header.button -%}
-        <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="{{ header.buttonlink }}">{{ header.button }}</a>
+        <a class="btn btn-primary btn-xl text-uppercase" href="{{ header.buttonlink }}">{{ header.button }}</a>
       {%- endif -%}
     </div>
   </div>