Merge branch '2024' of github.com:seansamarov/samarov.me

seansamarov · May 6, 2024 · 09ff723 · 09ff723
2 parents 88260cd + 6c6c972
commit 09ff723
Show file tree

Hide file tree

Showing 19 changed files with 426 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,31 @@
 node_modules/
 .parcel-cache/
 dist/
-yarn.lock
+yarn.lock
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+
+yarn.lock
diff --git a/contact.html b/contact.html
@@ -0,0 +1,16 @@
+<form  id="contact-form" method="GET" action="mailto:[email protected]" enctype="text/plain">
+    <fieldset>
+        <legend>
+            <h2>Let's Chat</h2>
+        </legend>
+        <a href="#null" id="form-close">&times;</a>
+        <label for="subject">Subject</label>
+        <input type="text" name="subject" id="subject" placeholder="Howdy! Found you through your website." required>
+        <label for="cc">Your Email</label>
+        <input type="email" name="cc" id="cc" placeholder="Where can I reach you?" required>
+        <label for="body" required>Your message for me</label>
+        <textarea name="body" id="body" cols="60" rows="10" placeholder="What can I do for ya?" required></textarea>
+        <br>
+        <input type="submit"><a href="#null" id="back-btn">Back</a>
+    </fieldset>
+</form>
diff --git a/img/20221006_210810.jpg b/img/20221006_210810.jpg
diff --git a/img/306713162_666784465063738_147211751439699298_n-zWWFP9-A7-transformed.jpeg b/img/306713162_666784465063738_147211751439699298_n-zWWFP9-A7-transformed.jpeg
diff --git a/img/307083797_2020219721511437_7094502600096021197_n.jpg b/img/307083797_2020219721511437_7094502600096021197_n.jpg
diff --git a/img/Emo in E Minor.png b/img/Emo in E Minor.png
diff --git a/img/IMG_20230211_095604_980.jpg b/img/IMG_20230211_095604_980.jpg
diff --git a/img/Sean guitar Costell2.JPG b/img/Sean guitar Costell2.JPG
diff --git a/img/added_billboard.png b/img/added_billboard.png
diff --git a/img/chess_render1.png b/img/chess_render1.png
diff --git a/img/mydecember_render6.png b/img/mydecember_render6.png
diff --git a/img/posed_square.jpg b/img/posed_square.jpg
diff --git a/img/ptown_gv003_1080 - frame at 0m2s.jpg b/img/ptown_gv003_1080 - frame at 0m2s.jpg
diff --git a/img/ptown_gv003_1080.mp4 b/img/ptown_gv003_1080.mp4
diff --git a/img/sciencefacility_render3.png b/img/sciencefacility_render3.png
diff --git a/img/vlcsnap-2023-06-26-15h59m10s367.png b/img/vlcsnap-2023-06-26-15h59m10s367.png
diff --git a/index.html b/index.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Personal Moshpit | Sean Samarov - Musician, Web Developer, IT Wizard, and Aspiring Artist and Game Designer</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet"> 
+    <link rel="stylesheet" href="index.scss">
+    <script>
+        const QUOTES = [   
+            "If you're with the fire department, come back with a warrant. - Peter Natali",
+            "...it is only when a man goes out into the world with the thought that there are heroisms all round him, and with the desire all alive in his heart to follow any which may come within sight of him, that he breaks away... from the life he knows, and ventures forth into the wonderful mystic twilight land where lie the great adventures and the great rewards. - Arthur Conan Doyle",
+            "Everything either is or is not a potato. - Unknown",
+            "I identify as someone who doesn't want to shit their pants in a Walgreens. - Bryan Joseph Muenzer"
+        ];
+    </script>
+</head>
+<body>
+    <video class="bg-video" src="img/ptown_gv003_1080.mp4" autoplay muted loop>
+        <img src="img/ptown_gv003_1080 - frame at 0m2s.jpg" alt="">
+    </video>
+    <header class="body-text">
+        <h1>
+            <span>What's p<span id="pop">o</span>ppin, my name is</span>
+            <br>
+            Sean Samarov
+        </h1>
+        <nav>I do <a href="#music">music</a>, <a href="#three-dee-art">digital art</a>, <a href="#web-dev">web development</a> and <a href="#sysadmin">system administration</a>.</nav>
+        <a id="cta" href="/mydecember" target="_blank" rel="noopener noreferrer">Stream my cover of 'My December' by Linkin Park on all platforms now!</a>
+        <p id="quote"></p>
+    </header>
+    <main>
+        <section id="music">
+            <div class="body-text">
+                <h2>Music</h2>
+                <p>From a young age, I showed a inclination for music. I started piano lessons at age 4, and ever since music has been a huge part of my life. I quickly grew a taste for other genres, and have since created my own musical aesthetic, combining the subtle, dramatic and moving sound of classical music with the melodic catharsis and power of punk, rock and metal music.</p>
+                <br>
+                <p>I started singing in 2015, bass in 2019 and guitar in 2021. The saying is true - once you’ve learned piano, you can learn any instrument. My musical background has afforded me a lifelong hobby and occupation. For that, I’m incredibly fortunate and very grateful.</p>
+
+                <p>I started my band, Off By One, in 2021 when we covered Sum 41’s iconic ballad, Pieces. We established our distinct cozy indie sound and have expanded into countless genres since.</p>
+            </div>
+            <div class="tiles">
+                <!-- TODO Template this in PHP -->
+                <img class="tile" src="img/vlcsnap-2023-06-26-15h59m10s367.png" alt="Performing on ">
+                <img class="tile" src="img/Sean guitar Costell2.JPG" alt="">
+                <img class="tile" src="img/20221006_210810.jpg" alt="">
+                <img class="tile" src="img/306713162_666784465063738_147211751439699298_n-zWWFP9-A7-transformed.jpeg" alt="">
+                <img class="tile" src="img/307083797_2020219721511437_7094502600096021197_n.jpg" alt="">
+                <img class="tile" src="img/IMG_20230211_095604_980.jpg" alt="">
+            </div>
+        </section>
+        <section id="three-dee-art">
+            <div class="body-text">
+                <h2>3D Artwork</h2>
+                <p>While I've always loved visual arts, I’ve never been very good at drawing or painting. Although I do enjoy them, I’ve always struggled to express my ideas with those tools. The day I discovered the power in uniting my creative and technical inclinations to create 3D artwork, my life changed. I started learning 3D programming with ThreeJS and GLSL and translated that knowledge to create more interesting and innovative shaders. All my artwork is made with Blender. I hope one day to finish a video game of my own.</p>
+            </div>
+            <div class="tiles">
+                <img class="tile" src="img/ptown_gv003_1080 - frame at 0m2s.jpg" alt="">
+                <img class="tile" src="img/added_billboard.png" alt="">
+                <img class="tile" src="img/chess_render1.png" alt="">
+                <img class="tile" src="img/sciencefacility_render3.png" alt="">
+                <img class="tile" src="img/mydecember_render6.png" alt="">
+            </div>
+        </section>
+        <section id="web-dev">
+            <div class="body-text">
+                <h2>Web Development</h2>
+                <p>Web development (primarily front-end) is yet another area where I find enjoyment in applying both my technical and creative skills. The purely functional nature of UX design and the rigor of the design process are a potent framework to create websites that accomplish their task effectively. That task is simply to address these two questions: Why is the user here, and what do they want?</p>
+                <br>
+                <p>The advent of WebGL and other 3D technologies for the web has massively expanded the creative possibilities on the web, allowing full immersive experiences to be quickly and easily delivered to users through a web browser. </p>
+                <br>
+                <p>When I'm not working on extravagant creative projects, my focus is on creating extremely lean and optimized websites/microsites. You'll notice that this website is fully functional without any JavaScript, and just barely uses more memory than an empty new tab. Frameworks and templating engines have their uses, but too many developers focus on the tools first &horbar; and when all you have is a hammer, everything looks like a nail.</p>
+                <br>
+                <a href="https://ineptitech.com" target="_blank" rel="noopener noreferrer">
+                    <p>My company, through which I do most of my freelance work, can be found here.</p>
+                </a>
+            </div>
+            <div class="tiles">
+                <img class="tile" src="" alt="">
+            </div>
+        </section>
+        <section id="sysadmin">
+            <div class="body-text">
+                <h2>System Administration</h2>
+                <p>Like many techies, I learned about tech because I wanted to play (and eventually make) video games. My adventure with system administration started when I installed Ubuntu on my Chromebook so I could play video games with my friends and eventually started deploying and managing my own game servers. Fast-forward to today &horbar; I've developed a deep and thorough understanding of the Linux operating system and various distros, cloud environments, networking, security, and computer hardware.</p>
+            </div>
+            <div class="tiles">
+                <img class="tile" src="" alt="">
+            </div>
+        </section>
+    </main>
+    <footer>
+        <ul>
+            <li><a href="https://youtube.com/@seansamarov" target="_blank" rel="noopener noreferrer">YouTube</a></li>
+            <li><a href="https://instagram.com/seansamarov" target="_blank" rel="noopener noreferrer">Instagram</a></li>
+            <li><a href="https://open.spotify.com/artist/4LoTRR8Jqc9XfeIVDhMl4l" target="_blank" rel="noopener noreferrer">Spotify</a></li>
+            <li><a href="https://music.apple.com/us/artist/sean-samarov/1550251567" target="_blank" rel="noopener noreferrer">Apple Music</a></li>
+            <li><a href="https://tidal.com/browse/artist/23229323" target="_blank" rel="noopener noreferrer">Tidal</a></li>
+            <li><a href="https://github.com/seansamarov" target="_blank" rel="noopener noreferrer">Github</a></li>
+            <li><a href="#contact-form" rel="noopener noreferrer">Contact Me</a></li>
+            <li><a href="resume.pdf" rel="noopener noreferrer">Resume</a></li>
+        </ul>
+        <hr>
+        <p>&copy; Sean Samarov <script>document.write(new Date().getFullYear().toString())</script>. All Rights Reserved &HorizontalLine; even if you want my crappy design or code, you can't have it.</p>
+    </footer>
+    <%- OBF_MAILTO_FORM %>
+    <!-- <audio src="media/pop.mp3"></audio> -->
+</body>
+<script>
+    // TODO stop this from fucking up the layout
+    // const QUOTE = document.getElementById("quote");
+    // let i = 0;
+    // function quoteSelect() {QUOTE.innerText = QUOTES[i % QUOTES.length]; i++}
+    // quoteSelect();
+    // setInterval(quoteSelect, 10000);
+</script>
+<script>
+    const O = document.getElementById("pop");
+    O.addEventListener("animationend", () => {
+        // Play audio
+    })
+</script>
+<script>
+    document.querySelectorAll("img").forEach(img => {
+        img.addEventListener("click", () => {
+            img.classList.toggle("popup");
+        })
+    })
+</script>
+</html>