unknownparticles.github.io/about.html at master · unknownparticles/unknownparticles.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
---
layout: page
title: "关于 me"
description: "Hey, this is Alun."
header-img: "img/IMG_1544.jpeg"
---

<div class="post-container">
    <blockquote>
        <p>Hey，我是阿伦（Alun），一名热爱编程、喜欢深挖技术细节的开发者。</p>
    </blockquote>

    <p>在 <strong>CSDN</strong> 我的主页是 <a href="https://blog.csdn.net/particles">blog.csdn.net/particles</a>，<strong>GitHub</strong> 是 <a href="https://github.com/unknownparticles">github.com/unknownparticles</a>。</p>

    <p>我喜欢把"好玩的想法"转化为"可运行的代码"，也喜欢把"代码的细节"打磨成"可以复用的工具"。</p>

    <h2 id="我的技术轨迹">🔍 我的技术轨迹</h2>

    <ul>
        <li>在 <strong>CSDN</strong> 上，我撰写了多篇关于 <strong>前端动画特效、Canvas/粒子系统、手势交互、Flutter UI 组件实战</strong> 的文章，记录技术探索过程，也整理了不少实用技巧。</li>
        <li>在 <strong>GitHub</strong> 上，我发布了多个开源项目，包括图像处理脚本、交互工具、分析器等（可在 <code>unknownparticles</code> 仓库中查看）。这些项目从 Python 脚本、Flutter 插件、前端组件到自动化构建工具，覆盖了较宽的技术栈。</li>
    </ul>

    <h2 id="我正在做的技术方向">🛠 我正在做的技术方向</h2>

    <ul>
        <li><strong>Flutter + 自定义组件</strong>：开发跨平台 UI，深度定制手势、动画、裁剪、图像处理流程。</li>
        <li><strong>前端/Canvas动画特效</strong>：使用原生 Canvas、WebGL 或 JS 库实现粒子、背景、交互动画。</li>
        <li><strong>AI 与自动化工具链</strong>：将大语言模型、图像识别、CI/CD 流程融入开发工具之中。</li>
        <li><strong>DevOps 和构建系统</strong>：自动化脚本、构建流水线、部署流程、镜像同步、日志系统。</li>
    </ul>

    <p>这是我的个人技术博客/作品集：记录 "从想法到代码" 的过程，也展示 "从代码到工具" 的能力。</p>

    <p>如果你对前端交互、Flutter 组件、AI 整合、自动化系统这些话题也感兴趣，欢迎访问我的 GitHub 👉 <a href="https://github.com/unknownparticles">github.com/unknownparticles</a> ，或者直接私聊交流～</p>

    <h2 id="技术栈">🛠 技术栈</h2>

    <div class="skills-grid">
        <span class="skill-tag">Flutter</span>
        <span class="skill-tag">Dart</span>
        <span class="skill-tag">JavaScript</span>
        <span class="skill-tag">TypeScript</span>
        <span class="skill-tag">React</span>
        <span class="skill-tag">Vue.js</span>
        <span class="skill-tag">Canvas</span>
        <span class="skill-tag">WebGL</span>
        <span class="skill-tag">Python</span>
        <span class="skill-tag">Node.js</span>
        <span class="skill-tag">Git</span>
        <span class="skill-tag">GitHub Actions</span>
        <span class="skill-tag">Docker</span>
        <span class="skill-tag">CI/CD</span>
    </div>

    <h2 id="项目经验">💼 项目经验</h2>

    <ul>
        <li><strong>图像处理工具</strong>：开发了多个图像处理脚本和工具，包括粒子系统、图像识别等</li>
        <li><strong>前端动画库</strong>：实现了多种Canvas动画特效和交互组件</li>
        <li><strong>Flutter组件库</strong>：创建了自定义UI组件和手势识别库</li>
        <li><strong>自动化工具</strong>：构建了CI/CD流水线和部署工具</li>
    </ul>

    <h2 id="学习与分享">📚 学习与分享</h2>

    <ul>
        <li>在 CSDN 上分享技术实践和学习心得</li>
        <li>在 GitHub 上开源个人项目和工具</li>
        <li>持续学习新技术，关注前端和移动端发展</li>
        <li>乐于技术交流和知识分享</li>
    </ul>

    <h2 id="联系方式">📧 联系方式</h2>

    <ul>
        <li>Email: <a href="mailto:unknownparticles@gmail.com">unknownparticles@gmail.com</a></li>
        <li>GitHub: <a href="https://github.com/unknownparticles">https://github.com/unknownparticles</a></li>
        <li>CSDN: <a href="https://blog.csdn.net/particles">https://blog.csdn.net/particles</a></li>
        <li>技术博客: <a href="https://alunapp.asia">https://alunapp.asia</a></li>
    </ul>

    <h2 id="开源贡献">🎯 开源贡献</h2>

    <p>我积极参与开源社区，贡献代码和工具。如果你对我的项目感兴趣，欢迎：</p>
    <ul>
        <li>⭐ 给我的项目点赞</li>
        <li>🐛 提交 Issue 报告问题</li>
        <li>💡 提出功能建议</li>
        <li>🤝 提交 Pull Request 贡献代码</li>
    </ul>
</div>

<style>
.skills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
}

.skill-tag {
    background: #e5e7eb;
    color: #374151;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.skill-tag:hover {
    background: #007bff;
    color: white;
    transform: translateY(-1px);
}

blockquote {
    background: #f8f9fa;
    border-left: 4px solid #007bff;
    padding: 15px 20px;
    margin: 20px 0;
    font-style: italic;
    color: #495057;
}

h2 {
    color: #007bff;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

ul {
    line-height: 1.6;
}

code {
    background: #f8f9fa;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
}
</style>