Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/omarrsakr/fakir-site

Fakir Site 👩🏻‍💻This is a static website designed for showcasing services. Users can navigate seamlessly through sections using a (Navbar), enhancing the overall user experience. 🛠 This project utilizes(HTML5) and (CSS3). Currently non-responsive for different screen sizes.
https://github.com/omarrsakr/fakir-site

css3 font-awesome google-fonts html5 webfonts

Last synced: about 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/omarrsakr/fakir-site
Owner: OmarrSakr
Created: 2024-10-25T02:14:31.000Z (3 months ago)
Default Branch: master
Last Pushed: 2024-11-06T19:48:06.000Z (3 months ago)
Last Synced: 2024-11-06T20:36:52.645Z (3 months ago)
Topics: css3, font-awesome, google-fonts, html5, webfonts
Language: CSS
Homepage: https://omarrsakr.github.io/Fakir-Site/
Size: 1.46 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Fakir Site 👩🏻‍💻

![Fakir](https://github.com/user-attachments/assets/fc81c8dd-5740-4cff-8a93-d8d1398114f6)

This is a `personal website` showcasing the services, projects, and blog of the site owner.
The website provides smooth navigation between sections through a top navigation bar (Navbar).
Users can easily access any section by clicking on the relevant link in the menu.
A standout feature of this site is that each section appears smoothly when selected from the menu, enhancing user experience.

---

## Live Demo 🌐
- Check out the live demo of the project at [`Fakir Site`](https://omarrsakr.github.io/Fakir-Site/).

---

## 🛠 Website Contents
1. Home Section
Welcome message: Hello, I'm Alex Smith with animated text describing the role (e.g., Professional Web Developer).
Logo displayed next to the navigation links (Navbar) for easy access.
2. About Section
Profile information, including:
Name
Age
Location
Email
Personal photo reflecting the owner’s identity.
Buttons for Download CV and Hire Me for easy interaction.
3. Services Section
Displaying offered services using cards, such as:
UI/UX design
App development
Product design
4. Portfolio Section
Displaying previous projects using a grid of images with a filter option to sort by category (e.g., Graphic Design, Web Design).
5. Statistics Section
Presenting interactive statistics such as:
Number of members
Completed projects
Files downloaded
Lines of code written
6. Feedback Section
Displaying client feedback with images and star ratings.
7. Blog Section
Featuring articles and videos related to the site’s niche, along with publication dates and post titles.

---
## 🚀 Navigation between Sections
- Navbar allows quick access to all sections.
- Clicking on a menu item automatically scrolls to the corresponding section smoothly.

---

## 🧑‍💻 Languages and Technologies Used
- HTML5: For structuring the webpage.
- CSS3: For styling and design.
- Font Awesome: To add appealing icons for cards and statistics.
- Google Fonts: To incorporate fonts like Roboto and Source Sans 3.

---

## How to Use 🚀

We welcome `contributions` to **Fakir**! Here’s how you can help:
1. **Fork the repository** - Click the "Fork" button at the top right of the repository page.
2. **Clone your fork** - Use the command:

```bash
https://github.com/OmarrSakr/Fakir-Site.git

---

⚠ Notes
- The site currently lacks full interactivity on small screens.
- It is recommended to add a side menu or burger menu to improve navigation on mobile devices.

---

## 📂 Project Structure
```
# Fِِakir-Site
│
├── index.html # 🏠 ملف الصفحة الرئيسية
│
├── webfonts/ # 🔤 مجلد لتخزين ملفات الخطوط
│ ├── fontawesome-webfont.woff2
│ ├── fontawesome-webfont.woff
│ └── custom-font.ttf
│
├── CSS/ # 🎨 مجلد لتخزين ملفات CSS
│ ├── all.min.css # 📦 ملف Font Awesome
│ ├── pagestyle.css # 📄 ملف CSS الرئيسي لتصميم الصفحات
│
├── Images/ # 🖼️ مجلد لتخزين الصور
│ ├── about.jpg # 👤 صورة في قسم "حول"
│ ├── feedback.jpg # 💬 صورة تعليقات العملاء
│ ├── portfolio/ # 📂 مجلد لتخزين صور المحفظة
│ │ ├── 1.jpg
│ │ ├── 2.jpg
│ │ ├── 3.jpg
│ │ ├── 4.jpg
│ │ ├── 5.jpg
│ │ └── 6.jpg
│ ├── blog/ # 📝 مجلد لتخزين صور المدونة
│ │ ├── 12.jpg
│ │ └── 32.jpg
│
└── JS/ # ❌ لا يوجد مجلد لتخزين ملفات JavaScript

```

---

### Future Updates 📈
- Add responsiveness:
- Optimize the layout for various screen sizes (e.g., smartphones and tablets).
- Enable smooth animations:
- Use libraries like ScrollReveal.js or AOS to animate elements gradually on scroll.

---

### Important Notes 📢
- This project is a *static website* and does not include a backend or dynamic content.
- *Non-Responsive Design*: The current version is not optimized for mobile or tablet screens.

---