Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/orhanweb/orhanweb.github.io
Repository containing the source codes of my personal website that I developed using React TS
https://github.com/orhanweb/orhanweb.github.io
react reactts tailwindcss typescript webapplication
Last synced: 3 days ago
JSON representation
Repository containing the source codes of my personal website that I developed using React TS
- Host: GitHub
- URL: https://github.com/orhanweb/orhanweb.github.io
- Owner: orhanweb
- License: mit
- Created: 2024-08-14T19:28:44.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-10-03T10:47:14.000Z (5 months ago)
- Last Synced: 2024-12-26T21:40:15.866Z (about 2 months ago)
- Topics: react, reactts, tailwindcss, typescript, webapplication
- Language: TypeScript
- Homepage: https://orhanweb.github.io/
- Size: 4.67 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🌟 Orhan's Personal Portfolio Website 🌟
[](https://reactjs.org/)
[](https://www.typescriptlang.org/)
[](https://vitejs.dev/)
[](https://tailwindcss.com/)
[](https://www.framer.com/motion/)
## 🎯 About This Project
This is my personal portfolio website where I showcase my skills, projects, and experience as a **React + TypeScript Developer**. The site includes smooth animations, responsive design, and a modern tech stack to ensure a fast and delightful user experience.
**Live Demo:** [Check it out here!](https://orhanweb.github.io/) 🚀
## 🚀 Tech Stack
This project is built with the following technologies:
- **React** for building the UI.
- **TypeScript** for type safety and better developer experience.
- **Vite** for fast and efficient bundling and development.
- **Tailwind CSS** for styling and responsiveness.
- **Framer Motion** for smooth animations and transitions.
- **React Icons** for iconography.
## ✨ Features
- **Fully responsive design**: Works seamlessly across mobile, tablet, and desktop devices.
- **Interactive animations**: Framer Motion is used for smooth transitions and hover effects.
- **Contact Carousel**: An animated carousel for social media icons.
- **Smooth scrolling**: Navigation is enhanced with smooth scrolling between sections.
- **Back to Top Button**: A handy button appears when you scroll down.
- **Downloadable CV**: You can download my CV directly from the site.
## 🛠️ Installation and Setup
To get started with this project, follow the steps below:
1. **Clone the repository:**
```bash
git clone https://github.com/orhanweb/orhanweb.github.io.git
```
```bash
cd orhanweb.github.io
```
2. **Install the dependencies:**
```bash
npm install
```
3. **Start the development server:**
```bash
npm start
```
4. **Build the project for production:**
```bash
npm run build
```
5. **Deploy to GitHub Pages:**
```bash
npm run deploy
```
## 📦 Available Scripts
In the project directory, you can run the following scripts:
- `npm start` – Starts the Vite development server.
- `npm run build` – Builds the app for production.
- `npm run preview` – Previews the production build locally.
- `npm run deploy` – Deploys the app to GitHub Pages.
## 👨💻 Developer Notes
- **TypeScript**: The project is fully typed with TypeScript. Interfaces for components and props are defined in the `/types` folder.
- **Animations**: Framer Motion is used for animating UI elements, such as the **scroll-to-top button** and **carousel icons**.
- **Responsive Design**: Tailwind CSS ensures that the website looks great on all devices.
## 🤝 Contributing
If you'd like to contribute to this project, feel free to fork the repository and submit a pull request. All contributions are welcome!
## 📧 Contact
Feel free to reach out to me via [LinkedIn](https://www.linkedin.com/in/orhan-kahraman/) or [GitHub](https://github.com/orhanweb).