Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Senior_Website/index.html
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
163 lines (149 sloc)
9.29 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <title>Michael Russell</title> | |
| <link rel="icon" type="image/png" href="favicon.png"> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | |
| <style> | |
| body {font-family: "Lato", sans-serif} | |
| .mySlides {display: none} | |
| </style> | |
| <body> | |
| <!-- Navbar --> | |
| <div class="w3-top"> | |
| <div class="w3-bar w3-red w3-card"> | |
| <a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a> | |
| <a href="#" class="w3-bar-item w3-button w3-padding-large">HOME</a> | |
| <a href="#band" class="w3-bar-item w3-button w3-padding-large w3-hide-small">PROJECTS</a> | |
| <a href="#tour" class="w3-bar-item w3-button w3-padding-large w3-hide-small">ABOUT</a> | |
| <a href="#contact" class="w3-bar-item w3-button w3-padding-large w3-hide-small">CONTACT</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Navbar on small screens (remove the onclick attribute if you want the navbar to always show on top of the content when clicking on the links) --> | |
| <div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px"> | |
| <a href="#band" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">PROJECTS</a> | |
| <a href="#tour" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">ABOUT</a> | |
| <a href="#contact" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">CONTACT</a> | |
| </div> | |
| <!-- Page content --> | |
| <div class="w3-content" style="max-width:2000px;margin-top:46px"> | |
| <!-- Automatic Slideshow Images --> | |
| <div class="mySlides w3-display-container w3-center"> | |
| <img src="russell_michael_image01.png" style="width:100%"> | |
| <div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small"> | |
| </div> | |
| </div> | |
| <div class="mySlides w3-display-container w3-center"> | |
| <img src="russell_michael_image02.png" style="width:100%"> | |
| <div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small"> | |
| </div> | |
| </div> | |
| <div class="mySlides w3-display-container w3-center"> | |
| <img src="russell_michael_image03.png" style="width:100%"> | |
| <div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small"> | |
| </div> | |
| </div> | |
| <!-- The Band Section --> | |
| <div class="w3-container w3-content w3-center w3-padding-64" style="max-width:800px" id="band"> | |
| <h2 class="w3-wide">MY 2020 PROCESS BOOK</h2> | |
| <p class="w3-opacity"><i>DMD BFA SHOW 2021</i></p> | |
| <p class="w3-justify">Making books is a passion I discovered in high school when I created an issue of our school’s literary arts magazine. Since then, the breadth of my creative outlets grew to involve 3D modeling, digital art, printmaking, and more. For this project I wanted to synthesize my many different interests into one large scale project involving many different mediums, eventually culminating in a book. I got off to a rough start with this though; my transition to online learning was claustrophobic when I counted on the adrenaline of running across campus to get to classes, the xerox machine, the dining hall, anything. Sitting down puts me in a do-nothing headspace which exacerbated the slowness with which I completed coursework, and I couldn’t shake all these doubts forming in my mind. In going through this struggle, I decided to use these events as fuel for the content of my book. The images connect my internal monologue to the tangible events unfolding in front of me, as well as the state of the places I spent significant time in. The book is divided into 12 months which serve as chapters to present the viewer with a snapshot of myself at different points in time within the last year. My goal is to overwhelm the book with symbols, messages, and dates (ACE chapter titles stand for "After Common Era") to have the reader interpret the content according to their own experiences. Hopefully, this will mean readers have a much different perspective of the content than anyone else, as apposed to traditional books which make efforts to communicate specific concepts. As I often get misunderstood, I chose to dig deeper into my feelings rather than adjust them in order for it to make sense for everyone, and have it just reflect my own way of communicating what I see.</p> | |
| <a href="https://drive.google.com/file/d/1ZUQMAhmnjugCePp-Yy5rHAbzROFrBoI1/view?usp=sharing">Book Pages</a><br> | |
| <a href="https://github.uconn.edu/pages/mfr15102/Process_Book_Display/">3D Model Display</a><br> | |
| <div class="w3-row w3-padding-32"> | |
| <div class="w3-third"> | |
| <img src="Hardcover.png" class="w3-round w3-margin-bottom" alt="Random Name" style="width:60%"> | |
| </div> | |
| <div class="w3-third"> | |
| <img src="ADHD-Comic_Final.png" class="w3-round w3-margin-bottom" alt="Random Name" style="width:60%"> | |
| </div> | |
| <div class="w3-third"> | |
| <img src="Unfolded_Zine.png" class="w3-round" alt="Random Name" style="width:60%"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- The Tour Section --> | |
| <div class="w3-black" id="tour"> | |
| <div class="w3-container w3-content w3-padding-64" style="max-width:800px"> | |
| <h2 class="w3-wide w3-center">ABOUT THE ARTIST</h2> | |
| <p class="w3-justify">Michael Russell was born in New London, Connecticut and raised along the shoreline of Long Island Sound. An energetic kid with a wild imagination, Michael showed signs of creativity in playing as much as he did in projects. Expressing himself as a multipotentialite, Michael had many different hobbies, interests, and sides of his personality. This wasn't ideal for his parents when he was described as an “Angel” by teachers and other adults, meanwhile at home he was a bit of a devil. In High School, Michael increasingly began to focus on artistic pursuits, deciding to apply for the School of Fine Arts at the University of Connecticut. Now as an undergraduate student, Michael is pursuing a BFA in Digital Media and Design and a minor in studio art.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Ticket Modal --> | |
| <div id="ticketModal" class="w3-modal"> | |
| <div class="w3-modal-content w3-animate-top w3-card-4"> | |
| <header class="w3-container w3-teal w3-center w3-padding-32"> | |
| <span onclick="document.getElementById('ticketModal').style.display='none'" | |
| class="w3-button w3-teal w3-xlarge w3-display-topright">×</span> | |
| <h2 class="w3-wide"><i class="fa fa-suitcase w3-margin-right"></i>Tickets</h2> | |
| </header> | |
| <div class="w3-container"> | |
| <p><label><i class="fa fa-shopping-cart"></i> Tickets, $15 per person</label></p> | |
| <input class="w3-input w3-border" type="text" placeholder="How many?"> | |
| <p><label><i class="fa fa-user"></i> Send To</label></p> | |
| <input class="w3-input w3-border" type="text" placeholder="Enter email"> | |
| <button class="w3-button w3-block w3-teal w3-padding-16 w3-section w3-right">PAY <i class="fa fa-check"></i></button> | |
| <button class="w3-button w3-red w3-section" onclick="document.getElementById('ticketModal').style.display='none'">Close <i class="fa fa-remove"></i></button> | |
| <p class="w3-right">Need <a href="#" class="w3-text-blue">help?</a></p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- The Contact Section --> | |
| <div class="w3-container w3-content w3-padding-64" style="max-width:800px" id="contact"> | |
| <h2 class="w3-wide w3-center">CONTACT</h2> | |
| <div class="w3-row w3-padding-32"> | |
| <div class="w3-col m6 w3-large w3-margin-bottom"> | |
| <i class="fa fa-map-marker" style="width:30px"></i> Connecticut, US<br> | |
| <i class="fa fa-envelope" style="width:30px"> </i> Email: mfrussell21@gmail.com<br> | |
| <i class="fa fa-instagram" style="width:30px"></i> <a href="https://www.instagram.com/mike.f.russell/">Instagram</a><br> | |
| <i class="fa fa-linkedin" style="width:30px"></i> <a href="https://www.linkedin.com/in/michael-f-russell/">LinkedIn</a><br> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- End Page Content --> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="w3-container w3-padding-64 w3-center w3-opacity w3-light-grey w3-xlarge"> | |
| <p>© Michael Russell 2021</p> | |
| </footer> | |
| <script> | |
| // Automatic Slideshow - change image every 4 seconds | |
| var myIndex = 0; | |
| carousel(); | |
| function carousel() { | |
| var i; | |
| var x = document.getElementsByClassName("mySlides"); | |
| for (i = 0; i < x.length; i++) { | |
| x[i].style.display = "none"; | |
| } | |
| myIndex++; | |
| if (myIndex > x.length) {myIndex = 1} | |
| x[myIndex-1].style.display = "block"; | |
| setTimeout(carousel, 4000); | |
| } | |
| // Used to toggle the menu on small screens when clicking on the menu button | |
| function myFunction() { | |
| var x = document.getElementById("navDemo"); | |
| if (x.className.indexOf("w3-show") == -1) { | |
| x.className += " w3-show"; | |
| } else { | |
| x.className = x.className.replace(" w3-show", ""); | |
| } | |
| } | |
| // When the user clicks anywhere outside of the modal, close it | |
| var modal = document.getElementById('ticketModal'); | |
| window.onclick = function(event) { | |
| if (event.target == modal) { | |
| modal.style.display = "none"; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |