https://github.com/coding4deep/my-portfolio

https://github.com/coding4deep/my-portfolio

Last synced: 6 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/coding4deep/my-portfolio
• Owner: Coding4Deep
• License: mit
• Created: 2025-05-23T17:06:38.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2025-05-24T03:21:52.000Z (8 months ago)
• Last Synced: 2025-07-13T16:12:17.691Z (7 months ago)
• Language: TypeScript
• Size: 798 KB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          



# **DevOps Portfolio Website**

[![React](https://img.shields.io/badge/React-20232A?style=flat-square&logo=react&logoColor=61DAFB)](https://reactjs.org/)

[![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)

[![Vite](https://img.shields.io/badge/Vite-646CFF?style=flat-square&logo=vite&logoColor=white)](https://vitejs.dev/)

[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-06B6D4?style=flat-square&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)

[![shadcn/ui](https://img.shields.io/badge/shadcn--ui-000000?style=flat-square)](https://ui.shadcn.com/)

[![Framer Motion](https://img.shields.io/badge/Framer_Motion-0055FF?style=flat-square)](https://www.framer.com/motion/)

[![React Router](https://img.shields.io/badge/React_Router-CA4245?style=flat-square&logo=react-router&logoColor=white)](https://reactrouter.com/)

[![React Hook Form](https://img.shields.io/badge/React_Hook_Form-EC5990?style=flat-square)](https://react-hook-form.com/)

[![Zod](https://img.shields.io/badge/Zod-000000?style=flat-square&logo=typescript&logoColor=white)](https://github.com/colinhacks/zod)

[![TanStack Query](https://img.shields.io/badge/TanStack_Query-FF4154?style=flat-square)](https://tanstack.com/query/latest)

[![Lucide](https://img.shields.io/badge/Lucide-000000?style=flat-square)](https://lucide.dev/)



---

![DevOps Portfolio Screenshot](Screenshot2.png)

## 📋 Features

- **Responsive Design** — Looks great on all devices

- **Modern UI** — Built with Tailwind CSS and shadcn/ui components

- **Dark/Light Mode** — Theme switching support powered by [Tailwind CSS](https://tailwindcss.com/)

- **Animated Page Transitions** — Powered by [Framer Motion](https://www.framer.com/motion/)

- **Multiple Pages** — Home, About, Projects, Blog, and Contact sections

- **DevOps Focus** — Content tailored for DevOps engineers

- **Interactive Components** — Progress bars, cards, and more

- **Form Validation** — Using [React Hook Form](https://react-hook-form.com/) and [Zod](https://github.com/colinhacks/zod)

## 🚀 Quick Start

### Prerequisites

- [Node.js](https://nodejs.org/) (v18 or newer)

- npm or yarn package manager

### Installation

```bash

git clone https://github.com/yourusername/devops-portfolio.git

cd devops-portfolio

npm install

npm run dev

```

Open your browser and visit: `http://localhost:8080`

## 🖌️ Customization

### Personal Information

Edit data files inside `src/data/` to update your portfolio:

- `projects.ts`: Portfolio projects

- `skills.ts`: Technical skills

- `blog.ts`: Blog posts

### Colors and Styling

- Modify color scheme in `src/styles/global.css`

- Adjust Tailwind config in `tailwind.config.ts`

### Adding New Pages

- Create new component in `src/pages/`

- Add route in `src/App.tsx`

## 📦 Building for Production

```bash

npm run build

```

The production build outputs to the `dist/` directory.

## 🔍 Preview Production Build

```bash

npm run preview

```

## 🛠️ Technologies Used

| Technology      | Description                         |

| --------------- | --------------------------------- |

| React           | Library for building UI            |

| TypeScript      | Typed JavaScript                   |

| Vite            | Next-gen frontend tooling          |

| Tailwind CSS    | Utility-first CSS framework        |

| shadcn/ui       | Modern Radix-based UI components   |

| Framer Motion   | Animation library                  |

| React Router    | SPA routing                       |

| React Hook Form | Form validation                   |

| Zod             | Schema validation                 |

| TanStack Query  | Data fetching and caching          |

| Lucide Icons    | Icon library                      |

---

Distributed under the [MIT License](./LICENSE). See the `LICENSE` file for more information.