626 lines
47 KiB
HTML
626 lines
47 KiB
HTML
<script>
|
||
document.body.classList.add("overflow-hidden");
|
||
</script>
|
||
|
||
<section class="min-h-screen flex items-center justify-center relative pt-16 overflow-hidden">
|
||
<!-- 粒子背景（新增加载动画） -->
|
||
<div id="particles-js" class="particles-container" style="opacity: 0; transition: opacity 1.2s ease-in-out;"></div>
|
||
<div id="card-container" class="relative w-[80%] border-0 rounded-xl transition-all duration-700 ease-in-out overflow-hidden min-h-[60vh] md:min-h-[70vh]">
|
||
<!-- 文字容器（新增滚动触发动画） -->
|
||
<div id="text-container" class="absolute left-0 top-0 h-full flex items-center justify-center px-6 opacity-0 transition-opacity duration-700 ease-in-out z-10"
|
||
style="display: flex; padding-top: 0;">
|
||
<div class="flex flex-col gap-6">
|
||
<div class="container mx-auto px-4 md:px-8 relative z-10">
|
||
<div class="max-w-5xl mx-auto text-center" style="display: flex; flex-direction: column; justify-content: center;">
|
||
<div class="h-[15vh] w-full"></div>
|
||
<h1 id="main-title" class="text-item text-[8vw] md:text-[6vw] lg:text-[5vw] font-extrabold text-white leading-tight mb-4 opacity-0 transform translate-x-[-50px] transition-all duration-1200 ease-out"
|
||
style="text-shadow: 0 0 15px rgba(255,255,255,0.3);">
|
||
GVSDS
|
||
</h1>
|
||
<h2 id="sub-title" class="text-item text-[3vw] md:text-[2vw] lg:text-[1.8vw] font-normal text-white mb-6 opacity-0 transform translate-x-[50px] transition-all duration-800 ease-out delay-400">
|
||
银河锋锐软件开发工作室
|
||
</h2>
|
||
<p id="tag-text-1" class="text-item text-[1.5vw] md:text-[1.2vw] lg:text-[1vw] text-gray-300 font-medium opacity-0 transition-all duration-500 ease-out delay-800 hover:scale-105">
|
||
非盈利·技术驱动·兴趣聚合
|
||
</p>
|
||
<p id="tag-text-2" class="text-item text-[1.5vw] md:text-[1.2vw] lg:text-[1vw] text-gray-300 font-medium opacity-0 transition-opacity duration-500 ease-out delay-800 mt-2">
|
||
<span class="typewriter typetext"></span>
|
||
</p>
|
||
</div>
|
||
<!-- 分割线（新增滚动渐显） -->
|
||
<div class="flex flex-col items-center mt-8 md:mt-12 mx-auto opacity-0 transition-opacity duration-800 ease-out delay-1200" id="line-container">
|
||
<div class="line-item w-1/2 h-0.5 bg-white/30 mb-5 transition-all duration-500 hover:w-3/4"></div>
|
||
<div class="line-item w-1/3 h-0.5 bg-white/60 mb-5 transition-all duration-500 hover:w-2/4"></div>
|
||
<div class="line-item w-1/4 h-0.5 bg-white/90 transition-all duration-500 hover:w-1/4"></div>
|
||
</div>
|
||
<!-- 新增向下滚动指引（动画箭头） -->
|
||
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 opacity-0 transition-opacity duration-800 ease-out delay-1500" id="scroll-indicator">
|
||
<a href="#about" class="flex flex-col items-center text-white/80 hover:text-white">
|
||
<span class="text-sm mb-2">向下探索</span>
|
||
<i class="fa fa-chevron-down animate-bounce"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- SVG背景（新增悬停旋转效果） -->
|
||
<div id="svg-wrapper" class="absolute inset-0 flex items-center justify-center transition-all duration-700 ease-in-out z-0" style="opacity: 0;">
|
||
<object id="svg-container"
|
||
data="/assets/icon/ICON.svg"
|
||
type="image/svg+xml"
|
||
class="svg-container svg-container-desktop md:svg-container-desktop xs:svg-container-mobile object-contain transition-all duration-1000 ease-in-out"
|
||
style="will-change: transform;">
|
||
<div class="text-white text-center p-8">
|
||
<i class="fa fa-exclamation-triangle text-4xl mb-4 text-yellow-400"></i>
|
||
<p>无法加载SVG文件</p>
|
||
<p class="text-sm text-gray-400 mt-2">请检查文件路径是否正确</p>
|
||
</div>
|
||
</object>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="py-20 md:py-28 px-4 md:px-8 bg-gvsds-black">
|
||
<div class="container mx-auto">
|
||
<!-- 标题（与"我们的性质"模块标题风格一致，保持系列感） -->
|
||
<div class="mb-16 md:mb-24 reveal">
|
||
<h2 class="text-3xl md:text-4xl font-extrabold text-gvsds-white pl-4 border-l-4 border-gvsds-white text-fill">
|
||
关于我们
|
||
</h2>
|
||
</div>
|
||
|
||
<!-- 前言内容网格（单栏基础布局，适配响应式，保留渐显与hover交互） -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||
<!-- 左侧：前言文字（占主要宽度，渐显加载） -->
|
||
<div class="reveal lg:col-span-8" style="transition-delay: 100ms;">
|
||
<div class="relative w-full bg-gvsds-dark border border-gvsds-white/20 rounded-lg p-8 md:p-10 flex flex-col justify-center transition-all duration-300 hover:shadow-[0_8px_30px_rgba(255,255,255,0.08)]">
|
||
<h3 class="text-2xl md:text-3xl font-bold text-gvsds-white mb-6">银河锋锐软件开发工作室</h3>
|
||
<p class="text-gvsds-light text-lg md:text-xl leading-relaxed mb-6">
|
||
我们诞生于对技术的热爱与对协作的向往，是一支由一群年轻开发者组成的非盈利技术团队，或者可以说是一群“码农”吧。自成立以来，我们始终以「技术普惠、共同成长」为初心，致力于通过开源项目、技术分享与实践协作，让更多人感受技术的价值与乐趣。
|
||
</p>
|
||
<p class="text-gvsds-light text-lg md:text-xl leading-relaxed mb-6">
|
||
我们不追求商业利益，只专注于技术本身的探索与沉淀——从基础工具开发到前沿技术验证，从新手学习引导到团队协作实践，每一个项目都承载着我们对技术的热情与对社区的责任。
|
||
</p>
|
||
<p class="text-gvsds-light text-lg md:text-xl leading-relaxed mb-6">
|
||
同时，我们在多个平台（如GitHub等）分享我们的项目代码、技术文章、经验分享等，与更多的技术爱好者互动交流。也会在一些编程兼职平台写代码以支持工作室最基本的运转。
|
||
</p>
|
||
<p class="text-gvsds-light text-lg md:text-xl leading-relaxed mb-6">
|
||
如果你愿意在无聊的字符中与我们分享你的技术经验、项目代码、学习心得、以及日常生活等，我们也会非常欢迎你的参与。你也可以将本工作室作为一个交友平台和我们一起聊天。
|
||
</p>
|
||
<p class="text-gvsds-light text-lg md:text-xl leading-relaxed mb-6">
|
||
作为青年人，我们有着一腔热血，我们坚信，每一份对技术的热爱都能汇聚成改变的力量，每一次对未知的探索都能叩开创新的大门。
|
||
</p>
|
||
<p class="text-gvsds-light text-lg md:text-xl leading-relaxed">
|
||
无论你是刚入门的技术新手，还是深耕领域的资深开发者，只要你对技术充满好奇、愿意分享与协作，这里都能成为你交流学习的平台。我们相信，技术的力量源于共同探索，成长的价值在于「成就彼此」。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：核心理念卡片（垂直排列，与文字区互补，渐显加载） -->
|
||
<div class="reveal lg:col-span-4 flex flex-col gap-6" style="transition-delay: 300ms;">
|
||
<!-- 理念1：技术初心 -->
|
||
<div class="relative w-full h-48 bg-gvsds-dark border border-gvsds-white/20 rounded-lg p-6 flex flex-col items-center justify-center text-center transition-all duration-300 hover:translate-y-[-3px] hover:shadow-[0_6px_20px_rgba(255,255,255,0.06)]">
|
||
<div class="w-14 h-14 rounded-full bg-gvsds-black flex items-center justify-center mb-4 border border-gvsds-white/30">
|
||
<i class="fa fa-code text-xl text-gvsds-white"></i>
|
||
</div>
|
||
<h4 class="text-xl font-semibold text-gvsds-white mb-2">技术初心</h4>
|
||
<p class="text-gvsds-light text-sm md:text-base">以纯粹热爱驱动技术探索，拒绝功利化开发</p>
|
||
</div>
|
||
|
||
<!-- 理念2：开放协作 -->
|
||
<div class="relative w-full h-48 bg-gvsds-dark border border-gvsds-white/20 rounded-lg p-6 flex flex-col items-center justify-center text-center transition-all duration-300 hover:translate-y-[-3px] hover:shadow-[0_6px_20px_rgba(255,255,255,0.06)]">
|
||
<div class="w-14 h-14 rounded-full bg-gvsds-black flex items-center justify-center mb-4 border border-gvsds-white/30">
|
||
<i class="fa fa-users text-xl text-gvsds-white"></i>
|
||
</div>
|
||
<h4 class="text-xl font-semibold text-gvsds-white mb-2">开放协作</h4>
|
||
<p class="text-gvsds-light text-sm md:text-base">打破技术壁垒，欢迎所有开发者参与共建</p>
|
||
</div>
|
||
|
||
<!-- 理念3：共同成长 -->
|
||
<div class="relative w-full h-48 bg-gvsds-dark border border-gvsds-white/20 rounded-lg p-6 flex flex-col items-center justify-center text-center transition-all duration-300 hover:translate-y-[-3px] hover:shadow-[0_6px_20px_rgba(255,255,255,0.06)]">
|
||
<div class="w-14 h-14 rounded-full bg-gvsds-black flex items-center justify-center mb-4 border border-gvsds-white/30">
|
||
<i class="fa fa-rocket text-xl text-gvsds-white"></i>
|
||
</div>
|
||
<h4 class="text-xl font-semibold text-gvsds-white mb-2">共同成长</h4>
|
||
<p class="text-gvsds-light text-sm md:text-base">在实践中学习，在分享中进步，彼此成就</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 加入号召（全宽卡片，突出显示，最后渐显） -->
|
||
<div class="reveal mt-12" style="transition-delay: 500ms;">
|
||
<div class="relative w-full bg-gvsds-white rounded-lg p-8 flex flex-col md:flex-row items-center justify-between transition-all duration-300 hover:shadow-[0_8px_30px_rgba(255,255,255,0.15)]">
|
||
<div class="mb-6 md:mb-0">
|
||
<h4 class="text-2xl font-bold text-gvsds-black mb-2">期待与你同行</h4>
|
||
<p class="text-gvsds-dark text-lg">加入我们，一起探索技术边界，创造更多可能</p>
|
||
</div>
|
||
<a href="mailto:hr@gvsds.com?subject=我申请加入银河锋锐软件开发工作室&body=您好!%0D%0A%0D%0A我是 [ 姓名 / 网名 ]，我期望加入银河锋锐软件开发工作室。%0D%0A我的联系方式是 [ 微信（必填） / QQ / TEL / X / 电报 / DISCORD ] %0D%0A我的兴趣爱好是 [ 选填 ]，我的能力是 [ 选填 ]。%0D%0A我能够作为 [ 画师 / 程序员 / 测试人员 ] 加入工作室。%0D%0A [ 您的更多个人信息（选填）（个人简历等） ] %0D%0A希望您能提供一个机会，感谢！%0D%0A—— [ 姓名 / 网名 ] [ 年-月-日 ]" class="px-8 py-3 bg-gvsds-black text-gvsds-white font-medium rounded-lg transition-all duration-300 hover:bg-gvsds-white hover:text-gvsds-black hover:border hover:border-gvsds-black">
|
||
申请加入
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="reveal mt-16 grid grid-cols-2 md:grid-cols-4 gap-6 text-center" style="transition-delay: 700ms;">
|
||
<div class="bg-dark/50 p-6 rounded-lg border border-white/10">
|
||
<div class="text-4xl font-bold text-white mb-2 counter">4 名</div>
|
||
<p class="text-gray-300">核心成员</p>
|
||
</div>
|
||
<div class="bg-dark/50 p-6 rounded-lg border border-white/10">
|
||
<div class="text-4xl font-bold text-white mb-2 counter">28 个</div>
|
||
<p class="text-gray-300">项目</p>
|
||
</div>
|
||
<div class="bg-dark/50 p-6 rounded-lg border border-white/10">
|
||
<div class="text-4xl font-bold text-white mb-2 counter">100w 行+</div>
|
||
<p class="text-gray-300">代码提交量</p>
|
||
</div>
|
||
<div class="bg-dark/50 p-6 rounded-lg border border-white/10">
|
||
<div class="text-4xl font-bold text-white mb-2 counter">1500+ 位</div>
|
||
<p class="text-gray-300">客户</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="projects" class="py-20 md:py-28 px-4 md:px-8 bg-black">
|
||
<div class="container mx-auto">
|
||
<!-- 标题（保持系列风格） -->
|
||
<div class="mb-16 md:mb-24 reveal">
|
||
<h2 class="text-3xl md:text-4xl font-extrabold text-white pl-4 border-l-4 border-white text-fill">
|
||
开源项目
|
||
</h2>
|
||
<p class="text-gray-400 mt-4 pl-6">我们的技术实践成果，全部开源可商用</p>
|
||
</div>
|
||
<!-- 项目卡片（网格布局+悬停动效） -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
<div class="reveal">
|
||
<div class="bg-dark border border-white/10 rounded-lg overflow-hidden transition-all duration-300 hover:border-white/30 hover:shadow-[0_0_25px_rgba(255,255,255,0.1)] hover:-translate-y-2">
|
||
<div class="aspect-video overflow-hidden">
|
||
<img src="/assets/project/emstc.png" alt="EMSTC" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="flex justify-between items-start mb-4">
|
||
<h3 class="text-xl font-bold text-white">EMSTC</h3>
|
||
<span class="bg-green-500/20 text-green-400 text-xs px-2 py-1 rounded">PNG</span>
|
||
</div>
|
||
<p class="text-gray-300 mb-6 text-sm">杨村第八中学学生梗图，最全的数据库。</p>
|
||
<div class="flex justify-between items-center">
|
||
<div class="flex gap-2">
|
||
<span class="text-gray-400 text-xs"><i class="fa fa-star mr-1"></i> 0</span>
|
||
<span class="text-gray-400 text-xs"><i class="fa fa-code-fork mr-1"></i> 0</span>
|
||
</div>
|
||
<a href="https://github.com/GVSDS/EMSTC/" target="_blank" class="text-white hover:text-gray-300 transition-colors">
|
||
查看源码 <i class="fa fa-external-link ml-1"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reveal">
|
||
<div class="bg-dark border border-white/10 rounded-lg overflow-hidden transition-all duration-300 hover:border-white/30 hover:shadow-[0_0_25px_rgba(255,255,255,0.1)] hover:-translate-y-2">
|
||
<div class="aspect-video overflow-hidden">
|
||
<img src="/assets/project/asdg.png" alt="ASDG" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="flex justify-between items-start mb-4">
|
||
<h3 class="text-xl font-bold text-white">ASDG</h3>
|
||
<span class="bg-green-500/20 text-green-400 text-xs px-2 py-1 rounded">Python</span>
|
||
<span class="bg-red-500/20 text-red-400 text-xs px-2 py-1 rounded">Beta</span>
|
||
<span class="bg-red-500/20 text-red-400 text-xs px-2 py-1 rounded">仅供测试</span>
|
||
</div>
|
||
<p class="text-gray-300 mb-6 text-sm">A Scientific DDoS Gun Tool，网络压力测试工具，写着玩的没写完功能。</p>
|
||
<div class="flex justify-between items-center">
|
||
<div class="flex gap-2">
|
||
<span class="text-gray-400 text-xs"><i class="fa fa-star mr-1"></i> 0</span>
|
||
<span class="text-gray-400 text-xs"><i class="fa fa-code-fork mr-1"></i> 0</span>
|
||
</div>
|
||
<a href="https://github.com/GVSDS/ASDG/" target="_blank" class="text-white hover:text-gray-300 transition-colors">
|
||
查看源码 <i class="fa fa-external-link ml-1"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reveal">
|
||
<div class="bg-dark border border-white/10 rounded-lg overflow-hidden transition-all duration-300 hover:border-white/30 hover:shadow-[0_0_25px_rgba(255,255,255,0.1)] hover:-translate-y-2">
|
||
<div class="aspect-video overflow-hidden">
|
||
<img src="/assets/project/nsql.png" alt="NSQL" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="flex justify-between items-start mb-4">
|
||
<h3 class="text-xl font-bold text-white">NSQL</h3>
|
||
<span class="bg-green-500/20 text-green-400 text-xs px-2 py-1 rounded">Python</span>
|
||
</div>
|
||
<p class="text-gray-300 mb-6 text-sm">MySQL Wrapper Project - New SQL (NSQL)，基于 PyMySQL 实现的 MySQL 数据库封装器，提供了简单的数据库操作接口。以及更可靠的安全机制。</p>
|
||
<div class="flex justify-between items-center">
|
||
<div class="flex gap-2">
|
||
<span class="text-gray-400 text-xs"><i class="fa fa-star mr-1"></i> 0</span>
|
||
<span class="text-gray-400 text-xs"><i class="fa fa-code-fork mr-1"></i> 0</span>
|
||
</div>
|
||
<a href="https://github.com/GVSDS/NSQL/" target="_blank" class="text-white hover:text-gray-300 transition-colors">
|
||
查看源码 <i class="fa fa-external-link ml-1"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 查看更多按钮 -->
|
||
<div class="reveal lg:col-span-3 flex justify-center mt-8">
|
||
<a href="https://github.com/GVSDS/" target="_blank" class="px-8 py-3 bg-white text-black font-medium rounded-lg transition-all duration-300 hover:bg-gray-200 hover:shadow-[0_0_15px_rgba(255,255,255,0.3)]">
|
||
访问 GVSDS 在 GitHub 上的组织 <i class="fa fa-code ml-2"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!--section class="py-20 md:py-28 px-4 md:px-8 bg-black">
|
||
<div class="container mx-auto">
|
||
<div class="mb-16 md:mb-24 reveal">
|
||
<h2 class="text-3xl md:text-4xl font-extrabold text-white pl-4 border-l-4 border-white text-fill">
|
||
优秀成员
|
||
</h2>
|
||
<p class="text-gray-400 mt-4 pl-6">一群热爱技术的开发者，因共同理想汇聚于此</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
<div class="reveal">
|
||
<div class="bg-dark border border-white/10 rounded-lg overflow-hidden transition-all duration-300 hover:border-white/30 hover:shadow-[0_0_25px_rgba(255,255,255,0.1)] hover:-translate-y-2 group">
|
||
<div class="aspect-square overflow-hidden relative">
|
||
<img src="/assets/members/terminexus.jpg" alt="TermiNexus-Head" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
||
<div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-4">
|
||
<span class="bg-blue-500/80 text-white text-xs px-3 py-1 rounded-full">创始人 / 主要项目负责人</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-6 text-center">
|
||
<h3 class="text-xl font-bold text-white mb-1">TermiNexus</h3>
|
||
<p class="text-gray-400 text-sm mb-3">擅长：全栈、Python后端 / 架构设计</p>
|
||
<div class="flex justify-center gap-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||
<a href="https://github.com/WYT2WYT" target="_blank" class="text-gray-400 hover:text-white transition-colors"><i class="fa-brands fa-github"></i></a>
|
||
<a href="mailto:wyt@gvsds.com" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-envelope"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="reveal" style="transition-delay: 100ms;">
|
||
<div class="bg-dark border border-white/10 rounded-lg overflow-hidden transition-all duration-300 hover:border-white/30 hover:shadow-[0_0_25px_rgba(255,255,255,0.1)] hover:-translate-y-2 group">
|
||
<div class="aspect-square overflow-hidden relative">
|
||
<img src="/assets/members/yrzd.jpg" alt="YRZD-Head" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
||
<div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-4">
|
||
<span class="bg-pink-500/80 text-white text-xs px-3 py-1 rounded-full">主要项目程序员</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-6 text-center">
|
||
<h3 class="text-xl font-bold text-white mb-1">悠然自得</h3>
|
||
<p class="text-gray-400 text-sm mb-3">擅长：网页设计 / 本地化程序设计 / 自动化程序</p>
|
||
<div class="flex justify-center gap-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||
<a href="https://github.com/YRZD6" target="_blank" class="text-gray-400 hover:text-white transition-colors"><i class="fa-brands fa-github"></i></a>
|
||
<a href="mailto:YRZD6666661@outlook.com" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-envelope"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="reveal" style="transition-delay: 200ms;">
|
||
<div class="bg-dark border border-white/10 rounded-lg overflow-hidden transition-all duration-300 hover:border-white/30 hover:shadow-[0_0_25px_rgba(255,255,255,0.1)] hover:-translate-y-2 group">
|
||
<div class="aspect-square overflow-hidden relative">
|
||
<img src="/assets/members/Chindows.jpg" alt="Chindows-Head" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
||
<div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-4">
|
||
<span class="bg-green-500/80 text-white text-xs px-3 py-1 rounded-full">主要项目程序员</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-6 text-center">
|
||
<h3 class="text-xl font-bold text-white mb-1">Chindows / MicGan6</h3>
|
||
<p class="text-gray-400 text-sm mb-3">擅长：本地化程序设计</p>
|
||
<div class="flex justify-center gap-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||
<a href="https://github.com/MicGan6" target="_blank" class="text-gray-400 hover:text-white transition-colors"><i class="fa-brands fa-github"></i></a>
|
||
<a href="mailto:MicGan6@outlook.com" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-envelope"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="reveal" style="transition-delay: 300ms;">
|
||
<div class="bg-dark border border-white/10 rounded-lg overflow-hidden transition-all duration-300 hover:border-white/30 hover:shadow-[0_0_25px_rgba(255,255,255,0.1)] hover:-translate-y-2 group">
|
||
<div class="aspect-square overflow-hidden relative">
|
||
<img src="/assets/members/赤砂.jpg" alt="赤砂-Head" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
||
<div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-4">
|
||
<span class="bg-yellow-500/80 text-white text-xs px-3 py-1 rounded-full">画师</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-6 text-center">
|
||
<h3 class="text-xl font-bold text-white mb-1">赤砂</h3>
|
||
<p class="text-gray-400 text-sm mb-3">擅长：UI 设计 / 美工设计 / 美术指导</p>
|
||
<div class="flex justify-center gap-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||
<a href="weixin://dl/add/?username=Hh01131" target="_blank" class="text-gray-400 hover:text-white transition-colors"><i class="fa-brands fa-weixin"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reveal mt-16 text-center" style="transition-delay: 400ms;">
|
||
<p class="text-gray-300 text-lg mb-6">我们还在寻找更多志同道合的伙伴，<a href="mailto:hr@gvsds.com?subject=我申请加入银河锋锐软件开发工作室&body=您好!%0D%0A%0D%0A我是 [ 姓名 / 网名 ]，我期望加入银河锋锐软件开发工作室。%0D%0A我的联系方式是 [ 微信（必填） / QQ / TEL / X / 电报 / DISCORD ] %0D%0A我的兴趣爱好是 [ 选填 ]，我的能力是 [ 选填 ]。%0D%0A我能够作为 [ 画师 / 程序员 / 测试人员 ] 加入工作室。%0D%0A [ 您的更多个人信息（选填）（个人简历等） ] %0D%0A希望您能提供一个机会，感谢！%0D%0A—— [ 姓名 / 网名 ] [ 年-月-日 ]" class="text-white underline hover:text-blue-300 transition-colors">加入我们</a> 一起成长！</p>
|
||
</div>
|
||
</div>
|
||
</section-->
|
||
|
||
<section class="py-20 md:py-28 px-4 md:px-8 bg-gvsds-black">
|
||
<div class="container mx-auto">
|
||
<!-- 标题（渐显+文字填充） -->
|
||
<div class="mb-16 md:mb-24 reveal">
|
||
<h2 class="text-3xl md:text-4xl font-extrabold text-gvsds-white pl-4 border-l-4 border-gvsds-white text-fill">
|
||
我们的性质
|
||
</h2>
|
||
</div>
|
||
|
||
<!-- 性质卡片网格（渐显+hover交互，移除翻转效果） -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
||
<!-- 非盈利 -->
|
||
<div class="reveal">
|
||
<div class="card-static relative w-full h-64 bg-gvsds-dark border border-gvsds-white/20 rounded-lg p-6 flex flex-col items-center justify-center transition-all duration-300 hover:translate-y-[-5px] hover:shadow-[0_8px_24px_rgba(255,255,255,0.08)]">
|
||
<div class="w-16 h-16 rounded-full bg-gvsds-black flex items-center justify-center mb-6 border border-gvsds-white/30">
|
||
<i class="fa fa-heart text-2xl text-gvsds-white"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-gvsds-white mb-4">非盈利</h3>
|
||
<p class="text-gvsds-light text-center">不以盈利为目的，专注技术公益与学习，所有项目均免费开放，助力技术分享与成长</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 学习性 -->
|
||
<div class="reveal" style="transition-delay: 100ms;">
|
||
<div class="card-static relative w-full h-64 bg-gvsds-dark border border-gvsds-white/20 rounded-lg p-6 flex flex-col items-center justify-center transition-all duration-300 hover:translate-y-[-5px] hover:shadow-[0_8px_24px_rgba(255,255,255,0.08)]">
|
||
<div class="w-16 h-16 rounded-full bg-gvsds-black flex items-center justify-center mb-6 border border-gvsds-white/30">
|
||
<i class="fa fa-book text-2xl text-gvsds-white"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-gvsds-white mb-4">学习性</h3>
|
||
<p class="text-gvsds-light text-center">持续探索前沿技术，定期组织技术分享，共同攻克难题，构建高效学习型团队</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 合作性 -->
|
||
<div class="reveal" style="transition-delay: 200ms;">
|
||
<div class="card-static relative w-full h-64 bg-gvsds-dark border border-gvsds-white/20 rounded-lg p-6 flex flex-col items-center justify-center transition-all duration-300 hover:translate-y-[-5px] hover:shadow-[0_8px_24px_rgba(255,255,255,0.08)]">
|
||
<div class="w-16 h-16 rounded-full bg-gvsds-black flex items-center justify-center mb-6 border border-gvsds-white/30">
|
||
<i class="fa fa-handshake text-2xl text-gvsds-white"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-gvsds-white mb-4">合作性</h3>
|
||
<p class="text-gvsds-light text-center">秉持开放协作理念，欢迎各类技术团队/开发者合作，共推项目发展与技术进步</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 公开性 -->
|
||
<div class="reveal" style="transition-delay: 300ms;">
|
||
<div class="card-static relative w-full h-64 bg-gvsds-dark border border-gvsds-white/20 rounded-lg p-6 flex flex-col items-center justify-center transition-all duration-300 hover:translate-y-[-5px] hover:shadow-[0_8px_24px_rgba(255,255,255,0.08)]">
|
||
<div class="w-16 h-16 rounded-full bg-gvsds-black flex items-center justify-center mb-6 border border-gvsds-white/30">
|
||
<i class="fa fa-eye text-2xl text-gvsds-white"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-gvsds-white mb-4">公开性</h3>
|
||
<p class="text-gvsds-light text-center">所有项目代码开源、文档公开，接受社区监督与反馈，确保透明化发展</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 兴趣性 -->
|
||
<div class="reveal" style="transition-delay: 400ms;">
|
||
<div class="card-static relative w-full h-64 bg-gvsds-dark border border-gvsds-white/20 rounded-lg p-6 flex flex-col items-center justify-center transition-all duration-300 hover:translate-y-[-5px] hover:shadow-[0_8px_24px_rgba(255,255,255,0.08)]">
|
||
<div class="w-16 h-16 rounded-full bg-gvsds-black flex items-center justify-center mb-6 border border-gvsds-white/30">
|
||
<i class="fa fa-star text-2xl text-gvsds-white"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-gvsds-white mb-4">兴趣性</h3>
|
||
<p class="text-gvsds-light text-center">以共同技术兴趣为核心驱动，让开发过程充满热情，让技术探索更具乐趣</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 创新性 -->
|
||
<div class="reveal" style="transition-delay: 500ms;">
|
||
<div class="card-static relative w-full h-64 bg-gvsds-dark border border-gvsds-white/20 rounded-lg p-6 flex flex-col items-center justify-center transition-all duration-300 hover:translate-y-[-5px] hover:shadow-[0_8px_24px_rgba(255,255,255,0.08)]">
|
||
<div class="w-16 h-16 rounded-full bg-gvsds-black flex items-center justify-center mb-6 border border-gvsds-white/30">
|
||
<i class="fa fa-lightbulb text-2xl text-gvsds-white"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-gvsds-white mb-4">创新性</h3>
|
||
<p class="text-gvsds-light text-center">鼓励突破传统技术框架，积极探索前沿技术应用场景，推动技术创新与实践</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 专业性 -->
|
||
<div class="reveal" style="transition-delay: 600ms;">
|
||
<div class="card-static relative w-full h-64 bg-gvsds-dark border border-gvsds-white/20 rounded-lg p-6 flex flex-col items-center justify-center transition-all duration-300 hover:translate-y-[-5px] hover:shadow-[0_8px_24px_rgba(255,255,255,0.08)]">
|
||
<div class="w-16 h-16 rounded-full bg-gvsds-black flex items-center justify-center mb-6 border border-gvsds-white/30">
|
||
<i class="fa fa-code text-2xl text-gvsds-white"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-gvsds-white mb-4">专业性</h3>
|
||
<p class="text-gvsds-light text-center">深耕核心技术栈，注重技术深度研究，为项目与合作方提供专业可靠的技术解决方案</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 目标性 -->
|
||
<div class="reveal" style="transition-delay: 700ms;">
|
||
<div class="card-static relative w-full h-64 bg-gvsds-dark border border-gvsds-white/20 rounded-lg p-6 flex flex-col items-center justify-center transition-all duration-300 hover:translate-y-[-5px] hover:shadow-[0_8px_24px_rgba(255,255,255,0.08)]">
|
||
<div class="w-16 h-16 rounded-full bg-gvsds-black flex items-center justify-center mb-6 border border-gvsds-white/30">
|
||
<i class="fa fa-flag text-2xl text-gvsds-white"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-gvsds-white mb-4">目标性</h3>
|
||
<p class="text-gvsds-light text-center">为每个项目设定清晰目标与执行路径，高效推进落地，确保成果质量与交付效率</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 实用性 -->
|
||
<div class="reveal" style="transition-delay: 800ms;">
|
||
<div class="card-static relative w-full h-64 bg-gvsds-dark border border-gvsds-white/20 rounded-lg p-6 flex flex-col items-center justify-center transition-all duration-300 hover:translate-y-[-5px] hover:shadow-[0_8px_24px_rgba(255,255,255,0.08)]">
|
||
<div class="w-16 h-16 rounded-full bg-gvsds-black flex items-center justify-center mb-6 border border-gvsds-white/30">
|
||
<i class="fa fa-wrench text-2xl text-gvsds-white"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-gvsds-white mb-4">实用性</h3>
|
||
<p class="text-gvsds-light text-center">聚焦用户实际需求，拒绝"为技术而技术"，开发能真正解决问题、创造价值的产品</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 服务性（突出卡片） -->
|
||
<div class="reveal lg:col-span-3 md:col-span-2" style="transition-delay: 900ms;">
|
||
<div class="card-static relative w-full h-64 bg-gvsds-white rounded-lg p-6 flex flex-col items-center justify-center transition-all duration-300 hover:translate-y-[-5px] hover:shadow-[0_8px_24px_rgba(255,255,255,0.15)]">
|
||
<div class="w-20 h-20 rounded-full bg-gvsds-light flex items-center justify-center mb-6 border border-gvsds-black/30">
|
||
<i class="fa fa-life-ring text-3xl text-gvsds-black"></i>
|
||
</div>
|
||
<h3 class="text-2xl font-bold text-gvsds-black mb-4">服务性</h3>
|
||
<p class="text-gvsds-dark text-center max-w-2xl">以用户为中心，提供优质技术支持与反馈响应服务，倾听需求、持续优化，打造更优产品体验</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="py-20 md:py-28 px-4 md:px-8 bg-gradient-to-b from-gvsds-black to-gvsds-dark">
|
||
<div class="container mx-auto">
|
||
<!-- 标题（渐显+文字填充） -->
|
||
<div class="mb-16 md:mb-24 reveal">
|
||
<h2 class="text-3xl md:text-4xl font-extrabold text-gvsds-white pl-4 border-l-4 border-gvsds-white text-fill">
|
||
我们的能力
|
||
</h2>
|
||
</div>
|
||
|
||
<!-- 左右分栏图表 -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||
<!-- 左侧：能力评分（玫瑰图） -->
|
||
<div class="reveal">
|
||
<div class="bg-gvsds-black p-6 rounded-lg border border-gvsds-white/10 h-full">
|
||
<h3 class="text-xl font-bold text-gvsds-white mb-6">能力评分</h3>
|
||
<div class="chart-container flex justify-center items-center h-[calc(100%-2.5rem)]">
|
||
<canvas id="skillsChart"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：角色人数分布（环形图） -->
|
||
<div class="reveal" style="transition-delay: 300ms;">
|
||
<div class="bg-gvsds-black p-6 rounded-lg border border-gvsds-white/10 h-full">
|
||
<h3 class="text-xl font-bold text-gvsds-white mb-6">角色人数分布</h3>
|
||
<div class="chart-container flex justify-center items-center h-[calc(100%-2.5rem)]">
|
||
<canvas id="rolesChart"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="py-20 md:py-28 px-4 md:px-8 bg-gvsds-dark">
|
||
<div class="container mx-auto">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||
<!-- 左侧：领域描述 -->
|
||
<div class="reveal">
|
||
<h2 class="text-3xl md:text-4xl font-extrabold text-gvsds-white pl-4 border-l-4 border-gvsds-white mb-8 text-fill">
|
||
涉及领域
|
||
</h2>
|
||
<div class="w-4/5 mx-auto md:mx-0 mb-8">
|
||
<div class="border-b border-gvsds-white/20 pb-2"></div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<!-- 开发类 -->
|
||
<div>
|
||
<h3 class="text-lg font-semibold text-gvsds-white mb-4">开发类</h3>
|
||
<ul class="space-y-3">
|
||
<li class="flex items-center">
|
||
<div class="w-2 h-2 bg-gvsds-white rounded-full mr-3"></div>
|
||
<span class="text-gvsds-light">Python 开发</span>
|
||
</li>
|
||
<li class="flex items-center">
|
||
<div class="w-2 h-2 bg-gvsds-white rounded-full mr-3"></div>
|
||
<span class="text-gvsds-light">C/C++ 开发</span>
|
||
</li>
|
||
<li class="flex items-center">
|
||
<div class="w-2 h-2 bg-gvsds-white rounded-full mr-3"></div>
|
||
<span class="text-gvsds-light">Web 前端（HTML/CSS/JS）</span>
|
||
</li>
|
||
<li class="flex items-center">
|
||
<div class="w-2 h-2 bg-gvsds-white rounded-full mr-3"></div>
|
||
<span class="text-gvsds-light">后端架构</span>
|
||
</li>
|
||
<li class="flex items-center">
|
||
<div class="w-2 h-2 bg-gvsds-white rounded-full mr-3"></div>
|
||
<span class="text-gvsds-light">数据库（SQL）</span>
|
||
</li>
|
||
<li class="flex items-center">
|
||
<div class="w-2 h-2 bg-gvsds-white rounded-full mr-3"></div>
|
||
<span class="text-gvsds-light">逆向反病毒</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 设计类 -->
|
||
<div>
|
||
<h3 class="text-lg font-semibold text-gvsds-white mb-4">设计类</h3>
|
||
<ul class="space-y-3">
|
||
<li class="flex items-center">
|
||
<div class="w-2 h-2 bg-gvsds-white rounded-full mr-3"></div>
|
||
<span class="text-gvsds-light">UI / UX 设计</span>
|
||
</li>
|
||
<li class="flex items-center">
|
||
<div class="w-2 h-2 bg-gvsds-white rounded-full mr-3"></div>
|
||
<span class="text-gvsds-light">插画绘制</span>
|
||
</li>
|
||
<li class="flex items-center">
|
||
<div class="w-2 h-2 bg-gvsds-white rounded-full mr-3"></div>
|
||
<span class="text-gvsds-light">动效设计</span>
|
||
</li>
|
||
</ul>
|
||
|
||
<h3 class="text-lg font-semibold text-gvsds-white mt-6 mb-4">其他</h3>
|
||
<ul class="space-y-3">
|
||
<li class="flex items-center">
|
||
<div class="w-2 h-2 bg-gvsds-white rounded-full mr-3"></div>
|
||
<span class="text-gvsds-light">人工智能</span>
|
||
</li>
|
||
<li class="flex items-center">
|
||
<div class="w-2 h-2 bg-gvsds-white rounded-full mr-3"></div>
|
||
<span class="text-gvsds-light">操作系统优化</span>
|
||
</li>
|
||
<li class="flex items-center">
|
||
<div class="w-2 h-2 bg-gvsds-white rounded-full mr-3"></div>
|
||
<span class="text-gvsds-light">服务器部署</span>
|
||
</li>
|
||
<li class="flex items-center">
|
||
<div class="w-2 h-2 bg-gvsds-white rounded-full mr-3"></div>
|
||
<span class="text-gvsds-light">心理测评工具开发</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="reveal" style="transition-delay: 300ms;">
|
||
<div class="bg-gvsds-white rounded-xl p-8 md:p-10 shadow-[0_0_30px_rgba(255,255,255,0.15)]">
|
||
<h2 class="text-3xl md:text-4xl font-extrabold text-gvsds-black pl-4 border-l-4 border-gvsds-black mb-6">
|
||
加入我们
|
||
</h2>
|
||
<p class="text-gvsds-dark text-lg mb-8">
|
||
无论你是谁，能力如何，只要你与我们有共同的理想，都能加入我们的团队，与我们共同努力。
|
||
</p>
|
||
|
||
<div class="mb-8">
|
||
<h3 class="text-lg font-semibold text-gvsds-black mb-4">微信联系我们</h3>
|
||
<div class="flex items-center bg-gvsds-light p-4 rounded-lg">
|
||
<i class="fa fa-envelope text-2xl text-gvsds-black mr-4"></i>
|
||
<div>
|
||
<p class="text-gvsds-black font-medium">GVSADS</p>
|
||
<p class="text-gvsds-dark text-sm mt-1">
|
||
微信搜索添加 <span class="inline-block w-2 h-2 bg-gvsds-black animate-blink ml-1 align-middle"></span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="weixin://dl/add/?username=GVSADS" class="mt-4 inline-block bg-gvsds-black text-gvsds-white font-semibold px-8 py-4 rounded-lg transition-all duration-300 hover:bg-gvsds-dark hover:shadow-[0_0_15px_rgba(255,255,255,0.3)] transform hover:-translate-y-1 active:scale-98">
|
||
申请加入（微信） <i class="fa fa-arrow-right ml-2"></i>
|
||
</a>
|
||
<a href="mailto:hr@gvsds.com?subject=我申请加入银河锋锐软件开发工作室&body=您好!%0D%0A%0D%0A我是 [ 姓名 / 网名 ]，我期望加入银河锋锐软件开发工作室。%0D%0A我的联系方式是 [ 微信（必填） / QQ / TEL / X / 电报 / DISCORD ] %0D%0A我的兴趣爱好是 [ 选填 ]，我的能力是 [ 选填 ]。%0D%0A我能够作为 [ 画师 / 程序员 / 测试人员 ] 加入工作室。%0D%0A [ 您的更多个人信息（选填）（个人简历等） ] %0D%0A希望您能提供一个机会，感谢！%0D%0A—— [ 姓名 / 网名 ] [ 年-月-日 ]" class="mt-4 inline-block bg-gvsds-black text-gvsds-white font-semibold px-8 py-4 rounded-lg transition-all duration-300 hover:bg-gvsds-dark hover:shadow-[0_0_15px_rgba(255,255,255,0.3)] transform hover:-translate-y-1 active:scale-98">
|
||
申请加入（邮箱） <i class="fa fa-arrow-right ml-2"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script src="/assets/js/icon.js"></script>
|
||
<script src="/assets/js/typewriter.js"></script>
|
||
<script src="/assets/js/chart.js"></script>
|