Replace FastAPI with React portfolio

.gitignore

@@ -0,0 +1,21 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

Dockerfile

@@ -0,0 +1,24 @@
+FROM node:18
+
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the code
+COPY . .
+
+# Build the React app
+RUN npm run build
+
+# Install a simple server to serve the static files
+RUN npm install -g serve
+
+# Expose the port
+EXPOSE 7860
+
+# Start the server
+CMD ["serve", "-s", "build", "-l", "7860"]

README.md

@@ -7,4 +7,171 @@ sdk: docker
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 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

netlify.toml

@@ -0,0 +1,11 @@
+[build]
+  command = "npm run build"
+  publish = "build"
+
+[build.environment]
+  NODE_VERSION = "18"
+
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200

package.json

@@ -0,0 +1,49 @@
+{
+    "name": "nawaf-portfolio",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "@tailwindcss/typography": "^0.5.10",
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^13.4.0",
+        "@testing-library/user-event": "^13.5.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-icons": "^4.8.0",
+        "react-markdown": "^8.0.7",
+        "react-router-dom": "^6.11.1",
+        "react-scripts": "^5.0.1",
+        "react-syntax-highlighter": "^15.5.0",
+        "remark-gfm": "^3.0.1",
+        "tailwindcss": "^3.3.2",
+        "web-vitals": "^2.1.4"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "react-scripts build",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject"
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "autoprefixer": "^10.4.14",
+        "postcss": "^8.4.23"
+    }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  };

public/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#4a148c" />
+    <meta
+      name="description"
+      content="Nawaf Alampara - Doctoral Researcher in Machine Learning"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>Nawaf Alampara | ML Researcher</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

src/App.css

@@ -0,0 +1,62 @@
+/* App-wide styles */
+.app {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  main {
+    flex-grow: 1;
+  }
+  
+  /* Dark mode styles */
+  .app.dark {
+    background-color: var(--dark);
+    color: var(--text);
+  }
+  
+  .app.dark .bg-white {
+    background-color: var(--dark);
+  }
+  
+  .app.dark nav {
+    background-color: var(--dark);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  
+  .app.dark .text-gray-600 {
+    color: rgba(255, 255, 255, 0.75);
+  }
+  
+  .app.dark .text-gray-700 {
+    color: rgba(255, 255, 255, 0.9);
+  }
+  
+  .app.dark .shadow {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.6);
+  }
+  
+  .app.dark .border-gray-200 {
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+  
+  /* Transitions */
+  .transition-colors {
+    transition-property: color, background-color, border-color;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  
+  /* Fix for mobile responsiveness */
+  @media (max-width: 640px) {
+    .container {
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+  }

src/App.js

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { Routes, Route, useLocation } from 'react-router-dom';
+import Header from './components/Header';
+import Navigation from './components/Navigation';
+import Footer from './components/Footer';
+import Home from './pages/Home';
+import Publications from './pages/Publications';
+import Projects from './pages/Projects';
+import Blog from './pages/Blog';
+import Resume from './pages/Resume';
+import './App.css';
+
+function App() {
+  const location = useLocation();
+  const [theme, setTheme] = useState('light');
+
+  const toggleTheme = () => {
+    setTheme(theme === 'light' ? 'dark' : 'light');
+  };
+  
+  return (
+    <div className={`app ${theme}`}>
+      <Header toggleTheme={toggleTheme} theme={theme} />
+      <Navigation currentPath={location.pathname} />
+      <main className="container mx-auto px-4 py-8">
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/publications" element={<Publications />} />
+          <Route path="/projects" element={<Projects />} />
+          {/* <Route path="/blog" element={<Blog />} /> */}
+          <Route path="/resume" element={<Resume />} />
+        </Routes>
+      </main>
+      <Footer />
+    </div>
+  );
+}
+
+export default App;

src/components/EducationCard.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const EducationCard = ({ education }) => {
+  return (
+    <div className="bg-white rounded-lg shadow p-6 transition-all hover:shadow-lg">
+      <div className="flex justify-between flex-wrap">
+        <h3 className="font-bold text-lg">{education.degree}</h3>
+        <span className="text-gray-600">{education.period}</span>
+      </div>
+      <p className="text-primary font-medium">{education.institution}</p>
+      {education.gpa && <p className="text-gray-600 mt-1">GPA: {education.gpa}</p>}
+      {education.description.length > 0 && (
+        <ul className="mt-2 list-disc list-inside text-gray-700">
+          {education.description.map((item, idx) => (
+            <li key={idx}>{item}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default EducationCard;

src/components/ExperienceCard.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const ExperienceCard = ({ experience }) => {
+  return (
+    <div className="bg-white rounded-lg shadow p-6 transition-all hover:shadow-lg">
+      <div className="flex justify-between flex-wrap">
+        <h3 className="font-bold text-lg">{experience.position}</h3>
+        <span className="text-gray-600">{experience.period}</span>
+      </div>
+      <p className="text-primary font-medium">{experience.company}</p>
+      <ul className="mt-2 list-disc list-inside text-gray-700">
+        {experience.description.map((item, idx) => (
+          <li key={idx}>{item}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default ExperienceCard;

src/components/Footer.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Navigation = ({ currentPath }) => {
+  const navItems = [
+    { path: '/', label: 'Home' },
+    { path: '/publications', label: 'Publications' },
+    { path: '/projects', label: 'Projects' },
+    { path: '/blog', label: 'Blog' },
+    { path: '/resume', label: 'Resume' }
+  ];
+
+  return (
+    <nav className="bg-white shadow-md sticky top-0 z-10">
+      <div className="container mx-auto px-4">
+        <div className="flex overflow-x-auto py-2 space-x-6">
+          {navItems.map((item) => (
+            <Link
+              key={item.path}
+              to={item.path}
+              className={`px-3 py-2 font-medium whitespace-nowrap ${
+                currentPath === item.path
+                  ? 'text-primary border-b-2 border-primary'
+                  : 'text-gray-600 hover:text-primary'
+              }`}
+            >
+              {item.label}
+            </Link>
+          ))}
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navigation;

src/components/Header.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { FaEnvelope, FaMapMarkerAlt, FaGithub, FaLinkedinIn, FaMoon, FaSun } from 'react-icons/fa';
+import about from '../data/about';
+
+const Header = ({ toggleTheme, theme }) => {
+  return (
+    <header className="bg-primary text-white">
+      <div className="container mx-auto px-4 py-16">
+        <div className="flex flex-col md:flex-row items-start md:items-center justify-between">
+          <div>
+            <h1 className="text-4xl font-bold">{about.name}</h1>
+            <p className="mt-2 text-xl">{about.title}</p>
+          </div>
+          <div className="flex flex-col gap-2 mt-4 md:mt-0">
+            <div className="flex items-center">
+              <FaEnvelope className="mr-2" />
+              <a href={`mailto:${about.email}`} className="hover:underline">
+                {about.email}
+              </a>
+            </div>
+            <div className="flex items-center">
+              <FaMapMarkerAlt className="mr-2" />
+              <span>{about.location}</span>
+            </div>
+            <div className="flex items-center">
+              <FaGithub className="mr-2" />
+              <a href={`https://github.com/${about.github}`} target="_blank" rel="noopener noreferrer" className="hover:underline">
+                {about.github}
+              </a>
+            </div>
+            <div className="flex items-center">
+              <FaLinkedinIn className="mr-2" />
+              <a href={`https://www.linkedin.com/in/${about.linkedin}`} target="_blank" rel="noopener noreferrer" className="hover:underline">
+                {about.linkedin}
+              </a>
+            </div>
+          </div>
+          <button
+            onClick={toggleTheme}
+            className="fixed top-4 right-4 z-50 p-2 bg-secondary text-white rounded-full"
+            aria-label="Toggle theme"
+          >
+            {theme === 'light' ? <FaMoon /> : <FaSun />}
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/components/Navigation.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Navigation = ({ currentPath }) => {
+  const navItems = [
+    { path: '/', label: 'Home' },
+    { path: '/publications', label: 'Publications' },
+    { path: '/projects', label: 'Projects' },
+    { path: '/blog', label: 'Blog' },
+    { path: '/resume', label: 'Resume' }
+  ];
+
+  return (
+    <nav className="bg-white shadow-md sticky top-0 z-10">
+      <div className="container mx-auto px-4">
+        <div className="flex overflow-x-auto py-2 space-x-6">
+          {navItems.map((item) => (
+            <Link
+              key={item.path}
+              to={item.path}
+              className={`px-3 py-2 font-medium whitespace-nowrap ${
+                currentPath === item.path
+                  ? 'text-primary border-b-2 border-primary'
+                  : 'text-gray-600 hover:text-primary'
+              }`}
+            >
+              {item.label}
+            </Link>
+          ))}
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navigation;

src/components/ProjectCard.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const ProjectCard = ({ project }) => {
+  return (
+    <div className="bg-white rounded-lg shadow p-6 transition-all hover:shadow-lg">
+      <div className="flex justify-between flex-wrap">
+        <h3 className="font-bold text-lg">{project.title}</h3>
+        <span className="text-gray-600">{project.period}</span>
+      </div>
+      <p className="text-primary font-medium">{project.organization}</p>
+      <ul className="mt-2 list-disc list-inside text-gray-700">
+        {project.description.map((item, idx) => (
+          <li key={idx}>{item}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default ProjectCard;

src/components/PublicationCard.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const PublicationCard = ({ publication }) => {
+  return (
+    <div className="bg-white rounded-lg shadow p-6 transition-all hover:shadow-lg">
+      <h3 className="font-bold text-lg">{publication.title}</h3>
+      <p className="text-gray-700 italic mt-1">{publication.authors}</p>
+      <div className="flex justify-between items-center mt-2">
+        <p className="text-primary font-medium">{publication.venue}</p>
+        <span className="text-gray-600">{publication.year}</span>
+      </div>
+      {publication.link && (
+        <div className="mt-3">
+          <a 
+            href={publication.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary hover:underline"
+          >
+            View Publication
+          </a>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PublicationCard;

src/components/Section.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
+
+const Section = ({ title, icon, children, defaultExpanded = true }) => {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
+  return (
+    <div className="mb-8">
+      <div 
+        className="flex items-center justify-between cursor-pointer mb-4" 
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <h2 className="text-2xl font-bold flex items-center">
+          {icon}
+          <span className="ml-2">{title}</span>
+        </h2>
+        <div className="text-gray-500">
+          {isExpanded ? <FaChevronUp /> : <FaChevronDown />}
+        </div>
+      </div>
+      {isExpanded && children}
+    </div>
+  );
+};
+
+export default Section;

src/components/SkillTag.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const SkillTag = ({ skill }) => {
+  return (
+    <span className="px-3 py-1 bg-light text-primary rounded-full text-sm">
+      {skill}
+    </span>
+  );
+};
+
+export default SkillTag;

src/data/about.js

@@ -0,0 +1,30 @@
+const about = {
+    name: "Nawaf Alampara",
+    title: "Doctoral Researcher in Machine Learning",
+    email: "[email protected]",
+    location: "Jena, Germany",
+    github: "n0w0f",
+    linkedin: "nawaf-a-78731612b",
+    bio: `I am a second-year PhD student at Friedrich-Schiller-Universität Jena, advised by Dr. Kevin Maik Jablonka. 
+    I work on developing machine learning methods to accelerate scientific discovery. 
+    I enjoy tackling projects that combine novel research ideas with practical engineering implementation.`,
+    researchInterests: [
+      "Evaluation and development of foundation models for science",
+      "Agent workflows for scientific discovery",
+      "Task Adaptibility",
+      "Computational material science",
+      "Scientific software development"
+    ],
+    awards: [
+      {
+        title: "Inspire Fellowship",
+        organization: "Department of Science and Technology, Government of India"
+      },
+      {
+        title: "Summer Research Fellowship",
+        organization: "Indian Academy of Sciences (SRF 2016)"
+      }
+    ]
+  };
+  
+  export default about;

src/data/blogs.js

@@ -0,0 +1,77 @@
+const blogs = [
+    {
+      id: "llm-scientific-tasks",
+      title: "Evaluating LLMs for Scientific Tasks",
+      date: "February 15, 2025",
+      excerpt: "How effective are large language models at handling specialized scientific concepts?",
+      content: `# Evaluating LLMs for Scientific Tasks
+  
+  Scientists and researchers are increasingly turning to Large Language Models (LLMs) to accelerate their work. But how good are these models at truly understanding scientific concepts?
+  
+  In our recent work, we developed a framework to evaluate LLMs on tasks specific to material science and chemistry. Here are some key findings:
+  
+  1. LLMs trained on general text corpora struggle with specialized scientific reasoning
+  2. Domain-specific fine-tuning significantly improves performance
+  3. There's still a gap between the best models and human experts
+  
+  ## Methodology
+  
+  We created a benchmark consisting of:
+  - Multiple-choice questions from graduate-level textbooks
+  - Reasoning tasks requiring chemical intuition
+  - Structure prediction tasks
+  - Literature-based synthesis tasks
+  
+  Read our full paper for detailed results!`
+    },
+    {
+      id: "multimodal-materials",
+      title: "The Promise of Multi-Modal Models in Materials Science",
+      date: "January 10, 2025",
+      excerpt: "Exploring how multi-modal AI can transform materials research and discovery.",
+      content: `# The Promise of Multi-Modal Models in Materials Science
+  
+  Modern materials research generates diverse data types - text, images, spectra, crystal structures, and more. Multi-modal models that can process all these data types simultaneously represent an exciting frontier.
+  
+  ## Current Limitations
+  
+  While multi-modal models show promise, our recent work highlights several limitations:
+  - Visual chemical reasoning often fails for complex reactions
+  - Understanding of spatial relationships in crystal structures is limited
+  - Integration of spectroscopic data remains challenging
+  
+  ## Future Directions
+  
+  We're exploring several promising approaches:
+  - Structure-aware pretraining objectives
+  - Specialized tokenization for materials data
+  - Physics-informed neural architectures
+  
+  Stay tuned for our upcoming paper!`
+    },
+    {
+      id: "gnn-materials",
+      title: "Geometric Deep Learning for Materials Science",
+      date: "December 5, 2024",
+      excerpt: "How graph neural networks are revolutionizing computational materials discovery.",
+      content: `# Geometric Deep Learning for Materials Science
+  
+  Graph Neural Networks (GNNs) have emerged as powerful tools for materials science, offering a natural way to represent atomic structures and predict properties.
+  
+  ## Advantages of GNNs for Materials
+  
+  - **Natural structural representation**: Atoms as nodes, bonds as edges
+  - **Invariance to rotation and translation**: Critical for molecular properties
+  - **Hierarchical information processing**: From atomic to global properties
+  - **Computational efficiency**: Faster than traditional DFT methods
+  
+  ## Current Research
+  
+  Our lab is developing specialized GNN architectures that incorporate physical constraints and uncertainty quantification for high-throughput materials screening.
+  
+  
+  Our current research focuses on incorporating physical constraints and uncertainty quantification into these architectures.`
+    }
+  ];
+  
+  export default blogs;

src/data/education.js

@@ -0,0 +1,33 @@
+const education = [
+    {
+      id: "phd",
+      degree: "PhD Machine Learning",
+      institution: "Friedrich-Schiller-Universität Jena",
+      period: "Oct 2023 – 2026",
+      description: [
+        "Evaluation and development of foundation models for scientific applications",
+        "Advisor: Dr. Kevin Maik Jablonka"
+      ]
+    },
+    {
+      id: "masters",
+      degree: "MSc Energy Science",
+      institution: "Indian Institute of Technology Bombay",
+      period: "2018 – 2020",
+      gpa: "8.55/10.0",
+      description: [
+        "Thesis: Defects and Dopants in Cu₂O - DFT study",
+        "Advisor: Prof. K R Balasubramaniam"
+      ]
+    },
+    {
+      id: "bachelors",
+      degree: "BSc Physics",
+      institution: "Birla Institute of Technology Mesra",
+      period: "2015 – 2018",
+      gpa: "8.5/10.0",
+      description: []
+    }
+  ];
+  
+  export default education;

src/data/experience.js

@@ -0,0 +1,44 @@
+const experience = [
+    {
+      id: "phd-research",
+      position: "PhD Research",
+      company: "Friedrich-Schiller-Universität Jena",
+      period: "Nov 2023 – present",
+      description: [
+        "Developed benchmarking tools and datasets to finetune and evaluate LLMs' performance in material science.",
+        "Created evaluation framework to assess LLMs' chemical reasoning, intuition and knowledge against human experts.",
+        "Built multi-modal AI benchmarks for scientific data extraction, visual comprehension, and laboratory safety assessment."
+      ]
+    },
+    {
+      id: "stability-ai",
+      position: "AI Research Contractor",
+      company: "Stability AI",
+      period: "Nov 2023 – Apr 2024",
+      description: [
+        "Dataset preparation for domain specific LLM for chemistry and benchmarking frontier models on domain specific tasks."
+      ]
+    },
+    {
+      id: "qpivolta",
+      position: "Principal Engineer",
+      company: "QpiVolta Technologies",
+      period: "Jun 2022 – Sept 2023",
+      description: [
+        "Led development of a cloud platform for material simulation using geometric deep learning models.",
+        "Built uncertainty-aware, physics-informed GNN workflows for high-throughput solid-state electrolyte screening."
+      ]
+    },
+    {
+      id: "qpiai",
+      position: "Research Engineer",
+      company: "QpiAI Technologies",
+      period: "Jun 2021 – Jun 2022",
+      description: [
+        "Built DeepStream containers and C++ Gstreamer plugins for real-time video analytics; integrated monocular depth estimation models in safety violation detection pipelines.",
+        "Implemented object detection micro-service for video analytics platform."
+      ]
+    }
+  ];
+  
+  export default experience;

src/data/projects.js

@@ -0,0 +1,34 @@
+const projects = [
+    {
+      id: "energynet",
+      title: "EnergyNet",
+      organization: "TCS Research",
+      period: "Mar 2021 – Oct 2021",
+      description: [
+        "Implemented supervised pretraining of pertrubed crystal structures and transfer learning on modified PointNet++ architecture for predicting relaxed energy from unrelaxed structures. (Advisor: Mayank Baranwal)",
+        "Within top 7 models in NeurIPs OC20 Competition"
+      ]
+    },
+    {
+      id: "cu2o-defects",
+      title: "Ab-initio Thermodynamics of Defects in Cu₂O",
+      organization: "IIT Bombay",
+      period: "Jan 2020 – Dec 2020",
+      description: [
+        "Characterized energetics and defect levels of intrinsic defects and dopants in Cu₂O, leading to discovery and experimental validation of new defect formation.",
+        "Performed DFT calculations using Quantum ESPRESSO; and Boltzmann transport. (Advisor: Dayadeep Monder)"
+      ]
+    },
+    {
+      id: "topological-materials",
+      title: "Tight Binding Models for Topological Materials",
+      organization: "IIT Bombay",
+      period: "Jun 2020 – Dec 2020",
+      description: [
+        "Studied band structures of graphene nanoribbons via tight-binding; analyzed width and edge effects",
+        "Developed python-based SSH chain model to investigate topological phases and energy eigenvalues. (Advisor: Bhaskaran Muralidharan)"
+      ]
+    }
+  ];
+  
+  export default projects;

src/data/publications.js

@@ -0,0 +1,60 @@
+const publications = [
+    {
+      id: "mattext",
+      title: "MatText: Do Language Models Need More than Text & Scale for Materials Modeling?",
+      authors: "Nawaf Alampara, Santiago Miret, Kevin Maik Jablonka",
+      venue: "AI4Mat-Vienna 2024 spotlight presentation",
+      year: "2024",
+      link: "#"
+    },
+    {
+      id: "llm-chemists",
+      title: "Are large language models superhuman chemists?",
+      authors: "Adrian Mirza, Nawaf Alampara, et al.",
+      venue: "Nature Chemistry",
+      year: "2025",
+      link: "#"
+    },
+    {
+      id: "multimodal-limitations",
+      title: "Probing the limitations of multimodal language models for chemistry and materials research",
+      authors: "Nawaf Alampara, et al.",
+      venue: "AI4Mat-NeurIPs 2024 spotlight",
+      year: "2024",
+      link: "#"
+    },
+    {
+      id: "defect-cluster",
+      title: "Formation of an extended defect cluster in cuprous oxide",
+      authors: "G Aggarwal, S Chawla, AJ Singh, Nawaf Alampara, et al.",
+      venue: "Materials Science Journal",
+      year: "2023",
+      link: "#"
+    }
+  ];
+  
+  const patents = [
+    {
+      id: "uncertainty-sims",
+      title: "Uncertainty Aware Simulations",
+      description: "System and method for performing accelerated molecular dynamics with uncertainty-aware neural networks",
+      id_number: "US Patent Application US20240153595A1",
+      year: "2024"
+    },
+    {
+      id: "lfp-cathode",
+      title: "LFP Cathode Materials",
+      description: "Novel method for deposition of lithium iron phosphate cathode materials",
+      id_number: "US Patent Application US20240072257A1",
+      year: "2024"
+    },
+    {
+      id: "sensor-opt",
+      title: "Sensor Optimization",
+      description: "System and method for sensor position optimization in autonomous vehicles",
+      id_number: "US Patent Application US20230214553A1",
+      year: "2023"
+    }
+  ];
+  
+  export { publications, patents };

src/data/skills.js

@@ -0,0 +1,8 @@
+const skills = {
+    Programming: ["Python", "Golang", "JavaScript"],
+    "ML & AI": ["PyTorch", "PyG", "HuggingFace", "PyTorch Lightning", "OpenCV", "DeepStream"],
+    "DevOps & Tools": ["Git", "Docker", "FastAPI", "MLflow", "Flyte", "CI/CD"],
+    "Scientific Computing": ["Quantum Espresso", "VASP", "ASE", "Pymatgen"]
+  };
+  
+  export default skills;

src/index.css

@@ -0,0 +1,44 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --primary: #4a148c;
+  --secondary: #6a1b9a;
+  --accent: #9c27b0;
+  --light: #f3e5f5;
+  --dark: #1a1a1a;
+  --text: #333333;
+  --background: #ffffff;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: var(--background);
+  color: var(--text);
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+.app.dark {
+  --primary: #bb86fc;
+  --secondary: #3700b3;
+  --accent: #03dac6;
+  --light: #2d2d2d;
+  --dark: #121212;
+  --text: #e0e0e0;
+  --background: #121212;
+}
+
+.app.dark body {
+  background-color: var(--dark);
+  color: var(--text);
+}

src/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

src/pages/Blog.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import BlogCard from '../components/BlogCard';
+import blogs from '../data/blogs.js';  // Added .js extension
+
+const Blog = () => {
+  return (
+    <div className="space-y-8">
+      <div className="bg-white rounded-lg shadow p-6">
+        <h1 className="text-3xl font-bold mb-4">Blog</h1>
+        <p className="text-gray-700">
+          Thoughts, insights, and updates on my research in machine learning, 
+          materials science, and AI for scientific applications.
+        </p>
+      </div>
+
+      <div className="space-y-8">
+        {blogs.map((blog) => (
+          <BlogCard key={blog.id} blog={blog} />
+        ))}
+      </div>
+
+      <div className="bg-white rounded-lg shadow p-6 border-2 border-dashed border-gray-300 flex flex-col items-center justify-center">
+        <h3 className="font-bold text-xl mb-2 text-gray-500">Add New Blog Post</h3>
+        <p className="text-gray-500 text-center mb-4">
+          Use markdown to easily add new blog posts by updating the blogs.js file
+        </p>
+        <button className="px-4 py-2 bg-primary text-white rounded-md hover:bg-secondary transition-colors">
+          Add Post
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Blog;

src/pages/Home.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import { FaGraduationCap, FaBriefcase, FaStar, FaCode } from 'react-icons/fa';
+import Section from '../components/Section';
+import EducationCard from '../components/EducationCard';
+import ExperienceCard from '../components/ExperienceCard';
+import SkillTag from '../components/SkillTag';
+import about from '../data/about.js';  // Added .js extension
+import education from '../data/education.js';  // Added .js extension
+import experience from '../data/experience.js';  // Added .js extension
+import skills from '../data/skills.js';  // Added .js extension
+
+const Home = () => {
+  return (
+    <div className="space-y-8">
+      {/* Bio Section */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-2xl font-bold mb-4">About Me</h2>
+        <p className="text-gray-700 leading-relaxed">{about.bio}</p>
+      </div>
+
+      {/* Research Interests */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-2xl font-bold mb-4">Research Interests</h2>
+        <ul className="list-disc list-inside text-gray-700 space-y-2">
+          {about.researchInterests.map((interest, index) => (
+            <li key={index}>{interest}</li>
+          ))}
+        </ul>
+      </div>
+
+      {/* Awards */}
+      <Section 
+        title="Honors & Awards" 
+        icon={<FaStar className="text-primary" />}
+      >
+        <div className="space-y-4">
+          {about.awards.map((award, index) => (
+            <div key={index} className="bg-white rounded-lg shadow p-6">
+              <h3 className="font-bold text-lg">{award.title}</h3>
+              <p className="text-primary">{award.organization}</p>
+            </div>
+          ))}
+        </div>
+      </Section>
+
+      {/* Education Section */}
+      <Section 
+        title="Education" 
+        icon={<FaGraduationCap className="text-primary" />}
+      >
+        <div className="space-y-4">
+          {education.map((edu) => (
+            <EducationCard key={edu.id} education={edu} />
+          ))}
+        </div>
+      </Section>
+
+      {/* Experience Section */}
+      <Section 
+        title="Experience" 
+        icon={<FaBriefcase className="text-primary" />}
+      >
+        <div className="space-y-4">
+          {experience.map((exp) => (
+            <ExperienceCard key={exp.id} experience={exp} />
+          ))}
+        </div>
+      </Section>
+
+      {/* Skills Section */}
+      <Section 
+        title="Skills" 
+        icon={<FaCode className="text-primary" />}
+      >
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {Object.entries(skills).map(([category, skillList]) => (
+            <div key={category} className="bg-white rounded-lg shadow p-6">
+              <h3 className="font-bold text-lg mb-2">{category}</h3>
+              <div className="flex flex-wrap gap-2">
+                {skillList.map((skill, idx) => (
+                  <SkillTag key={idx} skill={skill} />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </Section>
+    </div>
+  );
+};
+
+export default Home;

src/pages/Projects.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { FaFlask } from 'react-icons/fa';
+import Section from '../components/Section';
+import ProjectCard from '../components/ProjectCard';
+import projects from '../data/projects.js';  // Added .js extension
+
+const Projects = () => {
+  return (
+    <div className="space-y-8">
+      <div className="bg-white rounded-lg shadow p-6">
+        <h1 className="text-3xl font-bold mb-4">Research Projects</h1>
+        <p className="text-gray-700">
+          An overview of my research projects in computational materials science, 
+          machine learning, and AI for scientific applications.
+        </p>
+      </div>
+
+      <Section 
+        title="Featured Projects" 
+        icon={<FaFlask className="text-primary" />}
+      >
+        <div className="space-y-4">
+          {projects.map((project) => (
+            <ProjectCard key={project.id} project={project} />
+          ))}
+        </div>
+      </Section>
+
+      <div className="bg-white rounded-lg shadow p-6 border-2 border-dashed border-gray-300 flex flex-col items-center justify-center">
+        <h3 className="font-bold text-xl mb-2 text-gray-500">Add New Project</h3>
+        <p className="text-gray-500 text-center mb-4">
+          Update the projects.js file to add new research projects to your portfolio
+        </p>
+        <button className="px-4 py-2 bg-primary text-white rounded-md hover:bg-secondary transition-colors">
+          Add Project
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Projects;

src/pages/Publications.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { FaBook, FaFileAlt } from 'react-icons/fa';
+import Section from '../components/Section';
+import PublicationCard from '../components/PublicationCard';
+import { publications, patents } from '../data/publications.js';  // Added .js extension
+
+const Publications = () => {
+  return (
+    <div className="space-y-8">
+      <div className="bg-white rounded-lg shadow p-6">
+        <h1 className="text-3xl font-bold mb-4">Publications & Patents</h1>
+        <p className="text-gray-700">
+          A collection of my academic publications and patent applications in the fields of 
+          materials science, machine learning, and computational chemistry.
+        </p>
+      </div>
+
+      <Section 
+        title="Publications" 
+        icon={<FaBook className="text-primary" />}
+      >
+        <div className="space-y-4">
+          {publications.map((pub) => (
+            <PublicationCard key={pub.id} publication={pub} />
+          ))}
+        </div>
+      </Section>
+
+      <Section 
+        title="Patents" 
+        icon={<FaFileAlt className="text-primary" />}
+      >
+        <div className="space-y-4">
+          {patents.map((patent) => (
+            <div key={patent.id} className="bg-white rounded-lg shadow p-6 transition-all hover:shadow-lg">
+              <h3 className="font-bold text-lg">{patent.title}</h3>
+              <p className="text-gray-700 mt-1">{patent.description}</p>
+              <div className="flex justify-between items-center mt-2">
+                <p className="text-primary font-medium">{patent.id_number}</p>
+                <span className="text-gray-600">{patent.year}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Section>
+
+      <div className="bg-white rounded-lg shadow p-6 border-2 border-dashed border-gray-300 flex flex-col items-center justify-center">
+        <h3 className="font-bold text-xl mb-2 text-gray-500">Add New Publication</h3>
+        <p className="text-gray-500 text-center mb-4">
+          Update the publications.js file to add new publications to your portfolio
+        </p>
+        <button className="px-4 py-2 bg-primary text-white rounded-md hover:bg-secondary transition-colors">
+          Add Publication
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Publications;

src/pages/Resume.js

@@ -0,0 +1,155 @@
+import React from 'react';
+import { FaDownload, FaGraduationCap, FaBriefcase, FaFlask, FaCode, FaAward } from 'react-icons/fa';
+import about from '../data/about.js';  // Added .js extension
+import education from '../data/education.js';  // Added .js extension
+import experience from '../data/experience.js';  // Added .js extension
+import projects from '../data/projects.js';  // Added .js extension
+import skills from '../data/skills.js';  // Added .js extension
+import { publications } from '../data/publications.js';  // Added .js extension
+
+const Resume = () => {
+  return (
+    <div className="space-y-8">
+      <div className="bg-white rounded-lg shadow p-6 flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold mb-2">Resume</h1>
+          <p className="text-gray-700">
+            A comprehensive overview of my academic and professional experience
+          </p>
+        </div>
+        <button className="px-4 py-2 bg-primary text-white rounded-md hover:bg-secondary transition-colors flex items-center">
+          <FaDownload className="mr-2" />
+          Download PDF
+        </button>
+      </div>
+
+      {/* Professional Summary */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-2xl font-bold mb-4">Professional Summary</h2>
+        <p className="text-gray-700 leading-relaxed">{about.bio}</p>
+      </div>
+
+      {/* Education */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-2xl font-bold mb-4 flex items-center">
+          <FaGraduationCap className="mr-2 text-primary" />
+          Education
+        </h2>
+        <div className="space-y-6">
+          {education.map((edu, index) => (
+            <div key={edu.id} className={index !== 0 ? "pt-4 border-t border-gray-200" : ""}>
+              <div className="flex justify-between flex-wrap">
+                <h3 className="font-bold text-lg">{edu.degree}</h3>
+                <span className="text-gray-600">{edu.period}</span>
+              </div>
+              <p className="text-primary">{edu.institution}</p>
+              {edu.gpa && <p className="text-gray-600">GPA: {edu.gpa}</p>}
+              {edu.description.length > 0 && (
+                <ul className="mt-2 list-disc list-inside text-gray-700">
+                  {edu.description.map((item, idx) => (
+                    <li key={idx}>{item}</li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Experience */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-2xl font-bold mb-4 flex items-center">
+          <FaBriefcase className="mr-2 text-primary" />
+          Professional Experience
+        </h2>
+        <div className="space-y-6">
+          {experience.map((exp, index) => (
+            <div key={exp.id} className={index !== 0 ? "pt-4 border-t border-gray-200" : ""}>
+              <div className="flex justify-between flex-wrap">
+                <h3 className="font-bold text-lg">{exp.position}</h3>
+                <span className="text-gray-600">{exp.period}</span>
+              </div>
+              <p className="text-primary">{exp.company}</p>
+              <ul className="mt-2 list-disc list-inside text-gray-700">
+                {exp.description.map((item, idx) => (
+                  <li key={idx}>{item}</li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Research Projects */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-2xl font-bold mb-4 flex items-center">
+          <FaFlask className="mr-2 text-primary" />
+          Research Projects
+        </h2>
+        <div className="space-y-6">
+          {projects.map((project, index) => (
+            <div key={project.id} className={index !== 0 ? "pt-4 border-t border-gray-200" : ""}>
+              <div className="flex justify-between flex-wrap">
+                <h3 className="font-bold text-lg">{project.title}</h3>
+                <span className="text-gray-600">{project.period}</span>
+              </div>
+              <p className="text-primary">{project.organization}</p>
+              <ul className="mt-2 list-disc list-inside text-gray-700">
+                {project.description.map((item, idx) => (
+                  <li key={idx}>{item}</li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Publications */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-2xl font-bold mb-4 flex items-center">
+          <FaAward className="mr-2 text-primary" />
+          Selected Publications
+        </h2>
+        <div className="space-y-4">
+          {publications.slice(0, 3).map((pub, index) => (
+            <div key={pub.id} className={index !== 0 ? "pt-4 border-t border-gray-200" : ""}>
+              <h3 className="font-bold text-lg">{pub.title}</h3>
+              <p className="text-gray-700 italic">{pub.authors}</p>
+              <div className="flex justify-between items-center mt-1">
+                <p className="text-primary">{pub.venue}</p>
+                <span className="text-gray-600">{pub.year}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Skills */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-2xl font-bold mb-4 flex items-center">
+          <FaCode className="mr-2 text-primary" />
+          Technical Skills
+        </h2>
+        <div className="space-y-4">
+          {Object.entries(skills).map(([category, skillList]) => (
+            <div key={category}>
+              <h3 className="font-bold text-lg mb-2">{category}</h3>
+              <div className="flex flex-wrap gap-2 mb-4">
+                {skillList.map((skill, idx) => (
+                  <span 
+                    key={idx} 
+                    className="px-3 py-1 bg-light text-primary rounded-full text-sm"
+                  >
+                    {skill}
+                  </span>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Resume;

tailwind.config.js

@@ -0,0 +1,55 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+      "./src/**/*.{js,jsx,ts,tsx}",
+      "./public/index.html",
+    ],
+    theme: {
+      extend: {
+        colors: {
+          primary: 'var(--primary)',
+          secondary: 'var(--secondary)',
+          accent: 'var(--accent)',
+          light: 'var(--light)',
+          dark: 'var(--dark)',
+        },
+        fontFamily: {
+          sans: ['Inter', 'sans-serif'],
+        },
+        typography: {
+          DEFAULT: {
+            css: {
+              color: 'var(--text)',
+              a: {
+                color: 'var(--primary)',
+                '&:hover': {
+                  color: 'var(--secondary)',
+                },
+              },
+              h1: {
+                color: 'var(--text)',
+              },
+              h2: {
+                color: 'var(--text)',
+              },
+              h3: {
+                color: 'var(--text)',
+              },
+              h4: {
+                color: 'var(--text)',
+              },
+              code: {
+                color: 'var(--primary)',
+                backgroundColor: 'var(--light)',
+                padding: '0.25rem 0.5rem',
+                borderRadius: '0.25rem',
+              },
+            },
+          },
+        },
+      },
+    },
+    plugins: [
+      require('@tailwindcss/typography'),
+    ],
+  };