Summer 2023: The Projects Page

Key Features of the Projects Page

1. Dynamic Repository Fetching:
• The page fetches repositories from my GitHub account using the GitHub API.
• Each repository displays its name, an image (if available), and a brief description.

2. Repository Box Layout:
• Repositories are displayed in a card-like layout.
• Each card shows an image (if available), the repository name, and additional details on hover.

3. Interactive Elements:
• Clicking on a repository card opens the GitHub repository in a new tab.
• A download button is available to download the repository source code directly.

const fetchRepositories = async () => {
  try {
    const response = await fetch('https://api.github.com/users/Emilprivate/repos', {
      headers: { Authorization: `token ${process.env.NEXT_PUBLIC_GITHUB_REPOS}` },
    });
    const data = await response.json();
    // Process repository data
  } catch (error) {
    console.error(error);
  }
};

const renderRepository = (repo) => {
  return (
    <div key={repo.id} className="projects-repo" onClick={() => openRepository(repo.html_url)}>
      <img src={repo.imageUrl || defaultImage} alt="Repository Image" className="projects-repoImage" />
      <h2 className="projects-repoName">{repo.name}</h2>
    </div>
  );
};

Summer 2024: The Hobby Page

Key Features of the Hobby Page

1. Repository Selection Menu:
• A menu to select different hobby repositories, initially displaying a list of repositories with their descriptions.
• Automatically fetches and displays the repository contents upon selection.

2. Dynamic Content Display:
• Displays the contents of the selected repository in a menu list.
• Automatically shows README.md if available, when a repository or directory is selected.
• Provides navigation with a back button to move up the directory structure.

3. Markdown Rendering:
• Renders markdown files within the application using ReactMarkdown, remarkGfm, and rehypeHighlight.

const fetchRepoContents = async (repoName, path = '') => {
  const response = await fetch(`https://api.github.com/repos/Emilprivate/${repoName}/contents/${path}`, {
    headers: { Authorization: `token ${process.env.NEXT_PUBLIC_GITHUB_REPOS}` },
  });
  const data = await response.json();
  if (response.ok) return data.filter(item => !item.name.startsWith('.'));
  throw new Error(`Error fetching repository contents: ${response.statusText}`);
};

const handleRepoSelect = (repoName) => {
  setSelectedRepo(repoName);
  fetchRepoContents(repoName).then(data => {
    setRepoContents(data);
    const readmeFile = data.find(item => item.name.toLowerCase() === 'readme.md');
    if (readmeFile) handleClick(readmeFile);
  }).catch(console.error);
};

<ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeHighlight]}>
  {selectedContent}
</ReactMarkdown>

Summary