4.1 KiB
Site 4NK - The self-custodial cloud infrastructure
Description
Site web moderne pour 4NK, une infrastructure révolutionnaire qui redéfinit la sécurité et la décentralisation. Le site met en valeur l'identité visuelle de la marque avec un design sombre et des effets de glow orange/jaune.
Caractéristiques
Design
- Thème sombre avec fond noir et effets de glow
- Logos SVG animés avec effets de lumière
- Typographie moderne utilisant la police Inter
- Design responsive pour mobile et desktop
- Animations fluides et effets de parallaxe
Sections
- Header - Navigation fixe avec logo animé
- Hero - Section principale avec logo grand format et titre
- Services - Présentation des services avec icônes animées
- À propos - Description de l'entreprise avec logo showcase
- Contact - Formulaire de contact interactif
- Footer - Liens et informations de bas de page
Effets visuels
- Glow effects sur les logos et éléments interactifs
- Particules flottantes en arrière-plan
- Animations CSS et JavaScript
- Curseur personnalisé avec effet de glow
- Transitions fluides entre les sections
Structure des fichiers
website/
├── index.html # Structure HTML principale
├── styles.css # Styles CSS avec animations
├── script.js # JavaScript pour interactions
└── README.md # Documentation
Installation et utilisation
Prérequis
- Serveur web local (Python, Node.js, ou autre)
- Navigateur moderne supportant CSS3 et JavaScript
Lancement local
- Avec Python (recommandé) :
cd /home/debian/website
python3 -m http.server 8080
- Accès : Ouvrir http://localhost:8080 dans votre navigateur
Alternative avec Node.js
npx serve /home/debian/website -p 8080
Personnalisation
Couleurs
Les couleurs principales sont définies dans les variables CSS :
--primary-orange: #FF6B35--secondary-orange: #FF8E53--accent-orange: #FFA500--gold: #FFD700
Logos
Les logos sont créés en SVG avec des gradients et filtres pour les effets de glow. Ils peuvent être facilement modifiés dans le code HTML.
Animations
Les animations sont contrôlées par CSS et JavaScript. Les durées et effets peuvent être ajustés dans les fichiers respectifs.
Compatibilité
- Navigateurs : Chrome, Firefox, Safari, Edge (versions récentes)
- Responsive : Mobile, tablette, desktop
- Technologies : HTML5, CSS3, JavaScript ES6+
Performance
- Optimisé pour le chargement rapide
- Images SVG pour une qualité vectorielle
- CSS minifiable pour la production
- JavaScript modulaire et optimisé
Développement
Structure du code
- HTML sémantique avec sections bien définies
- CSS organisé avec variables et animations
- JavaScript modulaire avec gestion d'événements
Améliorations possibles
- Ajout d'un système de build (Webpack, Vite)
- Optimisation des performances
- Tests automatisés
- Intégration CI/CD
Licence
Projet développé pour 4NK - Tous droits réservés.
Note : Ce site a été créé pour mettre en valeur l'identité visuelle de 4NK avec un design moderne et des effets visuels impressionnants.
Configuration et scripts (backend mailer)
- Backend: Node/Express + Nodemailer dans
server/ - Endpoint: POST
/contact(proxy via nginx) - Config nginx:
conf/4nk.network.conf - Docs nginx:
conf/README.md - Scripts:
scripts/reload-nginx.sh,scripts/test-contact.sh,scripts/install-mailer.sh - Systemd example:
conf/4nk-mailer.service.example
Variables d'environnement (charger via systemd)
SERVER_PORT(defaut: 3001)SMTP_HOST(defaut: 127.0.0.1)SMTP_PORT(defaut: 25)SMTP_SECURE(defaut: false)SMTP_TLS_REJECT_UNAUTHORIZED(defaut: false)SMTP_FROM(defaut: no-reply@4nk.network)SMTP_TO(defaut: nicolas.cantu@4nk.network)
Placez ces variables dans /etc/default/4nk-mailer et pointez EnvironmentFile depuis conf/4nk-mailer.service.example.