Interactive Design:Building CV

Links To My CV:https://raymondchin-exercise3.netlify.app/

Crafting My CV – A Journey in Web Design

Creating a compelling CV is a crucial step in presenting your skills and experiences, and for me, this project was more than just building a resume—it was a chance to showcase my design skills, creativity, and attention to detail. Here’s how I embarked on this journey of crafting my CV as a web-based design.

Starting with the Basics

I began by brainstorming the structure and key elements my CV should include. I wanted it to be visually appealing yet professional, reflecting my expertise as a Spatial Designer. The foundational sections included:

Profile Information: A concise summary of who I am and what I do.
Experience: Highlighting my participation in projects like AR Fest KL and XR Jam.
Education: Tracing my academic journey, from Chung Hua High School to my degree at Taylor’s University.
Skills and Software Proficiency: Showcasing my familiarity with tools like Adobe Creative Suite, Blender, and XD.
Languages and Interests: Adding a personal touch with my linguistic capabilities and hobbies.

Designing the Layout

I opted for a modern, clean design that emphasized readability while allowing my personality to shine through. The CV is structured into two sections:

A Sidebar: Colored in subtle grays and whites, this section holds contact information and my profile image.
The Main Content: Dedicated to experience, education, skills, and interests, ensuring a clear flow of information.

The Technical Build

I chose HTML and CSS to build the CV, focusing on a responsive layout that would display well across devices. Here's a quick breakdown of the techniques I used:

CSS Flexbox: For creating a structured layout that adapts to different screen sizes.
Z-Index Layering: To layer background elements like light orange and footer designs, giving depth to the layout.
Custom Fonts and Icons: To maintain a professional yet creative aesthetic, I included icons for contact details and software logos.
Hover Effects: Making links and interactive elements more engaging without overwhelming the design.

Challenges and Learning

One of the main challenges was ensuring the layout remained cohesive across varying screen resolutions. Fine-tuning the alignment of elements like the sidebar and text boxes required extra attention. Through this, I learned to:

Optimize designs for different browsers.
Maintain clean, readable code to make future updates seamless.
Balance aesthetic appeal with functionality.

Code Used:

<!DOCTYPE html>

<head>

<title>CV - RAYMOND CHIN</title>

<style>

* {

margin: 0px;

padding: 0px;

box-sizing: border-box;

font-family: Arial, sans-serif;

}

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background-color: #f3f3f3;

margin: 0;

padding: 20px;

}

.container {

display: flex;

width: 600px;

height: 848px;

background-color: white;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

overflow: hidden;

position: relative;

}

.sidebar {

width: 50%;

height: 55%;

position: absolute;

top: 0;

left: 0;

background-color: #C2C2C2;

color: white;

display: flex;

flex-direction: column;

align-items: center;

padding: 40px 20px;

}

.lightorange {

position: absolute;

bottom:286px;

left: 300px;

width: 50%; /* Full width of the container */

height: 95px; /* Adjust height as needed */

background-color: #CDCDCD; /* Same orange color as sidebar */

z-index: 0; /* Ensure it stays behind other content */

}

.lightorange2 {

position: absolute;

bottom:86px;

left: 0px;

width: 50%; /* Full width of the container */

height: 200px; /* Adjust height as needed */

background-color: #CDCDCD;

z-index: 0; /* Ensure it stays behind other content */

}

.footer-background {

position: absolute;

bottom: 0;

left: 0;

width: 100%; /* Full width of the container */

height: 90px; /* Adjust height as needed */

background-color: #8F8F8F;

z-index: 0; /* Ensure it stays behind other content */

}

.content {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

display: flex;

flex-direction: column;

align-items: center;

padding: 40px 20px;

}

.title-container {

display: flex;

flex-direction: column;

align-items: center;

}

.title-name {

transform: rotate(270deg) translate(90px, -100px);

transform-origin: left bottom;

display: inline-block;

}

.title-name2 {

transform: rotate(270deg) translate(140px, -100px);

transform-origin: left bottom;

display: inline-block;

}

.title-image {

width: 230px;

height: 300px;

transform: rotate(0deg) translate(-10px, 0px);

margin-left: 10px;

}

.contact-info {

text-align: left;

margin-top: -30px;

margin-left: -280px;

}

.profileinfo {

text-align: left;

margin-top: -95px;

margin-left: 300px;

}

.contact-item {

display: flex;

align-items: center;

margin: 5px 0;

}

.icon {

width: 16px;

height: 16px;

margin-right: 8px;

}

.contact-info p {

margin: 0;

font-size: 0.9em;

}

.experience {

text-align: left;

margin-top: 20px;

padding-bottom: 20px;

margin-left: -375px;

}

.experience h3 {

margin-bottom: 10px;

}

.education {

text-align: left;

margin-top: 0px;

padding-bottom: 20px;

margin-left: -290px;

}

.education h3 {

margin-bottom: 10px;

}

.education p {

margin-bottom: 10px;

}

.education li {

margin-left: 15px;

}

.software {

text-align: left;

margin-top: -285px;

padding-bottom: 20px;

margin-right: -230px;

}

.software h3 {

margin-bottom: 10px;

}

.software-icons {

display: flex;

gap: 8px;

}

.software-icon {

width: 28px;

height: 28px;

vertical-align: middle;

}

.language {

text-align: left;

margin-top: 10px;

padding-bottom: 20px;

margin-right: -245px;

}

.language h3 {

margin-bottom: 10px;

}

.language-icon {

width: 190px;

height: 28px;

vertical-align: middle;

}

.interest {

text-align: center;

padding-bottom: -20px;

position: absolute;

bottom: 25px; /* Adjusts distance from the bottom of the container */

width: 100%;

}

.interest h3{

margin-bottom: 10px;

}

</style>

</head>

<body>

<h1 class="title-name">RAYMOND CHIN</h1>

<h2 class="title-name2">Spatial Designer</h2>

</div>

<p>raymondchin04@gmail.com</p>

</div>

</div>

www.raymondchin.com

</a>

</div>

<h4>Profile</h4>

<p>A Spatial Designer specializing in interactive and immersive experiences, dedicated to merging digital creativity with real-world impact.</p>

</div>

<h3>EXPERIENCE</h3>

<p>Participants of AR Fest KL</p>

<p>Participants of XR JAM</p>

</div>

<ul>

<h3>EDUCATION</h3>

<li>2021 Chung Hua High School</li>

<p>Science Stream</p>

<li>2022-2023 Asia Pacific University</li>

<p>Bachelor's of Multimedia Technology</p>

<li>2023-2024 Taylor's University</li>

<p>Bachelor's of Interactive Spatial Design</p>

</ul>

</div>

<h3>SOFTWARE</h3>

</div>

<h3>LANGUAGE</h3>

<ul>

<li>Chinese</li>

<li>English</li>

<li>Malay</li>

</ul>

</div>

<h3>INTEREST</h3>

<ul>Basketball . Hiking . Drawing . Gaming</ul>

</div>

</body>

</html>

Raymond's Blog

Search This Blog