README.md

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