Proffesional freelance ui

2026-01-21 02:52:49 +01:00
parent 3824322aa9
commit e226455c96
24 changed files with 1739 additions and 912 deletions
@@ -0,0 +1,159 @@
+import { ExternalLink, Github, Star } from "lucide-react";
+
+const projects = [
+  {
+    name: "DockShip",
+    description: "A powerful self-hosted Deployment Platform for modern teams.",
+    tech: ["TypeScript", "Docker", "React"],
+    stars: 1,
+    github: "https://github.com/orus-dev/dockship",
+    featured: true,
+  },
+  {
+    name: "OSUI",
+    description:
+      "A TUI library written in Rust for building beautiful terminal interfaces.",
+    tech: ["Rust", "TUI", "Systems"],
+    stars: 8,
+    github: "https://github.com/osui-rs/osui",
+    featured: true,
+  },
+  {
+    name: "Linear Linux",
+    description:
+      "Linux support for linear.app - bringing seamless project management to Linux users.",
+    tech: ["JavaScript", "Electron", "Linux"],
+    stars: 23,
+    github: "https://github.com/selimaj-dev/linear-linux",
+    featured: true,
+  },
+  {
+    name: "Saturn Client",
+    description:
+      "A Minecraft client full of customizability and free cosmetics.",
+    tech: ["Java", "Minecraft", "Gaming"],
+    stars: 3,
+    github: "https://github.com/saturnclientmc/saturnclient",
+    featured: false,
+  },
+  {
+    name: "Axiom Chat",
+    description: "A modern, feature-rich chat application built for teams.",
+    tech: ["TypeScript", "Real-time", "WebSockets"],
+    stars: 1,
+    github: "https://github.com/AxiomChat/axiom",
+    featured: false,
+  },
+  {
+    name: "Drift",
+    description: "An organized productivity app to get rid of distractions.",
+    tech: ["TypeScript", "Productivity", "Focus"],
+    stars: 1,
+    github: "https://github.com/orus-dev/drift",
+    featured: false,
+  },
+];
+
+export function ProjectsSection() {
+  return (
+    <section className="py-24 bg-card/50">
+      <div className="container mx-auto px-6">
+        {/* Section Header */}
+        <div className="max-w-2xl mb-16">
+          <span className="text-accent text-sm font-medium uppercase tracking-wider">
+            Portfolio
+          </span>
+          <h2 className="text-3xl md:text-4xl font-bold text-foreground mt-2 mb-4">
+            Featured Projects
+          </h2>
+          <p className="text-muted-foreground">
+            A selection of my open-source work and personal projects that
+            showcase my skills in systems programming, web development, and
+            tooling.
+          </p>
+        </div>
+
+        {/* Projects Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {projects.map((project, index) => (
+            <article
+              key={project.name}
+              className={"group glass-card rounded-2xl p-6 hover-lift"}
+              style={{ animationDelay: `${index * 100}ms` }}
+            >
+              {/* Header */}
+              <div className="flex items-start justify-between mb-4">
+                <div className="flex items-center gap-2">
+                  {project.featured && (
+                    <span className="px-2 py-1 text-xs font-medium bg-accent/10 text-accent rounded-full">
+                      Featured
+                    </span>
+                  )}
+                </div>
+                <div className="flex items-center gap-1 text-muted-foreground">
+                  <Star className="w-4 h-4" />
+                  <span className="text-sm">{project.stars}</span>
+                </div>
+              </div>
+
+              {/* Content */}
+              <h3 className="text-xl font-semibold text-foreground mb-2 group-hover:text-accent transition-colors">
+                {project.name}
+              </h3>
+              <p className="text-muted-foreground text-sm mb-4 line-clamp-2">
+                {project.description}
+              </p>
+
+              {/* Tech Stack */}
+              <div className="flex flex-wrap gap-2 mb-6">
+                {project.tech.map((tech) => (
+                  <span
+                    key={tech}
+                    className="px-2 py-1 text-xs font-mono bg-secondary text-secondary-foreground rounded"
+                  >
+                    {tech}
+                  </span>
+                ))}
+              </div>
+
+              {/* Actions */}
+              <div className="flex items-center gap-4">
+                <a
+                  href={project.github}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-2 text-sm text-muted-foreground hover:text-accent transition-colors"
+                >
+                  <Github className="w-4 h-4" />
+                  Source
+                </a>
+                <a
+                  href={project.github}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-2 text-sm text-muted-foreground hover:text-accent transition-colors"
+                >
+                  <ExternalLink className="w-4 h-4" />
+                  View
+                </a>
+              </div>
+            </article>
+          ))}
+        </div>
+
+        {/* View All CTA */}
+        <div className="text-center mt-12">
+          <a
+            href="https://github.com/selimaj-dev?tab=repositories"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 text-accent hover:text-accent/80 font-medium transition-colors"
+          >
+            View all projects on GitHub
+            <ExternalLink className="w-4 h-4" />
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}