seccodesmith-frontend/README.md

SecCodeSmith Frontend Portfolio

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

🛠️ Built With

• Vite - Next Generation Frontend Tooling
• React - JavaScript library for building user interfaces
• TypeScript - JavaScript with syntax for types
• SCSS - 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:

node --version
npm --version

🚀 Getting Started

Installation

1. Clone the repository:

git clone https://git.seccodesmith.pl/seccodesmith/seccodesmith-frontend.git
cd seccodesmith-frontend

2. Install dependencies:

npm install
# or
yarn install

Running the Project

Development Mode

To run the project in development mode with hot-reload:

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:

npm run build
# or
yarn build

Preview Production Build

To preview the production build locally:

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 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

Project Link: https://git.seccodesmith.pl/seccodesmith/seccodesmith-frontend

🙏 Acknowledgments

• Inspiration from fantasy blacksmith and dragon themes
• React Icons for icon library
• Vite Documentation for build tool guidance

---

⚔️ Forged with passion by SecCodeSmith 🐲