profile-page/index.html at master · FP2003/profile-page · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FILIP</title>
    <link rel="stylesheet" href="index.css">
    <script src="index.js" defer></script>
</head>
<body>
    <!-- Video Background -->
    <video class="video-background" autoplay loop muted playsinline>
        <source src="./video.mp4" type="video/mp4">
        <!-- Add fallback image if video doesn't load -->
        <img src="/api/placeholder/1920/1080" alt="Background">
    </video>

    <!-- Mute Button & Volume Slider -->
    <div class="volume-container">
        <input type="range" min="0" max="1" step="0.01" value="0.1" class="volume-slider" id="volumeRange">
    </div>


    <!-- Stats Display -->
    <div class="stats-display no-select">
        <div class="stat-display">
            <svg viewBox="0 0 35 35">
                <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"></path>
            </svg>
            <span>18h</span>
        </div>
        <div class="stat-display">
            <svg viewBox="0 0 35 35">
                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path>
            </svg>
            <span>LDN</span>
        </div>
    </div>

    <!-- Main Content -->
    <div class="content">
        <div class="profile-card" id="profile-card">
            <!-- Profile Image -->
            <div class="profile-image no-select">
                <img src="cat.jpg" alt="Profile Image">
            </div>

            <!-- Profile Name -->
            <div class="profile-name no-select">FILIP</div>

            <!-- Profile Tagline -->
            <div class="profile-tagline">"WELCOME TO MY PROFILE"</div>

            <!-- Stats -->
            <div class="stats">
                <div class="stat">
                    <div class="stat-number">22</div>
                    <div class="stat-label">AGE</div>
                </div>
                <div class="stat">
                    <div class="stat-number">86</div>
                    <div class="stat-label">Missions</div>
                </div>
                <div class="stat">
                    <div class="stat-number">225k</div>
                    <div class="stat-label">XP</div>
                </div>
            </div>

            <!-- Social Icons -->
            <div class="social-icons">
                <div class="social-icon">
                    <!-- GitHub Icon -->
                    <a href="https://github.com/FP2003" target="_blank" aria-label="GitHub">
                        <svg width="20" height="30" viewBox="0 0 24 24" fill="#ffffff">
                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                        </svg>
                    </a>
                </div>
                <div class="social-icon">
                    <!-- LinkedIn Icon -->
                    <a href="https://www.linkedin.com/in/filip-pielecki" target="_blank" aria-label="LinkedIn">
                        <svg width="20" height="30" viewBox="0 0 24 24" fill="#ffffff">
                            <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                        </svg>
                    </a>
                </div>
                <div class="social-icon">
                    <!-- LeetCode Icon -->
                    <a href="https://leetcode.com/FP2003" target="_blank" aria-label="LeetCode">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="30"
                            viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path d="M12 13h7.5"/>
                            <path d="M9.424 7.268l4.999 -4.999"/>
                            <path d="M16.633 16.644l-2.402 2.415a3.189 3.189 0 0 1 -4.524 0
                                    l-3.77 -3.787a3.223 3.223 0 0 1 0 -4.544l3.77 -3.787
                                    a3.189 3.189 0 0 1 4.524 0l2.302 2.313"/>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Custom cursor -->
    <div class="cursor">
        <div class="cursor-x"></div>
    </div>
</body>
</html>