mmarusiak.github.io/index.html at main · mmarusiak/mmarusiak.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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Marcel Marusiak</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel='icon' href='./images/hello.png' </link:icon>
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=link" />
</head>

<body>
    <h2 class="navbar">
        marcel marusiak </h2>

    <div class="main">
        <div class="section-cover"></div>
        <div class="header">
            <h1>marcel marusiak</h1>
            <img src="https://avatars.githubusercontent.com/u/20907620?v=4" alt="it's just me!">
        </div>
        <div class="cross-section"></div>
        <div class="content">
            <div class="about-me">
                <h1>about me</h1>
                <h2>I'm a computer science student at the University of Technology in Wrocław (WUST). I'm a technology
                    enthusiast who enjoys
                    solving problems, which I often encounter while programming. Outside of my studies, I create video
                    games and work on
                    various interesting projects, many of <u class="quick-link" id="github"
                        data-link_var="https://github.com/mmarusiak"> which I host on my GitHub.</u> I also contribute
                    to engaging
                    open-source initiatives.
                    <br>
                    I have a strong interest in mathematics, which I enjoy exploring both for its concepts and its
                    applications. It often
                    plays a key role in my programming and problem-solving activities.
                </h2>
            </div>
            <div class="row-section">
                <div class="links">
                    <h1>links</h1>
                    <div class="quick-link" id="github" data-link_var="https://github.com/mmarusiak">
                        <img src="./images/github-mark.png" alt="">
                        <h2>GitHub</h2>
                    </div>
                    <!-- <h2 class="quick-link" id="twitter" data-link_var="https://twitter.com/mmarusiak_">Twitter</h2>
                    -->
                    <div class="quick-link" id="resume" data-link_var="./portfolio.html">
                        <img src="./images/all-posts.png" alt="">
                        <h2>Portfolio</h2>
                    </div>
                    <div class="quick-link" id="linkedin" data-link_var="https://mmarusiak.github.io/linkedin">
                        <img src="https://cdn-icons-png.flaticon.com/512/61/61109.png" alt="">
                        <h2>Linkedin</h2>
                    </div>
                </div>
                <div class="posts">
                    <div class='posts-heading quick-link' data-link_var="./all-posts">
                        <h1 id="all-posts" style="cursor: pointer;">posts</h1>
                        <span class="material-symbols-outlined">
                            link
                        </span>
                    </div>
                    <div class="post-holder">
                        <div class="post" id="post">
                            <img src="" alt="" class="post-img">
                            <h2 class="post-title">post post post</h2>
                        </div>
                    </div>
                    <div class="post-holder">
                        <div class="post" id="post">
                            <img src="" alt="" class="post-img">
                            <h2 class="post-title">post post post</h2>
                        </div>
                    </div>
                    <div class="post-holder">
                        <div class="post" id="post">
                            <img src="" alt="" class="post-img">
                            <h2 class="post-title">post post post</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <h2> © Marcel Marusiak 2024 </h2>
    </div>
    <script src=" https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
    <script src="/js/posts.js"></script>
    <script src="/js/hashtagFilterOtherPage.js"></script>
    <script>
        /*
                const allPosts = document.getElementById('all-posts');
                allPosts.addEventListener('click', function () {
                    window.location.href = './all-posts'
                })*/

        const allQuickLinks = document.getElementsByClassName('quick-link');
        console.log(allQuickLinks)
        for (link of allQuickLinks) {
            const link_value = link.dataset.link_var;
            link.addEventListener('click', function () {
                window.location.href = link_value;
            });
        }


        function getRandomPosts(amountOfPosts, howManyPosts) {
            const posts = [];

            for (let i = 0; i < howManyPosts; i++) {
                var post = Math.floor(Math.random() * (amountOfPosts));
                while (posts.includes(post) && amountOfPosts >= howManyPosts) {
                    post = Math.floor(Math.random() * (amountOfPosts));
                }
                console.log(post)
                posts.push(post);
            }
            return posts;
        }

        function displayPosts(posts) {
            const postTitle = document.getElementsByClassName('post-title');
            const postImages = document.getElementsByClassName('post-img');
            const postHolders = document.getElementsByClassName('post');

            const postsIndex = getRandomPosts(posts.length, 3);

            for (let i = 0; i < postTitle.length; i++) {
                postTitle[i].textContent = posts[postsIndex[i]].title;
                postHolders[i].addEventListener('click', function () {
                    window.document.location.href = posts[postsIndex[i]].source;
                });
                postImages[i].src = posts[postsIndex[i]].postIcon;
            }
        }
        getPostsInfo()
            .then(result => {
                displayPosts(result);
                hashtagLoader();
            })
            .catch(error => {
                console.error(error);
            });
    </script>
</body>

</html>