README.md

metadata

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:

git clone https://github.com/yourusername/nawaf-portfolio.git
cd nawaf-portfolio

2. Install dependencies:

npm install

3. Start the development server:

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

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:

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:

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

{
  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