# SecCodeSmith Frontend Portfolio

![Image](./public/images/SecCodeSmithFrontProj/Main.png)

A modern portfolio website with a unique fantasy blacksmith and dragon theme, showcasing my development skills and projects.

## 🐉 About

This portfolio represents my journey as a developer, designed with the aesthetic of a fantasy blacksmith working alongside dragons. The site combines modern web technologies with creative storytelling to create an engaging user experience.

**Live Demo**: [https://seccodesmith.pl](https://seccodesmith.pl)

## 🛠️ Built With

- **[Vite](https://vitejs.dev/)** - Next Generation Frontend Tooling
- **[React](https://reactjs.org/)** - JavaScript library for building user interfaces
- **[TypeScript](https://www.typescriptlang.org/)** - JavaScript with syntax for types
- **[SCSS](https://sass-lang.com/)** - CSS preprocessor for better styling

## 📋 Prerequisites

Before you begin, ensure you have the following installed:
- **Node.js** (v16.0.0 or higher)
- **npm** (v8.0.0 or higher) or **yarn** (v1.22.0 or higher)

You can check your versions by running:
```bash
node --version
npm --version
```

## 🚀 Getting Started

### Installation

1. Clone the repository:
```bash
git clone https://git.seccodesmith.pl/seccodesmith/seccodesmith-frontend.git
cd seccodesmith-frontend
```

2. Install dependencies:
```bash
npm install
# or
yarn install
```

### Running the Project

#### Development Mode
To run the project in development mode with hot-reload:
```bash
npm run dev
# or
yarn dev
```

The application will be available at `http://localhost:5173` (default Vite port).

#### Production Build
To build the project for production:
```bash
npm run build
# or
yarn build
```

#### Preview Production Build
To preview the production build locally:
```bash
npm run preview
# or
yarn preview
```

## 📁 Project Structure

```
seccodesmith-frontend/
├── src/
│   ├── assets/         # Images, fonts, and other static assets
│   ├── components/     # React components
│   ├── styles/         # SCSS files
│   ├── pages/          # Page components
│   ├── utils/          # Utility functions
│   ├── App.tsx         # Main App component
│   └── main.tsx        # Application entry point
├── public/             # Public static files
├── index.html          # HTML template
├── vite.config.ts      # Vite configuration
├── tsconfig.json       # TypeScript configuration
├── package.json        # Project dependencies and scripts
└── README.md           # Project documentation
```

## ✨ Features

- Responsive design that works on all devices
- Interactive animations and transitions
- Dark/Light theme toggle
- Project showcase with detailed descriptions
- Contact form integration
- Performance optimized with Vite

## 🧪 Available Scripts

- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run preview` - Preview production build
- `npm run lint` - Run ESLint
- `npm run type-check` - Run TypeScript compiler check

## 🎨 Customization

To customize the portfolio for your own use:

1. Update personal information in `src/data/personal.ts`
2. Replace projects in `src/data/projects.ts`
3. Modify color schemes in `src/styles/variables.scss`
4. Update images in `src/assets/`

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 🤝 Contributing

While this is a personal portfolio project, suggestions and feedback are welcome! Feel free to:

1. Fork the repository
2. Create a feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## 📬 Contact

**SecCodeSmith** - [contact@seccodesmith.pl](mailto:contact@seccodesmith.pl)

Project Link: [https://git.seccodesmith.pl/seccodesmith/seccodesmith-frontend](https://git.seccodesmith.pl/seccodesmith/seccodesmith-frontend)

## 🙏 Acknowledgments

- Inspiration from fantasy blacksmith and dragon themes
- [React Icons](https://react-icons.github.io/react-icons/) for icon library
- [Vite Documentation](https://vitejs.dev/guide/) for build tool guidance

---

⚔️ Forged with passion by SecCodeSmith 🐲