initial commit

beyenilmez · Sep 5, 2024 · 7c6317a · 7c6317a
commit 7c6317a
Show file tree

Hide file tree

Showing 34 changed files with 3,564 additions and 0 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,40 @@
+name: Deploy
+
+on:
+  workflow_dispatch:
+  push:
+    branches: ["gh-pages"]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+
+    strategy:
+      matrix:
+        node-version: ["20.9.0"]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+
+      - name: Install packages
+        run: npm i
+
+      - name: Run npm build
+        run: npm run build
+
+      - name: Deploy to gh-pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          publish_dir: dist
+          publish_branch: gh-pages
+          github_token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Certificate files
+certificate.*
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+# GitHub Pages Branch
+
+This branch is dedicated to hosting the GitHub Pages for this project.
diff --git a/components.json b/components.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/icon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Iconium</title>
+  </head>
+  <body class="min-h-screen">
+    <div id="root" class="relative flex flex-col min-h-screen"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "react-shadcn-starter",
+  "private": true,
+  "version": "0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.438.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.1",
+    "react-tsparticles": "^2.9.3",
+    "react-wrap-balancer": "^1.1.1",
+    "tailwind-merge": "^2.5.2",
+    "tailwind-scrollbar": "^3.1.0",
+    "tailwindcss-animate": "^1.0.7",
+    "tsparticles": "^2.9.3"
+  },
+  "devDependencies": {
+    "@types/node": "^22.5.4",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.45",
+    "tailwindcss": "^3.4.10",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.3"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/icon.png b/public/icon.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,11 @@
+import { Applayout } from "./components/layouts/AppLayout";
+import { ParticlesBackground } from "./components/particles-background";
+
+export default function App() {
+  return (
+    <>
+      <ParticlesBackground />
+      <Applayout />
+    </>
+  );
+}
diff --git a/src/assets/icon.png b/src/assets/icon.png
diff --git a/src/assets/screenshot-1.png b/src/assets/screenshot-1.png
diff --git a/src/components/layouts/AppLayout.tsx b/src/components/layouts/AppLayout.tsx
@@ -0,0 +1,19 @@
+import { Header } from "./Header";
+import { Footer } from "./Footer";
+import { Content } from "./Content";
+
+export function Applayout() {
+  return (
+    <div className="flex flex-col justify-between w-screen min-h-screen">
+      <Header />
+      <div className="flex flex-col flex-grow">
+        <div className="flex flex-col flex-grow px-4 md:px-8 container">
+          <Content />
+        </div>
+      </div>
+      <div className="px-4 md:px-8 container">
+        <Footer />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/layouts/Content.tsx b/src/components/layouts/Content.tsx
@@ -0,0 +1,44 @@
+import screenshot1 from "@/assets/screenshot-1.png";
+import { Button } from "../ui/button";
+import { DownloadIcon } from "@radix-ui/react-icons";
+
+export function Content() {
+  const handleDownload = () => {
+    window.location.href =
+      "https://github.com/beyenilmez/iconium/releases/latest/download/iconium-amd64-installer.exe";
+  };
+
+  return (
+    <div className="relative flex flex-col flex-grow px-4 md:px-8 container">
+      <div className="relative z-0 inset-0 flex justify-center items-center">
+        <div className="flex justify-between gap-16 mt-28 mb-8 w-full">
+          <div className="flex flex-col justify-between gap-10">
+            <div className="flex flex-col gap-5">
+              <h1 className="font-bold text-6xl">
+                Customize Your Icons with Ease
+              </h1>
+              <p className="text-2xl text-muted-foreground">
+                Craft your own icon packs, edit your icons, and share your
+                creations. Whether for personal or
+                professional use, Iconium gives you the power to bring your
+                icons to life.
+              </p>
+            </div>
+            <Button
+              className="gap-2 hover:shadow-xl hover:scale-[101%] rounded-xl h-16 font-semibold text-md hover:text-[#6253a0] transition-all"
+              onClick={handleDownload}
+            >
+              <DownloadIcon className="w-8 h-8" />
+              Download for Windows
+            </Button>
+          </div>
+          <img
+            src={screenshot1}
+            className="opacity-75 w-[50rem] hover:scale-[101%] md:block hidden transition-all"
+            alt="Iconium screenshot showing user interface"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/layouts/Footer.tsx b/src/components/layouts/Footer.tsx
@@ -0,0 +1,27 @@
+export function Footer() {
+  return (
+    <footer className="flex md:flex-row flex-col justify-between items-center gap-4 py-2 md:h-20 min-h-[3rem]">
+      <p className="w-full text-left text-muted-foreground text-sm md:text-center leading-loose">
+        Built by{" "}
+        <a
+          href="https://github.com/beyenilmez"
+          target="_blank"
+          rel="noreferrer"
+          className="font-medium underline underline-offset-4"
+        >
+          beyenilmez
+        </a>
+        . The source code is available on{" "}
+        <a
+          href="https://github.com/beyenilmez/iconium"
+          target="_blank"
+          rel="noreferrer"
+          className="font-medium underline underline-offset-4"
+        >
+          GitHub
+        </a>
+        .
+      </p>
+    </footer>
+  );
+}
diff --git a/src/components/layouts/Header.tsx b/src/components/layouts/Header.tsx
@@ -0,0 +1,23 @@
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import icon from "@/assets/icon.png";
+
+export function Header() {
+  return (
+    <header className="top-0 z-50 sticky backdrop-blur w-full">
+      <div className="flex items-center px-4 md:px-8 h-14 container">
+        <div className="flex justify-between items-center gap-2 w-full">
+          <div className="flex items-center gap-1.5">
+            <img src={icon} alt="Logo" className="w-8 h-8" />
+            <div className="font-semibold text-2xl">Iconium</div>
+          </div>
+
+          <nav className="flex items-center gap-3">
+            <a href="https://github.com/beyenilmez/iconium" target="_blank">
+              <GitHubLogoIcon className="w-8 h-8" />
+            </a>
+          </nav>
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/src/components/page-header.tsx b/src/components/page-header.tsx
@@ -0,0 +1,53 @@
+import Balance from "react-wrap-balancer"
+
+import { cn } from "@/lib/utils"
+
+function PageHeader({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <section
+      className={cn(
+        "pt-6 pb-4 flex items-center justify-between space-y-2",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </section>
+  )
+}
+
+function PageHeaderHeading({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h1
+      className={cn(
+        "text-3xl font-semibold tracking-tight my-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PageHeaderDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <Balance
+      className={cn(
+        "max-w-[750px] text-lg text-muted-foreground sm:text-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { PageHeader, PageHeaderHeading, PageHeaderDescription }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# GitHub Pages Branch

		This branch is dedicated to hosting the GitHub Pages for this project.