milelime.github.io/index.html at main · milelime/milelime.github.io · GitHub

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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
    <link rel="stylesheet" href="styles.css" />
    <title>Alexey Ayzin's Portfolio</title>
  </head>

  <body>
    <header>
      <h1>Hello! I'm Alexey Ayzin</h1>
      <p>Welcome to my portfolio. I'm a software developer from New York.</p>
      <a
        href="https://drive.google.com/file/d/1v3nkeoekitz-8ASYh7WB6cqWhjWQ8j0l/view?usp=sharing"
        target="_blank"
        >Resume</a
      >
      |
      <a href="https://www.linkedin.com/in/alexeyayzin/" target="_blank"
        >LinkedIn</a
      >
      |
      <a href="https://github.com/milelime" target="_blank">My Github</a>
      |
      <a href="https://alexeyayzin.com" target="_blank">My Website</a>
    </header>

    <!-- Blog Posts -->
    <div id="blogPosts"></div>

    <!-- Pagination Controls -->
    <div id="pagination"></div>

    <div id="projects"></div>
    <script>
      fetch("https://api.github.com/users/milelime/repos")
        .then((response) => response.json())
        .then((data) => {
          let selectedProjects = data.slice(0, 5);
          let projectsDiv = document.getElementById("projects");

          selectedProjects.forEach((project) => {
            projectsDiv.innerHTML += `<div>
            <h3><a href=${project.html_url} target="_blank">${project.name}</a></h3>
            <p>${project.description}</p>
          </div>`;
          });
        });
    </script>

    <script>
      window.onload = function () {
        const repoName = "milelime.github.io";
        const userName = "milelime";
        const postsPerPage = 3;
        let currentPage = 1;

        const converter = new showdown.Converter();

        fetch(
          `https://api.github.com/repos/${userName}/${repoName}/contents/posts`,
        )
          .then((response) => response.json())
          .then((data) => {
            const mdFiles = data
              .filter((file) => file.name.endsWith(".md"))
              // Sort by filename in descending order (latest post first)
              .sort((a, b) => b.name.localeCompare(a.name));

            function displayPage(page) {
              const start = (page - 1) * postsPerPage;
              const end = start + postsPerPage;

              const filesToShow = mdFiles.slice(start, end);
              const blogPostsDiv = document.getElementById("blogPosts");
              blogPostsDiv.innerHTML = "";

              filesToShow.forEach((file) => {
                fetch(file.download_url)
                  .then((response) => response.text())
                  .then((text) => {
                    const postContent = converter.makeHtml(text);
                    blogPostsDiv.innerHTML += `<div class="post">${postContent}</div>`;
                  });
              });

              const paginationDiv = document.getElementById("pagination");
              paginationDiv.innerHTML = "";

              for (
                let i = 1;
                i <= Math.ceil(mdFiles.length / postsPerPage);
                i++
              ) {
                paginationDiv.innerHTML += `<a href="#" onclick="changePage(${i})">${i}</a>`;
              }
            }

            window.changePage = function (page) {
              currentPage = page;
              displayPage(currentPage);
            };

            displayPage(currentPage);
          });
      };
    </script>
  </body>
</html>