Hello All. I’ve now spent too much time on the Portfolio project; probably partly narcissism. The profile picks are hard to see for a reason. Please let me know what you think. Had a really hard time getting the responsive grid to give me margins and centering that I liked. If anyone can see a way to clean up the code, I’d like to hear it. There may be a couple dead artifacts in there from the build.
Cheers,
L
See the Pen PortfolioProject.2 by Leith Campbell (@leith00000) on CodePen.
First of all, it looks too grey. Try to add some colour to your footer. Secondly, on each of your cards, you add a width of 30rem, you shouldn’t do that since it doesn’t work well when scaling browser. I mean try to look at your projects on 600px width browser (it cuts off text). Instead, you could use max-width: 30rem or don’t change the width at all and put those cards in a container.
Thanks, done and done. Any suggestions on how to adjust the big container so everything doesn’t hug the left side?
Here is what I came up with
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card" style="max-width: 30rem;">
<img class="card-img-top" src="https://lh5.googleusercontent.com/SsgGBGNt86laCYoYBgCDDx1atidYqHu6VXwOkzH04aXU2RoplGurpAnZeNd1" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Humidity</h4>
<p class="card-text">Humidity is an aural event existing somewhere in between music and architecture. It is architectural in the sense that it is not to be experienced temporally, but spatially. In the usual experience of a musical work, the listener sits in one place
and the music passes linearly, it has a beginning, an ending, and some form of narrative in between. This installation is not to be passively experienced, but inhabited, explored, observed from multiple angles and perspectives.</p>
<a href="https://www.youtube.com/embed/oEJxs9pEhiE" target="_blank"><i class="fa fa-youtube" aria-hidden="true"> Humidity </i></a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card" style="max-width: 30rem;">
<img class="card-img-top" src="http://dlectricity.com/wp-content/forum/uploads/apetechnology-2.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">The Monkey God's Great Leap</h4>
<p class="card-text">The Shadows of Slendrotron (The Monkey God’s Great Leap) is a robotic theatre production inspired by the aesthetic of traditional Javanese shadow puppetry and gamelan orchestra. The libretto is adapted from the Hindu epic the Ramayana and centers
on the adventures of the demi-god Hanuman, who aids Prince Rama in locating his wife, who was kidnapped by Ravana, a demon king. The production is a complex combination of automation, puppeteering and music, with robots acting out a pantomime of
the story spun by a narrator, all accompanied by orchestration played by a electro-mechanical gong and drum orchestra. <a href="http://apetechnology.com/Apetechnology.html"><i>With Apetechnology</i></a></p>
<a href="http://www.detroitnews.com/videos/news/2017/09/20/dlectricity-project-apetechnology-and-friends/105835910/" target="_blank">Detroit News Video</a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card" style="max-width: 30rem;">
<img class="card-img-top" src="http://res.cloudinary.com/dqytg79jk/image/upload/v1508765541/TO.SS_nhh0c5.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Transparency/Opacity (T/O)</h4>
<p class="card-text">Transparency/Opacity is a work of interactive art using the mediums of sound, light and video to create an immersive space that evokes a dreamlike state. It is a synthesis of two themes; the first being the idea of the hidden mediation of the human
computer interface as discussed in the paper Transforming Mirrors by David Rokeby; the second being the surreal feeling evoked by the memories of dreams as personally exemplified by the statement “the memory of an echo from a dream,” a thought
I’ve meditated on for many years.</p>
<a href="https://youtu.be/E14XF_B0i6U" target="_blank"><i class="fa fa-youtube" aria-hidden="true">T/O</i></a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card" style="max-width: 30rem;">
<img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSZsAjCB8DTMbLIWMM3639PqegZWqVzuhBYVXN4pbXXl2s0xpT6" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Slendrotron</h4>
<p class="card-text">A Javanese Gamelan inspired robotic percussion orchestra executing a self generating algorithmic composition in Pure Data. Responsibilities included fabrication of the instruments, including a tuned metallophone from first principles, and design
of the algorithm.<a href="http://apetechnology.com/Apetechnology.html"><i>With Apetechnology</i></a></p>
<a href="https://www.youtube.com/watch?v=2HktGDHg3W8" target="_blank"><i class="fa fa-youtube" aria-hidden="true">Slendrotron @ Public Pool</i></a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card" style="max-width: 30rem;">
<img class="card-img-top" src="http://res.cloudinary.com/dqytg79jk/image/upload/bo_1px_solid_rgb:000,e_accelerate:0/v1508766943/img_0604_ki0umd.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">The Bucky</h4>
<p class="card-text">The Bucky is a grip sized interface that can be used either free floating or in a desktop environment. With multiple simultaneous axis of continuous data it is suited for a wide range of musical applications. </p>
<a href="https://leithcampbell.com/the-bucky/" target="_blank">White Paper</a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card" style="max-width: 30rem;">
<img class="card-img-top" src="http://res.cloudinary.com/dqytg79jk/image/upload/v1508767302/catharsis_byfinj.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Toward Catharsis</h4>
<p class="card-text">The description of an interactive audio-visual composition that seeks to engage its users in an act of musical creation so engrossing that it resembles the peak experience of a trained musician performing at the top level of their ability. This
composition uses visual cues as a substitution for the physical feedback that a musician receives from their instrument. This paper also describes the architecture involved in creating a rudimentary algorithmic composition in MaxMSP.</p>
<a href="https://www.youtube.com/watch?v=tiMWzTt3mOQ" target="_blank"><i class="fa fa-youtube" aria-hidden="true"> Toward Catharsis</i></a>
</div>
</div>
</div>
</div>
</div>
However your website uses both bootstrap 3 and 4 therefore the code above will not work well on smaller devices (unless you get rid of bootstrap 3).
Thanks!
Turned out everything got better when I turned off BS3; the reason I had it on was that the nav-bar wasn’t being ‘sticky’ with BS4. After I turned off BS3 I changed the modifier in class=navbar from navbar-fixed-top to just fixed-top and that solved the problem. Syntax issue between 3 and 4?
In BS4, the columns filled the page, then it was just a matter of adjusting max-width to get it to look right. I tried your container solution, and while it worked, I like the dynamic ‘masonry’ look of the cards-columns. Your solution was enlightening in it showed me that you can put in different breakpoints for the columns for different size screens in the same element. Cool!
I’m still wrestling mightily with syntax; the one that I finally figured out was that text-center applies to images as well (as in line 40 and 43 of my profile pics).
On to JavaScript, which was why I started fcc in the first place.
Cheers