-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
125 lines (121 loc) · 18.6 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alekzandriia Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<a href="#"><img src="images/logo-simple.svg" alt="logo-simple" id="header-logo"></a>
<nav>
<ul>
<li><a href="#projects">Projects</a></li>
<!-- <li><a href="https://alekzandriia.notion.site/alekzandriia/Resources-bfe106fbfc8c47cebf25cef501d68779">Resources</a></li> -->
<li><a href="mailto:hello@alekzandriia.com">Contact</a></li>
</ul>
</nav>
<button class="theme-toggle" id="theme-toggle" title="Toggle Light/ Dark Theme" aria-label="auto" aria-live="polite" onclick="themeToggle()">🌈</button>
</header>
<div class="marquee">
<span>Hello! Welcome to my website. Thanks for stopping by. Please have a look around. if you have any questions feel free to reach out and let me know. Have a nice day! =) </span>
</div>
<div class="background">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<main>
<div class="container">
<div class ="yellow">
<div class="intro">
<h1>Hi, I'm Alekz</h1>
<h2>Creative <u>Designer</u> <br><span id="ampersand">&&</span><u>Developer</u></h2>
</div>
<img src="images/profile-pic-8.png" alt="profile pic" id="profile-pic">
</div> <!--yellow-->
<div class ="blue">
<blockquote>You know all those amazing ideas you have? Let's bring them to life.</blockquote>
</div> <!--blue-->
<div id ="projects">
<h2 class="projects">Projects</h2>
<section class="card">
<h1>Attica</h1>
<h2>VS Code Extension</h2>
<p>A simple light pastel theme extension with syntax highlighting for Visual Studio Code. Dark mode options coming soon.</p>
<ul class="links">
<li><a href="https://marketplace.visualstudio.com/items?itemName=Alekzandriia.attica">Install</a></li>
<li><a href="https://github.com/alekzandriia/attica">Source Code</a></li>
</ul>
<a href="https://marketplace.visualstudio.com/items?itemName=Alekzandriia.attica"><img src="images/preview.png" alt="preview of attica color theme for visual studio code"></a>
<q title="--Steve Jobs">Everyone should learn to program, because it teaches you to think.</q>
</section>
<section class="card">
<h1>Terminus</h1>
<h2>Terminal-themed links page</h2>
<p>A different take on the typical links page for a social media bio. Basing the design on a ubiquitous software application (the terminal) communicates the type of content the user can expect when interacting with the links. I also added a "skip" button to the bottom right so that repeat visitors do not need to wait for the animation to play before accessing the links. </p>
<ul class="links">
<li><a href="https://linksonlinks.netlify.com">Demo</a></li>
<li><a href="https://github.com/alekzandriia/browser-terminal">Source Code</a></li>
</ul>
<a href="https://github.com/alekzandriia/browser-terminal"><img src="images/terminal-preview.jpg" alt="preview of terminal-themed links page"></a>
<q title ="--Steve Jobs">If you are working on something that you really care about, you don’t have to be pushed. The vision pulls you.</q>
</section>
<section class="card">
<h1>Sketchbook</h1>
<h2>Digital Illustration</h2>
<p>I love designing & creating illustrations by hand. Incorporating hand-drawn elements into your designs adds warmth & makes your site stand out against a sea of generic templates. </p>
<ul class="links">
<li><a href="https://dribbble.com/alekzandriia">Open</a></li>
</ul>
<a href="https://dribbble.com/alekzandriia"><img src="images/abstract-portrait.png" alt="abstract digital painting made with pastel shapes, waves & swirls"></a>
<q title="--Unknown">A beautiful project that doesn’t work very well is ugly.</q>
</section>
<section class="card">
<h1>Creative Coding</h1>
<h2>Code Snippet</h2>
<p>This is a typewriter effect made sans JavaScript. Just 100% pure CSS goodness. CodePen is my favourite place to quickly test out new or exciting coding concepts. Check out some of my other work below.</p>
<ul class="links">
<li><a href="https://codepen.io/alekzandriia">Open</a></li>
</ul>
<a href="https://codepen.io/alekzandriia"><img src="images/codepen.GIF" alt="animated typing effect made with pure CSS"></a>
<q title = "--Andrew Singer">The art of debugging is figuring out what you really told your program to do rather than what you thought you told it to do.</q>
</section>
</div> <!--red-->
</div> <!--sticky container-->
</main>
<div class="marquee">
<span id="skills">html | css | javascript | node | wordpress | figma | photoshop | jekyll | gatsby | git | command line | docker | linux | aws</span>
</div>
<footer id="footer">
<a src="#"><svg id="logo-text" height="" stroke-miterlimit="10" style="fill-rule:nonzero;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" version="1.1" viewBox="0 0 2000 500" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:vectornator="http://vectornator.io" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs/>
<g id="Contours" vectornator:layerName="Contours">
<path d="M1362.64 253.23C1364.74 234.386 1363.94 215.26 1360.34 196.605C1360.14 195.475 1359.94 194.344 1360.34 193.308C1360.94 191.989 1362.34 191.329 1363.64 190.67C1378.54 183.697 1393.44 176.631 1408.34 169.659C1409.84 169 1412.34 168.905 1412.34 170.413C1410.24 250.969 1410.94 331.525 1414.44 412.081C1398.54 405.862 1380.04 406.051 1364.24 412.457C1363.74 402.565 1363.14 392.672 1362.64 382.779C1354.34 403.507 1330.24 416.886 1306.74 416.32C1283.14 415.661 1261.04 402.376 1248.04 383.91C1235.04 365.349 1230.54 342.265 1232.74 320.124C1235.64 291.105 1250.74 262.086 1277.04 246.729C1303.24 231.183 1340.94 232.408 1362.64 253.23M1321.74 242.112C1310.84 244.185 1302.64 252.759 1297.14 261.898C1291.94 270.472 1288.54 279.894 1286.14 289.504C1279.04 317.109 1279.54 346.505 1287.74 373.828C1291.44 386.359 1297.94 399.644 1310.54 404.92C1323.44 410.385 1339.44 405.203 1348.84 395.404C1358.34 385.511 1362.24 371.944 1363.34 358.659C1364.44 345.375 1362.84 332.09 1362.94 318.711C1363.04 302.129 1365.64 285.075 1360.54 269.247C1355.24 253.23 1338.94 238.815 1321.74 242.112Z" fill="" fill-rule="nonzero" opacity="1" stroke="none"/>
<path d="M631.344 319.842C634.444 318.994 637.944 317.863 640.844 319.182C643.544 320.407 644.844 323.234 645.944 325.777C658.744 355.739 674.244 384.663 692.244 412.081C672.444 405.862 650.544 405.862 630.744 411.798C618.644 380.329 604.444 349.614 588.444 319.748C578.044 349.238 576.944 381.554 585.244 411.61C567.144 406.522 547.444 406.333 529.244 411.139C532.244 340.475 533.444 269.718 529.244 199.149C528.944 194.627 529.744 188.691 534.544 187.749C551.144 184.64 565.544 175.124 579.244 165.89C579.344 219.5 579.444 273.204 579.644 326.814C581.644 321.067 583.744 315.225 585.744 309.478C592.544 290.069 599.744 270.001 614.444 254.832C629.144 239.663 653.444 230.9 673.144 239.474C688.544 246.164 697.944 263.688 693.544 279.14C689.044 294.497 670.344 305.238 654.044 300.81C651.544 300.15 648.744 298.36 649.344 296.005C652.344 284.793 649.744 270.283 638.244 266.326C627.744 262.746 616.744 270.472 609.744 278.763C600.544 289.786 594.144 302.883 591.144 316.638C603.544 322.386 618.144 323.516 631.344 319.842Z" fill="" fill-rule="nonzero" opacity="1" stroke="none"/>
<path d="M411.244 348.484C408.144 351.122 405.544 354.702 405.344 358.565C405.244 361.58 406.644 364.595 408.244 367.233C417.144 381.648 434.944 390.787 452.644 389.845C470.344 388.903 486.944 377.974 494.044 362.616C495.644 359.036 497.844 354.608 501.944 354.608C501.044 384.192 474.244 410.29 443.244 414.907C412.244 419.618 379.744 404.355 362.144 379.858C344.544 355.362 341.244 323.045 350.344 294.78C354.944 280.27 362.844 266.42 374.544 256.151C391.444 241.264 415.544 234.669 438.644 236.365C463.844 238.155 489.244 250.498 500.344 271.791C511.444 293.178 503.644 323.045 480.644 333.032C458.744 342.548 429.144 333.126 411.244 348.484M460.644 279.705C461.444 269.906 459.444 259.637 453.244 251.817C447.044 243.997 435.944 239.192 425.944 241.641C419.544 243.243 414.144 247.483 410.044 252.382C403.144 260.673 399.244 270.849 396.744 281.024C390.944 304.673 392.344 329.923 400.544 352.912C412.144 337.743 431.644 329.64 444.744 315.602C453.944 305.709 459.644 292.896 460.644 279.705Z" fill="" fill-rule="nonzero" opacity="1" stroke="none"/>
<path d="M1159.94 283.003C1159.54 268.587 1157.24 251.346 1143.44 245.033C1134.24 240.888 1122.94 243.62 1114.44 248.99C1110.04 251.817 1106.04 255.397 1103.94 260.014C1102.04 264.253 1101.94 269.059 1101.84 273.675C1101.04 319.936 1100.14 366.291 1105.14 412.363C1087.74 405.862 1067.64 405.768 1050.14 412.269C1054.14 358.565 1054.94 304.673 1052.74 250.875C1052.64 248.236 1052.54 245.41 1054.04 243.149C1055.54 240.887 1059.04 239.663 1061.14 241.359C1070.24 248.802 1081.84 255.303 1093.74 253.136C1100.54 251.911 1106.34 247.86 1112.44 244.75C1129.04 236.177 1149.34 233.633 1167.44 239.097C1185.44 244.562 1200.74 258.318 1206.14 275.465C1209.54 286.3 1209.04 297.889 1208.74 309.195C1207.74 343.49 1208.94 377.785 1212.34 411.892C1194.34 406.522 1174.64 406.428 1156.64 411.704C1161.44 369.023 1161.04 325.966 1159.94 283.003Z" fill="" fill-rule="nonzero" opacity="1" stroke="none"/>
<path d="M1876.14 389.563C1864.74 401.717 1849.74 411.138 1832.94 414.436C1816.14 417.734 1797.54 414.153 1784.54 403.601C1771.54 392.955 1765.24 374.959 1770.84 359.696C1776.04 345.563 1789.84 335.67 1804.24 329.264C1818.64 322.857 1834.14 318.805 1848.04 311.551C1857.44 306.557 1866.34 299.679 1870.64 290.352C1874.64 281.778 1874.34 271.885 1871.74 262.84C1870.04 257.093 1867.34 251.534 1862.74 247.483C1855.94 241.453 1845.34 239.757 1836.44 242.489C1827.54 245.222 1820.34 252.005 1816.44 260.014C1813.14 266.892 1812.14 274.994 1814.84 282.155C1817.64 289.221 1824.54 295.063 1832.54 295.816C1832.94 310.985 1814.94 323.139 1799.24 320.03C1783.54 316.921 1772.44 301.375 1772.84 286.206C1773.24 271.037 1783.34 256.999 1796.74 248.613C1810.14 240.228 1826.64 236.93 1842.74 236.459C1867.74 235.611 1895.24 242.489 1909.64 261.804C1923.14 279.988 1921.94 304.107 1921.34 326.249C1920.84 347.542 1921.44 368.741 1923.14 389.94C1923.74 397.006 1927.54 406.428 1934.94 405.014C1937.94 404.449 1941.44 402.094 1943.54 404.166C1934.14 413.871 1919.04 418.299 1905.44 415.378C1891.74 412.269 1880.14 402.188 1876.14 389.563M1818.24 350.839C1814.84 360.826 1816.24 372.227 1822.54 380.8C1828.84 389.374 1839.94 394.839 1851.04 394.085C1855.34 393.802 1859.54 392.578 1863.64 391.164C1867.64 389.751 1871.84 387.678 1873.24 383.91C1873.84 382.308 1873.84 380.612 1873.84 378.916C1873.74 351.687 1873.64 324.458 1873.54 297.229C1865.34 307.217 1853.94 314.283 1843.34 322.009C1832.64 329.64 1822.34 338.779 1818.24 350.839Z" fill="" fill-rule="nonzero" opacity="1" stroke="none"/>
<path d="M271.544 318.523C271.544 293.555 271.644 268.587 271.644 243.526C271.644 225.813 271.644 207.817 266.544 190.764C282.344 187.089 297.444 180.306 310.444 170.978C313.444 168.811 319.544 167.681 319.544 171.261C319.444 223.74 319.444 276.219 319.344 328.698C319.344 356.587 319.244 384.475 323.344 412.081C305.444 406.145 285.344 406.145 267.444 412.175C269.044 398.325 270.144 384.475 270.744 370.531C271.544 353.195 271.544 335.859 271.544 318.523Z" fill="" fill-rule="nonzero" opacity="1" stroke="none"/>
<path d="M1502.54 272.168C1506.44 257.658 1517.54 244.656 1532.34 239.097C1547.14 233.539 1565.34 236.271 1576.74 246.729C1588.14 257.187 1591.14 275.277 1582.64 287.996C1574.14 300.621 1554.34 305.615 1540.84 297.606C1544.84 288.09 1544.84 275.56 1536.34 269.247C1526.84 262.275 1511.94 267.174 1505.04 276.502C1498.14 285.829 1497.24 297.795 1496.74 309.101C1495.44 343.396 1496.64 377.88 1500.34 412.081C1482.44 406.428 1462.54 406.522 1444.64 412.175C1450.04 365.726 1450.44 318.805 1445.94 272.262C1445.44 267.551 1446.04 261.333 1450.84 260.108C1467.04 256.057 1482.34 248.613 1495.24 238.626C1497.14 251.911 1497.24 265.384 1495.74 278.669C1499.14 280.082 1501.54 275.465 1502.54 272.168Z" fill="" fill-rule="nonzero" opacity="1" stroke="none"/>
<path d="M1607.94 262.463C1626.04 258.129 1643.24 250.027 1657.64 238.815C1660.64 296.382 1654.74 354.42 1662.44 411.61C1644.84 406.145 1625.44 405.957 1607.64 410.95C1612.04 361.58 1612.14 311.927 1607.94 262.463Z" fill="" fill-rule="nonzero" opacity="1" stroke="none"/>
<path d="M718.644 288.09C713.144 272.921 714.844 256.433 716.544 240.511C758.344 246.069 800.844 246.164 842.644 240.887C816.244 294.12 789.844 347.353 763.444 400.586C788.844 406.804 818.144 391.824 826.344 368.364C826.944 366.574 829.944 366.668 831.244 368.081C832.544 369.494 832.544 371.567 832.544 373.451C832.544 384.569 832.444 395.687 832.444 406.899C832.444 408.971 831.544 411.892 829.344 411.61C788.044 406.145 745.944 406.051 704.644 411.327C731.244 357.906 757.744 304.484 784.344 251.063C756.844 245.221 726.244 262.558 718.644 288.09Z" fill="" fill-rule="nonzero" opacity="1" stroke="none"/>
<path d="M1031.94 403.318C1022.64 413.211 1007.54 417.922 993.844 415.096C980.144 412.269 968.344 402.188 964.244 389.563C953.044 401.623 938.244 411.044 921.644 414.436C905.044 417.828 886.644 414.53 873.644 404.261C860.644 393.991 853.944 376.372 858.944 361.109C863.744 346.411 877.744 335.953 892.444 329.169C907.144 322.386 923.144 318.24 937.444 310.703C946.544 305.898 955.144 299.397 959.144 290.352C961.544 284.887 962.144 278.857 961.844 273.016C961.244 261.144 955.944 248.236 944.544 243.243C931.244 237.401 914.644 245.033 906.744 256.716C902.444 263.123 899.944 271.037 901.644 278.48C903.244 285.923 909.444 292.707 917.444 294.026C923.144 294.968 922.744 303.071 919.344 307.499C911.344 318.146 895.144 322.291 882.144 317.581C869.244 312.87 860.344 300.056 860.044 286.96C859.844 273.298 868.244 260.391 879.844 252.194C891.444 243.997 905.844 239.945 920.144 237.873C947.244 233.915 978.444 238.155 995.444 258.412C1009.44 275.183 1010.04 298.172 1010.14 319.465C1010.24 343.208 1010.24 367.045 1010.34 390.788C1010.44 400.303 1022.94 407.558 1031.94 403.318M952.844 391.259C958.444 388.715 963.644 383.627 963.144 377.785C960.644 351.028 960.644 323.987 963.144 297.23C957.344 302.6 951.244 307.688 944.944 312.399C936.644 318.523 927.944 324.176 920.444 331.148C912.944 338.12 906.744 346.788 905.044 356.492C903.044 367.987 908.044 380.424 917.844 387.678C927.544 394.745 941.644 396.346 952.844 391.259Z" fill="" fill-rule="nonzero" opacity="1" stroke="none"/>
<path d="M1746.84 411.233C1729.64 406.239 1710.94 406.239 1693.74 411.044C1692.14 411.515 1691.44 409.16 1691.54 407.652C1695.94 360.732 1696.04 313.435 1691.84 266.515C1691.64 264.536 1691.94 261.992 1693.94 261.521C1710.14 258.129 1725.44 250.78 1737.84 240.322C1740.04 238.532 1742.34 242.395 1742.34 245.127C1742.34 283.474 1742.34 321.726 1742.34 360.073C1742.44 377.126 1742.44 394.556 1746.84 411.233Z" fill="" fill-rule="nonzero" opacity="1" stroke="none"/>
<path d="M163.744 351.122C140.444 351.122 117.144 351.028 93.7441 351.028C90.2441 351.028 86.2441 351.216 84.0441 353.76C69.4441 370.813 73.7441 399.361 92.8441 411.892C73.5441 406.616 52.6441 406.522 33.2441 411.704C58.4441 392.578 71.9441 363.37 84.5441 335.293C104.844 290.163 125.144 244.939 145.444 199.809C146.344 197.736 147.644 195.38 150.044 194.815C153.644 194.061 156.244 197.83 157.544 201.034C178.444 249.65 199.344 298.266 220.144 346.882C229.744 369.306 239.444 391.918 252.844 412.646C233.644 406.239 212.144 405.956 192.844 411.892C186.144 393.614 179.444 375.336 172.744 356.963C172.144 355.362 171.544 353.666 170.044 352.535C168.344 351.216 165.944 351.122 163.744 351.122M166.844 344.338C157.944 323.987 149.144 303.542 140.444 283.097C136.344 273.581 132.344 264.065 128.244 254.549C115.344 282.626 102.544 310.703 89.6441 338.779C88.7441 340.664 88.0441 343.113 89.4441 344.621C115.244 344.527 141.044 344.433 166.844 344.338Z" fill="" fill-rule="nonzero" opacity="1" stroke="none"/>
<path d="M1562.54 170.601C1558.44 170.224 1557.94 164.76 1558.94 161.085C1568.14 123.493 1600.04 92.1181 1638.94 80.0583C1677.84 67.9985 1722.34 74.9706 1756.24 96.5464C1782.64 113.411 1803.54 141.017 1802.84 171.072C1802.84 172.015 1802.64 173.145 1801.84 173.616C1800.14 174.558 1798.74 172.109 1798.34 170.413C1793.54 148.366 1773.64 131.313 1751.34 123.021C1729.04 114.73 1704.64 113.882 1680.64 113.977C1661.94 114.071 1643.14 114.636 1625.04 118.97C1606.94 123.21 1589.44 131.501 1577.24 144.786C1570.44 152.135 1565.34 161.085 1562.54 170.601Z" fill="" fill-rule="nonzero" opacity="1" stroke="none"/>
<path d="M1697.54 216.485C1695.94 213.188 1695.14 209.607 1695.14 206.027C1695.14 203.2 1695.74 200.374 1696.74 197.736C1700.84 187.184 1713.44 180.211 1725.24 182.002C1737.04 183.792 1746.74 194.061 1747.24 205.273C1747.74 216.485 1738.84 227.509 1727.24 230.147C1715.74 232.785 1702.54 226.755 1697.54 216.485Z" fill="" fill-rule="nonzero" opacity="1" stroke="none"/>
<path d="M1660.94 195.475C1663.74 200.845 1664.34 207.158 1662.64 212.905C1661.74 216.014 1660.04 219.029 1657.94 221.573C1650.94 229.864 1637.94 232.973 1627.64 228.922C1617.34 224.871 1610.44 214.035 1611.64 203.483C1612.84 193.025 1622.04 183.792 1633.14 182.002C1644.14 180.211 1656.04 185.959 1660.94 195.475Z" fill="" fill-rule="nonzero" opacity="1" stroke="none"/>
</g>
</svg></a>
© 2022 Alekzandriia. All Rights Reserved.
</footer>
<script src="script.js"></script>
</body>
</html>