I Didn’t Realize

Tools used

• HTML • CSS • Javascript • jQuery • Bootstrap • Illustrator • Gimp

My contribution

 Graphic Design

 Development


I designed this site from scratch with HTML, CSS and Javascript. The content is composed of original poems, short stories, and music. As well as demonstrating my web skills, this site demonstrates my knack for creativity. I am not only a designer/developer; I am also an artist. The inspiration of my poetry comes from events in my life that the poems relate directly back to. My short story writing is abstract, and often based off of dreams. One of my works was even published.

My vision for this site is a place to accumulate my non-commercial works. Currently I am hosting poems, short stories, and music. Next, I would like to add a blog (for discussion on tech topics), and a page for my collages (multi-page gift cards, as well as large, on-wall displays).

Visit Site »

Highlighted design elements

Site logo

I made this logo using free-hand illustration and Adobe Illustrator. The logo is both a '?' and an 'i' which represents the act of questioning if you exist. Whenever somebody sees my site, my first response is to ask 'who, me?'. I made this site to leave a semi-permanent record of myself through art.


Footer Image

I drew this free hand first, then rasterized it in photoshop and add some color filters. The philosophical theme of the website is continued with a balance between perception and reality.


Highlighted Code

Text/Image Slider

Did I realize

I did

I Didn't realize?

I made this text/image slider with javascript and jQuery. It works by loading in the details for a full slide, so each line can be individually faded in. Then, the full slide fades out and the data for the next slide is loaded in.


HTML: Slider container

<!-- Rotating text and image box-->
<div class="rotatingTextContainerDiv">
	<div id="rotatingTextDiv">
		<div id="rotatingTextLine">
		
			<div id="rotatingTextHeader">
			</div>
			<div id="rotatingTextLine1">
				<h2>Did I realize </h2>
			</div>
			<div id="rotatingTextLine2">
				<h3>I did</h3>
			</div>
			<div id="rotatingTextLine3">
				<h3>I Didn't realize?</h3>
			</div>
			
		</div>
	</div>
</div>

jQuery: slide data

//Rotating text and image box properties

$('#rotatingTextLine1').css("opacity", "0");
$('#rotatingTextLine2').css("opacity", "0");
$('#rotatingTextLine3').css("opacity", "0");
$('#rotatingTextLine4').css("opacity", "0");

//Load info for first Slide
function textSwapper1Data (){
	$(".rotatingTextContainerDiv").removeClass( "pull-left" ).addClass( "pull-right" );
	$("#rotatingTextDiv").css('background-position', 'right bottom');
	$("#rotatingTextDiv").css('text-align', 'left');
	$("#rotatingTextLine").css('float','left');
	$("#rotatingTextHeader").css('color','#6d0101');
	$("#rotatingTextLine1").html("<span class='textSwapperText'>Didn't I realize</span>");
	$("#rotatingTextLine2").html("<span class='textSwapperText'>I did</span>");
	$("#rotatingTextLine3").html("<span class='textSwapperText'>Ididntrealize?</span>");
	$("#rotatingTextDiv").css("background-image", "url('pictures/pensive.png')");
	$("#rotatingTextDiv").animate({opacity: "1"},1500);

}
//Load info for second Slide
function textSwapper2Data (){
	$(".rotatingTextContainerDiv").removeClass( "pull-right" ).addClass( "pull-left" );
	$("#rotatingTextDiv").css("background-image", "url('pictures/pensive2.png')");
	$("#rotatingTextDiv").css('background-position', '-1px -1px');
	$("#rotatingTextDiv").css('text-align', 'right');
	$("#rotatingTextLine").css('float','right');
	$("#rotatingTextHeader").css('padding','0px;');	
	$("#rotatingTextLine1").html("<span class='textSwapperText'>I did</span>");
	$("#rotatingTextLine2").html("<span class='textSwapperText'>ididntrealize</span>");
	$("#rotatingTextLine3").html("<span class='textSwapperText'>Didn't I realize?</span>");			

}

jQuery: action timer

//Fade in elements for slide one
function runTextSwapper1 (){
	textSwapper1Data();
	
		$('#rotatingTextLine1').animate({opacity: "1"}, 1000);
		
		setTimeout(function(){
			$('#rotatingTextLine2').animate({opacity: "1"}, 2000);
			
		},1000);
		setTimeout(function(){
			$('#rotatingTextLine3').animate({opacity: "1"}, 1500);
			
		},3000);
		setTimeout(function(){
			
	//call slide 2 function
			runTextSwapper2();
		
		}, 1500);
}
//fade out slide 1 and fade in slide 2
function runTextSwapper2(){
  setTimeout(function(){
	$('#rotatingTextLine1').animate({opacity: "0"}, 1000);
	$('#rotatingTextLine2').animate({opacity: "0"}, 1000);
	$('#rotatingTextLine3').animate({opacity: "0"}, 1000);
	$("#rotatingTextDiv").animate({opacity: "0"},1000);
		
	setTimeout(function(){

	  $("#rotatingTextDiv").css('background-image','url("pictures/pensive2.png")');
	  $("#rotatingTextDiv").animate({opacity: "1"},1500);
	}, 1000);

	  setTimeout(function(){
		textSwapper2Data();
			
		  setTimeout(function(){
			$('#rotatingTextLine1').animate({opacity: "1"}, 1500);
			
			setTimeout(function(){
				$('#rotatingTextLine2').animate({opacity: "1"}, 1500);
			}, 500);
			
			setTimeout(function(){
				$('#rotatingTextLine3').animate({opacity: "1"}, 1500);
			}, 3500);
		  }, 1500);
			
		setTimeout(function(){
		  $('#rotatingTextLine1').animate({opacity: "0"}, 1000);
		  $('#rotatingTextLine2').animate({opacity: "0"}, 1000);
		  $('#rotatingTextLine3').animate({opacity: "0"}, 1000);
		  $("#rotatingTextDiv").animate({opacity: "0"},500);					
		
		  setTimeout(function(){
			runTextSwapper1();
		  },1000);
	  }, 11500);
	
    },1000);

  },7000);
}
//initiate text swapper
runTextSwapper1();