Hugging Face's logo

Spaces:
n0w0f
/
profile
Paused

App Files Community
profile
File size: 4,264 Bytes 
bc4a965
 
 
 
 
 
 
 
 
c990683
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
 
---
title: Profile
emoji: 🐨
colorFrom: yellow
colorTo: green
sdk: docker
pinned: false
---

# Nawaf Portfolio Website

A modern, responsive personal website built with React for academic and professional portfolios.

## Features

- 📱 Fully responsive design
- 📝 Markdown support for blog posts and publications
- 🎨 Modern UI with customizable theme
- 📊 Sections for publications, projects, experience, and education
- 🔍 SEO optimized
- 💻 Easy to deploy on Hugging Face Spaces

## Repository Structure

```
nawaf-portfolio/
├── .gitignore
├── README.md
├── app.py                  # Gradio server for HF Spaces
├── package.json            # Project dependencies
├── requirements.txt        # Python dependencies for Gradio
├── public/
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   └── assets/
│       └── img/
│           ├── profile.jpg
│           └── ...
└── src/
    ├── index.js            # Entry point
    ├── App.js              # Main App component
    ├── theme.js            # Theme configuration
    ├── data/               # All content in JSON format
    │   ├── about.js
    │   ├── education.js
    │   ├── experience.js
    │   ├── projects.js
    │   ├── publications.js
    │   ├── skills.js
    │   └── blogs.js
    ├── components/         # Reusable components
    │   ├── Header.js
    │   ├── Footer.js
    │   ├── Navigation.js
    │   ├── EducationCard.js
    │   ├── ExperienceCard.js
    │   ├── ProjectCard.js
    │   ├── PublicationCard.js
    │   ├── BlogCard.js
    │   ├── Section.js
    │   └── SkillTag.js
    └── pages/              # Page components
        ├── Home.js
        ├── Publications.js
        ├── Projects.js
        ├── Blog.js
        └── Resume.js
```

## Installation

1. Clone this repository:
```bash
git clone https://github.com/yourusername/nawaf-portfolio.git
cd nawaf-portfolio
```

2. Install dependencies:
```bash
npm install
```

3. Start the development server:
```bash
npm start
```

## Deployment on Hugging Face Spaces

### Option 1: Using the Gradio Interface (Recommended)

1. Create a new Space on Hugging Face:
   - Go to [Hugging Face Spaces](https://huggingface.co/spaces)
   - Click "Create new Space"
   - Choose a name (e.g., "nawaf-portfolio")
   - Select "Gradio" as the SDK
   - Choose "Public" visibility
   - Click "Create Space"

2. Push your code to the Space's repository:
```bash
git remote add space https://huggingface.co/spaces/yourusername/nawaf-portfolio
git push space main
```

3. The Space will automatically build and deploy your application.

### Option 2: Using Static React Build

1. Build your React application:
```bash
npm run build
```

2. Create a new Space on Hugging Face with "Static" as the SDK.

3. Push your build folder to the Space's repository.

## Customization

### Content

All content is stored in the `src/data` directory. Edit these files to update your personal information:

- `about.js` - Bio, contact info, and social links
- `education.js` - Academic history
- `experience.js` - Work experience
- `projects.js` - Research projects
- `publications.js` - Academic publications
- `skills.js` - Technical skills
- `blogs.js` - Blog posts in markdown format

### Theme

Edit `src/theme.js` to customize colors, fonts, and other styling variables.

### Adding Blog Posts

To add a new blog post:

1. Create a new entry in `src/data/blogs.js`:
```javascript
{
  id: "unique-id",
  title: "Your Blog Title",
  date: "March 9, 2025",
  excerpt: "Short description of your blog post",
  content: `
# Your Blog Title

This is the content of your blog post in Markdown format.

## Subheading

More content here...
  `
}
```

### Adding Publications

Add new publications to `src/data/publications.js`:
```javascript
{
  id: "unique-id",
  title: "Publication Title",
  authors: "Author 1, Author 2, et al.",
  venue: "Journal or Conference Name",
  year: "2025",
  link: "https://doi.org/..."
}
```

## License

MIT