Mini-update 2024

components/Development/DevelopmentBody.js

@@ -1,7 +1,7 @@
 //Development page body
 
 import { Row, Col, Card } from 'react-bootstrap'
-import DesignMasonry from './DevelopmentMasonry' //Design masonry image component
+import DevelopmentMasonry from './DevelopmentMasonry' //Dev masonry image component
 
 const DevelopmentBody = () => (
 	<div className="pl-2 pr-2">
@@ -15,26 +15,32 @@ const DevelopmentBody = () => (
 					</p>
 					<p className="cardText mt-1 mb-2">
 					While Benjan was working as a junior graphic (web) designer 
-					for <a href='https://www.chamberlains.co.za/' target='_blank'>Chamberlain's</a> in 2019, his goal was to design 
-					pages for their new e-commerce site. <br></br>He soon realised that Magento's Page Builder wasn't going to cut it 
+					for <a href='https://www.chamberlains.co.za/' target='_blank'>Chamberlain's</a> in 2019, his goal was to design and build 
+				    pages for their new e-commerce site. <br></br>He soon realised that Magento's Page Builder wasn't going to cut it 
 					- he needed code (particularly CSS) to bring the static layout that 
-					the team agreed upon to fruition. <br></br>
+					the team agreed upon to life. <br></br>
 					This project piqued his curiosity, where he started to learn intermediate web code.
 				    </p>
 					<p className="cardText mt-1 mb-2">
 					Benjan enrolled for a Certificate in Full Stack Web Development at 
 					HyperionDev nearing the end of that year, where he had an immersive
-					learning experience with the MERN (Mongo, Express.js, React.js Node.js) stack.
+					learning experience with the MERN (Mongo, Express.js, React.js, Node.js) stack.
 					</p>
 					<p className="cardText mt-1 mb-2">
-					Since early 2020, Benjan has been working as a junior web developer at <a href='https://redseptember.co.za/' target='_blank'>Red September</a>, a full-service digital agency.
+					From 2020 to 2022, Benjan worked as a web developer at <a href='https://redseptember.co.za/' target='_blank'>Red September</a>, a full-service digital agency.<br></br>
+					Here he learned how to stick to tight deadlines and match the UX/UI designs to a T. 
+					</p>
+					<p className="cardText mt-1 mb-2">
+					In April 2022, Benjan joined the team at <a href='https://www.codehesion.co.za/' target='_blank'>Codehesion</a>, a software consulting company, as a software engineer.<br></br>
+					Benjan could realise his dream of coding things from scratch and getting closer to first principles.<br></br>
+					He specialises in React Native and is one of the go-to devs on the floor for when his fellow team members experience build issues.
 					</p>
 				</Card>
 			</Col>
 			<Col lg={12}>
 				<Card className="card p-5 mb-5">
 					<h5 className="cardHeading">Projects</h5>
-					<DesignMasonry/>
+					<DevelopmentMasonry/>
 				</Card>
 			</Col>
 		</Row>

components/Development/DevelopmentMasonry.js

@@ -1,6 +1,6 @@
 //Development page masonry image grid
 
-import { Row, Col, Image, Button } from 'react-bootstrap'
+import { Button, Col, Image, Row } from 'react-bootstrap'
 
 const DevelopmentMasonry = () => (
 	<div className="pl-3 pr-5">
@@ -17,9 +17,9 @@ const DevelopmentMasonry = () => (
 			<Image src="linctagon.jpg" className="showCase mt-4" alt="natura">
 			</Image>
 			</a>
-			<h5 className="subHeading mt-4 pt-2 mb-0">rePear</h5>
-			<a href='https://www.repear.ae/' target='_blank'>
-			<Image src="repear.jpg" className="showCase mt-4" alt="natura">
+			<h5 className="subHeading mt-4 pt-2 mb-0">Anina Deetlefs</h5>
+			<a href='https://aninadeetlefs.com/' target='_blank'>
+			<Image src="anina.png" className="showCase mt-4" alt="natura">
 			</Image>
 			</a>
 			</Col>

components/Header.js

@@ -37,7 +37,7 @@ const Header = () => (
 			<Link href="/contact">
 				<a style={linkStyle}>Contact</a>
 			</Link>
-			<Link href="/BenjanKnoetze_CV.pdf">
+			<Link href="/Benjan_CV.pdf">
 				<a className="download">CV</a>
 			</Link>
 			<style global jsx>{`

components/Home/HomeBody.js

@@ -135,8 +135,14 @@ const HomeBody = () => (
 				.two .card {
 					padding-top: 13rem !important; 
 				}
+				.two {
+					transform: translate(5%, -30%);
+				}
+				.three {
+					transform: translate(2%, -30%);
+				}
 				.three .card {
-					padding-top: 20rem;
+					padding-top: 10rem;
 				}
 			}
 			`}</style>

styles/globals.css

@@ -41,7 +41,7 @@ h2 {
 }
 
 .btn-primary:hover {
-  color: #FFF;
+  color: #fff;
   background: #000;
 }