diff --git a/assets/2024-03-bc/profile-photos/chloe.jpg b/assets/2024-03-bc/profile-photos/chloe.jpg new file mode 100644 index 0000000..2577847 Binary files /dev/null and b/assets/2024-03-bc/profile-photos/chloe.jpg differ diff --git a/bootcamps/foundations/2024-03/2024-03-f.json b/bootcamps/foundations/2024-03/2024-03-f.json index 6e350b6..9ce354f 100644 --- a/bootcamps/foundations/2024-03/2024-03-f.json +++ b/bootcamps/foundations/2024-03/2024-03-f.json @@ -17,6 +17,23 @@ "Node", "Django" ] + }, + { + "name": "Chloe", + "role": "Web Engineer", + "github": "https://github.com/ChloeSAPage", + "linkedin": "https://www.linkedin.com/in/chloesapage", + "photo": "/assets/2024-03-bc/profile-photos/chloe.jpg", + "description": "After completing the March 2024 bootcamp, I joined Jagex as a Junior Web Engineer. The bootcamp provided me with the technical skills and confidence to succeed in my new role, and I'm excited to continue growing as a developer!", + "portfolio_link": "https://chloesapage.dev/", + "technologies": [ + "TypeScript", + "React", + "SQL", + "Java", + "Spring Boot", + "Python" + ] } ] } diff --git a/css/alumni/2024-03-f.css b/css/alumni/2024-03-f.css index fe12124..e41efce 100644 --- a/css/alumni/2024-03-f.css +++ b/css/alumni/2024-03-f.css @@ -100,3 +100,36 @@ text-transform: none; border-radius: 0; } + +.card--chloe { + /* Taken from codepen: https://codepen.io/t_afif/pen/qBvXXBe */ + + --s: 10px; /* control the size of the wave */ + --w: 500px; /* preferred image width */ + + width: round(var(--w), 4 * var(--s)); + aspect-ratio: 1; + padding: var(--s); + border: var(--s) solid #0000; + box-sizing: border-box; + background: #fdc435; + border-radius: calc(3.5 * var(--s)); + mask: + radial-gradient(calc(sqrt(2) * var(--s)), #000 calc(100% - 1px), #0000), + conic-gradient(#000 0 0) content-box, + radial-gradient( + calc(sqrt(2) * var(--s)), + #0000 100%, + #000 calc(100% + 1px) + ) + var(--s) var(--s) padding-box; + mask-size: calc(var(--s) * 4) calc(var(--s) * 4); + + .card__photo { + width: 150px; + } +} + +.tech--chloe { + border-radius: 20px; +}