feat: full recode a home page and add docker file, start write a cd pipline

frontend/src/components/Skills.tsx

@@ -0,0 +1,103 @@
+export default function About() {
+  return (
+    <div className="max-w-3xl mx-auto px-4 py-4 md:py-6">
+      {/* Contact Links */}
+      <div className="flex flex-wrap gap-3 justify-center mb-8 text-sm md:text-base">
+        <a
+          href="https://github.com/d3m0k1d"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="px-3 py-1 border border-base-content/20 rounded hover:border-[hsl(270,73%,63%)] hover:text-[hsl(270,73%,63%)] transition-all font-mono"
+        >
+          💻 Github
+        </a>
+        <a
+          href="https://git.d3m0k1d.ru"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="px-3 py-1 border border-base-content/20 rounded hover:border-[hsl(270,73%,63%)] hover:text-[hsl(270,73%,63%)] transition-all font-mono"
+        >
+          🔧 Gitea
+        </a>
+        <a
+          href="https://t.me/fonntocs"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="px-3 py-1 border border-base-content/20 rounded hover:border-[hsl(270,73%,63%)] hover:text-[hsl(270,73%,63%)] transition-all font-mono"
+        >
+          💬 Telegram
+        </a>
+        <a
+          href="mailto:contact@d3m0k1d.ru"
+          className="px-3 py-1 border border-base-content/20 rounded hover:border-[hsl(270,73%,63%)] hover:text-[hsl(270,73%,63%)] transition-all font-mono"
+        >
+          ✉️ Email
+        </a>
+      </div>
+
+      {/* About Me Section */}
+      <section className="mb-8">
+        <h2 className="text-xl md:text-2xl font-mono font-bold mb-3 border-b border-base-content/20 pb-2">
+          About me
+        </h2>
+        <p className="text-sm md:text-base leading-relaxed text-base-content/80">
+          I am a DevOps Engineer from Russia and a student of Information
+          Security at Don State Technical University. This is my personal
+          website featuring information about me, my projects, posts, and
+          guestbook. For inquiries, please check a contact page or write me an
+          email or telegram. I have experience developing APIs using Python
+          (FastAPI) and Golang (Gin), along with various personal projects. I
+          have extensive experience administrating Linux systems - my home
+          server runs on Proxmox with LXC containers running Alpine (yes, this
+          website is hosted on it!).
+        </p>
+      </section>
+
+      {/* Technical Skills Section */}
+      <section>
+        <h2 className="text-xl md:text-2xl font-mono font-bold mb-3 border-b border-base-content/20 pb-2">
+          Technical Skills
+        </h2>
+
+        <div className="space-y-4 text-sm md:text-base">
+          {/* Languages */}
+          <div>
+            <h3 className="font-mono font-semibold mb-1">Languages:</h3>
+            <p className="text-base-content/70">
+              Golang, Python, Bash, C (Base level), HTML/CSS, Typescript
+            </p>
+          </div>
+
+          {/* Infrastructure & DevOps */}
+          <div>
+            <h3 className="font-mono font-semibold mb-1">
+              Infrastructure & DevOps:
+            </h3>
+            <p className="text-base-content/70">
+              Docker, k8s, LXC, Proxmox, Git, CI/CD (GitHub Actions, GitLab),
+              Ansible, nginx
+            </p>
+          </div>
+
+          {/* Systems & Platforms */}
+          <div>
+            <h3 className="font-mono font-semibold mb-1">
+              Systems & Platforms:
+            </h3>
+            <p className="text-base-content/70">
+              Unix-systems, Windows, Arduino
+            </p>
+          </div>
+
+          {/* Other Skills */}
+          <div>
+            <h3 className="font-mono font-semibold mb-1">Other Skills:</h3>
+            <p className="text-base-content/70">
+              Markdown, LaTeX, English (B1 only for reading and simple writing)
+            </p>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}