feat: add project page

Author: eXIA008

.github/workflows/static.yml

@@ -1,12 +1,9 @@
-# Workflow for building and deploying a Vite project using gh-pages
 name: Deploy Vite project to Pages
 
 on:
-  # Runs on pushes targeting the default branch
   push:
     branches: ["main"]
 
-  # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
 jobs:
@@ -31,6 +28,5 @@ jobs:
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./dist
-          # The following user name and email are only used for the commit author
           user_name: 'github-actions[bot]'
           user_email: 'github-actions[bot]@users.noreply.github.com'

src/App.jsx

@@ -10,6 +10,7 @@ function App() {
       <BrowserRouter>
         <Routes>
           <Route index element={<Home />} />
+          <Route path="/project" element={<Project />} />
           <Route path="*" element={<NotFound />} />
         </Routes>
       </BrowserRouter>

src/components/Navbar.jsx

@@ -6,9 +6,8 @@ import { useLocation } from "react-router-dom"
 const navItems = [
     { name: "Home", href: "/" },
     // {name: "About", href: "/#about"},
-    { name: "Blogs", href: "/blogs" },
-    // {name: "Projects", href: "/#projects"},
-    { name: "Projects", href: "/projects" },
+    // { name: "Blogs", href: "/blogs" },
+    // { name: "Projects", href: "/projects" },
 ]
 
 export const Navbar = () => {

src/components/ProjectSection.jsx

@@ -1,6 +1,6 @@
-import { ExternalLink, Github, ArrowRight } from "lucide-react"
+import { ArrowRight } from "lucide-react"
 
-const projects = [
+const favProjects = [
     {
         id: 1,
         title: "Telkomedika Online Reservation",
@@ -33,7 +33,7 @@ const projects = [
         title: "Portfolio Website",
         description: "Personal portfolio Website.",
         image: "/projects/project4.png",
-        tags: ["React", "Vite", "TailwindCSS", "Express"],
+        tags: ["ReactJS", "Vite", "TailwindCSS", "React Bits"],
         demo: "#",
         githubUrl: "/#hero",
     }
@@ -55,14 +55,14 @@ export const ProjectSection = () => {
             </p>
 
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-                {projects.map((projects, key) => (
+                {favProjects.map((projects, key) => (
                     <div key={key} className="group bg-card rounded-lg overflow-hidden shadow-xs card-hover gradient-border">
                         <div className="h-48 overflow-hidden">
                             <img src={projects.image} alt={projects.title} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                         </div>
                         <div className="p-6 text-left">
                             <div className="flex flex-wrap gap-2 mb-4">
-                                {projects.tags.map((tags, index) => {
+                                {favProjects.tags.map((tags, index) => {
                                     if (index < maxTagsCount) {
                                         return (<span key={index} className="px-2 py-1 text-xs border font-medium rounded-full bg-secondary text-secondary-foreground">
                                             {tags}

src/components/TechSection.jsx

@@ -3,20 +3,18 @@ import DomeGallery from "./reactbits/DomeGallery";
 export const TechSection = () => {
 
   return <section id="toolkit" className="relative py-24 z-10 bg-transparent items-center justify-center overflow-hidden">
-    {/* Decorative background glow */}
-    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-primary/10 rounded-full blur-[100px] -z-10 pointer-events-none" />
+    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-125 h-125 bg-primary/10 rounded-full blur-[100px] -z-10 pointer-events-none" />
 
     <div className="container mx-auto max-w-5xl relative">
       <h2 className="text-3xl md:text-4xl font-bold mb-6 text-left">
         My <span className="text-primary">Current Tech Stack</span>
       </h2>
 
       <p className="text-left text-muted-foreground text-lg max-w-2xl mb-12 leading-relaxed">
-        I leverage a modern and robust tech stack to build scalable, efficient, and user-friendly applications. 
-        From frontend interactivity to backend logic and database management, here are the tools I work with.
+        This is the current tools and language that i use.
       </p>
 
-      <div className="relative w-full h-[500px] flex items-center justify-center rounded-2xl border border-white/10 bg-white/5 backdrop-blur-sm shadow-2xl overflow-hidden">
+      <div className="relative w-full h-125 flex items-center justify-center rounded-2xl border border-white/10 bg-white/5 backdrop-blur-sm shadow-2xl overflow-hidden">
         <div className="absolute inset-0 pointer-events-none" />
         <DomeGallery
           fit={0.5}

src/components/reactbits/DomeGallery.jsx

@@ -7,6 +7,7 @@ const DEFAULT_IMAGES = [
   { Icon: <StackIcon name="python" />, alt: 'python' },
   { Icon: <StackIcon name="go" />, alt: 'golang' },
   { Icon: <StackIcon name="java" />, alt: 'java' },
+  { Icon: <StackIcon name="php" />, alt: 'php' },
   { Icon: <StackIcon name="js" />, alt: 'javascript' },
   { Icon: <StackIcon name="colab" />, alt: 'colab' },
   { Icon: <StackIcon name="flask" />, alt: 'flask' },
@@ -64,7 +65,6 @@ function buildItems(pool, seg) {
     }
 
     let { Icon, icon } = image;
-    // Jika Icon adalah elemen React (seperti <StackIcon />), perlakukan sebagai instance (icon)
     if (Icon && React.isValidElement(Icon)) {
       icon = Icon;
       Icon = null;
@@ -73,8 +73,8 @@ function buildItems(pool, seg) {
     return {
       src: image.src || '',
       alt: image.alt || '',
-      Icon: Icon ?? null, // component ref
-      icon: icon ?? null, // legacy: element instance
+      Icon: Icon ?? null,
+      icon: icon ?? null,
       href: image.href ?? null,
       color: image.color ?? null
     };
@@ -885,13 +885,13 @@ export default function DomeGallery({
           />
 
           <div
-            className="absolute left-0 right-0 top-0 h-[120px] z-5 pointer-events-none rotate-180"
+            className="absolute left-0 right-0 top-0 h-30 z-5 pointer-events-none rotate-180"
             style={{
               background: `linear-gradient(to bottom, transparent, var(--overlay-blur-color, ${overlayBlurColor}))`
             }}
           />
           <div
-            className="absolute left-0 right-0 bottom-0 h-[120px] z-[5] pointer-events-none"
+            className="absolute left-0 right-0 bottom-0 h-30 z-5 pointer-events-none"
             style={{
               background: `linear-gradient(to bottom, transparent, var(--overlay-blur-color, ${overlayBlurColor}))`
             }}

src/index.css

@@ -150,7 +150,6 @@
   margin-inline: auto;
   padding-inline: 2rem;
 
-
   @media (width >=640px) {
     max-width: 640px;
   }

src/pages/Blog.jsx

@@ -0,0 +1,7 @@
+export const Project = () => {
+    return (
+        <div className="min-h-screen bg-transparent text-foreground overflow-x-hidden font-roboto">
+            
+        </div>
+    )
+};