JSFiddle - React, Tailwind, and code Playground
HTML
<section id="about">
<div id="about_wrap">
<div id="photo"><img src="https://goo.gl/1j5Of2" /></div>
<p>I am a student at SUNY Cobleskill, studying Information Technology. I will be transferring to a Computer Science program in Fall 2017. Most likely at SUNY Polytechnic Institute or UAlbany. My college experience has been far unlock the average student's.
I attended my first 3 semesters studying graphic design, I was sure it was what I wanted to do with my life. Then, I took a web design class and found my passion for coding. Immediately I switched my major to Information Technology to try to get more
coding classes on my schedule. I also began freelancing in web design. In my second web design class I noticed that I much preferred telling the computer how to perform a specific task, instead of telling it where to place things on a website. I began
studying several programming languages on my own time and took a liking to Javascript and Python. I then took a special project class with one of the IT professors for an advanced python course. In the class I created a voting system for a fire department.
It didn't end up being as great as I hoped because I was trying to teach myself SQL and implement it into the python code at the same time. In the end, I created the application without any SQL and used different methods to create a secure system.
Coding has always been something I wanted to do, I just never found the proper way to learn it until I was in the middle of my college degree. My love of code stemmed from my love of gaming, which started at a very early age. I knew that programming
was what made games run and wanted to be able to make my own games (plus, what kid doesn't want to learn how to hack. That may have also played a part). Now I see my life going one of two ways. One, I work for a gaming company, creating the programs
for the games that they release and any other programming needs they may have until I eventually...
CSS
#about {
height: 100vh;
width: 100vw;
overflow: hidden;
}
#about_wrap {
height: 70%;
width: 80%;
position: relative;
left: 10%;
top: 20%;
}
#photo {
float: left;
shape-outside: circle(50%);
shape-margin: 15px;
width: 30vw;
height: 30vw;
margin-left: 30%;
margin-top: 10%;
}
#photo img {
height: 100%;
width: 100%;
border-radius: 50%;
}