varlevi.github.io/index.html at master · varlevi/varlevi.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
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Set character encoding -->
    <meta charset="UTF-8">
    <!-- Sets initial site width to device width and scale to 100% -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Add Site Title -->
    <title>Varlevi | The Directory</title>
    <!-- Link to main css file -->
    <link rel="stylesheet" href="styles.css">
    <!-- Link to custom pointer css -->
    <link href="https://seattleowl.com/pointer.js/pointer.css" rel="stylesheet">
</head>

<body>
    <!-- Start Blobs Menu -->
    <div class="blobs">
        <div class="blob" id="home-blob">
            <p>Home</p>
        </div>
        <div class="blob" id="shade-swash-blob">
            <p>ShadeSwash</p>
        </div>
        <div class="blob" id="color-by-number-blob">
            <p>Color-By-Number Mosaic</p>
        </div>
        <div class="blob" id="physics-calc-blob">
            <p>Physics Calculator</p>
        </div>
    </div>
    <!-- End Blobs Menu -->

    <div id="contentcontainer">
        <!-- Start Home Content -->
        <div class="content" id="home-content">
            <section class="header">
                <h1>Welcome to The Directory</h1>
            </section>
            <section class="description">
                <p>Hi! I'm Varlevi, a design-conscious frontend developer with a love for all things Open Source. The Directory is just a little site where you can learn about and find links to all my best projects! Enjoy!</p>
            </section>
            <section class="links">
                <p>GitHub: <a href="https://github.com/varlevi">https://github.com/varlevi</a></p>
            </section>
        </div>
        <!-- End Home Content -->
        <!-- Start ShadeSwash Content -->
        <div class="content hidden" id="shade-swash-content">
            <section class="header">
                <h2><span>ShadeSwash</span></h2>
            </section>
            <section class="description">
                <p>ShadeSwash is a simple web app design to make finding color shades easy and intuitive. Features like dark mode and support for color standards like RGB and HEX make it easy to use and help make sure you find the best shade of a color.</p>
            </section>
            <section class="links">
                <p>Website: <a href="https://shadeswash.netlify.app">https://shadeswash.netlify.app</a></p>
                <p>GitHub: <a href="https://github.com/varlevi/ShadeSwash">https://github.com/varlevi/ShadeSwash</a></p>
            </section>
        </div>
        <!-- End ShadeSwash Content -->
        <!-- Start Color-By-Number Mosaic Content -->
        <div class="content hidden" id="color-by-number-content">
            <section class="header">
                <h2><span>Color-By-Number Mosaic</span></h2>
            </section>
            <section class="description">
                <p>Color-By-Number Mosaic is a fun little site that digitalizes color-by-number puzzles into a mosaic-like format.</p>
            </section>
            <section class="links">
                <p>Website: <a href="https://colorbynumber.netlify.app/">https://colorbynumber.netlify.app/</a></p>
                <p>GitHub: <a href="https://github.com/varlevi/color-by-number-mosaics">https://github.com/varlevi/color-by-number-mosaics</a></p>
            </section>
        </div>
        <!-- End Color-By-Number Mosaic Content -->
        <!-- Start Physics Calculator Content -->
        <div class="content hidden" id="physics-calc-content">
            <section class="header">
                <h2><span>Physics Calculator</span></h2>
            </section>
            <section class="description">
                <p>A selection of common physics calculations you can use to calculate simple physics problems.</p>
            </section>
            <section class="links">
                <p>Website: <a href="https://physicscalculator.netlify.app/">https://physicscalculator.netlify.app/</a></p>
                <p>GitHub: <a href="https://github.com/varlevi/physics-calculator">https://github.com/varlevi/physics-calculator</a></p>
            </section>
        </div>
        <!-- End Physics Calculator Content -->
    </div>

    <!-- SVG Filter for Blob Effect -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" hidden>
    <defs>
        <filter id="blob-filter">
        <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
        <feBlend in="SourceGraphic" in2="goo" />
        </filter>
    </defs>
    </svg>
    <!-- Links to js script for pointer -->
    <script src="https://seattleowl.com/pointer.js/pointer.js"></script>
    <!-- Initializes custom pointer -->
    <script>
        init_pointer({
            pointerColor: "#d4413c",
            ringSize: 15,
            ringClickSize: 10
        })
    </script>
    <!-- Links to main javascript file -->
    <script src="script.js"></script>
</body>
</html>