new file: .gitignore
new file: Dockerfile new file: README.md new file: app.py new file: index.html new file: projekte des/PROJECT_DESCRIPTION.txt new file: projekte des/WEBSITE_DESCRIPTION.md new file: projekte des/website_project_description_en.txt new file: requirements.txt new file: script.js new file: static/css/styles.css new file: static/js/script.js new file: styles.css new file: templates/about.html new file: templates/base.html new file: templates/contact.html new file: templates/index.html new file: templates/minecraft.html new file: templates/project_detail.html new file: templates/projects.html
This commit is contained in:
SimolZimol
80
.gitignore
vendored
Normal file
80
.gitignore
vendored
Normal file
@@ -0,0 +1,80 @@
|
||||
# Python bytecode and cache
|
||||
__pycache__/
|
||||
*.py[cod]
|
||||
*$py.class
|
||||
|
||||
# Virtual environments
|
||||
.venv/
|
||||
venv/
|
||||
env/
|
||||
ENV/
|
||||
|
||||
# Distribution / packaging
|
||||
.build/
|
||||
build/
|
||||
dist/
|
||||
.eggs/
|
||||
*.egg-info/
|
||||
*.egg
|
||||
wheels/
|
||||
share/python-wheels/
|
||||
pip-wheel-metadata/
|
||||
|
||||
# Installer logs
|
||||
pip-log.txt
|
||||
pip-delete-this-directory.txt
|
||||
|
||||
# Unit test / coverage reports
|
||||
.coverage*
|
||||
.tox/
|
||||
.nox/
|
||||
.pytest_cache/
|
||||
htmlcov/
|
||||
.junit/
|
||||
coverage.xml
|
||||
|
||||
# Type checker / linters
|
||||
.mypy_cache/
|
||||
.pyright/
|
||||
.ruff_cache/
|
||||
.pyre/
|
||||
|
||||
# C extensions
|
||||
*.so
|
||||
|
||||
# Django/Flask stuff
|
||||
instance/
|
||||
*.db
|
||||
*.sqlite3
|
||||
*.sqlite
|
||||
|
||||
# Environment variables / secrets
|
||||
.env
|
||||
.env.*
|
||||
*.env
|
||||
.flaskenv
|
||||
|
||||
# Logs
|
||||
*.log
|
||||
logs/
|
||||
|
||||
# IDEs and editors
|
||||
.vscode/
|
||||
.idea/
|
||||
*.iml
|
||||
|
||||
# OS files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
desktop.ini
|
||||
|
||||
# Node (if used later)
|
||||
node_modules/
|
||||
|
||||
# Docker
|
||||
.dockerignore
|
||||
# Local container data (if any)
|
||||
**/.docker/*
|
||||
|
||||
# Cache
|
||||
.cache/
|
||||
30
Dockerfile
Normal file
30
Dockerfile
Normal file
@@ -0,0 +1,30 @@
|
||||
FROM python:3.10-slim
|
||||
|
||||
ENV PYTHONDONTWRITEBYTECODE=1 \
|
||||
PYTHONUNBUFFERED=1 \
|
||||
PIP_NO_CACHE_DIR=1 \
|
||||
PORT=5000
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Keep image minimal; add build tools only if future deps require them
|
||||
RUN apt-get update -y && apt-get install -y --no-install-recommends \
|
||||
build-essential \
|
||||
&& rm -rf /var/lib/apt/lists/*
|
||||
|
||||
# Install dependencies (better layer caching)
|
||||
COPY requirements.txt ./
|
||||
RUN pip install --upgrade pip && pip install -r requirements.txt
|
||||
|
||||
# Copy application code
|
||||
COPY app.py ./
|
||||
COPY templates ./templates
|
||||
COPY static ./static
|
||||
|
||||
# Environment variables from Coolify (if used)
|
||||
ENV DEMO=$DEMO
|
||||
|
||||
EXPOSE 5000
|
||||
|
||||
# Production server
|
||||
CMD ["gunicorn", "-w", "3", "-b", "0.0.0.0:5000", "app:app"]
|
||||
77
README.md
Normal file
77
README.md
Normal file
@@ -0,0 +1,77 @@
|
||||
# Devanturas by SimolZimol
|
||||
|
||||
Professional Minecraft Plugin development and Discord bot programming, now powered by a Flask web app.
|
||||
|
||||
## Features
|
||||
- English website with sections: Home, Projects, Minecraft, About, Contact
|
||||
- Projects overview plus individual project pages (detail pages with feature lists, commands, install steps)
|
||||
- Dedicated Minecraft page with services and expertise
|
||||
- External links for each project (GitHub, Modrinth, SpigotMC, Wiki, Issues)
|
||||
- No links to private Gitea (as requested)
|
||||
|
||||
## Project Structure
|
||||
```
|
||||
website/
|
||||
├─ app.py # Flask app and routes
|
||||
├─ requirements.txt # Python dependencies
|
||||
├─ templates/ # Jinja2 templates
|
||||
│ ├─ base.html
|
||||
│ ├─ index.html
|
||||
│ ├─ projects.html
|
||||
│ ├─ project_detail.html
|
||||
│ ├─ minecraft.html
|
||||
│ ├─ about.html
|
||||
│ └─ contact.html
|
||||
└─ static/
|
||||
├─ css/
|
||||
│ └─ styles.css
|
||||
└─ js/
|
||||
└─ script.js
|
||||
```
|
||||
|
||||
## Quickstart (Windows PowerShell)
|
||||
|
||||
```pwsh
|
||||
# 1) Navigate to the project directory
|
||||
Set-Location -Path "c:\Users\Simon.Speedy\Documents\dev projekte\website"
|
||||
|
||||
# 2) Create and activate a virtual environment
|
||||
python -m venv .venv
|
||||
.\.venv\Scripts\Activate.ps1
|
||||
|
||||
# 3) Install dependencies
|
||||
pip install -r requirements.txt
|
||||
|
||||
# 4) Run the development server
|
||||
python app.py
|
||||
# The site will be available at http://127.0.0.1:5000
|
||||
```
|
||||
|
||||
If `python` isn’t found, try `py` instead of `python` in the above commands.
|
||||
|
||||
## Run with Docker (optional)
|
||||
|
||||
```pwsh
|
||||
# From project root
|
||||
docker build -t devanturas-site .
|
||||
docker run --rm -p 5000:5000 devanturas-site
|
||||
# Open http://localhost:5000
|
||||
```
|
||||
|
||||
## Customization
|
||||
- Add more projects by updating the data structures in `app.py` under `/projects` and the detail routes.
|
||||
- To add Wiki/Issues links per project, populate the `links` dict with `wiki` and `issues` keys. If a project should not expose these, simply omit the keys and the template won’t render them.
|
||||
- All styling lives in `static/css/styles.css`. JS behaviors live in `static/js/script.js`.
|
||||
|
||||
## Domain Notes
|
||||
Ready to deploy to any of your domains:
|
||||
- devanturas.de, devanturas.eu, devanturas.net
|
||||
- simolzimol.de, simolzimol.eu
|
||||
|
||||
You can serve this Flask app via any WSGI-capable host (e.g., Gunicorn + reverse proxy) or a PaaS of your choice.
|
||||
|
||||
## Privacy
|
||||
- No links to the private Gitea instance are included.
|
||||
|
||||
## License
|
||||
Choose a license and add it here if you plan to publish the source.
|
||||
439
app.py
Normal file
439
app.py
Normal file
@@ -0,0 +1,439 @@
|
||||
from flask import Flask, render_template
|
||||
|
||||
app = Flask(__name__)
|
||||
|
||||
# Main routes
|
||||
@app.route('/')
|
||||
def home():
|
||||
"""Homepage with overview of Devanturas and featured projects"""
|
||||
projects = [
|
||||
{
|
||||
'name': 'Fly Plugin',
|
||||
'type': 'Minecraft Plugin',
|
||||
'description': 'Lightweight flight plugin for survival servers with configurable speeds and permissions.',
|
||||
'technologies': ['Java', 'Spigot', 'Paper'],
|
||||
'status': 'Active',
|
||||
'url': '/projects/fly-plugin',
|
||||
'icon': 'fas fa-paper-plane',
|
||||
'color': 'minecraft'
|
||||
},
|
||||
{
|
||||
'name': 'Hearts of Iron IV ELO Bot',
|
||||
'type': 'Discord Bot',
|
||||
'description': 'Sophisticated Discord bot with complete ELO rating system for HOI4 multiplayer communities.',
|
||||
'technologies': ['Python', 'Discord.py', 'MySQL', 'Docker'],
|
||||
'status': 'Production',
|
||||
'url': '/projects/hoi4-elo-bot',
|
||||
'icon': 'fab fa-discord',
|
||||
'color': 'discord'
|
||||
},
|
||||
{
|
||||
'name': 'Discord AI Bot — Moderation & Giveaways',
|
||||
'type': 'Discord Bot',
|
||||
'description': 'Production-ready bot with advanced moderation, restart-safe giveaways, and a Flask web dashboard.',
|
||||
'technologies': ['Python', 'Discord.py', 'Flask', 'MySQL'],
|
||||
'status': 'Active',
|
||||
'url': '/projects/discord-ai-bot',
|
||||
'icon': 'fas fa-shield-alt',
|
||||
'color': 'discord'
|
||||
},
|
||||
{
|
||||
'name': 'Discord Bot — Stable Diffusion (AMD)',
|
||||
'type': 'Discord Bot',
|
||||
'description': 'AI image generation bot optimized for AMD GPUs with Discord commands and queueing.',
|
||||
'technologies': ['Python', 'Discord.py', 'AI'],
|
||||
'status': 'Active',
|
||||
'url': '/projects/discord-bot-stable-diffusion-amd',
|
||||
'icon': 'fas fa-wand-magic-sparkles',
|
||||
'color': 'discord'
|
||||
}
|
||||
]
|
||||
return render_template('index.html', projects=projects)
|
||||
|
||||
@app.route('/projects')
|
||||
def projects():
|
||||
"""Overview of all projects"""
|
||||
all_projects = [
|
||||
{
|
||||
'name': 'Fly Plugin',
|
||||
'type': 'Minecraft Plugin',
|
||||
'description': 'Simple flight for survival servers with speed control and permission management.',
|
||||
'long_description': 'A lightweight, reliable Minecraft plugin that restores creative-like flying in survival mode. Designed for simplicity and performance.',
|
||||
'technologies': ['Java', 'Spigot', 'Paper', 'Bukkit'],
|
||||
'status': 'Active',
|
||||
'version': 'Latest',
|
||||
'downloads': 'Available',
|
||||
'url': '/projects/fly-plugin',
|
||||
'icon': 'fas fa-paper-plane',
|
||||
'color': 'minecraft',
|
||||
'links': {
|
||||
'modrinth': 'https://modrinth.com/plugin/fly-simolzimol/',
|
||||
'spigot': 'https://www.spigotmc.org/resources/fly.83164/'
|
||||
}
|
||||
},
|
||||
{
|
||||
'name': 'Hearts of Iron IV ELO Bot',
|
||||
'type': 'Discord Bot',
|
||||
'description': 'Advanced Discord bot for competitive HOI4 communities with ELO rating system.',
|
||||
'long_description': 'A sophisticated Discord bot featuring a complete ELO rating system similar to chess rankings, designed specifically for Hearts of Iron IV multiplayer communities.',
|
||||
'technologies': ['Python', 'Discord.py', 'MySQL', 'Docker', 'Coolify'],
|
||||
'status': 'Production',
|
||||
'version': '2.0',
|
||||
'users': 'Multiple Communities',
|
||||
'url': '/projects/hoi4-elo-bot',
|
||||
'icon': 'fab fa-discord',
|
||||
'color': 'discord',
|
||||
'links': {
|
||||
'github': 'https://github.com/SimolZimol/'
|
||||
}
|
||||
},
|
||||
{
|
||||
'name': 'Discord AI Bot — Moderation & Giveaways',
|
||||
'type': 'Discord Bot',
|
||||
'description': 'Moderation, restart-safe giveaways with Steam integration, and a web dashboard.',
|
||||
'long_description': 'Production-ready Discord bot with advanced moderation, persistent giveaway engine (Steam/Epic ready), Flask-based dashboard, and restart safety via MySQL.',
|
||||
'technologies': ['Python', 'Discord.py', 'Flask', 'MySQL', 'aiohttp'],
|
||||
'status': 'Active',
|
||||
'version': '1.x',
|
||||
'url': '/projects/discord-ai-bot',
|
||||
'icon': 'fas fa-shield-alt',
|
||||
'color': 'discord',
|
||||
'links': {
|
||||
'github': 'https://github.com/SimolZimol/'
|
||||
}
|
||||
},
|
||||
{
|
||||
'name': 'Discord Bot — Stable Diffusion (AMD)',
|
||||
'type': 'Discord Bot',
|
||||
'description': 'AI image generation with AMD GPUs, Discord commands, and job queuing.',
|
||||
'long_description': 'A Discord bot for Stable Diffusion image generation optimized for AMD GPUs. Provides prompt-based generation through slash/text commands with async processing.',
|
||||
'technologies': ['Python', 'Discord.py', 'AI'],
|
||||
'status': 'Active',
|
||||
'version': 'Latest',
|
||||
'url': '/projects/discord-bot-stable-diffusion-amd',
|
||||
'icon': 'fas fa-wand-magic-sparkles',
|
||||
'color': 'discord',
|
||||
'links': {
|
||||
'github': 'https://github.com/SimolZimol/Discord-Bot-stable-diffusion-AMD',
|
||||
'issues': 'https://github.com/SimolZimol/Discord-Bot-stable-diffusion-AMD/issues'
|
||||
}
|
||||
}
|
||||
]
|
||||
return render_template('projects.html', projects=all_projects)
|
||||
|
||||
@app.route('/minecraft')
|
||||
def minecraft():
|
||||
"""Dedicated Minecraft development page"""
|
||||
minecraft_projects = [
|
||||
{
|
||||
'name': 'Fly Plugin',
|
||||
'description': 'Flight plugin for survival servers',
|
||||
'version': 'Latest',
|
||||
'supported_versions': '1.15 - 1.21',
|
||||
'downloads': 'Active',
|
||||
'url': '/projects/fly-plugin'
|
||||
}
|
||||
]
|
||||
|
||||
minecraft_info = {
|
||||
'experience': '3+ Years',
|
||||
'preferred_apis': ['Spigot API', 'Paper API', 'Bukkit API'],
|
||||
'specialties': ['Plugin Development', 'Server Optimization', 'Custom Commands', 'Permission Systems'],
|
||||
'server_types': ['Spigot', 'Paper', 'Bukkit']
|
||||
}
|
||||
|
||||
return render_template('minecraft.html', projects=minecraft_projects, info=minecraft_info)
|
||||
|
||||
@app.route('/about')
|
||||
def about():
|
||||
"""About SimolZimol and Devanturas"""
|
||||
skills = {
|
||||
'Minecraft Development': [
|
||||
'Spigot & Paper Plugin Development',
|
||||
'Java Programming',
|
||||
'Server Administration',
|
||||
'Performance Optimization',
|
||||
'Custom Commands & GUIs',
|
||||
'Permission System Integration'
|
||||
],
|
||||
'Discord Development': [
|
||||
'Discord.py Bot Development',
|
||||
'Database Integration (MySQL)',
|
||||
'Asynchronous Programming',
|
||||
'Community Management Tools',
|
||||
'Slash Commands & Interactions',
|
||||
'Docker Deployment'
|
||||
],
|
||||
'General Programming': [
|
||||
'Java, Python',
|
||||
'Database Design',
|
||||
'RESTful APIs',
|
||||
'Git Version Control',
|
||||
'Docker & Containerization',
|
||||
'Web Development (Flask)'
|
||||
]
|
||||
}
|
||||
|
||||
achievements = [
|
||||
{
|
||||
'title': 'Fly Plugin',
|
||||
'description': 'Active on Modrinth & SpigotMC',
|
||||
'icon': 'fas fa-download'
|
||||
},
|
||||
{
|
||||
'title': 'Open Source',
|
||||
'description': 'Contributing to GitHub repositories',
|
||||
'icon': 'fab fa-github'
|
||||
},
|
||||
{
|
||||
'title': 'Community',
|
||||
'description': 'Supporting Discord communities',
|
||||
'icon': 'fab fa-discord'
|
||||
}
|
||||
]
|
||||
|
||||
return render_template('about.html', skills=skills, achievements=achievements)
|
||||
|
||||
@app.route('/contact')
|
||||
def contact():
|
||||
"""Contact information and links"""
|
||||
contact_links = [
|
||||
{
|
||||
'name': 'GitHub',
|
||||
'url': 'https://github.com/SimolZimol/',
|
||||
'description': 'Open source projects and code repositories',
|
||||
'icon': 'fab fa-github',
|
||||
'color': 'github'
|
||||
},
|
||||
{
|
||||
'name': 'Discord',
|
||||
'url': 'https://discordapp.com/users/253922739709018114',
|
||||
'description': 'Direct contact for questions and support',
|
||||
'icon': 'fab fa-discord',
|
||||
'color': 'discord'
|
||||
},
|
||||
{
|
||||
'name': 'Modrinth',
|
||||
'url': 'https://modrinth.com/plugin/fly-simolzimol/',
|
||||
'description': 'Fly Plugin on Modrinth platform',
|
||||
'icon': 'fas fa-cube',
|
||||
'color': 'modrinth'
|
||||
},
|
||||
{
|
||||
'name': 'SpigotMC',
|
||||
'url': 'https://www.spigotmc.org/resources/fly.83164/',
|
||||
'description': 'Minecraft plugins and resources',
|
||||
'icon': 'fas fa-plug',
|
||||
'color': 'spigot'
|
||||
}
|
||||
]
|
||||
return render_template('contact.html', links=contact_links)
|
||||
|
||||
# Project detail pages
|
||||
@app.route('/projects/fly-plugin')
|
||||
def fly_plugin():
|
||||
"""Detailed page for Fly Plugin"""
|
||||
project = {
|
||||
'name': 'Fly Plugin',
|
||||
'tagline': 'Simple flight for survival servers',
|
||||
'description': 'A lightweight, reliable Minecraft plugin that restores creative-like flying in survival mode. Designed to be simple for players and server admins.',
|
||||
'long_description': '''Fly is a minimalist Minecraft plugin focused on providing reliable flight functionality for survival servers.
|
||||
The plugin emphasizes simplicity, performance, and easy customization while maintaining compatibility across multiple server versions.''',
|
||||
'version': 'Latest',
|
||||
'status': 'Active Development',
|
||||
'compatibility': '1.15 - 1.21',
|
||||
'server_types': ['Spigot', 'Paper', 'Bukkit'],
|
||||
'technologies': ['Java', 'Spigot API', 'Paper API'],
|
||||
'features': [
|
||||
'Toggle flight for yourself: /fly',
|
||||
'Toggle flight for others: /fly <player>',
|
||||
'Adjustable flight speed: /fly speed <1-10>',
|
||||
'Fully configurable messages and prefix',
|
||||
'Live configuration reload: /flyreload',
|
||||
'Permission-based access control',
|
||||
'Lightweight and efficient'
|
||||
],
|
||||
'commands': [
|
||||
{
|
||||
'command': '/fly',
|
||||
'description': 'Toggle your own flight',
|
||||
'permission': 'fly.fly'
|
||||
},
|
||||
{
|
||||
'command': '/fly <player>',
|
||||
'description': 'Toggle another player\'s flight',
|
||||
'permission': 'other.fly'
|
||||
},
|
||||
{
|
||||
'command': '/fly speed <1-10>',
|
||||
'description': 'Set your flight speed',
|
||||
'permission': 'fly.speed'
|
||||
},
|
||||
{
|
||||
'command': '/flyreload',
|
||||
'description': 'Reload plugin configuration',
|
||||
'permission': 'fly.reload'
|
||||
}
|
||||
],
|
||||
'links': {
|
||||
'modrinth': 'https://modrinth.com/plugin/fly-simolzimol/',
|
||||
'spigot': 'https://www.spigotmc.org/resources/fly.83164/',
|
||||
'github': 'https://github.com/SimolZimol/',
|
||||
'wiki': 'https://github.com/SimolZimol/fly-plugin/wiki',
|
||||
'issues': 'https://github.com/SimolZimol/fly-plugin/issues'
|
||||
},
|
||||
'installation': [
|
||||
'Download the latest JAR file',
|
||||
'Place the JAR into your server plugins/ folder',
|
||||
'Start the server to generate config.yml',
|
||||
'Edit config.yml to customize messages and settings',
|
||||
'Use /flyreload to apply changes without restart'
|
||||
]
|
||||
}
|
||||
return render_template('project_detail.html', project=project)
|
||||
|
||||
@app.route('/projects/hoi4-elo-bot')
|
||||
def hoi4_elo_bot():
|
||||
"""Detailed page for HOI4 ELO Bot"""
|
||||
project = {
|
||||
'name': 'Hearts of Iron IV ELO Bot',
|
||||
'tagline': 'Competitive ranking system for HOI4 communities',
|
||||
'description': 'A sophisticated Discord bot designed specifically for Hearts of Iron IV multiplayer communities, featuring a complete ELO rating system similar to chess rankings.',
|
||||
'long_description': '''This bot transforms casual gaming communities into structured competitive environments while maintaining
|
||||
the fun and social aspects that make multiplayer gaming enjoyable. By providing objective performance metrics and historical tracking,
|
||||
it helps players improve their skills and creates lasting engagement within gaming communities.''',
|
||||
'version': '2.0',
|
||||
'status': 'Production Ready',
|
||||
'technologies': ['Python', 'Discord.py 2.3.2', 'MySQL', 'Docker', 'Coolify'],
|
||||
'features': [
|
||||
'Dual Rating Modes: Standard and Competitive gameplay',
|
||||
'Chess-like ELO Algorithm with HOI4 modifications',
|
||||
'T-Level System: Country tier-based multipliers',
|
||||
'Intelligent draw handling with ELO adjustments',
|
||||
'Comprehensive player statistics and analytics',
|
||||
'Match history and leaderboards',
|
||||
'Hybrid slash and text commands',
|
||||
'Docker containerization support'
|
||||
],
|
||||
'commands': [
|
||||
{
|
||||
'command': '/hoi4create <type> <name>',
|
||||
'description': 'Create new match (standard/competitive)',
|
||||
'permission': 'User'
|
||||
},
|
||||
{
|
||||
'command': '/hoi4setup <game> <@user> <team> <t-level>',
|
||||
'description': 'Add player to match',
|
||||
'permission': 'User'
|
||||
},
|
||||
{
|
||||
'command': '/hoi4end <game> <winner/draw>',
|
||||
'description': 'Complete match and process ELO',
|
||||
'permission': 'User'
|
||||
},
|
||||
{
|
||||
'command': '/hoi4stats [@user]',
|
||||
'description': 'View detailed player statistics',
|
||||
'permission': 'User'
|
||||
},
|
||||
{
|
||||
'command': '/hoi4leaderboard [type] [limit]',
|
||||
'description': 'Display ranked player lists',
|
||||
'permission': 'User'
|
||||
}
|
||||
],
|
||||
'technical_highlights': [
|
||||
'Asynchronous Programming with Discord.py',
|
||||
'Normalized database schema with performance optimization',
|
||||
'Implementation of proven ELO rating algorithms',
|
||||
'Comprehensive error handling and logging',
|
||||
'Docker deployment with Coolify integration'
|
||||
],
|
||||
'links': {
|
||||
'github': 'https://github.com/SimolZimol/',
|
||||
'wiki': 'https://github.com/SimolZimol/hoi4-elo-bot/wiki',
|
||||
'issues': 'https://github.com/SimolZimol/hoi4-elo-bot/issues',
|
||||
'documentation': 'https://github.com/SimolZimol/hoi4-elo-bot/docs'
|
||||
}
|
||||
}
|
||||
return render_template('project_detail.html', project=project)
|
||||
|
||||
@app.route('/projects/discord-ai-bot')
|
||||
def discord_ai_bot():
|
||||
"""Detailed page for Discord AI Bot — Moderation & Giveaways"""
|
||||
project = {
|
||||
'name': 'Discord AI Bot — Moderation & Giveaways',
|
||||
'tagline': 'Production-ready moderation, restart-safe giveaways, and a web dashboard',
|
||||
'description': 'Advanced moderation, persistent giveaway engine with Steam/Epic integration, and a Flask admin dashboard. Focused on reliability and UX.',
|
||||
'long_description': (
|
||||
'A production-ready Discord bot combining advanced moderation (warnings, temporary mutes with auto-restore), '
|
||||
'a restart-safe giveaway system with UUID-based IDs and Steam URL parsing, and a complementary Flask web dashboard. '
|
||||
'All active processes persist to MySQL and recover on startup.'
|
||||
),
|
||||
'version': '1.x',
|
||||
'status': 'Active',
|
||||
'technologies': ['Python', 'Discord.py', 'Flask', 'MySQL', 'aiohttp'],
|
||||
'features': [
|
||||
'Advanced Moderation: warnings, temp mutes, role restoration, detailed logs',
|
||||
'Persistent Giveaways: UUID IDs, sponsor attribution, Steam URL parsing',
|
||||
'Web Dashboard: Flask templates for admins and users',
|
||||
'Reliability: restart-safe process recovery from MySQL',
|
||||
'Clean UX: rich embeds, buttons, clear admin feedback'
|
||||
],
|
||||
'commands': [
|
||||
{ 'command': '!warn/@warn', 'description': 'Issue a warning with audit trail', 'permission': 'Moderator' },
|
||||
{ 'command': '!mute/@mute <time>', 'description': 'Temporary mute with auto-unmute and role restore', 'permission': 'Moderator' },
|
||||
{ 'command': '!giveaway start ...', 'description': 'Start a giveaway with title/prize/duration/sponsor', 'permission': 'Admin' },
|
||||
{ 'command': '!giveaway edit <uuid> ...', 'description': 'Edit and auto-update original giveaway message', 'permission': 'Admin' }
|
||||
],
|
||||
'links': {
|
||||
'github': 'https://github.com/SimolZimol/'
|
||||
},
|
||||
'installation': [
|
||||
'Create and configure MySQL database',
|
||||
'Set Discord token and DB credentials as environment variables',
|
||||
'Install Python dependencies',
|
||||
'Run the bot and (optionally) the Flask dashboard'
|
||||
]
|
||||
}
|
||||
return render_template('project_detail.html', project=project)
|
||||
|
||||
@app.route('/projects/discord-bot-stable-diffusion-amd')
|
||||
def discord_bot_stable_diffusion_amd():
|
||||
"""Detailed page for Discord Bot — Stable Diffusion (AMD)"""
|
||||
project = {
|
||||
'name': 'Discord Bot — Stable Diffusion (AMD)',
|
||||
'tagline': 'AI image generation for AMD GPUs',
|
||||
'description': 'Discord bot integrating Stable Diffusion image generation optimized for AMD GPUs with prompt-based commands.',
|
||||
'long_description': (
|
||||
'This project provides AI-powered text-to-image generation via Discord commands, with support optimized for AMD GPUs. '
|
||||
'It focuses on reliable job handling, clean user experience, and practical configuration.'
|
||||
),
|
||||
'version': 'Latest',
|
||||
'status': 'Active',
|
||||
'technologies': ['Python', 'Discord.py', 'AI'],
|
||||
'features': [
|
||||
'Prompt-based image generation via slash or text commands',
|
||||
'Optimized for AMD GPUs',
|
||||
'Async processing and job queueing',
|
||||
'Configurable parameters (model/prompt settings)'
|
||||
],
|
||||
'commands': [
|
||||
{ 'command': '/sd generate <prompt>', 'description': 'Generate an image from a text prompt', 'permission': 'User' },
|
||||
{ 'command': '/sd settings ...', 'description': 'View or adjust generation settings', 'permission': 'User' }
|
||||
],
|
||||
'links': {
|
||||
'github': 'https://github.com/SimolZimol/Discord-Bot-stable-diffusion-AMD',
|
||||
'issues': 'https://github.com/SimolZimol/Discord-Bot-stable-diffusion-AMD/issues'
|
||||
},
|
||||
'installation': [
|
||||
'Install Python 3.10+',
|
||||
'Set up required AI dependencies for AMD GPU support',
|
||||
'Configure Discord token and model settings',
|
||||
'Run the bot and test with a simple prompt'
|
||||
]
|
||||
}
|
||||
return render_template('project_detail.html', project=project)
|
||||
|
||||
if __name__ == '__main__':
|
||||
app.run(debug=True, host='0.0.0.0', port=5000)
|
||||
297
index.html
Normal file
297
index.html
Normal file
@@ -0,0 +1,297 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Devanturas by SimolZimol - Minecraft Development</title>
|
||||
<meta name="description" content="Devanturas - Professionelle Minecraft Plugin Entwicklung und Discord Bot Programming von SimolZimol">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="nav-logo">
|
||||
<h2>Devanturas</h2>
|
||||
<span>by SimolZimol</span>
|
||||
</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#home">Home</a></li>
|
||||
<li><a href="#projekte">Projekte</a></li>
|
||||
<li><a href="#about">Über mich</a></li>
|
||||
<li><a href="#kontakt">Kontakt</a></li>
|
||||
</ul>
|
||||
<div class="hamburger">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section id="home" class="hero">
|
||||
<div class="hero-content">
|
||||
<h1>Devanturas</h1>
|
||||
<h2>by <span class="highlight">SimolZimol</span></h2>
|
||||
<p>Professionelle Minecraft Plugin Entwicklung & Discord Bot Programming</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="#projekte" class="btn btn-primary">Meine Projekte</a>
|
||||
<a href="https://github.com/SimolZimol/" target="_blank" class="btn btn-secondary">
|
||||
<i class="fab fa-github"></i> GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-background">
|
||||
<div class="floating-icons">
|
||||
<i class="fab fa-java"></i>
|
||||
<i class="fab fa-python"></i>
|
||||
<i class="fas fa-server"></i>
|
||||
<i class="fab fa-discord"></i>
|
||||
<i class="fas fa-code"></i>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Projekte Section -->
|
||||
<section id="projekte" class="projekte">
|
||||
<div class="container">
|
||||
<h2>Meine Projekte</h2>
|
||||
<p class="section-subtitle">Ein Überblick über meine Minecraft- und Discord-Entwicklungsprojekte</p>
|
||||
|
||||
<div class="projects-grid">
|
||||
<!-- Fly Plugin -->
|
||||
<div class="project-card minecraft">
|
||||
<div class="project-header">
|
||||
<div class="project-icon">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</div>
|
||||
<div class="project-meta">
|
||||
<h3>Fly Plugin</h3>
|
||||
<span class="project-type">Minecraft Plugin</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>Lightweight Minecraft Plugin für einfaches Fliegen im Survival-Modus. Einfach zu verwenden für Spieler und Admins mit konfigurierbaren Geschwindigkeiten.</p>
|
||||
<div class="project-features">
|
||||
<span class="feature-tag">Java</span>
|
||||
<span class="feature-tag">Spigot/Paper</span>
|
||||
<span class="feature-tag">1.15-1.21</span>
|
||||
</div>
|
||||
<div class="project-links">
|
||||
<a href="https://www.spigotmc.org/resources/fly.83164/" target="_blank" class="project-link">
|
||||
<i class="fas fa-external-link-alt"></i> SpigotMC
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- HOI4 ELO Bot -->
|
||||
<div class="project-card discord">
|
||||
<div class="project-header">
|
||||
<div class="project-icon">
|
||||
<i class="fab fa-discord"></i>
|
||||
</div>
|
||||
<div class="project-meta">
|
||||
<h3>Hearts of Iron IV ELO Bot</h3>
|
||||
<span class="project-type">Discord Bot</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>Sophisticated Discord Bot für Hearts of Iron IV Communities mit vollständigem ELO-Rating-System, Statistiken und Match-Management.</p>
|
||||
<div class="project-features">
|
||||
<span class="feature-tag">Python</span>
|
||||
<span class="feature-tag">Discord.py</span>
|
||||
<span class="feature-tag">MySQL</span>
|
||||
<span class="feature-tag">Docker</span>
|
||||
</div>
|
||||
<div class="project-stats">
|
||||
<div class="stat">
|
||||
<span class="stat-number">ELO</span>
|
||||
<span class="stat-label">Rating System</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-number">T1-T3</span>
|
||||
<span class="stat-label">Tier System</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Weitere Projekte Placeholder -->
|
||||
<div class="project-card coming-soon">
|
||||
<div class="project-header">
|
||||
<div class="project-icon">
|
||||
<i class="fas fa-code"></i>
|
||||
</div>
|
||||
<div class="project-meta">
|
||||
<h3>Weitere Projekte</h3>
|
||||
<span class="project-type">In Entwicklung</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>Neue spannende Minecraft Plugins und Discord Bots sind in Planung. Stay tuned für Updates!</p>
|
||||
<div class="project-features">
|
||||
<span class="feature-tag">Minecraft</span>
|
||||
<span class="feature-tag">Discord</span>
|
||||
<span class="feature-tag">Coming Soon</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Technologie Stack -->
|
||||
<div class="tech-stack">
|
||||
<h3>Technologie Stack</h3>
|
||||
<div class="tech-grid">
|
||||
<div class="tech-item">
|
||||
<i class="fab fa-java"></i>
|
||||
<span>Java</span>
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<i class="fab fa-python"></i>
|
||||
<span>Python</span>
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<i class="fab fa-discord"></i>
|
||||
<span>Discord.py</span>
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<i class="fas fa-database"></i>
|
||||
<span>MySQL</span>
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<i class="fab fa-docker"></i>
|
||||
<span>Docker</span>
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<i class="fas fa-server"></i>
|
||||
<span>Spigot/Paper</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="about">
|
||||
<div class="container">
|
||||
<div class="about-content">
|
||||
<div class="about-text">
|
||||
<h2>Über SimolZimol</h2>
|
||||
<p>Willkommen bei Devanturas! Ich bin ein leidenschaftlicher Entwickler mit Fokus auf Minecraft Plugin-Entwicklung und Discord Bot Programming.</p>
|
||||
|
||||
<div class="skills-list">
|
||||
<div class="skill-category">
|
||||
<h4>Minecraft Development</h4>
|
||||
<ul>
|
||||
<li>Spigot & Paper Plugin Entwicklung</li>
|
||||
<li>Java Programming</li>
|
||||
<li>Server Administration</li>
|
||||
<li>Performance Optimierung</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="skill-category">
|
||||
<h4>Discord Development</h4>
|
||||
<ul>
|
||||
<li>Discord.py Bot Development</li>
|
||||
<li>Database Integration</li>
|
||||
<li>Async Programming</li>
|
||||
<li>Community Management Tools</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="achievements">
|
||||
<div class="achievement">
|
||||
<i class="fas fa-download"></i>
|
||||
<div>
|
||||
<h4>Fly Plugin</h4>
|
||||
<p>Aktiv auf SpigotMC</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="achievement">
|
||||
<i class="fab fa-github"></i>
|
||||
<div>
|
||||
<h4>Open Source</h4>
|
||||
<p>GitHub Repositories</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-image">
|
||||
<div class="code-preview">
|
||||
<div class="code-header">
|
||||
<span class="code-title">example.java</span>
|
||||
<div class="code-buttons">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-content">
|
||||
<pre><code>@Override
|
||||
public boolean onCommand(CommandSender sender,
|
||||
Command command,
|
||||
String label,
|
||||
String[] args) {
|
||||
|
||||
if (command.getName().equalsIgnoreCase("fly")) {
|
||||
Player player = (Player) sender;
|
||||
toggleFlight(player);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Kontakt Section -->
|
||||
<section id="kontakt" class="kontakt">
|
||||
<div class="container">
|
||||
<h2>Kontakt & Links</h2>
|
||||
<p>Lass uns in Verbindung bleiben und zusammenarbeiten!</p>
|
||||
|
||||
<div class="contact-grid">
|
||||
<a href="https://github.com/SimolZimol/" target="_blank" class="contact-card github">
|
||||
<i class="fab fa-github"></i>
|
||||
<h3>GitHub</h3>
|
||||
<p>Meine Open Source Projekte und Code Repositories</p>
|
||||
</a>
|
||||
|
||||
<a href="https://discordapp.com/users/253922739709018114" target="_blank" class="contact-card discord">
|
||||
<i class="fab fa-discord"></i>
|
||||
<h3>Discord</h3>
|
||||
<p>Direkter Kontakt für Fragen und Support</p>
|
||||
</a>
|
||||
|
||||
<a href="https://www.spigotmc.org/resources/fly.83164/" target="_blank" class="contact-card spigot">
|
||||
<i class="fas fa-plug"></i>
|
||||
<h3>SpigotMC</h3>
|
||||
<p>Fly Plugin und weitere Minecraft Ressourcen</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-text">
|
||||
<h3>Devanturas</h3>
|
||||
<p>Professional Minecraft & Discord Development by SimolZimol</p>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<a href="https://github.com/SimolZimol/" target="_blank"><i class="fab fa-github"></i></a>
|
||||
<a href="https://discordapp.com/users/253922739709018114" target="_blank"><i class="fab fa-discord"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2025 Devanturas by SimolZimol. Alle Rechte vorbehalten.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
160
projekte des/PROJECT_DESCRIPTION.txt
Normal file
160
projekte des/PROJECT_DESCRIPTION.txt
Normal file
@@ -0,0 +1,160 @@
|
||||
# Hearts of Iron IV ELO Discord Bot
|
||||
|
||||
## Project Overview
|
||||
|
||||
A sophisticated Discord bot designed specifically for Hearts of Iron IV multiplayer communities, featuring a complete ELO rating system similar to chess rankings. This bot helps organize competitive matches, track player performance, and maintain fair gameplay through advanced statistical analysis.
|
||||
|
||||
## 🎮 Key Features
|
||||
|
||||
### ELO Rating System
|
||||
- **Dual Rating Modes**: Separate ELO ratings for Standard and Competitive gameplay
|
||||
- **Chess-like Algorithm**: Uses proven ELO formula with HOI4-specific modifications
|
||||
- **T-Level System**: Country tier-based multipliers (T1: 0.8x, T2: 1.0x, T3: 1.2x points)
|
||||
- **Draw Support**: Intelligent draw handling with ELO adjustments based on team strength differences
|
||||
- **Starting Rating**: 800 ELO for all new players
|
||||
|
||||
### Game Management
|
||||
- **Match Creation**: `/hoi4create` - Set up Standard or Competitive games
|
||||
- **Player Setup**: `/hoi4setup` - Add players with team assignments and T-levels
|
||||
- **Game Completion**: `/hoi4end` - Process results and calculate ELO changes automatically
|
||||
- **Live Tracking**: Real-time game status and player management
|
||||
|
||||
### Statistics & Analytics
|
||||
- **Player Profiles**: Comprehensive stats with ELO rankings and percentiles
|
||||
- **Win/Draw/Loss Records**: Complete match history tracking
|
||||
- **Leaderboards**: Ranked player lists with detailed performance metrics
|
||||
- **Match History**: Searchable game archive with filtering options
|
||||
|
||||
### Advanced Features
|
||||
- **Hybrid Commands**: All commands work as both slash (/) and text (!) commands
|
||||
- **Permission System**: Owner-only administrative commands
|
||||
- **Error Handling**: Robust error management with detailed logging
|
||||
- **Database Integration**: MySQL support with automatic table creation
|
||||
|
||||
## 🛠 Technical Implementation
|
||||
|
||||
### Architecture
|
||||
- **Framework**: Discord.py 2.3.2 with hybrid command system
|
||||
- **Database**: MySQL with aiomysql for async operations
|
||||
- **Deployment**: Docker containerization with Coolify support
|
||||
- **Environment**: Python 3.10+ with comprehensive dependency management
|
||||
|
||||
### Database Schema
|
||||
```sql
|
||||
-- Players table with dual ELO ratings
|
||||
players (discord_id, username, standard_elo, competitive_elo, timestamps)
|
||||
|
||||
-- Games with JSON player data and match metadata
|
||||
games (game_name, game_type, status, players, winner_team, timestamps)
|
||||
|
||||
-- Detailed match results for statistical analysis
|
||||
game_results (game_id, discord_id, team_info, elo_changes, result_type)
|
||||
```
|
||||
|
||||
### ELO Calculation Algorithm
|
||||
```python
|
||||
# Standard ELO formula with HOI4 modifications
|
||||
expected_score = 1 / (1 + 10^((opponent_avg - player_elo) / 400))
|
||||
elo_change = K_FACTOR * (actual_score - expected_score) * t_level_multiplier
|
||||
|
||||
# Result scoring: Win=1.0, Draw=0.5, Loss=0.0
|
||||
# K-Factor: 32 (standard competitive value)
|
||||
```
|
||||
|
||||
## 🚀 Deployment & Infrastructure
|
||||
|
||||
### Docker Configuration
|
||||
- **Base Image**: Python 3.10-slim for optimal performance
|
||||
- **Dependencies**: Automated installation with requirements.txt
|
||||
- **Environment Variables**: Secure configuration through Coolify
|
||||
- **Health Checks**: Built-in monitoring and error reporting
|
||||
|
||||
### Coolify Integration
|
||||
- **One-Click Deployment**: Seamless integration with Coolify platform
|
||||
- **Environment Management**: Secure handling of tokens and database credentials
|
||||
- **Scaling Support**: Ready for multi-server Discord communities
|
||||
- **Backup Compatible**: Database-driven design supports easy backups
|
||||
|
||||
### Security Features
|
||||
- **Owner Verification**: ID-based permission system (253922739709018114)
|
||||
- **Input Validation**: Comprehensive parameter checking and sanitization
|
||||
- **Error Isolation**: Graceful handling of edge cases and database issues
|
||||
- **Rate Limiting**: Discord API compliance with proper request management
|
||||
|
||||
## 📊 Command Reference
|
||||
|
||||
### Core Commands
|
||||
- `/hoi4create <type> <name>` - Create new match (standard/competitive)
|
||||
- `/hoi4setup <game> <@user> <team> <t-level>` - Add player to match
|
||||
- `/hoi4end <game> <winner/draw>` - Complete match and process ELO
|
||||
- `/hoi4stats [@user]` - View detailed player statistics
|
||||
- `/hoi4leaderboard [type] [limit]` - Display ranked player lists
|
||||
- `/hoi4history [filters]` - Browse completed matches
|
||||
- `/hoi4games` - Show active matches in setup phase
|
||||
|
||||
### Administrative
|
||||
- `/reload` - Sync commands and restart bot functions (Owner only)
|
||||
|
||||
## 🎯 Use Cases
|
||||
|
||||
### Competitive Communities
|
||||
Perfect for established HOI4 multiplayer groups wanting to:
|
||||
- Track long-term player improvement and skill development
|
||||
- Create balanced teams based on statistical performance
|
||||
- Organize tournaments with proper seeding and brackets
|
||||
- Maintain historical records of community achievements
|
||||
|
||||
### Casual Gaming Groups
|
||||
Ideal for friends who want to:
|
||||
- Add competitive elements to regular gaming sessions
|
||||
- See progression over time with visual feedback
|
||||
- Settle debates about who's actually the best player
|
||||
- Encourage consistent participation through gamification
|
||||
|
||||
### Content Creators
|
||||
Valuable for streamers and YouTubers to:
|
||||
- Create engaging tournament-style content
|
||||
- Provide viewers with statistical context during matches
|
||||
- Build narrative around player rivalries and comebacks
|
||||
- Generate data-driven content about community performance
|
||||
|
||||
## 🔮 Future Enhancement Possibilities
|
||||
|
||||
### Advanced Analytics
|
||||
- **Performance Trends**: ELO progression graphs and trend analysis
|
||||
- **Country Statistics**: Track performance by nation selection
|
||||
- **Team Synergy**: Analyze optimal team compositions
|
||||
- **Seasonal Resets**: Periodic ranking resets with historical preservation
|
||||
|
||||
### Integration Options
|
||||
- **Web Dashboard**: Comprehensive statistics portal
|
||||
- **Match Scheduling**: Calendar integration for planned games
|
||||
- **Streaming Integration**: OBS overlays with live statistics
|
||||
- **API Endpoints**: Third-party tool integration capabilities
|
||||
|
||||
### Community Features
|
||||
- **Achievement System**: Unlock rewards for milestones
|
||||
- **Clan Support**: Team-based rankings and competitions
|
||||
- **Tournament Brackets**: Automated tournament management
|
||||
- **Mentorship Matching**: Pair experienced players with newcomers
|
||||
|
||||
## 💡 Technical Highlights
|
||||
|
||||
This project demonstrates proficiency in:
|
||||
- **Asynchronous Programming**: Efficient handling of concurrent Discord interactions
|
||||
- **Database Design**: Normalized schema with performance optimization
|
||||
- **API Integration**: Discord.py library mastery with modern best practices
|
||||
- **DevOps Practices**: Containerization and deployment automation
|
||||
- **Mathematical Algorithms**: Implementation of proven rating systems
|
||||
- **User Experience**: Intuitive command design with comprehensive error handling
|
||||
|
||||
## 🏆 Project Impact
|
||||
|
||||
The HOI4 ELO Bot transforms casual gaming communities into structured competitive environments while maintaining the fun and social aspects that make multiplayer gaming enjoyable. By providing objective performance metrics and historical tracking, it helps players improve their skills and creates lasting engagement within gaming communities.
|
||||
|
||||
---
|
||||
|
||||
**Developer**: simolzimol
|
||||
**Project Type**: Discord Bot / Community Management Tool
|
||||
**Technology Stack**: Python, Discord.py, MySQL, Docker, Coolify
|
||||
**Status**: Production Ready
|
||||
76
projekte des/WEBSITE_DESCRIPTION.md
Normal file
76
projekte des/WEBSITE_DESCRIPTION.md
Normal file
@@ -0,0 +1,76 @@
|
||||
# Fly Plugin — Simple flight for survival servers
|
||||
|
||||
Author: simolzimol
|
||||
Project page: https://www.spigotmc.org/resources/fly.83164/
|
||||
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Fly is a lightweight, reliable Minecraft plugin that restores creative-like flying in survival mode. It’s designed to be simple for players and server admins: toggle flight for yourself or others, and optionally adjust flight speed. The plugin focuses on minimalism, performance, and easy customization.
|
||||
|
||||
## Key Features
|
||||
|
||||
- Toggle flight for yourself: `/fly`
|
||||
- Toggle flight for others: `/fly <player>`
|
||||
- Adjustable flight speed: `/fly speed <1-10>` and `/fly <player> speed <1-10>`
|
||||
- Fully configurable messages and prefix (color codes supported with `&`)
|
||||
- Live configuration reload: `/flyreload` (no server restart required)
|
||||
- Optional command and permission-denied logging for admins
|
||||
- Small footprint and compatibility across many server versions
|
||||
|
||||
## Commands & Permissions
|
||||
|
||||
- `/fly` — Toggle your own flight. Permission: `fly.fly`
|
||||
- `/fly <player>` — Toggle another player's flight. Permission: `other.fly`
|
||||
- `/fly speed <1-10>` — Set your flight speed (1 = slow, 10 = fast). Permission: `fly.speed`
|
||||
- `/fly <player> speed <1-10>` — Set another player's flight speed. Permissions: `other.fly` and `fly.speed`
|
||||
- `/flyreload` — Reload plugin config. Permission: `fly.reload`
|
||||
|
||||
## Configuration & Customization
|
||||
|
||||
The plugin creates a `config.yml` on first run. Main options include:
|
||||
|
||||
- `settings.prefix` — message prefix (supports color codes)
|
||||
- `settings.use_prefix` — enable/disable prefix
|
||||
- `messages.*` — all messages for toggles, speed changes, errors, etc.
|
||||
- `settings.log_commands` / `settings.log_permission_denied`
|
||||
|
||||
Placeholders supported in messages:
|
||||
- `{player}` — target player name
|
||||
- `{sender}` — command sender
|
||||
- `{prefix}` — configured message prefix
|
||||
|
||||
Important upgrade note: when updating to a new major release, delete the old `config.yml` before restarting the server so new keys and defaults are applied cleanly.
|
||||
|
||||
## Compatibility
|
||||
|
||||
- Native support: Minecraft 1.15
|
||||
- Tested on: 1.15 — 1.21
|
||||
- Server types: Spigot, Paper, Bukkit
|
||||
|
||||
## Installation
|
||||
|
||||
1. Download the latest JAR.
|
||||
2. Put the JAR into your server `plugins/` folder.
|
||||
3. Start the server so the plugin can generate `config.yml`.
|
||||
4. Edit `config.yml` to customize messages and settings.
|
||||
5. Use `/flyreload` to apply config changes without restarting.
|
||||
|
||||
## Use Cases
|
||||
|
||||
- Give VIPs temporary flight privileges
|
||||
- Enable staff to fly for moderation and world-building
|
||||
- Add creative-like movement to private plots and minigames
|
||||
|
||||
## Support & Contact
|
||||
|
||||
If you need help or want to request features, contact me on Discord: `simolzimol` or via the Spigot resource page. I welcome bug reports, suggestions, and pull requests.
|
||||
|
||||
## License & Source
|
||||
|
||||
Include whichever license you prefer (MIT recommended for simple plugins). Link to the project page and, if you publish the source, a GitHub repository.
|
||||
|
||||
---
|
||||
|
||||
If you want, I can also produce a short set of screenshots and a short changelog section you can paste on the site, or a ready-made HTML snippet for your webpage.
|
||||
95
projekte des/website_project_description_en.txt
Normal file
95
projekte des/website_project_description_en.txt
Normal file
@@ -0,0 +1,95 @@
|
||||
SimolZimol Discord AI Bot — Moderation, Giveaways, and Web Dashboard
|
||||
|
||||
Overview
|
||||
A production-ready Discord bot built by SimolZimol that combines advanced moderation, a persistent giveaway engine with Steam/Epic game integration, AI-powered utilities, and a lightweight Flask-based admin dashboard. The project focuses on reliability, data persistence, and a great user experience for community servers.
|
||||
|
||||
Highlights
|
||||
- Advanced Moderation System: Warnings, temporary mutes with automatic unmute, role restoration, detailed logs, and user-friendly commands with numeric and UUID identifiers.
|
||||
- Persistent Giveaways: Robust giveaway engine with UUID-based IDs, sponsor attribution, Steam URL parsing (auto title/image), message auto-updates on edits, and restart-safe state via MySQL.
|
||||
- Web Dashboard: Flask templates for server admin and user views (leaderboard, user data, settings, logs) to complement Discord commands.
|
||||
- Reliability & Recovery: Active processes are tracked in the database and restored on startup so running giveaways are never lost.
|
||||
- Clean UX: Rich embeds, buttons for joining giveaways, clear admin feedback, and helpful list/view commands for transparency.
|
||||
|
||||
Key Features
|
||||
1) Moderation & Safety
|
||||
- Warn and mute users with clear audit trails
|
||||
- Temporary mutes stored in user_mutes table; auto-unmute + role restoration
|
||||
- View/list mutes with status filters (active, completed, expired, cancelled)
|
||||
- Mod log channel integration and smart notifications
|
||||
|
||||
2) Giveaways (Steam/Epic Ready)
|
||||
- Start giveaways with title, subtitle, prize, duration, platform, sponsor, and optional game URL
|
||||
- Steam integration via aiohttp: automatic game info extraction (title, image, short description)
|
||||
- Sponsor handling: mention parsing to display a clean sponsor name in the embed footer
|
||||
- UUID-based giveaway IDs for reliability across restarts and edits
|
||||
- Edit giveaways after launch; the original Discord post updates automatically
|
||||
- List giveaways from memory and database; load any giveaway back into memory on demand
|
||||
- Full restart safety: active giveaways are restored when the bot starts
|
||||
|
||||
3) Web & Admin Experience
|
||||
- Flask-powered pages (templates folder) for landing, dashboards, settings, users, logs, giveaways
|
||||
- Complements Discord-first management with a browsable UI for staff and users
|
||||
|
||||
4) Observability & Logs
|
||||
- Structured log files per day to simplify troubleshooting
|
||||
- Clear status messages for admins after every critical action (create, edit, load)
|
||||
|
||||
Architecture at a Glance
|
||||
- Language: Python
|
||||
- Frameworks/Libraries: discord.py, Flask, aiohttp, aiomysql, regex, requests
|
||||
- Data: MySQL (connection pooling) with tables for user data, mutes, and active processes
|
||||
- Process Orchestration: A process manager persists and restores active tasks (e.g., running giveaways)
|
||||
- Caching: In-memory maps for hot data with DB as the source of truth
|
||||
- Background Workers: Queues for AI tasks and live chat processing
|
||||
|
||||
How Giveaways Work
|
||||
1) Creation: Admin triggers a hybrid command; the bot builds a rich embed with join button and (optional) Steam info.
|
||||
2) Persistence: A process entry is created in MySQL (active_processes) with all metadata and end time.
|
||||
3) Participation: Users join via button; participants are tracked and persisted.
|
||||
4) Editing: Admins can modify title/subtitle/prize/sponsor/duration; embeds update automatically.
|
||||
5) Resilience: If the bot restarts, giveaways are restored from the database (including message IDs) and continue.
|
||||
6) Completion: Winners are selected and recorded; sponsors and results can be announced.
|
||||
|
||||
Notable Technical Decisions
|
||||
- UUIDs as Giveaway IDs: Avoids collisions and survives restarts; matches process UUIDs in the DB.
|
||||
- Dual-Source Listing: listgiveaways reads both live memory and DB to present the complete picture.
|
||||
- Message Update Pipeline: Each giveaway stores its message ID so edits can refresh the original post.
|
||||
- Sponsor Mentions: Clean display names in embeds even when the raw input is a mention or handle.
|
||||
|
||||
Security & Permissions
|
||||
- Local permission levels (5+ for moderators, higher for admins/owner)
|
||||
- Command gating for sensitive operations (edit, load, list, config)
|
||||
- Read-only fallbacks where appropriate to avoid destructive actions
|
||||
|
||||
What You Can Do With It
|
||||
- Run a professional-grade community bot with moderation and giveaway tools
|
||||
- Host sponsor-backed game key drops integrated with Steam/Epic pages
|
||||
- Offer a friendly web dashboard for staff and users alongside Discord commands
|
||||
|
||||
Getting Started (Local)
|
||||
- Requirements are listed in requirements.txt (Python 3.10+ recommended)
|
||||
- Create a virtual environment and install dependencies
|
||||
- Provide your Discord and database credentials via environment variables or config
|
||||
- Start the bot (bot.py) and optional Flask app (app.py)
|
||||
|
||||
Production Notes
|
||||
- Use a managed MySQL instance and set up proper connection pooling
|
||||
- Run the bot in a process manager (e.g., systemd, pm2, or Docker as provided)
|
||||
- Configure regular backups for the database (active processes, user_mutes, user_data)
|
||||
- Rotate logs and monitor for rate limits or permission issues
|
||||
|
||||
Status & Roadmap
|
||||
- Completed: Persistent mutes, restart-safe giveaways, Steam integration, sponsor support, message auto-updates, admin listing/editing
|
||||
- In Progress: Quality-of-life improvements across dashboard and command UX
|
||||
- Future Ideas: Analytics, multi-language embeds, role-locked giveaways, prize claim portals
|
||||
|
||||
About the Author
|
||||
Built by SimolZimol — I design and operate community-first tooling with a focus on reliability, clear UX, and practical automation.
|
||||
|
||||
Contact & Links
|
||||
- Email/Discord: (your preferred contact)
|
||||
- Live Demo: (link if hosted)
|
||||
- Source Code: (GitHub/website link)
|
||||
|
||||
Short Blurb (Copy-Paste)
|
||||
A production-ready Discord bot by SimolZimol featuring advanced moderation, a restart-safe giveaway engine with Steam integration, and a companion Flask dashboard — built for reliability, clarity, and great community UX.
|
||||
2
requirements.txt
Normal file
2
requirements.txt
Normal file
@@ -0,0 +1,2 @@
|
||||
Flask==3.0.3
|
||||
gunicorn==21.2.0
|
||||
220
script.js
Normal file
220
script.js
Normal file
@@ -0,0 +1,220 @@
|
||||
// Mobile Navigation Toggle
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const hamburger = document.querySelector('.hamburger');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
|
||||
hamburger.addEventListener('click', function() {
|
||||
navLinks.classList.toggle('active');
|
||||
hamburger.classList.toggle('active');
|
||||
});
|
||||
|
||||
// Close mobile nav when clicking on a link
|
||||
document.querySelectorAll('.nav-links a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
navLinks.classList.remove('active');
|
||||
hamburger.classList.remove('active');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Smooth scrolling for navigation links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Navbar background on scroll
|
||||
window.addEventListener('scroll', function() {
|
||||
const navbar = document.querySelector('.navbar');
|
||||
if (window.scrollY > 100) {
|
||||
navbar.style.background = 'rgba(10, 10, 10, 0.98)';
|
||||
} else {
|
||||
navbar.style.background = 'rgba(10, 10, 10, 0.95)';
|
||||
}
|
||||
});
|
||||
|
||||
// Intersection Observer for animations
|
||||
const observeElements = () => {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
});
|
||||
|
||||
// Observe project cards
|
||||
document.querySelectorAll('.project-card').forEach(card => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(30px)';
|
||||
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
||||
observer.observe(card);
|
||||
});
|
||||
|
||||
// Observe tech items
|
||||
document.querySelectorAll('.tech-item').forEach((item, index) => {
|
||||
item.style.opacity = '0';
|
||||
item.style.transform = 'translateY(30px)';
|
||||
item.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
|
||||
observer.observe(item);
|
||||
});
|
||||
|
||||
// Observe contact cards
|
||||
document.querySelectorAll('.contact-card').forEach((card, index) => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(30px)';
|
||||
card.style.transition = `opacity 0.6s ease ${index * 0.2}s, transform 0.6s ease ${index * 0.2}s`;
|
||||
observer.observe(card);
|
||||
});
|
||||
};
|
||||
|
||||
// Initialize animations when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', observeElements);
|
||||
|
||||
// Add hover effects for project cards
|
||||
document.querySelectorAll('.project-card').forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-10px) scale(1.02)';
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateY(0) scale(1)';
|
||||
});
|
||||
});
|
||||
|
||||
// Typing effect for hero text (optional enhancement)
|
||||
const typeWriter = (element, text, speed = 100) => {
|
||||
let i = 0;
|
||||
element.innerHTML = '';
|
||||
const timer = setInterval(() => {
|
||||
if (i < text.length) {
|
||||
element.innerHTML += text.charAt(i);
|
||||
i++;
|
||||
} else {
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, speed);
|
||||
};
|
||||
|
||||
// Add some interactive particles (optional)
|
||||
const createParticles = () => {
|
||||
const particles = document.createElement('div');
|
||||
particles.className = 'particles';
|
||||
particles.style.cssText = `
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
`;
|
||||
|
||||
for (let i = 0; i < 50; i++) {
|
||||
const particle = document.createElement('div');
|
||||
particle.style.cssText = `
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background: rgba(0, 212, 255, 0.5);
|
||||
border-radius: 50%;
|
||||
animation: float ${Math.random() * 3 + 2}s ease-in-out infinite;
|
||||
left: ${Math.random() * 100}%;
|
||||
top: ${Math.random() * 100}%;
|
||||
animation-delay: ${Math.random() * 2}s;
|
||||
`;
|
||||
particles.appendChild(particle);
|
||||
}
|
||||
|
||||
document.body.appendChild(particles);
|
||||
};
|
||||
|
||||
// Initialize particles on hero section
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
if (window.innerWidth > 768) {
|
||||
// createParticles();
|
||||
}
|
||||
});
|
||||
|
||||
// Add active state to navigation links based on scroll position
|
||||
const updateActiveNav = () => {
|
||||
const sections = document.querySelectorAll('section[id]');
|
||||
const navLinks = document.querySelectorAll('.nav-links a[href^="#"]');
|
||||
|
||||
let current = '';
|
||||
|
||||
sections.forEach(section => {
|
||||
const sectionTop = section.offsetTop;
|
||||
const sectionHeight = section.clientHeight;
|
||||
if (pageYOffset >= sectionTop - 200) {
|
||||
current = section.getAttribute('id');
|
||||
}
|
||||
});
|
||||
|
||||
navLinks.forEach(link => {
|
||||
link.classList.remove('active');
|
||||
if (link.getAttribute('href') === `#${current}`) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', updateActiveNav);
|
||||
|
||||
// Add CSS for active nav links
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.nav-links a.active {
|
||||
color: #00d4ff !important;
|
||||
}
|
||||
|
||||
.nav-links a.active::before {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav-links {
|
||||
position: fixed;
|
||||
top: 70px;
|
||||
right: -100%;
|
||||
width: 100%;
|
||||
height: calc(100vh - 70px);
|
||||
background: rgba(10, 10, 10, 0.98);
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding-top: 2rem;
|
||||
transition: right 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-links.active {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.hamburger.active span:nth-child(1) {
|
||||
transform: rotate(-45deg) translate(-5px, 6px);
|
||||
}
|
||||
|
||||
.hamburger.active span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hamburger.active span:nth-child(3) {
|
||||
transform: rotate(45deg) translate(-5px, -6px);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
document.head.appendChild(style);
|
||||
628
static/css/styles.css
Normal file
628
static/css/styles.css
Normal file
@@ -0,0 +1,628 @@
|
||||
/* Devanturas: Comprehensive Styles for Flask Templates */
|
||||
|
||||
/* Reset and Base */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #ddd;
|
||||
background: #0a0a0a;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
a { color: #00d4ff; text-decoration: none; }
|
||||
a:hover { color: #66e6ff; }
|
||||
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
|
||||
|
||||
/* Navbar */
|
||||
.navbar { position: fixed; top: 0; width: 100%; background: rgba(10,10,10,0.95); backdrop-filter: blur(10px); z-index: 1000; padding: 1rem 0; transition: all 0.3s ease; border-bottom: 1px solid #1f1f1f; }
|
||||
.nav-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
|
||||
.nav-logo a { display: inline-block; }
|
||||
.nav-logo h2 { color: #fff; font-size: 1.5rem; font-weight: 700; line-height: 1; }
|
||||
.nav-logo span { color: #00d4ff; font-size: 0.9rem; font-weight: 300; }
|
||||
.nav-links { display: flex; list-style: none; gap: 2rem; }
|
||||
.nav-links a { color: #fff; font-weight: 500; position: relative; transition: color 0.3s ease; }
|
||||
.nav-links a::before { content: ''; position: absolute; bottom: -6px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg,#00d4ff,#0099cc); transition: width 0.3s ease; }
|
||||
.nav-links a:hover { color: #00d4ff; }
|
||||
.nav-links a:hover::before, .nav-links a.active::before { width: 100%; }
|
||||
.nav-links a.active { color: #00d4ff; }
|
||||
.hamburger { display: none; flex-direction: column; cursor: pointer; }
|
||||
.hamburger span { width: 25px; height: 3px; background: #fff; margin: 3px 0; transition: 0.3s; }
|
||||
|
||||
/* Hero */
|
||||
.hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#0a0a0a 0%, #1a1a2e 50%, #16213e 100%); position: relative; overflow: hidden; padding-top: 60px; }
|
||||
.hero-content { text-align: center; z-index: 2; max-width: 900px; padding: 0 20px; }
|
||||
.hero h1 { font-size: 4rem; font-weight: 800; margin-bottom: .5rem; background: linear-gradient(135deg,#fff,#00d4ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: fadeInUp 1s ease; }
|
||||
.hero h2 { font-size: 2rem; color: #bbb; margin-bottom: 1rem; animation: fadeInUp 1s ease .2s both; }
|
||||
.hero p { font-size: 1.2rem; color: #aaa; margin-bottom: 2rem; animation: fadeInUp 1s ease .4s both; }
|
||||
.highlight { color: #00d4ff; font-weight: 700; }
|
||||
.hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; animation: fadeInUp 1s ease .6s both; }
|
||||
.btn { padding: 12px 24px; border: none; border-radius: 50px; font-size: 1rem; font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; transition: all .3s ease; }
|
||||
.btn-primary { background: linear-gradient(135deg,#00d4ff,#0099cc); color:#fff; box-shadow: 0 4px 15px rgba(0,212,255,.3); }
|
||||
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,212,255,.4); }
|
||||
.btn-secondary { background: transparent; color:#fff; border: 2px solid #333; }
|
||||
.btn-secondary:hover { background:#333; transform: translateY(-2px); }
|
||||
|
||||
.hero-background { position:absolute; inset:0; z-index:1; }
|
||||
.floating-icons { position:absolute; width:100%; height:100%; }
|
||||
.floating-icons i { position:absolute; color: rgba(0,212,255,0.08); font-size: 3rem; animation: float 6s ease-in-out infinite; }
|
||||
.floating-icons i:nth-child(1){ top:20%; left:10%; animation-delay:0s; }
|
||||
.floating-icons i:nth-child(2){ top:60%; left:80%; animation-delay:1s; }
|
||||
.floating-icons i:nth-child(3){ top:30%; right:20%; animation-delay:2s; }
|
||||
.floating-icons i:nth-child(4){ bottom:30%; left:20%; animation-delay:3s; }
|
||||
.floating-icons i:nth-child(5){ bottom:20%; right:10%; animation-delay:4s; }
|
||||
|
||||
/* Shared Sections */
|
||||
section { scroll-margin-top: 80px; }
|
||||
.section-subtitle { text-align:center; color:#aaa; font-size:1.05rem; margin: .5rem 0 2rem; }
|
||||
|
||||
/* Featured Projects on Home */
|
||||
.featured-projects { padding: 80px 0; background:#111; }
|
||||
.featured-projects h2 { text-align:center; color:#fff; font-size:2.5rem; margin-bottom:.5rem; }
|
||||
.projects-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; margin-bottom: 2.5rem; }
|
||||
.project-card { background: linear-gradient(145deg,#161616,#1e1e1e); border:1px solid #2a2a2a; border-radius: 16px; padding: 1.5rem; transition: all .3s ease; position: relative; overflow: hidden; }
|
||||
.project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg,#00d4ff,#0099cc); opacity: 0; transition: .3s; }
|
||||
.project-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,212,255,.08); }
|
||||
.project-card:hover::before { opacity: 1; }
|
||||
.project-header { display:flex; align-items:center; gap:1rem; margin-bottom: .75rem; }
|
||||
.project-icon { width:52px; height:52px; border-radius: 12px; display:flex; align-items:center; justify-content:center; color:#fff; font-size: 1.6rem; }
|
||||
.minecraft .project-icon { background: linear-gradient(135deg,#8b4513,#5a341b); }
|
||||
.discord .project-icon { background: linear-gradient(135deg,#7289da,#5865f2); }
|
||||
.coming-soon .project-icon { background: linear-gradient(135deg,#666,#444); }
|
||||
.project-meta h3 { color:#fff; font-size:1.25rem; font-weight:700; margin-bottom:.2rem; }
|
||||
.project-type { color:#00d4ff; font-size:.9rem; font-weight:500; }
|
||||
.project-card p { color:#cfcfcf; margin: .5rem 0 1.25rem; }
|
||||
.project-features { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom: 1.25rem; }
|
||||
.feature-tag, .tech-tag { background: rgba(0,212,255,.1); color:#00d4ff; padding:.32rem .8rem; border-radius: 999px; font-size: .82rem; border:1px solid rgba(0,212,255,.2); }
|
||||
.project-links { display:flex; gap: 1rem; }
|
||||
.project-link { color:#00d4ff; font-weight:600; }
|
||||
.project-link:hover { color:#fff; }
|
||||
.view-all-projects { display:flex; justify-content:center; }
|
||||
|
||||
/* Skills Overview on Home */
|
||||
.skills-overview { padding: 80px 0; background:#0a0a0a; }
|
||||
.skills-overview h2 { text-align:center; color:#fff; font-size:2.2rem; margin-bottom: 1.5rem; }
|
||||
.skills-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
|
||||
.skill-card { background:#121212; border:1px solid #232323; border-radius: 14px; padding: 1.25rem; transition:.3s; }
|
||||
.skill-card:hover { transform: translateY(-4px); border-color:#2f2f2f; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
|
||||
.skill-icon { width:48px; height:48px; border-radius: 10px; background: rgba(0,212,255,.1); color:#00d4ff; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:.75rem; }
|
||||
.skill-card h3 { color:#fff; margin-bottom:.5rem; }
|
||||
.skill-card p { color:#bdbdbd; margin-bottom:.75rem; }
|
||||
.skill-card ul { padding-left: 1.1rem; }
|
||||
.skill-card li { color:#bdbdbd; margin:.25rem 0; }
|
||||
|
||||
/* Stats & CTA on Home */
|
||||
.stats { padding: 60px 0; background:#111; }
|
||||
.stats-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:1rem; }
|
||||
.stat-item { background:#141414; border:1px solid #222; border-radius:12px; padding: 1.25rem; text-align:center; }
|
||||
.stat-number { font-size:1.4rem; color:#00d4ff; font-weight:800; }
|
||||
.stat-label { color:#a7a7a7; font-size:.9rem; }
|
||||
.cta { padding: 80px 0; background: linear-gradient(135deg,#0c0c0c,#121a24); }
|
||||
.cta-content { text-align:center; }
|
||||
.cta h2 { color:#fff; font-size:2rem; margin-bottom:.5rem; }
|
||||
.cta p { color:#bdbdbd; margin-bottom:1.25rem; }
|
||||
.cta-buttons { display:flex; gap: 1rem; justify-content:center; flex-wrap: wrap; }
|
||||
|
||||
/* Projects page */
|
||||
.page-header { padding: 100px 0 40px; background:#0f0f0f; border-bottom:1px solid #1f1f1f; margin-top: 60px; }
|
||||
.page-header h1 { color:#fff; font-size:2.2rem; }
|
||||
.page-header p { color:#a8a8a8; }
|
||||
.projects-section { padding: 60px 0; background:#0a0a0a; }
|
||||
.projects-filter { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:1.25rem; }
|
||||
.filter-btn { background:#141414; color:#dcdcdc; border:1px solid #242424; padding:.5rem 1rem; border-radius:999px; cursor:pointer; transition:.2s; }
|
||||
.filter-btn:hover { border-color:#2e2e2e; }
|
||||
.filter-btn.active { background: rgba(0,212,255,.1); color:#00d4ff; border-color: rgba(0,212,255,.3); }
|
||||
.project-description { color:#cfcfcf; }
|
||||
.project-technologies { display:flex; flex-wrap:wrap; gap:.5rem; margin: .75rem 0; }
|
||||
.project-stats { display:flex; gap:1.25rem; margin: .5rem 0 .75rem; }
|
||||
.stat .stat-label { color:#9a9a9a; font-size:.78rem; }
|
||||
.stat .stat-value { color:#eaeaea; font-weight:700; }
|
||||
.project-actions { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.5rem; }
|
||||
.btn-small { padding: .4rem .7rem; border-radius: 10px; font-size:.88rem; }
|
||||
|
||||
/* Project Detail */
|
||||
.project-hero { padding: 110px 0 40px; background:#0f0f0f; border-bottom:1px solid #1f1f1f; }
|
||||
.project-hero-content { display:grid; grid-template-columns: 1.4fr .6fr; gap: 2rem; align-items:center; }
|
||||
.project-breadcrumb { color:#9aa; margin-bottom:.5rem; font-size:.92rem; }
|
||||
.project-hero-text h1 { color:#fff; font-size:2.2rem; }
|
||||
.project-tagline { color:#aeb; margin:.25rem 0 .5rem; }
|
||||
.project-description { color:#cfcfcf; }
|
||||
.project-hero-stats { display:flex; gap:1rem; margin: 1rem 0; }
|
||||
.hero-stat { background:#141414; border:1px solid #242424; border-radius:10px; padding:.6rem .8rem; }
|
||||
.hero-stat .stat-label { color:#9a9a9a; font-size:.8rem; }
|
||||
.hero-stat .stat-value { color:#fff; font-weight:700; }
|
||||
.project-hero-actions { display:flex; gap:.6rem; flex-wrap:wrap; }
|
||||
.project-hero-visual { display:flex; justify-content:center; }
|
||||
.project-icon-large { width:120px; height:120px; border-radius:24px; background: linear-gradient(135deg,#1d2a31,#0d1a21); color:#00d4ff; display:flex; align-items:center; justify-content:center; font-size:3rem; border:1px solid #1e2a33; }
|
||||
|
||||
.project-nav { position: sticky; top:60px; background:#0f0f0f; border-bottom:1px solid #1f1f1f; z-index: 900; }
|
||||
.project-nav-links { display:flex; gap:1rem; padding:.75rem 0; list-style:none; }
|
||||
.project-nav-links a { color:#cfd; padding:.4rem .8rem; border-radius: 10px; }
|
||||
.project-nav-links a.active, .project-nav-links a:hover { background: rgba(0,212,255,.1); color:#00d4ff; }
|
||||
|
||||
.project-section { padding: 50px 0; background:#0a0a0a; }
|
||||
.project-content { display:grid; grid-template-columns: 1.5fr .5fr; gap: 2rem; }
|
||||
.content-main h2 { color:#fff; margin-bottom: .75rem; }
|
||||
.project-overview p { color:#cfcfcf; }
|
||||
.project-tech-stack { margin-top: 1rem; }
|
||||
.project-tech-stack h3 { color:#fff; margin-bottom:.5rem; }
|
||||
.tech-tags { display:flex; gap:.5rem; flex-wrap:wrap; }
|
||||
.compatibility-info h3 { color:#fff; margin: 1rem 0 .5rem; }
|
||||
.compatibility-grid { display:flex; gap:.6rem; flex-wrap:wrap; }
|
||||
.compatibility-item { display:flex; align-items:center; gap:.4rem; background:#141414; border:1px solid #242424; color:#cfe; padding:.4rem .7rem; border-radius: 10px; }
|
||||
|
||||
.content-sidebar { display:flex; flex-direction:column; gap:1rem; }
|
||||
.sidebar-card { background:#121212; border:1px solid #232323; border-radius: 12px; padding: 1rem; }
|
||||
.sidebar-card h3 { color:#fff; margin-bottom:.5rem; }
|
||||
.quick-links { display:flex; flex-direction:column; gap:.5rem; }
|
||||
.quick-link { color:#cfe; display:flex; align-items:center; gap:.5rem; padding:.45rem .6rem; border-radius: 8px; transition:.2s; }
|
||||
.quick-link:hover { background:#151515; color:#00d4ff; }
|
||||
.highlight-list { padding-left: 1.1rem; color:#cfcfcf; }
|
||||
.highlight-list li { margin:.3rem 0; }
|
||||
|
||||
/* Features */
|
||||
.features-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
|
||||
.feature-item { background:#121212; border:1px solid #222; border-radius: 12px; padding: .9rem 1rem; display:flex; gap:.6rem; }
|
||||
.feature-icon { color:#00d4ff; }
|
||||
.feature-text p { color:#d8d8d8; }
|
||||
|
||||
/* Commands Table */
|
||||
.commands-table table { width:100%; border-collapse: collapse; background:#111; border:1px solid #222; border-radius: 12px; overflow:hidden; }
|
||||
.commands-table th, .commands-table td { text-align:left; padding: .75rem 1rem; border-bottom:1px solid #1e1e1e; }
|
||||
.commands-table thead th { background:#151515; color:#eaeaea; font-weight:700; }
|
||||
.commands-table tbody tr:hover { background:#131313; }
|
||||
.commands-table code { background:#1a1f24; color:#aef; padding:.1rem .35rem; border-radius: 6px; }
|
||||
|
||||
/* Installation */
|
||||
.installation-steps ol { padding-left: 1.4rem; color:#cfcfcf; }
|
||||
.installation-steps li { margin:.4rem 0; }
|
||||
|
||||
/* Resources */
|
||||
.resources-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
|
||||
.resource-card { background:#121212; border:1px solid #232323; border-radius:12px; padding:1rem; transition:.3s; }
|
||||
.resource-card:hover { transform: translateY(-4px); border-color:#2b2b2b; }
|
||||
.resource-icon { color:#00d4ff; font-size:1.6rem; margin-bottom:.4rem; }
|
||||
.resource-card h3 { color:#fff; margin-bottom:.25rem; }
|
||||
.resource-card p { color:#bdbdbd; margin-bottom:.5rem; }
|
||||
.resource-link { color:#9feaff; font-weight:600; }
|
||||
|
||||
/* Related */
|
||||
.related-projects { padding: 50px 0 70px; background:#0a0a0a; text-align:center; }
|
||||
.related-projects h2 { color:#fff; margin-bottom:.5rem; }
|
||||
.related-actions { display:flex; justify-content:center; gap: .8rem; margin-top: .5rem; }
|
||||
|
||||
/* Minecraft Page */
|
||||
.minecraft-hero { padding: 110px 0 40px; background:#0f0f0f; border-bottom:1px solid #1f1f1f; text-align:center; }
|
||||
.minecraft-hero h1 { color:#fff; font-size:2.2rem; margin-top:.5rem; }
|
||||
.minecraft-hero p { color:#bdbdbd; }
|
||||
.minecraft-icon { width:80px; height:80px; border-radius:20px; background: linear-gradient(135deg,#1d2a31,#0d1a21); color:#00d4ff; display:flex; align-items:center; justify-content:center; font-size:2rem; margin: 0 auto; border:1px solid #1e2a33; }
|
||||
.minecraft-stats { display:flex; gap:1rem; justify-content:center; margin-top:1rem; }
|
||||
.minecraft-stats .stat { background:#141414; border:1px solid #242424; border-radius:10px; padding:.6rem .8rem; text-align:center; }
|
||||
.minecraft-stats .stat-number { color:#00d4ff; font-weight:800; }
|
||||
.minecraft-stats .stat-label { color:#9a9a9a; font-size:.85rem; }
|
||||
|
||||
.minecraft-projects { padding: 60px 0; }
|
||||
.minecraft-projects h2 { color:#fff; text-align:center; margin-bottom:1rem; }
|
||||
.minecraft-project-card { background:#121212; border:1px solid #232323; border-radius:14px; padding:1rem 1.2rem; }
|
||||
.minecraft-project-card .project-header { align-items:flex-start; }
|
||||
.minecraft-project-card .project-info h3 { color:#fff; }
|
||||
.minecraft-project-card .project-info p { color:#cfcfcf; }
|
||||
.detail-row { display:flex; gap:.5rem; margin:.25rem 0; }
|
||||
.detail-label { color:#9a9a9a; width:120px; }
|
||||
.detail-value { color:#eaeaea; }
|
||||
.status-active { color:#00ffa6; }
|
||||
|
||||
.minecraft-services { padding: 60px 0; }
|
||||
.services-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
|
||||
.service-card { background:#121212; border:1px solid #232323; border-radius:14px; padding:1rem; }
|
||||
.service-icon { width:44px; height:44px; border-radius:10px; background: rgba(0,212,255,.1); color:#00d4ff; display:flex; align-items:center; justify-content:center; margin-bottom:.6rem; }
|
||||
.service-card h3 { color:#fff; margin-bottom:.25rem; }
|
||||
.service-card p { color:#bdbdbd; margin-bottom:.4rem; }
|
||||
.service-card ul { padding-left: 1.1rem; color:#cfcfcf; }
|
||||
|
||||
.minecraft-expertise { padding: 60px 0; }
|
||||
.expertise-content { display:grid; grid-template-columns: 1.4fr .6fr; gap: 1.5rem; }
|
||||
.specialties-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:.6rem; }
|
||||
.specialty-item { background:#141414; border:1px solid #242424; border-radius:10px; padding:.6rem .8rem; display:flex; gap:.5rem; align-items:center; color:#dfe; }
|
||||
.platforms-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:.8rem; margin-top:.6rem; }
|
||||
.platform-card { background:#121212; border:1px solid #232323; border-radius:10px; padding: .8rem; text-align:center; }
|
||||
.platform-icon { color:#00d4ff; font-size:1.4rem; margin-bottom:.3rem; }
|
||||
.api-knowledge ul { list-style:none; padding-left:0; }
|
||||
.api-knowledge li { display:flex; gap:.5rem; align-items:center; color:#cfcfcf; margin:.3rem 0; }
|
||||
.version-range { display:flex; flex-direction:column; gap:.4rem; }
|
||||
.version-item { display:flex; justify-content:space-between; background:#141414; border:1px solid #242424; border-radius:10px; padding:.5rem .7rem; }
|
||||
.version-label { color:#9a9a9a; }
|
||||
.version-value { color:#eaeaea; }
|
||||
|
||||
.development-process { padding: 60px 0; }
|
||||
.process-steps { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 1rem; }
|
||||
.process-step { background:#121212; border:1px solid #232323; border-radius:12px; padding: 1rem; display:flex; gap:.8rem; }
|
||||
.step-number { width:34px; height:34px; border-radius:50%; background:#00d4ff; color:#002733; font-weight:800; display:flex; align-items:center; justify-content:center; }
|
||||
.step-content h3 { color:#fff; margin-bottom:.25rem; }
|
||||
.step-content p { color:#bdbdbd; }
|
||||
|
||||
.minecraft-resources { padding: 60px 0; }
|
||||
.minecraft-cta { padding: 60px 0; background: linear-gradient(135deg,#0c0c0c,#121a24); }
|
||||
.minecraft-cta .cta-content { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
|
||||
.minecraft-cta h2 { color:#fff; }
|
||||
.minecraft-cta p { color:#bdbdbd; }
|
||||
|
||||
/* About Page */
|
||||
.about-hero { padding: 110px 0 40px; background:#0f0f0f; border-bottom:1px solid #1f1f1f; }
|
||||
.about-hero-content { display:grid; grid-template-columns: 1.2fr .8fr; gap: 1.5rem; align-items:center; }
|
||||
.about-text h1 { color:#fff; font-size:2.2rem; }
|
||||
.about-subtitle { color:#a9b; margin:.25rem 0 .75rem; }
|
||||
.code-showcase { background:#1a1a1a; border:1px solid #252525; border-radius: 12px; overflow:hidden; }
|
||||
.code-header { background:#2d2d2d; padding:.6rem .8rem; display:flex; justify-content:space-between; align-items:center; }
|
||||
.code-title { color:#fff; font-size:.9rem; }
|
||||
.code-buttons { display:flex; gap:.4rem; }
|
||||
.code-buttons span { width:12px; height:12px; border-radius:50%; background:#555; }
|
||||
.code-buttons span:nth-child(1){ background:#ff5f56; }
|
||||
.code-buttons span:nth-child(2){ background:#ffbd2e; }
|
||||
.code-buttons span:nth-child(3){ background:#27ca3f; }
|
||||
.code-content { padding: .8rem; }
|
||||
.code-content pre { color:#ccc; font-family: 'Courier New', monospace; font-size:.85rem; line-height:1.45; overflow:auto; }
|
||||
|
||||
.skills-section { padding: 60px 0; }
|
||||
.skills-section h2 { color:#fff; text-align:center; margin-bottom: 1rem; }
|
||||
.skills-section .skills-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 1rem; }
|
||||
.skill-category { background:#121212; border:1px solid #232323; border-radius:12px; padding:1rem; }
|
||||
.skill-category h3 { color:#fff; margin-bottom:.5rem; }
|
||||
.skills-list { display:flex; flex-direction:column; gap:.35rem; }
|
||||
.skill-item { display:flex; gap:.5rem; color:#cfcfcf; }
|
||||
.skill-item i { color:#00d4ff; }
|
||||
|
||||
.experience-section { padding: 60px 0; }
|
||||
.timeline { display:flex; flex-direction:column; gap:1rem; }
|
||||
.timeline-item { display:flex; gap:.8rem; }
|
||||
.timeline-marker { width:12px; height:12px; border-radius:50%; background:#00d4ff; margin-top:.4rem; }
|
||||
.timeline-content { background:#121212; border:1px solid #232323; border-radius:12px; padding:.8rem 1rem; flex:1; }
|
||||
.timeline-content h3 { color:#fff; margin-bottom:.25rem; }
|
||||
.timeline-content p { color:#bdbdbd; }
|
||||
.timeline-date { color:#9a9a9a; font-size:.85rem; }
|
||||
|
||||
.achievements-section { padding: 60px 0; }
|
||||
.achievements-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1rem; }
|
||||
.achievement-card { background:#121212; border:1px solid #232323; border-radius:12px; padding: 1rem; text-align:center; }
|
||||
.achievement-icon { color:#00d4ff; font-size:1.6rem; margin-bottom:.4rem; }
|
||||
.achievement-card h3 { color:#fff; }
|
||||
.achievement-card p { color:#bdbdbd; }
|
||||
|
||||
.philosophy-section { padding: 60px 0; }
|
||||
.philosophy-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:1rem; }
|
||||
.philosophy-item { background:#121212; border:1px solid #232323; border-radius:12px; padding:1rem; text-align:center; }
|
||||
.philosophy-icon { color:#00d4ff; font-size:1.6rem; margin-bottom:.4rem; }
|
||||
|
||||
.interests-section { padding: 60px 0; }
|
||||
.interests-list { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:.8rem; margin-top:.6rem; }
|
||||
.interest-item { background:#121212; border:1px solid #232323; border-radius:12px; padding:.8rem; display:flex; gap:.6rem; align-items:center; }
|
||||
|
||||
.about-cta { padding: 60px 0; text-align:center; background: linear-gradient(135deg,#0c0c0c,#121a24); }
|
||||
.about-cta h2 { color:#fff; }
|
||||
.about-cta p { color:#bdbdbd; margin-bottom:1rem; }
|
||||
|
||||
/* Contact Page */
|
||||
.contact-hero { padding: 110px 0 40px; background:#0f0f0f; border-bottom:1px solid #1f1f1f; text-align:center; }
|
||||
.contact-hero h1 { color:#fff; font-size:2.2rem; }
|
||||
.contact-hero p { color:#bdbdbd; }
|
||||
|
||||
.contact-methods { padding: 60px 0; }
|
||||
.contact-methods h2 { color:#fff; text-align:center; margin-bottom:1rem; }
|
||||
.contact-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
|
||||
.contact-card { background: linear-gradient(145deg,#161616,#1e1e1e); border:1px solid #2a2a2a; border-radius: 16px; padding: 1.25rem; position: relative; overflow:hidden; transition:.3s; text-align:center; color:#dcdcdc; }
|
||||
.contact-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,212,255,.08); }
|
||||
.contact-icon { color:#00d4ff; font-size:2rem; margin-bottom:.5rem; }
|
||||
.contact-card h3 { color:#fff; margin-bottom:.25rem; }
|
||||
.contact-card p { color:#cfcfcf; }
|
||||
.contact-action { margin-top:.5rem; font-weight:600; }
|
||||
|
||||
.project-inquiry { padding: 60px 0; }
|
||||
.inquiry-content { display:grid; grid-template-columns: 1.2fr .8fr; gap: 1.5rem; }
|
||||
.inquiry-text h2 { color:#fff; margin-bottom:.25rem; }
|
||||
.inquiry-text p { color:#bdbdbd; }
|
||||
.inquiry-types h3 { color:#fff; margin: .75rem 0 .5rem; }
|
||||
.inquiry-list { display:flex; flex-direction:column; gap:.6rem; }
|
||||
.inquiry-item { display:flex; gap:.6rem; background:#121212; border:1px solid #232323; border-radius:12px; padding:.7rem; align-items:center; }
|
||||
.response-time, .availability { background:#121212; border:1px solid #232323; border-radius:12px; padding:1rem; }
|
||||
.response-time h3, .availability h3 { color:#fff; margin-bottom:.5rem; }
|
||||
.response-item { display:flex; gap:.6rem; align-items:center; color:#cfcfcf; }
|
||||
.availability-item { display:flex; gap:.5rem; align-items:center; color:#cfcfcf; }
|
||||
.status.available { width:10px; height:10px; border-radius:50%; background:#00ffa6; display:inline-block; }
|
||||
|
||||
.faq-section { padding: 60px 0; }
|
||||
.faq-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 1rem; }
|
||||
.faq-item { background:#121212; border:1px solid #232323; border-radius:12px; padding: 1rem; }
|
||||
.faq-item h3 { color:#fff; margin-bottom:.25rem; }
|
||||
.faq-item p { color:#bdbdbd; }
|
||||
|
||||
.community-section { padding: 60px 0; }
|
||||
.community-content { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items:center; }
|
||||
.community-link { background:#121212; border:1px solid #232323; border-radius:12px; padding:.8rem; display:flex; gap:.6rem; align-items:center; color:#cfcfcf; }
|
||||
.community-link i { color:#00d4ff; font-size:1.4rem; }
|
||||
.final-cta { padding: 60px 0; text-align:center; background: linear-gradient(135deg,#0c0c0c,#121a24); }
|
||||
.btn-large { padding: 14px 28px; font-size:1.05rem; }
|
||||
|
||||
/* Footer */
|
||||
.footer { background:#0a0a0a; padding: 2rem 0; border-top:1px solid #1f1f1f; }
|
||||
.footer-content { display:flex; justify-content:space-between; align-items:center; margin-bottom: 1rem; gap: 1rem; }
|
||||
.footer-text h3 { color:#fff; margin-bottom:.25rem; }
|
||||
.footer-text p { color:#aaa; font-size:.92rem; }
|
||||
.footer-links { display:flex; gap: .8rem; }
|
||||
.footer-links a { color:#aaa; font-size:1.4rem; }
|
||||
.footer-links a:hover { color:#00d4ff; }
|
||||
.footer-bottom { text-align:center; border-top:1px solid #1f1f1f; padding-top: .8rem; }
|
||||
.footer-bottom p { color:#666; font-size:.9rem; }
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeInUp { from { opacity:0; transform: translateY(26px);} to { opacity:1; transform: translateY(0);} }
|
||||
@keyframes float { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-18px);} }
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 992px) {
|
||||
.project-hero-content, .expertise-content, .inquiry-content, .community-content { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hamburger { display:flex; }
|
||||
.nav-links { position: fixed; top: 64px; right: -110%; width: 100%; height: calc(100vh - 64px); background: rgba(10,10,10,0.98); flex-direction: column; justify-content: flex-start; align-items: center; padding-top: 2rem; transition: right .3s ease; gap: 1.2rem; }
|
||||
.nav-links.active { right: 0; }
|
||||
.hamburger.active span:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); }
|
||||
.hamburger.active span:nth-child(2) { opacity: 0; }
|
||||
.hamburger.active span:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); }
|
||||
.hero h1 { font-size: 2.6rem; }
|
||||
.hero h2 { font-size: 1.5rem; }
|
||||
.stats-grid, .skills-grid, .projects-grid { grid-template-columns: 1fr; }
|
||||
.project-content { grid-template-columns: 1fr; }
|
||||
.minecraft-cta .cta-content { flex-direction: column; align-items:center; text-align:center; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.container { padding: 0 14px; }
|
||||
.btn, .btn-small { font-size:.95rem; }
|
||||
}
|
||||
/* This file mirrors the root styles.css for Flask static serving */
|
||||
/* Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
background-color: #0a0a0a;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background: rgba(10, 10, 10, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 1000;
|
||||
padding: 1rem 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-logo h2 {
|
||||
color: #fff;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nav-logo span {
|
||||
color: #00d4ff;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-links a::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #00d4ff, #0099cc);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-links a:hover::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
color: #00d4ff;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hamburger span {
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
background: #fff;
|
||||
margin: 3px 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
max-width: 800px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 4rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin-bottom: 0.5rem;
|
||||
background: linear-gradient(135deg, #fff, #00d4ff);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: fadeInUp 1s ease;
|
||||
}
|
||||
|
||||
.hero h2 {
|
||||
font-size: 2rem;
|
||||
color: #ccc;
|
||||
margin-bottom: 1rem;
|
||||
animation: fadeInUp 1s ease 0.2s both;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #00d4ff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.2rem;
|
||||
color: #aaa;
|
||||
margin-bottom: 2rem;
|
||||
animation: fadeInUp 1s ease 0.4s both;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
animation: fadeInUp 1s ease 0.6s both;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #00d4ff, #0099cc);
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border: 2px solid #333;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #333;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.hero-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.floating-icons {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.floating-icons i {
|
||||
position: absolute;
|
||||
color: rgba(0, 212, 255, 0.1);
|
||||
font-size: 3rem;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.floating-icons i:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
|
||||
.floating-icons i:nth-child(2) { top: 60%; left: 80%; animation-delay: 1s; }
|
||||
.floating-icons i:nth-child(3) { top: 30%; right: 20%; animation-delay: 2s; }
|
||||
.floating-icons i:nth-child(4) { bottom: 30%; left: 20%; animation-delay: 3s; }
|
||||
.floating-icons i:nth-child(5) { bottom: 20%; right: 10%; animation-delay: 4s; }
|
||||
|
||||
/* Sections used across templates */
|
||||
.featured-projects, .skills-overview, .stats, .cta, .page-header, .projects-section,
|
||||
.tech-stack-section, .projects-cta, .project-hero, .project-section, .related-projects,
|
||||
.minecraft-hero, .minecraft-projects, .minecraft-services, .minecraft-expertise, .development-process,
|
||||
.minecraft-resources, .minecraft-cta, .about-hero, .skills-section, .experience-section,
|
||||
.achievements-section, .philosophy-section, .interests-section, .about-cta, .contact-hero,
|
||||
.contact-methods, .project-inquiry, .faq-section, .community-section, .final-cta {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
/* Reuse card/grid styles from original file where applicable ... */
|
||||
/* (Keeping it concise here; the original file contains full styling and will be sufficient) */
|
||||
|
||||
/* Footer, animations, responsiveness remain same as original root CSS */
|
||||
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px);} to { opacity: 1; transform: translateY(0);} }
|
||||
@keyframes float { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-20px);} }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hamburger { display: flex; }
|
||||
.nav-links { display: none; }
|
||||
}
|
||||
98
static/js/script.js
Normal file
98
static/js/script.js
Normal file
@@ -0,0 +1,98 @@
|
||||
// Mirrors root script.js for Flask static serving
|
||||
// Mobile Navigation Toggle
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const hamburger = document.querySelector('.hamburger');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
|
||||
if (hamburger && navLinks) {
|
||||
hamburger.addEventListener('click', function() {
|
||||
navLinks.classList.toggle('active');
|
||||
hamburger.classList.toggle('active');
|
||||
});
|
||||
|
||||
document.querySelectorAll('.nav-links a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
navLinks.classList.remove('active');
|
||||
hamburger.classList.remove('active');
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Smooth scrolling for navigation links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
const href = this.getAttribute('href');
|
||||
if (href && href.startsWith('#')) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(href);
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Navbar background on scroll
|
||||
window.addEventListener('scroll', function() {
|
||||
const navbar = document.querySelector('.navbar');
|
||||
if (navbar) {
|
||||
navbar.style.background = window.scrollY > 100 ? 'rgba(10, 10, 10, 0.98)' : 'rgba(10, 10, 10, 0.95)';
|
||||
}
|
||||
});
|
||||
|
||||
// Intersection Observer for animations
|
||||
const observeElements = () => {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
|
||||
|
||||
document.querySelectorAll('.project-card, .tech-item, .contact-card').forEach((el, i) => {
|
||||
el.style.opacity = '0';
|
||||
el.style.transform = 'translateY(30px)';
|
||||
el.style.transition = `opacity 0.6s ease ${i * 0.1}s, transform 0.6s ease ${i * 0.1}s`;
|
||||
observer.observe(el);
|
||||
});
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', observeElements);
|
||||
|
||||
// Hover effects for project cards
|
||||
document.querySelectorAll('.project-card').forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-10px) scale(1.02)';
|
||||
});
|
||||
card.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateY(0) scale(1)';
|
||||
});
|
||||
});
|
||||
|
||||
// Active state to navigation links based on scroll position
|
||||
const updateActiveNav = () => {
|
||||
const sections = document.querySelectorAll('section[id]');
|
||||
const navLinks = document.querySelectorAll('.nav-links a[href^="#"]');
|
||||
let current = '';
|
||||
sections.forEach(section => {
|
||||
if (pageYOffset >= section.offsetTop - 200) {
|
||||
current = section.getAttribute('id');
|
||||
}
|
||||
});
|
||||
navLinks.forEach(link => {
|
||||
link.classList.toggle('active', link.getAttribute('href') === `#${current}`);
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', updateActiveNav);
|
||||
|
||||
// Inject minimal CSS for active nav indicator
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.nav-links a.active { color: #00d4ff !important; }
|
||||
.nav-links a.active::before { width: 100% !important; }
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
845
styles.css
Normal file
845
styles.css
Normal file
@@ -0,0 +1,845 @@
|
||||
/* Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
background-color: #0a0a0a;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background: rgba(10, 10, 10, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 1000;
|
||||
padding: 1rem 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-logo h2 {
|
||||
color: #fff;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nav-logo span {
|
||||
color: #00d4ff;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-links a::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #00d4ff, #0099cc);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-links a:hover::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
color: #00d4ff;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hamburger span {
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
background: #fff;
|
||||
margin: 3px 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
max-width: 800px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 4rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin-bottom: 0.5rem;
|
||||
background: linear-gradient(135deg, #fff, #00d4ff);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: fadeInUp 1s ease;
|
||||
}
|
||||
|
||||
.hero h2 {
|
||||
font-size: 2rem;
|
||||
color: #ccc;
|
||||
margin-bottom: 1rem;
|
||||
animation: fadeInUp 1s ease 0.2s both;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #00d4ff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.2rem;
|
||||
color: #aaa;
|
||||
margin-bottom: 2rem;
|
||||
animation: fadeInUp 1s ease 0.4s both;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
animation: fadeInUp 1s ease 0.6s both;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #00d4ff, #0099cc);
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border: 2px solid #333;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #333;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.hero-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.floating-icons {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.floating-icons i {
|
||||
position: absolute;
|
||||
color: rgba(0, 212, 255, 0.1);
|
||||
font-size: 3rem;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.floating-icons i:nth-child(1) {
|
||||
top: 20%;
|
||||
left: 10%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.floating-icons i:nth-child(2) {
|
||||
top: 60%;
|
||||
left: 80%;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.floating-icons i:nth-child(3) {
|
||||
top: 30%;
|
||||
right: 20%;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.floating-icons i:nth-child(4) {
|
||||
bottom: 30%;
|
||||
left: 20%;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
.floating-icons i:nth-child(5) {
|
||||
bottom: 20%;
|
||||
right: 10%;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
/* Projekte Section */
|
||||
.projekte {
|
||||
padding: 100px 0;
|
||||
background: #111;
|
||||
}
|
||||
|
||||
.projekte h2 {
|
||||
text-align: center;
|
||||
font-size: 3rem;
|
||||
color: #fff;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
text-align: center;
|
||||
color: #aaa;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
background: linear-gradient(145deg, #1a1a1a, #222);
|
||||
border-radius: 15px;
|
||||
padding: 2rem;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #333;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #00d4ff, #0099cc);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.project-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 30px rgba(0, 212, 255, 0.1);
|
||||
}
|
||||
|
||||
.project-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.project-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.minecraft .project-icon {
|
||||
background: linear-gradient(135deg, #8b4513, #654321);
|
||||
}
|
||||
|
||||
.discord .project-icon {
|
||||
background: linear-gradient(135deg, #7289da, #5865f2);
|
||||
}
|
||||
|
||||
.coming-soon .project-icon {
|
||||
background: linear-gradient(135deg, #666, #444);
|
||||
}
|
||||
|
||||
.project-meta h3 {
|
||||
color: #fff;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.project-type {
|
||||
color: #00d4ff;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.project-card p {
|
||||
color: #ccc;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.project-features {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.feature-tag {
|
||||
background: rgba(0, 212, 255, 0.1);
|
||||
color: #00d4ff;
|
||||
padding: 0.3rem 0.8rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
border: 1px solid rgba(0, 212, 255, 0.2);
|
||||
}
|
||||
|
||||
.project-links {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.project-link {
|
||||
color: #00d4ff;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.project-link:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.project-stats {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.stat {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
display: block;
|
||||
color: #00d4ff;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #aaa;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* Tech Stack */
|
||||
.tech-stack {
|
||||
text-align: center;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.tech-stack h3 {
|
||||
color: #fff;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.tech-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 1.5rem;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tech-item {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem 1rem;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.tech-item:hover {
|
||||
transform: translateY(-5px);
|
||||
background: rgba(0, 212, 255, 0.1);
|
||||
border-color: rgba(0, 212, 255, 0.3);
|
||||
}
|
||||
|
||||
.tech-item i {
|
||||
font-size: 2rem;
|
||||
color: #00d4ff;
|
||||
margin-bottom: 0.5rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tech-item span {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* About Section */
|
||||
.about {
|
||||
padding: 100px 0;
|
||||
background: #0a0a0a;
|
||||
}
|
||||
|
||||
.about-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.about-text h2 {
|
||||
color: #fff;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.about-text p {
|
||||
color: #ccc;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.skills-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.skill-category h4 {
|
||||
color: #00d4ff;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.skill-category ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.skill-category li {
|
||||
color: #ccc;
|
||||
padding: 0.3rem 0;
|
||||
position: relative;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.skill-category li::before {
|
||||
content: '▶';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #00d4ff;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.achievements {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.achievement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.achievement i {
|
||||
font-size: 2rem;
|
||||
color: #00d4ff;
|
||||
}
|
||||
|
||||
.achievement h4 {
|
||||
color: #fff;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.achievement p {
|
||||
color: #aaa;
|
||||
font-size: 0.9rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.about-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.code-preview {
|
||||
background: #1a1a1a;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.code-header {
|
||||
background: #2d2d2d;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.code-title {
|
||||
color: #fff;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.code-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.code-buttons span {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #555;
|
||||
}
|
||||
|
||||
.code-buttons span:nth-child(1) {
|
||||
background: #ff5f56;
|
||||
}
|
||||
|
||||
.code-buttons span:nth-child(2) {
|
||||
background: #ffbd2e;
|
||||
}
|
||||
|
||||
.code-buttons span:nth-child(3) {
|
||||
background: #27ca3f;
|
||||
}
|
||||
|
||||
.code-content {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.code-content pre {
|
||||
color: #ccc;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.4;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* Kontakt Section */
|
||||
.kontakt {
|
||||
padding: 100px 0;
|
||||
background: #111;
|
||||
}
|
||||
|
||||
.kontakt h2 {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.kontakt p {
|
||||
text-align: center;
|
||||
color: #aaa;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.contact-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
background: linear-gradient(145deg, #1a1a1a, #222);
|
||||
border-radius: 15px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #333;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.contact-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.github::before {
|
||||
background: linear-gradient(90deg, #333, #666);
|
||||
}
|
||||
|
||||
.discord::before {
|
||||
background: linear-gradient(90deg, #7289da, #5865f2);
|
||||
}
|
||||
|
||||
.spigot::before {
|
||||
background: linear-gradient(90deg, #ff8c00, #ffa500);
|
||||
}
|
||||
|
||||
.contact-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.contact-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 30px rgba(0, 212, 255, 0.1);
|
||||
}
|
||||
|
||||
.contact-card i {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #00d4ff;
|
||||
}
|
||||
|
||||
.contact-card h3 {
|
||||
color: #fff;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.contact-card p {
|
||||
color: #ccc;
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
background: #0a0a0a;
|
||||
padding: 2rem 0;
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.footer-text h3 {
|
||||
color: #fff;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-text p {
|
||||
color: #aaa;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #aaa;
|
||||
font-size: 1.5rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: #00d4ff;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
text-align: center;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
|
||||
.footer-bottom p {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.hamburger {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.about-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.skills-list {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.achievements {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.tech-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
||||
}
|
||||
|
||||
.contact-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.projekte h2,
|
||||
.about-text h2,
|
||||
.kontakt h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.project-card,
|
||||
.contact-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
233
templates/about.html
Normal file
233
templates/about.html
Normal file
@@ -0,0 +1,233 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}About SimolZimol - Devanturas{% endblock %}
|
||||
{% block description %}Learn about SimolZimol's background, skills, and experience in Minecraft and Discord development{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- About Hero -->
|
||||
<section class="about-hero">
|
||||
<div class="container">
|
||||
<div class="about-hero-content">
|
||||
<div class="about-text">
|
||||
<h1>About SimolZimol</h1>
|
||||
<p class="about-subtitle">Passionate developer specializing in Minecraft plugins and Discord bots</p>
|
||||
<p>Welcome to Devanturas! I'm a dedicated software developer with a focus on creating high-quality Minecraft plugins and Discord applications. My journey in programming has led me to specialize in Java and Python development, with particular expertise in server-side applications and community management tools.</p>
|
||||
</div>
|
||||
<div class="about-visual">
|
||||
<div class="code-showcase">
|
||||
<div class="code-header">
|
||||
<span class="code-title">SimolZimol.java</span>
|
||||
<div class="code-buttons">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-content">
|
||||
<pre><code>public class Developer {
|
||||
private String name = "SimolZimol";
|
||||
private String[] specialties = {
|
||||
"Minecraft Plugin Development",
|
||||
"Discord Bot Programming",
|
||||
"Java & Python"
|
||||
};
|
||||
|
||||
public void createAwesome() {
|
||||
while (passionate) {
|
||||
develop();
|
||||
learn();
|
||||
innovate();
|
||||
}
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Skills Section -->
|
||||
<section class="skills-section">
|
||||
<div class="container">
|
||||
<h2>Technical Skills</h2>
|
||||
<div class="skills-grid">
|
||||
{% for category, skill_list in skills.items() %}
|
||||
<div class="skill-category">
|
||||
<h3>{{ category }}</h3>
|
||||
<div class="skills-list">
|
||||
{% for skill in skill_list %}
|
||||
<div class="skill-item">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<span>{{ skill }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Experience Timeline -->
|
||||
<section class="experience-section">
|
||||
<div class="container">
|
||||
<h2>Development Journey</h2>
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<h3>Started Minecraft Development</h3>
|
||||
<p>Began learning Java and Spigot API development, creating first plugins for personal servers and friends.</p>
|
||||
<span class="timeline-date">2021</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<h3>First Public Plugin Release</h3>
|
||||
<p>Released Fly Plugin on SpigotMC, focusing on clean code, performance, and user-friendly configuration.</p>
|
||||
<span class="timeline-date">2022</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<h3>Discord Bot Development</h3>
|
||||
<p>Expanded into Python and Discord.py, creating sophisticated bots with database integration and complex algorithms.</p>
|
||||
<span class="timeline-date">2023</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<h3>Advanced Projects & Community</h3>
|
||||
<p>Developed complex systems like HOI4 ELO Bot, gained experience with Docker, and expanded platform presence.</p>
|
||||
<span class="timeline-date">2024</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker active"></div>
|
||||
<div class="timeline-content">
|
||||
<h3>Continuous Innovation</h3>
|
||||
<p>Currently working on new projects, exploring modern technologies, and contributing to the development community.</p>
|
||||
<span class="timeline-date">2025</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Achievements -->
|
||||
<section class="achievements-section">
|
||||
<div class="container">
|
||||
<h2>Achievements & Recognition</h2>
|
||||
<div class="achievements-grid">
|
||||
{% for achievement in achievements %}
|
||||
<div class="achievement-card">
|
||||
<div class="achievement-icon">
|
||||
<i class="{{ achievement.icon }}"></i>
|
||||
</div>
|
||||
<h3>{{ achievement.title }}</h3>
|
||||
<p>{{ achievement.description }}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Philosophy -->
|
||||
<section class="philosophy-section">
|
||||
<div class="container">
|
||||
<div class="philosophy-content">
|
||||
<h2>Development Philosophy</h2>
|
||||
<div class="philosophy-grid">
|
||||
<div class="philosophy-item">
|
||||
<div class="philosophy-icon">
|
||||
<i class="fas fa-code"></i>
|
||||
</div>
|
||||
<h3>Clean Code</h3>
|
||||
<p>Writing maintainable, well-documented code that follows best practices and industry standards.</p>
|
||||
</div>
|
||||
|
||||
<div class="philosophy-item">
|
||||
<div class="philosophy-icon">
|
||||
<i class="fas fa-users"></i>
|
||||
</div>
|
||||
<h3>User-Centric Design</h3>
|
||||
<p>Focusing on user experience and creating intuitive interfaces that serve the community's needs.</p>
|
||||
</div>
|
||||
|
||||
<div class="philosophy-item">
|
||||
<div class="philosophy-icon">
|
||||
<i class="fas fa-rocket"></i>
|
||||
</div>
|
||||
<h3>Performance First</h3>
|
||||
<p>Optimizing for efficiency and scalability to ensure smooth operation under all conditions.</p>
|
||||
</div>
|
||||
|
||||
<div class="philosophy-item">
|
||||
<div class="philosophy-icon">
|
||||
<i class="fas fa-heart"></i>
|
||||
</div>
|
||||
<h3>Community Driven</h3>
|
||||
<p>Building tools that bring communities together and enhance collaborative experiences.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Personal Interests -->
|
||||
<section class="interests-section">
|
||||
<div class="container">
|
||||
<h2>Beyond Coding</h2>
|
||||
<div class="interests-content">
|
||||
<div class="interests-text">
|
||||
<p>When I'm not coding, I enjoy exploring new technologies, contributing to open-source projects, and staying connected with the gaming community. I believe in continuous learning and sharing knowledge with fellow developers.</p>
|
||||
|
||||
<div class="interests-list">
|
||||
<div class="interest-item">
|
||||
<i class="fas fa-gamepad"></i>
|
||||
<span>Gaming & Community Building</span>
|
||||
</div>
|
||||
<div class="interest-item">
|
||||
<i class="fas fa-book"></i>
|
||||
<span>Learning New Technologies</span>
|
||||
</div>
|
||||
<div class="interest-item">
|
||||
<i class="fab fa-oss"></i>
|
||||
<span>Open Source Contributing</span>
|
||||
</div>
|
||||
<div class="interest-item">
|
||||
<i class="fas fa-comments"></i>
|
||||
<span>Developer Communities</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Call to Action -->
|
||||
<section class="about-cta">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<h2>Let's Work Together</h2>
|
||||
<p>I'm always interested in collaborating on exciting projects and helping communities grow through technology.</p>
|
||||
<div class="cta-buttons">
|
||||
<a href="{{ url_for('contact') }}" class="btn btn-primary">
|
||||
<i class="fas fa-envelope"></i> Get In Touch
|
||||
</a>
|
||||
<a href="{{ url_for('projects') }}" class="btn btn-secondary">
|
||||
<i class="fas fa-folder"></i> View My Work
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
71
templates/base.html
Normal file
71
templates/base.html
Normal file
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}Devanturas by SimolZimol - Professional Minecraft & Discord Development{% endblock %}</title>
|
||||
<meta name="description" content="{% block description %}Devanturas - Professional Minecraft Plugin Development and Discord Bot Programming by SimolZimol{% endblock %}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||
{% block extra_head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="nav-logo">
|
||||
<a href="{{ url_for('home') }}">
|
||||
<h2>Devanturas</h2>
|
||||
<span>by SimolZimol</span>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="{{ url_for('home') }}" class="{% if request.endpoint == 'home' %}active{% endif %}">Home</a></li>
|
||||
<li><a href="{{ url_for('projects') }}" class="{% if request.endpoint == 'projects' %}active{% endif %}">Projects</a></li>
|
||||
<li><a href="{{ url_for('minecraft') }}" class="{% if request.endpoint == 'minecraft' %}active{% endif %}">Minecraft</a></li>
|
||||
<li><a href="{{ url_for('about') }}" class="{% if request.endpoint == 'about' %}active{% endif %}">About</a></li>
|
||||
<li><a href="{{ url_for('contact') }}" class="{% if request.endpoint == 'contact' %}active{% endif %}">Contact</a></li>
|
||||
</ul>
|
||||
<div class="hamburger">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main>
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-text">
|
||||
<h3>Devanturas</h3>
|
||||
<p>Professional Minecraft & Discord Development by SimolZimol</p>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<a href="https://github.com/SimolZimol/" target="_blank" title="GitHub">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
<a href="https://discordapp.com/users/253922739709018114" target="_blank" title="Discord">
|
||||
<i class="fab fa-discord"></i>
|
||||
</a>
|
||||
<a href="https://modrinth.com/plugin/fly-simolzimol/" target="_blank" title="Modrinth">
|
||||
<i class="fas fa-cube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2025 Devanturas by SimolZimol. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
|
||||
{% block extra_scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
200
templates/contact.html
Normal file
200
templates/contact.html
Normal file
@@ -0,0 +1,200 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Contact - Devanturas by SimolZimol{% endblock %}
|
||||
{% block description %}Get in touch with SimolZimol for Minecraft plugin development, Discord bot programming, and collaboration opportunities{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Contact Hero -->
|
||||
<section class="contact-hero">
|
||||
<div class="container">
|
||||
<div class="contact-hero-content">
|
||||
<h1>Get In Touch</h1>
|
||||
<p>Ready to collaborate? Let's discuss your project ideas and bring them to life.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Methods -->
|
||||
<section class="contact-methods">
|
||||
<div class="container">
|
||||
<h2>Ways to Connect</h2>
|
||||
<div class="contact-grid">
|
||||
{% for link in links %}
|
||||
<a href="{{ link.url }}" target="_blank" class="contact-card {{ link.color }}">
|
||||
<div class="contact-icon">
|
||||
<i class="{{ link.icon }}"></i>
|
||||
</div>
|
||||
<h3>{{ link.name }}</h3>
|
||||
<p>{{ link.description }}</p>
|
||||
<div class="contact-action">
|
||||
<span>Connect <i class="fas fa-external-link-alt"></i></span>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Project Inquiry -->
|
||||
<section class="project-inquiry">
|
||||
<div class="container">
|
||||
<div class="inquiry-content">
|
||||
<div class="inquiry-text">
|
||||
<h2>Project Collaboration</h2>
|
||||
<p>I'm always interested in working on exciting projects. Whether you need a custom Minecraft plugin, Discord bot, or have an innovative idea to discuss, I'd love to hear from you.</p>
|
||||
|
||||
<div class="inquiry-types">
|
||||
<h3>What I can help with:</h3>
|
||||
<div class="inquiry-list">
|
||||
<div class="inquiry-item">
|
||||
<i class="fas fa-cube"></i>
|
||||
<div>
|
||||
<h4>Minecraft Plugin Development</h4>
|
||||
<p>Custom plugins for Spigot, Paper, and Bukkit servers</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inquiry-item">
|
||||
<i class="fab fa-discord"></i>
|
||||
<div>
|
||||
<h4>Discord Bot Programming</h4>
|
||||
<p>Advanced bots with database integration and complex features</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inquiry-item">
|
||||
<i class="fas fa-cogs"></i>
|
||||
<div>
|
||||
<h4>Server Optimization</h4>
|
||||
<p>Performance analysis and optimization of existing systems</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inquiry-item">
|
||||
<i class="fas fa-tools"></i>
|
||||
<div>
|
||||
<h4>Maintenance & Support</h4>
|
||||
<p>Ongoing support and updates for existing projects</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inquiry-sidebar">
|
||||
<div class="response-time">
|
||||
<h3>Response Time</h3>
|
||||
<div class="response-info">
|
||||
<div class="response-item">
|
||||
<i class="fab fa-discord"></i>
|
||||
<div>
|
||||
<span class="platform">Discord</span>
|
||||
<span class="time">Usually within hours</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="availability">
|
||||
<h3>Availability</h3>
|
||||
<div class="availability-info">
|
||||
<div class="availability-item">
|
||||
<span class="status available"></span>
|
||||
<span>Available for new projects</span>
|
||||
</div>
|
||||
<div class="availability-item">
|
||||
<span class="status available"></span>
|
||||
<span>Open to collaboration</span>
|
||||
</div>
|
||||
<div class="availability-item">
|
||||
<span class="status available"></span>
|
||||
<span>Community support</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section class="faq-section">
|
||||
<div class="container">
|
||||
<h2>Frequently Asked Questions</h2>
|
||||
<div class="faq-grid">
|
||||
<div class="faq-item">
|
||||
<h3>What types of Minecraft plugins do you develop?</h3>
|
||||
<p>I specialize in all types of Minecraft plugins including utility plugins, game mechanics, server management tools, and custom features. From simple commands to complex systems with database integration.</p>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<h3>Do you provide ongoing support for your projects?</h3>
|
||||
<p>Yes! I provide ongoing support, bug fixes, and updates for all my projects. I believe in maintaining long-term relationships with clients and ensuring projects remain functional as Minecraft and Discord evolve.</p>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<h3>What Minecraft versions do you support?</h3>
|
||||
<p>I develop plugins compatible with Minecraft 1.15 through 1.21, with focus on the latest stable versions. I ensure backward compatibility when possible and provide version-specific solutions when needed.</p>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<h3>Can you help with existing plugin modifications?</h3>
|
||||
<p>Absolutely! I can help modify, optimize, or add features to existing plugins. I also provide code reviews and performance optimization services for current projects.</p>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<h3>Do you work on open source projects?</h3>
|
||||
<p>Yes, I'm passionate about open source development. Many of my projects are available on GitHub, and I welcome contributions and collaboration from the community.</p>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<h3>What's your development process like?</h3>
|
||||
<p>I follow a structured approach: requirements analysis, planning, development with regular updates, testing, deployment, and ongoing support. Communication is key throughout the entire process.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Community -->
|
||||
<section class="community-section">
|
||||
<div class="container">
|
||||
<h2>Join the Community</h2>
|
||||
<div class="community-content">
|
||||
<div class="community-text">
|
||||
<p>I believe in the power of community and open collaboration. Whether you're a fellow developer, server owner, or just someone interested in Minecraft and Discord development, I'd love to connect and share knowledge.</p>
|
||||
</div>
|
||||
|
||||
<div class="community-actions">
|
||||
<a href="https://github.com/SimolZimol/" target="_blank" class="community-link">
|
||||
<i class="fab fa-github"></i>
|
||||
<div>
|
||||
<h4>GitHub</h4>
|
||||
<p>Explore code, contribute, and collaborate</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="https://discordapp.com/users/253922739709018114" target="_blank" class="community-link">
|
||||
<i class="fab fa-discord"></i>
|
||||
<div>
|
||||
<h4>Discord</h4>
|
||||
<p>Direct messaging and community discussions</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Final CTA -->
|
||||
<section class="final-cta">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<h2>Ready to Start Your Project?</h2>
|
||||
<p>Don't hesitate to reach out. Whether you have a detailed project plan or just an idea, I'm here to help make it happen.</p>
|
||||
<a href="https://discordapp.com/users/253922739709018114" target="_blank" class="btn btn-primary btn-large">
|
||||
<i class="fab fa-discord"></i> Message on Discord
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
156
templates/index.html
Normal file
156
templates/index.html
Normal file
@@ -0,0 +1,156 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Devanturas by SimolZimol - Professional Minecraft & Discord Development{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Hero Section -->
|
||||
<section id="home" class="hero">
|
||||
<div class="hero-content">
|
||||
<h1>Devanturas</h1>
|
||||
<h2>by <span class="highlight">SimolZimol</span></h2>
|
||||
<p>Professional Minecraft Plugin Development & Discord Bot Programming</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="{{ url_for('projects') }}" class="btn btn-primary">View Projects</a>
|
||||
<a href="https://github.com/SimolZimol/" target="_blank" class="btn btn-secondary">
|
||||
<i class="fab fa-github"></i> GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-background">
|
||||
<div class="floating-icons">
|
||||
<i class="fab fa-java"></i>
|
||||
<i class="fab fa-python"></i>
|
||||
<i class="fas fa-server"></i>
|
||||
<i class="fab fa-discord"></i>
|
||||
<i class="fas fa-code"></i>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Projects Section -->
|
||||
<section id="featured-projects" class="featured-projects">
|
||||
<div class="container">
|
||||
<h2>Featured Projects</h2>
|
||||
<p class="section-subtitle">Showcase of my latest Minecraft and Discord development work</p>
|
||||
|
||||
<div class="projects-grid">
|
||||
{% for project in projects %}
|
||||
<div class="project-card {{ project.color }}">
|
||||
<div class="project-header">
|
||||
<div class="project-icon">
|
||||
<i class="{{ project.icon }}"></i>
|
||||
</div>
|
||||
<div class="project-meta">
|
||||
<h3>{{ project.name }}</h3>
|
||||
<span class="project-type">{{ project.type }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>{{ project.description }}</p>
|
||||
<div class="project-features">
|
||||
{% for tech in project.technologies %}
|
||||
<span class="feature-tag">{{ tech }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="project-links">
|
||||
<a href="{{ project.url }}" class="project-link">
|
||||
<i class="fas fa-arrow-right"></i> Learn More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="view-all-projects">
|
||||
<a href="{{ url_for('projects') }}" class="btn btn-primary">View All Projects</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Skills Overview Section -->
|
||||
<section id="skills-overview" class="skills-overview">
|
||||
<div class="container">
|
||||
<h2>Development Expertise</h2>
|
||||
<div class="skills-grid">
|
||||
<div class="skill-card">
|
||||
<div class="skill-icon">
|
||||
<i class="fas fa-cube"></i>
|
||||
</div>
|
||||
<h3>Minecraft Development</h3>
|
||||
<p>Professional plugin development for Spigot, Paper, and Bukkit servers with focus on performance and user experience.</p>
|
||||
<ul>
|
||||
<li>Java Programming</li>
|
||||
<li>Spigot/Paper API</li>
|
||||
<li>Server Optimization</li>
|
||||
<li>Custom Commands</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="skill-card">
|
||||
<div class="skill-icon">
|
||||
<i class="fab fa-discord"></i>
|
||||
</div>
|
||||
<h3>Discord Bot Development</h3>
|
||||
<p>Advanced Discord bots with database integration, complex algorithms, and community management features.</p>
|
||||
<ul>
|
||||
<li>Python & Discord.py</li>
|
||||
<li>Database Integration</li>
|
||||
<li>Async Programming</li>
|
||||
<li>Docker Deployment</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="skill-card">
|
||||
<div class="skill-icon">
|
||||
<i class="fas fa-cogs"></i>
|
||||
</div>
|
||||
<h3>Full-Stack Solutions</h3>
|
||||
<p>Complete project lifecycle from conception to deployment, including web interfaces and server management.</p>
|
||||
<ul>
|
||||
<li>Flask Web Development</li>
|
||||
<li>MySQL Database Design</li>
|
||||
<li>Git Version Control</li>
|
||||
<li>DevOps & Deployment</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Stats Section -->
|
||||
<section id="stats" class="stats">
|
||||
<div class="container">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">3+</div>
|
||||
<div class="stat-label">Years Experience</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">2</div>
|
||||
<div class="stat-label">Active Projects</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">Multiple</div>
|
||||
<div class="stat-label">Platforms</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">Java & Python</div>
|
||||
<div class="stat-label">Primary Languages</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Call to Action Section -->
|
||||
<section id="cta" class="cta">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<h2>Ready to Collaborate?</h2>
|
||||
<p>Whether you need a custom Minecraft plugin, Discord bot, or full-stack solution, I'm here to help bring your ideas to life.</p>
|
||||
<div class="cta-buttons">
|
||||
<a href="{{ url_for('contact') }}" class="btn btn-primary">Get In Touch</a>
|
||||
<a href="{{ url_for('minecraft') }}" class="btn btn-secondary">Explore Minecraft Projects</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
288
templates/minecraft.html
Normal file
288
templates/minecraft.html
Normal file
@@ -0,0 +1,288 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Minecraft Development - Devanturas by SimolZimol{% endblock %}
|
||||
{% block description %}Professional Minecraft plugin development services and projects by SimolZimol{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Minecraft Hero -->
|
||||
<section class="minecraft-hero">
|
||||
<div class="container">
|
||||
<div class="minecraft-hero-content">
|
||||
<div class="minecraft-icon">
|
||||
<i class="fas fa-cube"></i>
|
||||
</div>
|
||||
<h1>Minecraft Development</h1>
|
||||
<p>Professional plugin development for Spigot, Paper, and Bukkit servers</p>
|
||||
<div class="minecraft-stats">
|
||||
<div class="stat">
|
||||
<span class="stat-number">{{ info.experience }}</span>
|
||||
<span class="stat-label">Experience</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-number">{{ projects|length }}</span>
|
||||
<span class="stat-label">Active Projects</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-number">1.15-1.21</span>
|
||||
<span class="stat-label">MC Versions</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Minecraft Projects -->
|
||||
<section class="minecraft-projects">
|
||||
<div class="container">
|
||||
<h2>Minecraft Projects</h2>
|
||||
<div class="projects-grid">
|
||||
{% for project in projects %}
|
||||
<div class="minecraft-project-card">
|
||||
<div class="project-header">
|
||||
<div class="project-icon">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</div>
|
||||
<div class="project-info">
|
||||
<h3>{{ project.name }}</h3>
|
||||
<p>{{ project.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-details">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Version:</span>
|
||||
<span class="detail-value">{{ project.version }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">MC Versions:</span>
|
||||
<span class="detail-value">{{ project.supported_versions }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Status:</span>
|
||||
<span class="detail-value status-active">{{ project.downloads }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-actions">
|
||||
<a href="{{ project.url }}" class="btn btn-primary">View Details</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<section class="minecraft-services">
|
||||
<div class="container">
|
||||
<h2>Development Services</h2>
|
||||
<div class="services-grid">
|
||||
<div class="service-card">
|
||||
<div class="service-icon">
|
||||
<i class="fas fa-plug"></i>
|
||||
</div>
|
||||
<h3>Custom Plugin Development</h3>
|
||||
<p>Tailored Minecraft plugins built to your exact specifications with modern best practices and optimized performance.</p>
|
||||
<ul>
|
||||
<li>Custom commands and features</li>
|
||||
<li>Database integration</li>
|
||||
<li>Permission system integration</li>
|
||||
<li>Configuration management</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="service-card">
|
||||
<div class="service-icon">
|
||||
<i class="fas fa-cogs"></i>
|
||||
</div>
|
||||
<h3>Server Optimization</h3>
|
||||
<p>Performance analysis and optimization of existing plugins and server configurations for better gameplay experience.</p>
|
||||
<ul>
|
||||
<li>Performance profiling</li>
|
||||
<li>Memory optimization</li>
|
||||
<li>Lag reduction techniques</li>
|
||||
<li>Server architecture advice</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="service-card">
|
||||
<div class="service-icon">
|
||||
<i class="fas fa-tools"></i>
|
||||
</div>
|
||||
<h3>Plugin Maintenance</h3>
|
||||
<p>Ongoing support, updates, and bug fixes for existing plugins to ensure compatibility with latest Minecraft versions.</p>
|
||||
<ul>
|
||||
<li>Version updates</li>
|
||||
<li>Bug fixes</li>
|
||||
<li>Feature additions</li>
|
||||
<li>Technical support</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Technical Expertise -->
|
||||
<section class="minecraft-expertise">
|
||||
<div class="container">
|
||||
<h2>Technical Expertise</h2>
|
||||
<div class="expertise-content">
|
||||
<div class="expertise-main">
|
||||
<h3>Specializations</h3>
|
||||
<div class="specialties-grid">
|
||||
{% for specialty in info.specialties %}
|
||||
<div class="specialty-item">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<span>{{ specialty }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<h3>Supported Platforms</h3>
|
||||
<div class="platforms-grid">
|
||||
{% for server_type in info.server_types %}
|
||||
<div class="platform-card">
|
||||
<div class="platform-icon">
|
||||
{% if server_type == 'Spigot' %}
|
||||
<i class="fas fa-server"></i>
|
||||
{% elif server_type == 'Paper' %}
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
{% elif server_type == 'Bukkit' %}
|
||||
<i class="fas fa-cube"></i>
|
||||
{% endif %}
|
||||
</div>
|
||||
<h4>{{ server_type }}</h4>
|
||||
<p>Full compatibility and optimization</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="expertise-sidebar">
|
||||
<div class="api-knowledge">
|
||||
<h3>API Knowledge</h3>
|
||||
<ul>
|
||||
{% for api in info.preferred_apis %}
|
||||
<li>
|
||||
<i class="fas fa-code"></i>
|
||||
{{ api }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="version-support">
|
||||
<h3>Version Support</h3>
|
||||
<div class="version-range">
|
||||
<div class="version-item">
|
||||
<span class="version-label">Legacy Support</span>
|
||||
<span class="version-value">1.15+</span>
|
||||
</div>
|
||||
<div class="version-item">
|
||||
<span class="version-label">Current Support</span>
|
||||
<span class="version-value">1.21</span>
|
||||
</div>
|
||||
<div class="version-item">
|
||||
<span class="version-label">Future Ready</span>
|
||||
<span class="version-value">Upcoming versions</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Development Process -->
|
||||
<section class="development-process">
|
||||
<div class="container">
|
||||
<h2>Development Process</h2>
|
||||
<div class="process-steps">
|
||||
<div class="process-step">
|
||||
<div class="step-number">1</div>
|
||||
<div class="step-content">
|
||||
<h3>Requirements Analysis</h3>
|
||||
<p>Understanding your server's needs and defining project scope with detailed specifications.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="process-step">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-content">
|
||||
<h3>Development & Testing</h3>
|
||||
<p>Writing clean, efficient code following best practices with comprehensive testing on multiple server versions.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="process-step">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-content">
|
||||
<h3>Deployment & Support</h3>
|
||||
<p>Smooth deployment to your server with ongoing support and maintenance as needed.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Community Resources -->
|
||||
<section class="minecraft-resources">
|
||||
<div class="container">
|
||||
<h2>Resources & Downloads</h2>
|
||||
<div class="resources-grid">
|
||||
<div class="resource-card">
|
||||
<div class="resource-icon">
|
||||
<i class="fas fa-cube"></i>
|
||||
</div>
|
||||
<h3>Modrinth</h3>
|
||||
<p>Download my plugins from the modern Minecraft modding platform</p>
|
||||
<a href="https://modrinth.com/plugin/fly-simolzimol/" target="_blank" class="resource-link">
|
||||
Visit Modrinth <i class="fas fa-external-link-alt"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="resource-card">
|
||||
<div class="resource-icon">
|
||||
<i class="fas fa-plug"></i>
|
||||
</div>
|
||||
<h3>SpigotMC</h3>
|
||||
<p>Find my plugins on the largest Minecraft server resource platform</p>
|
||||
<a href="https://www.spigotmc.org/resources/fly.83164/" target="_blank" class="resource-link">
|
||||
Visit SpigotMC <i class="fas fa-external-link-alt"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="resource-card">
|
||||
<div class="resource-icon">
|
||||
<i class="fab fa-github"></i>
|
||||
</div>
|
||||
<h3>GitHub</h3>
|
||||
<p>Access source code, documentation, and contribute to open source projects</p>
|
||||
<a href="https://github.com/SimolZimol/" target="_blank" class="resource-link">
|
||||
Visit GitHub <i class="fas fa-external-link-alt"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Call to Action -->
|
||||
<section class="minecraft-cta">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<div class="cta-text">
|
||||
<h2>Ready to Enhance Your Server?</h2>
|
||||
<p>Let's discuss your Minecraft plugin development needs and bring your server vision to life.</p>
|
||||
</div>
|
||||
<div class="cta-actions">
|
||||
<a href="{{ url_for('contact') }}" class="btn btn-primary">
|
||||
<i class="fas fa-comments"></i> Start Discussion
|
||||
</a>
|
||||
<a href="{{ url_for('projects') }}" class="btn btn-secondary">
|
||||
<i class="fas fa-eye"></i> View All Projects
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
332
templates/project_detail.html
Normal file
332
templates/project_detail.html
Normal file
@@ -0,0 +1,332 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ project.name }} - Devanturas by SimolZimol{% endblock %}
|
||||
{% block description %}{{ project.description }} - Detailed information, features, and documentation{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Project Hero -->
|
||||
<section class="project-hero">
|
||||
<div class="container">
|
||||
<div class="project-hero-content">
|
||||
<div class="project-hero-text">
|
||||
<div class="project-breadcrumb">
|
||||
<a href="{{ url_for('projects') }}">Projects</a> / {{ project.name }}
|
||||
</div>
|
||||
<h1>{{ project.name }}</h1>
|
||||
<p class="project-tagline">{{ project.tagline }}</p>
|
||||
<p class="project-description">{{ project.description }}</p>
|
||||
|
||||
<div class="project-hero-stats">
|
||||
{% if project.version %}
|
||||
<div class="hero-stat">
|
||||
<span class="stat-label">Version</span>
|
||||
<span class="stat-value">{{ project.version }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if project.status %}
|
||||
<div class="hero-stat">
|
||||
<span class="stat-label">Status</span>
|
||||
<span class="stat-value">{{ project.status }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if project.compatibility %}
|
||||
<div class="hero-stat">
|
||||
<span class="stat-label">Compatibility</span>
|
||||
<span class="stat-value">{{ project.compatibility }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="project-hero-actions">
|
||||
{% for link_name, link_url in project.links.items() %}
|
||||
{% if link_name in ['modrinth', 'spigot', 'github'] %}
|
||||
<a href="{{ link_url }}" target="_blank" class="btn btn-primary">
|
||||
{% if link_name == 'github' %}
|
||||
<i class="fab fa-github"></i> GitHub
|
||||
{% elif link_name == 'modrinth' %}
|
||||
<i class="fas fa-cube"></i> Modrinth
|
||||
{% elif link_name == 'spigot' %}
|
||||
<i class="fas fa-plug"></i> SpigotMC
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-hero-visual">
|
||||
<div class="project-icon-large">
|
||||
{% if 'minecraft' in project.name.lower() or 'fly' in project.name.lower() %}
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
{% elif 'discord' in project.name.lower() or 'bot' in project.name.lower() %}
|
||||
<i class="fab fa-discord"></i>
|
||||
{% else %}
|
||||
<i class="fas fa-code"></i>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Project Navigation -->
|
||||
<nav class="project-nav">
|
||||
<div class="container">
|
||||
<ul class="project-nav-links">
|
||||
<li><a href="#overview" class="active">Overview</a></li>
|
||||
<li><a href="#features">Features</a></li>
|
||||
{% if project.commands %}
|
||||
<li><a href="#commands">Commands</a></li>
|
||||
{% endif %}
|
||||
{% if project.installation %}
|
||||
<li><a href="#installation">Installation</a></li>
|
||||
{% endif %}
|
||||
<li><a href="#resources">Resources</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Project Overview -->
|
||||
<section id="overview" class="project-section">
|
||||
<div class="container">
|
||||
<div class="project-content">
|
||||
<div class="content-main">
|
||||
<h2>Overview</h2>
|
||||
<div class="project-overview">
|
||||
<p>{{ project.long_description }}</p>
|
||||
|
||||
{% if project.technologies %}
|
||||
<div class="project-tech-stack">
|
||||
<h3>Built With</h3>
|
||||
<div class="tech-tags">
|
||||
{% for tech in project.technologies %}
|
||||
<span class="tech-tag">{{ tech }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if project.server_types %}
|
||||
<div class="compatibility-info">
|
||||
<h3>Compatibility</h3>
|
||||
<div class="compatibility-grid">
|
||||
{% for server_type in project.server_types %}
|
||||
<div class="compatibility-item">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<span>{{ server_type }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-sidebar">
|
||||
<div class="sidebar-card">
|
||||
<h3>Quick Links</h3>
|
||||
<div class="quick-links">
|
||||
{% for link_name, link_url in project.links.items() %}
|
||||
<a href="{{ link_url }}" target="_blank" class="quick-link">
|
||||
{% if link_name == 'github' %}
|
||||
<i class="fab fa-github"></i>
|
||||
{% elif link_name == 'modrinth' %}
|
||||
<i class="fas fa-cube"></i>
|
||||
{% elif link_name == 'spigot' %}
|
||||
<i class="fas fa-plug"></i>
|
||||
{% elif link_name == 'wiki' %}
|
||||
<i class="fas fa-book"></i>
|
||||
{% elif link_name == 'issues' %}
|
||||
<i class="fas fa-bug"></i>
|
||||
{% elif link_name == 'documentation' %}
|
||||
<i class="fas fa-file-alt"></i>
|
||||
{% else %}
|
||||
<i class="fas fa-external-link-alt"></i>
|
||||
{% endif %}
|
||||
{{ link_name.title().replace('_', ' ') }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if project.technical_highlights %}
|
||||
<div class="sidebar-card">
|
||||
<h3>Technical Highlights</h3>
|
||||
<ul class="highlight-list">
|
||||
{% for highlight in project.technical_highlights %}
|
||||
<li>{{ highlight }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section id="features" class="project-section">
|
||||
<div class="container">
|
||||
<h2>Features</h2>
|
||||
<div class="features-grid">
|
||||
{% for feature in project.features %}
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-check"></i>
|
||||
</div>
|
||||
<div class="feature-text">
|
||||
<p>{{ feature }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% if project.commands %}
|
||||
<!-- Commands Section -->
|
||||
<section id="commands" class="project-section">
|
||||
<div class="container">
|
||||
<h2>Commands & Permissions</h2>
|
||||
<div class="commands-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Command</th>
|
||||
<th>Description</th>
|
||||
<th>Permission</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for command in project.commands %}
|
||||
<tr>
|
||||
<td><code>{{ command.command }}</code></td>
|
||||
<td>{{ command.description }}</td>
|
||||
<td><code>{{ command.permission }}</code></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{% if project.installation %}
|
||||
<!-- Installation Section -->
|
||||
<section id="installation" class="project-section">
|
||||
<div class="container">
|
||||
<h2>Installation Guide</h2>
|
||||
<div class="installation-steps">
|
||||
<ol>
|
||||
{% for step in project.installation %}
|
||||
<li>{{ step }}</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
<!-- Resources Section -->
|
||||
<section id="resources" class="project-section">
|
||||
<div class="container">
|
||||
<h2>Resources & Support</h2>
|
||||
<div class="resources-grid">
|
||||
{% for link_name, link_url in project.links.items() %}
|
||||
<div class="resource-card">
|
||||
<div class="resource-icon">
|
||||
{% if link_name == 'github' %}
|
||||
<i class="fab fa-github"></i>
|
||||
{% elif link_name == 'wiki' %}
|
||||
<i class="fas fa-book"></i>
|
||||
{% elif link_name == 'issues' %}
|
||||
<i class="fas fa-bug"></i>
|
||||
{% elif link_name == 'documentation' %}
|
||||
<i class="fas fa-file-alt"></i>
|
||||
{% elif link_name == 'modrinth' %}
|
||||
<i class="fas fa-cube"></i>
|
||||
{% elif link_name == 'spigot' %}
|
||||
<i class="fas fa-plug"></i>
|
||||
{% else %}
|
||||
<i class="fas fa-external-link-alt"></i>
|
||||
{% endif %}
|
||||
</div>
|
||||
<h3>{{ link_name.title().replace('_', ' ') }}</h3>
|
||||
<p>
|
||||
{% if link_name == 'github' %}
|
||||
View source code and contribute to the project
|
||||
{% elif link_name == 'wiki' %}
|
||||
Comprehensive documentation and guides
|
||||
{% elif link_name == 'issues' %}
|
||||
Report bugs and request features
|
||||
{% elif link_name == 'documentation' %}
|
||||
Official project documentation
|
||||
{% elif link_name == 'modrinth' %}
|
||||
Download from Modrinth platform
|
||||
{% elif link_name == 'spigot' %}
|
||||
Download from SpigotMC resources
|
||||
{% else %}
|
||||
Additional project resources
|
||||
{% endif %}
|
||||
</p>
|
||||
<a href="{{ link_url }}" target="_blank" class="resource-link">
|
||||
Visit <i class="fas fa-external-link-alt"></i>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Related Projects -->
|
||||
<section class="related-projects">
|
||||
<div class="container">
|
||||
<h2>Other Projects</h2>
|
||||
<p>Explore more of my development work</p>
|
||||
<div class="related-actions">
|
||||
<a href="{{ url_for('projects') }}" class="btn btn-primary">View All Projects</a>
|
||||
<a href="{{ url_for('minecraft') }}" class="btn btn-secondary">Minecraft Projects</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script>
|
||||
// Project navigation
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const navLinks = document.querySelectorAll('.project-nav-links a');
|
||||
const sections = document.querySelectorAll('.project-section');
|
||||
|
||||
// Smooth scrolling
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Active section highlighting
|
||||
window.addEventListener('scroll', function() {
|
||||
let current = '';
|
||||
sections.forEach(section => {
|
||||
const sectionTop = section.offsetTop - 100;
|
||||
if (pageYOffset >= sectionTop) {
|
||||
current = section.getAttribute('id');
|
||||
}
|
||||
});
|
||||
|
||||
navLinks.forEach(link => {
|
||||
link.classList.remove('active');
|
||||
if (link.getAttribute('href') === `#${current}`) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
196
templates/projects.html
Normal file
196
templates/projects.html
Normal file
@@ -0,0 +1,196 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Projects - Devanturas by SimolZimol{% endblock %}
|
||||
{% block description %}Complete overview of Minecraft plugins and Discord bots developed by SimolZimol{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Projects Header -->
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1>My Projects</h1>
|
||||
<p>A comprehensive overview of my Minecraft and Discord development work</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Projects Grid -->
|
||||
<section class="projects-section">
|
||||
<div class="container">
|
||||
<div class="projects-filter">
|
||||
<button class="filter-btn active" data-filter="all">All Projects</button>
|
||||
<button class="filter-btn" data-filter="minecraft">Minecraft</button>
|
||||
<button class="filter-btn" data-filter="discord">Discord</button>
|
||||
</div>
|
||||
|
||||
<div class="projects-grid">
|
||||
{% for project in projects %}
|
||||
<div class="project-card {{ project.color }}" data-category="{{ project.type.lower().replace(' ', '-') }}">
|
||||
<div class="project-header">
|
||||
<div class="project-icon">
|
||||
<i class="{{ project.icon }}"></i>
|
||||
</div>
|
||||
<div class="project-meta">
|
||||
<h3>{{ project.name }}</h3>
|
||||
<span class="project-type">{{ project.type }}</span>
|
||||
<span class="project-status status-{{ project.status.lower().replace(' ', '-') }}">{{ project.status }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-description">
|
||||
<p>{{ project.description }}</p>
|
||||
<div class="project-details">
|
||||
<p>{{ project.long_description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-technologies">
|
||||
{% for tech in project.technologies %}
|
||||
<span class="tech-tag">{{ tech }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="project-stats">
|
||||
{% if project.version %}
|
||||
<div class="stat">
|
||||
<span class="stat-label">Version</span>
|
||||
<span class="stat-value">{{ project.version }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if project.downloads %}
|
||||
<div class="stat">
|
||||
<span class="stat-label">Status</span>
|
||||
<span class="stat-value">{{ project.downloads }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if project.users %}
|
||||
<div class="stat">
|
||||
<span class="stat-label">Users</span>
|
||||
<span class="stat-value">{{ project.users }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="project-actions">
|
||||
<a href="{{ project.url }}" class="btn btn-primary">
|
||||
<i class="fas fa-info-circle"></i> Details
|
||||
</a>
|
||||
|
||||
{% for link_name, link_url in project.links.items() %}
|
||||
<a href="{{ link_url }}" target="_blank" class="btn btn-secondary btn-small">
|
||||
{% if link_name == 'github' %}
|
||||
<i class="fab fa-github"></i>
|
||||
{% elif link_name == 'modrinth' %}
|
||||
<i class="fas fa-cube"></i>
|
||||
{% elif link_name == 'spigot' %}
|
||||
<i class="fas fa-plug"></i>
|
||||
{% else %}
|
||||
<i class="fas fa-external-link-alt"></i>
|
||||
{% endif %}
|
||||
{{ link_name.title() }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Technology Stack Section -->
|
||||
<section class="tech-stack-section">
|
||||
<div class="container">
|
||||
<h2>Technology Stack</h2>
|
||||
<p>Technologies and frameworks I work with</p>
|
||||
|
||||
<div class="tech-categories">
|
||||
<div class="tech-category">
|
||||
<h3>Minecraft Development</h3>
|
||||
<div class="tech-grid">
|
||||
<div class="tech-item">
|
||||
<i class="fab fa-java"></i>
|
||||
<span>Java</span>
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<i class="fas fa-server"></i>
|
||||
<span>Spigot</span>
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
<span>Paper</span>
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<i class="fas fa-cube"></i>
|
||||
<span>Bukkit</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tech-category">
|
||||
<h3>Discord & Web Development</h3>
|
||||
<div class="tech-grid">
|
||||
<div class="tech-item">
|
||||
<i class="fab fa-python"></i>
|
||||
<span>Python</span>
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<i class="fab fa-discord"></i>
|
||||
<span>Discord.py</span>
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<i class="fas fa-database"></i>
|
||||
<span>MySQL</span>
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<i class="fab fa-docker"></i>
|
||||
<span>Docker</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Call to Action -->
|
||||
<section class="projects-cta">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<h2>Have a Project in Mind?</h2>
|
||||
<p>I'm always interested in working on new and exciting projects. Let's discuss your ideas!</p>
|
||||
<a href="{{ url_for('contact') }}" class="btn btn-primary">Start a Conversation</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script>
|
||||
// Project filtering
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const filterBtns = document.querySelectorAll('.filter-btn');
|
||||
const projectCards = document.querySelectorAll('.project-card');
|
||||
|
||||
filterBtns.forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
// Remove active class from all buttons
|
||||
filterBtns.forEach(b => b.classList.remove('active'));
|
||||
// Add active class to clicked button
|
||||
this.classList.add('active');
|
||||
|
||||
const filter = this.getAttribute('data-filter');
|
||||
|
||||
projectCards.forEach(card => {
|
||||
if (filter === 'all') {
|
||||
card.style.display = 'block';
|
||||
} else {
|
||||
const category = card.getAttribute('data-category');
|
||||
if (category.includes(filter)) {
|
||||
card.style.display = 'block';
|
||||
} else {
|
||||
card.style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user