What software I knowledge
HTML
Proficient in HTML, capable of building well-structured web pages.
CSS
Skilled in creating visually appealing page styles and layouts.
Graphic
Highly skilled and experienced in graphic design, adept at conceptualizing and crafting visually compelling graphics that captivate audiences and elevate brand identity.
User Interface
Proficient in Adobe Illustrator and Figma for crafting user interfaces, adept at leveraging its tools and functionalities to create visually appealing and user-centric designs that elevate the overall user experience.
Figma
Proficient in Figma, a collaborative design tool, for creating and prototyping user interfaces with an emphasis on collaborative design processes.
Illustrator
I have gained one year of solid experience in Adobe Illustrator, developing a proficient skill set in creating intricate vector graphics.
Photoshop
Proficient in Adobe Photoshop, with expertise in photo editing and adeptness in graphic manipulation.
Premiere Pro
Experienced and skilled in video editing using Adobe Premiere Pro, showcasing a deep proficiency in leveraging this software to craft quality, professional videos.
After Effect
Proficient in Adobe After Effects, adeptly creating captivating motion graphics and seamless visual effects.
Dreamweaver
Capable in utilizing Dreamweaver for proficient web development and design.
Banner
Proficient in crafting captivating banner designs, I've honed my skills by creating a substantial portfolio of over 500 designs for a previous company. Unfortunately, due to contractual obligations, these designs cannot be publicly showcased. Nonetheless, this extensive experience has equipped me with a keen eye for creating visually striking banners tailored to specific audiences and objectives.
WordPress
Knowledgeable in WordPress, able to develop and manage websites.
Poster
Proficient in creating visually compelling posters, specializing in designs for festivals, ,promotion, notices, and recruitment purposes.
Microsoft Word
Proficient in Microsoft Word, skilled in creating and formatting documents to deliver professional and polished reports, conclusions, and detailed descriptions.
Microsoft Excel
Skilled in proficient data analysis and organization with Microsoft Excel, encompassing the use of formulas, charts, and data visualization. This expertise aids in recording production processes, managing controls, tracking deadlines, overseeing overlays, completion, and conducting reviews. Additionally, possess fundamental accounting skills from prior administrative roles.
Power Point
Proficient in crafting dynamic and engaging presentations with PowerPoint, tailored for showcasing artwork, production, and effectively communicating ideas. Skilled in adding visual cues like arrows or circles to highlight problem areas, ensuring clarity and ease of understanding for colleagues.
Hi, I’m Shuqi
My name is Pee Shuqi. Since I was a child, I have been fond of weird and wonderful things. I love to paint and draw in unconventional ways and love to get in touch with all kinds of unique and creative hobbies, describing and creating for family and friends. In 2020, I decided to embark on the road of media and explore a new generation of painting and effect technology, opening my eyes to another world of creation. What I particularly like is to use Photoshop, Illustrator and Adobe Creative Suite to bring designs to life. My name is Pee Shuqi. Since I was a child, I have been fond of weird and wonderful things. I love to paint and draw in unconventional ways and love to get in touch with all kinds of unique and creative hobbies, describing and creating for family and friends. In 2020, I decided to embark on the road of media and explore a new generation of painting and effect technology, opening my eyes to another world of creation. What I particularly like is to use Photoshop, Illustrator and Adobe Creative Suite to bring designs to life.
How I use Adobe and Microsoft
Adobe Illustrator
1. For build shape, image trace, control image size, drawing some strange shape with pen tool.
2. Created production design will use most of the tools, I will always open most of the tool window examples: transform, gradient, appearance, artboard, links, align, pathfinder, layer, libraries, color etc.
3. Color guide for a design will reference the color adobe or anything that can send me a color message.
4. For a design needs to be imported from an image but needs to change to another shape, create a shape then select an object and make a clipping mask.
5. Designing effect with drop shadow, creating outlines, color, blur, artistic etc for a production.
6. The file exporting depends on the project needed, for example jpg/ jpeg/ png/ pdf, if the project needs the original ai file, then it needs to be packaged into a set file.
Adobe Photoshop
1. Photoshop most I use for drawing, cutting or editing images to a transparent image for Illustrator use and anything that needs a transparent image.
2. Most of the tools are a bit the same with Illustrator like the effect of drop shadow.
3. Many effects will be created from the down sides of layers’ windows.
4. Using pen tool, magic selection tool, lasso tool to cut a strange line or shape or background to transparent.
5. GIF design created from AI file export to the PSD file and open timeline window, set change page time and control the moving sequence. But it is best if I use AE to create a GIF design, although I never try, but I have seen other great work GIF designs by After Effect.
6. Photoshop I mostly use for creating material and using AI to design because Illustrator can create many artboards and design together at the same time. For most of my project I also get many pages and options needed.
Adobe After Effect
1. Using composition window to import production material or download a template and use timeline to control or edit their position, scale, rotation and opacity.
2. Character window used for edit content, front, color, front leading, size and tracking. Set up content aligned with the paragraph window.
3. Created a design from paragraph story to storyboard, and the last will complete the video with After Effect.
4. Creative advertising video design combined with jumping or pop out design and music build a video.
5. Video will finish export via Adobe Media Encoder. Depending on my experience, my past company only used MP4 (H.264) files for advertising use.
Adobe Premiere Pro
1. Import all the video needed to edit or combine to the project panel. Video can be from video material or designed by After Effect.
2. Pull in video to the timeline from the project panel, for cutting and combining video. Sequence order of video set.
3. Add the effect from the effect window to the video on the timeline example dip to black and etc.
4. Set up music volume and cut music, sometimes I will combine voice and music together and be video in a new feel.
5. Premiere Pro will just export from PR, no need to use Media Encoder.
Adobe Dreamweaver
1. To create a web page with HTML and CSS.
2. Set width and height needed and also put in the title, heading, body, section and footer.
3. Knowledge to change images to use CSS Designer to change their color, size, text, border, background.
4. Put the access link to the properties window for web button clicking access.
5. Dreamweaver is only basic knowledge learned from school.
Powerpoint
1. Created file from Google drive.
2. Used an arrow and a circle to
draw out the production
problem.
3. Explaining problems or
introducing words in a page with a product.
My production
WORDPRESS DESIGN
Embracing an enchanting and whimsical theme, my WordPress design for Saito Design School exudes a celestial charm with a starry ambiance, evoking a fairy-tale aura. The design aims to encapsulate the essence of creativity and imagination prevalent within the school community. Featuring dedicated sections for community engagement, a captivating gallery showcasing exceptional student artwork, and comprehensive introductions, the website invites visitors into a world of artistic exploration. This stellar design not only highlights the school’s vibrant creative atmosphere but also amplifies the significance of fostering a captivating online presence that resonates with the spirit and artistic prowess of Saito Design School.
Access Link: https://saitodesignschool5.wordpress.com/
Simple Portfolio
My portfolio, designed on WordPress, epitomizes simplicity and elegance. A clean and minimalist approach defines this web portfolio, where the prominent use of red and white hues creates a visually striking experience. Employing strategic alignment techniques, I aimed for a professional appearance, ensuring a seamless and intuitive user interface. This initial design venture not only prioritizes simplicity but also serves as a canvas to showcase my evolving skill set and dedication to a polished, professional aesthetic in web design.
Shuqi Silver PortFolio
Welcome to an exquisitely curated WordPress portfolio, a testament to craftsmanship and innovation. Within these digital walls, discover a collection meticulously crafted with the precision of a maestro, using Elementor as the virtuoso conductor to orchestrate a symphony of design brilliance.
Adorned with a sophisticated palette, the silver hues intertwine seamlessly with every pixel, elevating each project to an echelon of timeless sophistication. The fusion of professional color schemes and the technical prowess of Elementor yields a visual narrative that transcends the conventional, offering a glimpse into the realm where creativity meets functionality.
Unveiling a tapestry of my finest works, this portfolio embodies the fusion of artistry and strategy, where every design choice is a deliberate brushstroke that weaves a tale of ingenuity. It’s a showcase not just of visuals, but of the ethos behind each creation—an embodiment of innovation, meticulousness, and unwavering dedication to the craft.
Journey through this gallery of transformative designs, and witness firsthand how the subtle allure of silver hues, harnessed through Elementor’s ingenuity, transcends the ordinary, setting a new standard for digital elegance and sophistication.
Access link: peeshuqi.com
Pantai Hospital Convert Design
I designed for Pantai Hospital to create intuitive UI designs using Adobe Photoshop. These designs prioritize user experience, blending Pantai Hospital’s brand identity with functionality. The accompanying samples showcase the seamless navigation and aesthetic appeal achieved through this collaboration.
WEB DESIGN (HTML & CSS)
Portfolio
Created as part of my portfolio, this project implemented Dreamweaver’s HTML and CSS functionalities to construct a visually captivating platform. Titled ‘My Portfolio,’ the design concept revolves around a ‘Starry Sky Theme’. By leveraging Dreamweaver’s robust capabilities, I meticulously crafted an immersive digital space that evokes the serene beauty and mystique of a starry night. The website’s layout, color scheme, and interactive elements were meticulously designed to reflect this celestial theme, resulting in a visually stunning and user-friendly portfolio presentation that captures the essence of the night sky.
inde.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Kiki Pee Shuqi Designer</title> <link href="style.css" rel="stylesheet" type="text/css"> <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script> var __adobewebfontsappname__="dreamweaver" function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script><script src="http://use.edgefonts.net/chewy:n4:default;frijole:n4:default;devonshire:n4:default.js" type="text/javascript"></script> </head> <body class="bgimg1" onLoad="MM_preloadImages('Contact-Button-1.png','Work-Button-1.png','About-Button-1.png')"> <div class="head"><br><br> <div class="bsc150"></div> <h1><img src="H1h.png" width="515" height="156" alt=""/></h1> <br> <div id="wrap2"> <section id="sec1"><div class="bsc33"><div class="bsc33"></div> <div class="bsc33"><a href="about.html"><img src="About-Button.png" alt="" width="1600" height="1000" id="atb" onMouseOver="MM_swapImage('atb','','About-Button-1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div><br><br><br><br> <div class="bsc33"></div> <div class="bsc33"><a href="works.html"><img src="Work-Button.png" alt="" width="1596" height="1000" id="wkb" onMouseOver="MM_swapImage('wkb','','Work-Button-1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div><br><br><br><br> <div class="bsc33"></div> <div class="bsc33"><a href="contact.html"><img src="Contact-Button.png" alt="" width="1610" height="1000" id="cbb" onMouseOver="MM_swapImage('cbb','','Contact-Button-1.png',1)" onMouseOut="MM_swapImgRestore()"/><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></a></div></div><br></section> </div></div> <div class="foot"> </div> <video id="background-video" autoplay="autoplay" loop="loop" > <source src="Epub f2 copy.mp4" type="video/mp4"> </video> </body> </html>
about.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Kiki Pee Shuqi Designer</title> <link href="style.css" rel="stylesheet" type="text/css"> <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script> var __adobewebfontsappname__="dreamweaver" function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script><script src="http://use.edgefonts.net/chewy:n4:default;frijole:n4:default;devonshire:n4:default.js" type="text/javascript"></script> </head> <body class="bgimg1" onLoad="MM_preloadImages('Contact-Button-1.png','Work-Button-1.png','About-Button-1.png')"> <div class="head"><br><br> <div class="bsc150"></div> <h1><img src="H1h.png" width="515" height="156" alt=""/></h1> <br> <div id="wrap2"> <section id="sec1"><div class="bsc33"><div class="bsc33"></div> <div class="bsc33"><a href="about.html"><img src="About-Button.png" alt="" width="1600" height="1000" id="atb" onMouseOver="MM_swapImage('atb','','About-Button-1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div><br><br><br><br> <div class="bsc33"></div> <div class="bsc33"><a href="works.html"><img src="Work-Button.png" alt="" width="1596" height="1000" id="wkb" onMouseOver="MM_swapImage('wkb','','Work-Button-1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div><br><br><br><br> <div class="bsc33"></div> <div class="bsc33"><a href="contact.html"><img src="Contact-Button.png" alt="" width="1610" height="1000" id="cbb" onMouseOver="MM_swapImage('cbb','','Contact-Button-1.png',1)" onMouseOut="MM_swapImgRestore()"/><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></a></div></div><br></section> </div></div> <div class="foot"> </div> <video id="background-video" autoplay="autoplay" loop="loop" > <source src="Epub f2 copy.mp4" type="video/mp4"> </video> </body> </html>
work.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kiki Pee Shuqi Designer</title> <link href="style.css" rel="stylesheet" type="text/css"> <link href="css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css"> <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script> var __adobewebfontsappname__="dreamweaver" function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script><script src="http://use.edgefonts.net/chewy:n4:default;frijole:n4:default;devonshire:n4:default.js" type="text/javascript"></script> </head> <body class="bgimg1" onLoad="MM_preloadImages('Works-b1.png','Contacts-b1.png','About-b1.png','Home-b1.png','Digital-Button-1.png','Video-Button-1.png','Menu Button 1.png','Photography Button 1.jpeg','Competition-Button-1.png')"> <div class="head"><br><br> <div class="bsc150"></div> <h1><img src="H1w.png" width="490" height="156" alt=""/></h1> <nav id="nav1"> <div class="bsc50"><img src="Line.png" width="50%" height="80" alt=""/><img src="Line.png" width="50%" height="80" alt=""/></div> <div class="bsc10"><a href="index.html"><img src="Home-b.png" alt="" width="225" height="79" id="hmb" onMouseOver="MM_swapImage('hmb','','Home-b1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc10"><a href="about.html"><img src="About b.png" alt="" width="226" height="80" id="abb" onMouseOver="MM_swapImage('abb','','About-b1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc10"><a href="works.html"><img src="Works-b1.png" alt="" width="226" height="79" id="wkb" onMouseOver="MM_swapImage('wkb','','Works-b1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc10"><a href="contact.html"><img src="Contact-b.png" alt="" width="226" height="80" id="ctb" onMouseOver="MM_swapImage('ctb','','Contacts-b1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc10a"></div> </nav><br><br><br><br> <div id="carouselExampleIndicators1" class="carousel slide" data-ride="carousel" style="background-color: grey"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators1" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators1" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators1" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <a href="digital.html"><img src="Digital-Button.png" alt="Third slide" width="1504" height="1000" class="d-block mx-auto" id="dgb" onMouseOver="MM_swapImage('dgb','','Digital-Button-1.png',1)" onMouseOut="MM_swapImgRestore()"></a> <div class="carousel-caption"> <font color="#0F0B0B"> <font size="+35">Digital Art Work</font> <p><h3>Click to view more</h3></p></font> </div> </div> <div class="carousel-item"> <a href="competition.html"><img src="Competition Button.jpeg" alt="Second slide" width="1632" height="1000" class="d-block mx-auto" id="cpb" onMouseOver="MM_swapImage('cpb','','Competition-Button-1.png',1)" onMouseOut="MM_swapImgRestore()"></a> <div class="carousel-caption"> <font color="#0F0B0B"> <font size="+35">Competition Art Work</font> <p><h3>Click to view more</h3></p></font> </div> </div> <div class="carousel-item"> <a href="menu.html"><img src="Menu-Button.png" alt="First slide" width="1778" height="1000" class="d-block mx-auto" id="mnb" onMouseOver="MM_swapImage('mnb','','Menu Button 1.png',1)" onMouseOut="MM_swapImgRestore()"></a> <div class="carousel-caption"> <font color="#0F0B0B"> <font size="+35">Menu Art Work</font> <p><h3>Click to view more</h3></p></font> </div> </div> <div class="carousel-item"> <a href="animate.html"><img src="Video-Button.png" alt="Third slide" width="1799" height="1000" class="d-block mx-auto" id="vdb" onMouseOver="MM_swapImage('vdb','','Video-Button-1.png',1)" onMouseOut="MM_swapImgRestore()"></a> <div class="carousel-caption"> <font color="#0F0B0B"> <font size="+35">Animation Art Work</font> <p><h3>Click to view more</h3></p></font> </div> </div> <div class="carousel-item"> <a href="photography.html"><img src="Photography-Button.png" alt="Third slide" width="1778" height="1000" class="d-block mx-auto" id="pgb" onMouseOver="MM_swapImage('pgb','','Photography Button 1.jpeg',1)" onMouseOut="MM_swapImgRestore()"></a> <div class="carousel-caption"> <font color="#0F0B0B"> <font size="+35">Photography</font> <p><h3>Click to view more</h3></p></font> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <div class="nav2"></div> </div> <div class="foot"> </div> <video id="background-video" autoplay="autoplay" loop="loop" > <source src="Epub f2 copy.mp4" type="video/mp4"> </video> <script src="js/jquery-3.4.1.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap-4.4.1.js"></script> </body> </html>
contact.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kiki Pee Shuqi Designer</title> <link href="style.css" rel="stylesheet" type="text/css"> <link href="css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css"> <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script> var __adobewebfontsappname__="dreamweaver" function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script><script src="http://use.edgefonts.net/chewy:n4:default;frijole:n4:default;devonshire:n4:default.js" type="text/javascript"></script> </head> <body class="bgimg1" onLoad="MM_preloadImages('Works-b1.png','Contacts-b1.png','About-b1.png','Home-b1.png')"> <div class="head"><br><br> <div class="bsc150"></div> <h1><img src="H1c.png" width="733" height="156" alt=""/></h1> <nav id="nav1"> <div class="bsc50"><img src="Line.png" width="50%" height="80" alt=""/><img src="Line.png" width="50%" height="80" alt=""/></div> <div class="bsc10"><a href="index.html"><img src="Home-b.png" alt="" width="225" height="79" id="hmb" onMouseOver="MM_swapImage('hmb','','Home-b1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc10"><a href="about.html"><img src="About b.png" alt="" width="226" height="80" id="abb" onMouseOver="MM_swapImage('abb','','About-b1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc10"><a href="works.html"><img src="Works-b.png" alt="" width="226" height="80" id="wkb" onMouseOver="MM_swapImage('wkb','','Works-b1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc10"><a href="contact.html"><img src="Contacts-b1.png" alt="" width="226" height="79" id="ctb" onMouseOver="MM_swapImage('ctb','','Contacts-b1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc10a"></div> </nav><br><br> <div class="nav2"> <div class="bsc33"></div> <div class="bsc33"><img src="Contact-Bg.png" width="686" height="1000" alt=""/></div> </div> <div class="nav2"></div><div class="nav2"></div> </div> <div class="foot"> </div> <video id="background-video" muted="muted" autoplay="autoplay" loop="loop" > <source src="Butterfly.mp4" type="video/mp4"> </video> <script src="js/jquery-3.4.1.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap-4.4.1.js"></script> </body> </html>
style.css
@charset "UTF-8"; #wrapper { min-width: 100%; min-height: 100%; position: fixed; right: 0px; bottom: 0px; } .head { position: fixed; top: 0; background: rgba(0, 0, 0, 0.5); color: #f1f1f1; width: 100%; padding: 20px; text-align: left; } .bdtxt1 { font-size: 127px; text-align: left; text-indent: 0px; border-style: none; font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif; font-style: normal; font-weight: 400; color: #C2C2C2; text-shadow: 0px 0px 0px; } .bgimg1 .head .bsc150 { float: left; width: 150px; height: 150px; } .head #wrap2 #sec1 { width: 100%; height: 1500px; overflow-x: scroll; } .bgimg1 #wrapper #Head1 { width: 1366px; height: 20%; background-color: #C77E7F; } .bgimg1 { width: 100%; height: 100%; position: fixed; overflow-y: hidden; overflow-x: hidden; text-align: center; background-image: url(Background3%20copy.jpg); } #background-video { position: fixed; overflow-x: hidden; overflow-y: hidden; z-index: -1; min-width: 100%; min-height: 100%; right: 0px; bottom: 0px; } .bgimg1 .head #nav1 { height: 50px; width: 100%; } .head #nav1 .bsc50 { width: 50%; height: 50px; float: left; position: relative; } .head #nav1 .bsc5 { width: 5%; height: 50px; float: left; } .head #nav1 .bsc10 { float: left; width: 10%; height: 50px; border-bottom-width: 0px; position: relative; } .head #nav1 .bsc10a { width: 10%; height: 50px; float: left; } .foot { position: fixed; bottom: 0; color: #f1f1f1; width: 100%; padding: 20px; text-align: center; background-image: url(Footer.png); height: 100px; float: left; margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; } .bgimg1 .head .nav2 { width: 100%; height: 500px; } .head .nav2 .bsc6 { width: 6%; height: 500px; float: left; } .head .nav2 .bsc41 { float: left; width: 41%; height: 500px; } .bgimg1 .head #wrap2 { text-align: center; } .head .nav2 .bsc33 { width: 33%; height: 500px; float: left; text-align: center } .head .nav2 .bsc10c { width: 10%; height: 500px; float: left; } .head .nav2 .bsc20 { width: 20%; height: 500px; float: left; }
Royale Susinest Company Profile
Developed as a school assignment, this web design project for ‘Royale Susinest’ utilizes Dreamweaver’s HTML and CSS capabilities to create a functional and visually appealing promotional platform for sunbird-related products in the bird’s nest industry. Integrating Photoshop and Illustrator, appearance materials such as graphics and visual elements were meticulously crafted. The primary focus was on creating a seamless user experience by incorporating aesthetically pleasing design elements, navigation features, and compelling visuals to mirror the brand essence of Royale Susinest, showcasing a deep connection to the natural world while meeting the assignment’s requirements.
index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Royale Susinest</title> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript"> function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> </head> <body onLoad="MM_preloadImages('About-a.jpg','Product-a.jpg','Service-a.jpg','Contact-a.jpg','About-pa.jpg','Product-pa.jpg','htp-a.jpg')"> <div id="wrapper"> <header id="head1"><img src="Head.jpg" width="1366" height="250" alt=""/></header> <nav id="nav1"> <div class="bsc33"></div> <div class="button"><a href="index.html"><img src="Home-a.jpg" alt="" width="200" height="50" id="hpb"/></a></div> <div class="bsc75"></div> <div class="button"><a href="About.html"><img src="About-b.jpg" alt="" width="200" height="50" id="abb" onMouseOver="MM_swapImage('abb','','About-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc75"></div> <div class="button"><a href="Product.html"><img src="Product-b.jpg" alt="" width="200" height="50" id="pdb" onMouseOver="MM_swapImage('pdb','','Product-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc75"></div> <div class="button"><a href="Service.html"><img src="Service-b.jpg" alt="" width="200" height="50" id="svb" onMouseOver="MM_swapImage('svb','','Service-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc75"></div> <div class="button"><a href="Contact.html"><img src="Contact-b.jpg" alt="" width="200" height="50" id="ctb" onMouseOver="MM_swapImage('ctb','','Contact-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc33"></div> </nav> <section id="sec1"> <br><br><br> <iframe width="954.78" height="537" src="https://www.youtube.com/embed/3BR6Ycu6GHs?start=5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <br><section id="sec2"><br><p class="bdtxt3">ABOUT</p> <a href="About.html"><img src="Screenshot 2021-08-20 at 8.53.37 PM.png" alt="" width="471" height="285" id="abpb" onMouseOver="MM_swapImage('abpb','','About-pa.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></section> <section id="sec3"><br><p class="bdtxt3">PRODUCT</p> <a href="Product.html"><img src="Screenshot 2021-08-20 at 8.54.41 PM.png" alt="" width="467" height="276" id="pdpb" onMouseOver="MM_swapImage('pdpb','','Product-pa.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></section> <section id="sec7"> <p class="bdtxt3">HOW TO PREPARE?</p> <a href="How_to_prepare.html"><img src="WhatsApp Image 2021-08-24 at 9.40.15 AM (2).jpeg" alt="" width="373" height="374" id="htpp" onMouseOver="MM_swapImage('htpp','','htp-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></section> </section> <footer id="foot"><img src="Foot.jpg" width="1366" height="200" alt=""/></footer> </div> </body> </html>
About.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Royale Susinest</title> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript"> function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> </head> <body onLoad="MM_preloadImages('Home-a.jpg','Product-a.jpg','Service-a.jpg','Contact-a.jpg')"> <div id="wrapper"> <header id="head1"><img src="Head.jpg" width="1366" height="250" alt=""/></header> <nav id="nav1"> <div class="bsc33"></div> <div class="button"><a href="index.html"><img src="Home-b.jpg" alt="" width="200" height="50" id="hpb" onMouseOver="MM_swapImage('hpb','','Home-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc75"></div> <div class="button"><a href="About.html"><img src="About-a.jpg" alt="" width="199" height="50" id="abb"/></a></div> <div class="bsc75"></div> <div class="button"><a href="Product.html"><img src="Product-b.jpg" alt="" width="200" height="50" id="pdb" onMouseOver="MM_swapImage('pdb','','Product-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc75"></div> <div class="button"><a href="Service.html"><img src="Service-b.jpg" alt="" width="200" height="50" id="svb" onMouseOver="MM_swapImage('svb','','Service-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc75"></div> <div class="button"><a href="Contact.html"><img src="Contact-b.jpg" alt="" width="200" height="50" id="ctb" onMouseOver="MM_swapImage('ctb','','Contact-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc33"></div> </nav> <section id="sec1"><br><br><br><span class="bdtxt2">ABOUT</span> <div class="bdtxt1"> <p class="bdtxt">Sunbirds Industry Sdn.bhd. was founded in 1992. Sunbirds Industry is a bird’s nest factory that manufactures bird’s nests, processes, and wholesales and sells bird’s nests. Royale Susinest is a private branch of Sunbirds Industry. Royale Susinest was founded in 2020 and the company is located in Malaysia, Segamat. Provide consulting, cleaning services, and also provide finished products for customers to purchase. <br><br>Our bird's nest is a local house bird in Malaysia, the quality is pure and natural. The packaging of the finished product is selected through multiple screenings and checking the quality. <br><br> Regardless of the vicissitudes of life and market changes, Royale Susinest Malaysia insists on creating the highest quality products in the industry, and welcomes new and old customers at home and abroad to visit and inspect.<br> <img src="aboutphoto.jpg" width="900" height="563" alt=""/></p> </div> </section> <footer id="foot"><img src="Foot.jpg" width="1366" height="200" alt=""/></footer> </div> </body> </html>
Product.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Royale Susinest</title> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript"> function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> </head> <body onLoad="MM_preloadImages('Home-a.jpg','About-a.jpg','Service-a.jpg','Contact-a.jpg','Product1a.jpg','Product2a.jpg','Product4a.jpg','Product3a.jpg','Product5a.jpg')"> <div id="wrapper"> <header id="head1"><img src="Head.jpg" width="1366" height="250" alt=""/></header> <nav id="nav1"> <div class="bsc33"></div> <div class="button"><a href="index.html"><img src="Home-b.jpg" alt="" width="200" height="50" id="hpb" onMouseOver="MM_swapImage('hpb','','Home-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc75"></div> <div class="button"><a href="About.html"><img src="About-b.jpg" alt="" width="200" height="50" id="abb" onMouseOver="MM_swapImage('abb','','About-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc75"></div> <div class="button"><a href="Product.html"><img src="Product-a.jpg" alt="" width="199" height="50" id="pdb"/></a></div> <div class="bsc75"></div> <div class="button"><a href="Service.html"><img src="Service-b.jpg" alt="" width="200" height="50" id="svb" onMouseOver="MM_swapImage('svb','','Service-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc75"></div> <div class="button"><a href="Contact.html"><img src="Contact-b.jpg" alt="" width="200" height="50" id="ctb" onMouseOver="MM_swapImage('ctb','','Contact-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc33"></div> </nav> <section id="sec1"><br><br><br><span class="bdtxt2">PRODUCT</span> <br> <nav id="nav2"> <div class="bx51"></div> <div class="vid"> <video width="400" height="300" controls="controls" muted="muted" autoplay="autoplay" loop="loop" > <source src="wx_camera_1607406965116.mp4" type="video/mp4"> </video> </div> <div class="bx32"></div> <div class="vid"> <video width="400" height="300" controls="controls" muted="muted" autoplay="autoplay" loop="loop" > <source src="VID-20210113-WA0180.mp4" type="video/mp4"> </video> </div> <div class="bx32"></div> <div class="vid"><video width="400" height="300" controls="controls" muted="muted" autoplay="autoplay" loop="loop" > <source src="wx_camera_1607406984527.mp4" type="video/mp4"> </video></div> <div class="bx51"></div> </nav><br><br> <nav id="nav3"> <div class="bx558"></div> <div class="button1"><a href="Contact.html"><img src="Product1.jpg" alt="" width="275" height="275" id="p1" onMouseOver="MM_swapImage('p1','','Product1a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bx558"></div> </nav> <nav id="nav4"><p class="bdtxt4">RM315.00</p></nav> <nav id="nav5"> <div class="button2"><a href="Contact.html"><img src="Product2.jpg" alt="" width="368" height="275" id="p2" onMouseOver="MM_swapImage('p2','','Product2a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bx75"><p class="bdtxt4">RM350.00</p></div> <div class="button2"><a href="Contact.html"><img src="Product4.jpg" alt="" width="363" height="275" id="p4" onMouseOver="MM_swapImage('p4','','Product4a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bx75"><p class="bdtxt4">RM2,000.00</p></div> </nav> <nav id="nav6"> <div class="button3"><a href="Contact.html"><img src="Product3.jpg" alt="" width="368" height="275" id="p3" onMouseOver="MM_swapImage('p3','','Product3a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bx75"><p class="bdtxt4">RM315.00</p></div> <div class="button3"><a href="Contact.html"><img src="Product5.jpg" alt="" width="362" height="275" id="p5" onMouseOver="MM_swapImage('p5','','Product5a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bx75"><p class="bdtxt4">RM4,125.00</p></div> </nav> <br></section> <footer id="foot"><img src="Foot.jpg" width="1366" height="200" alt=""/></footer> </div> </body> </html>
How_to_prepare.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Royale Susinest</title> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript"> function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> </head> <body onLoad="MM_preloadImages('Home-a.jpg','About-a.jpg','Service-a.jpg','Contact-a.jpg','Product1a.jpg','Product2a.jpg','Product4a.jpg','Product3a.jpg','Product5a.jpg','Product-a.jpg')"> <div id="wrapper"> <header id="head1"><img src="Head.jpg" width="1366" height="250" alt=""/></header> <nav id="nav1"> <div class="bsc33"></div> <div class="button"><a href="index.html"><img src="Home-b.jpg" alt="" width="200" height="50" id="hpb" onMouseOver="MM_swapImage('hpb','','Home-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc75"></div> <div class="button"><a href="About.html"><img src="About-b.jpg" alt="" width="200" height="50" id="abb" onMouseOver="MM_swapImage('abb','','About-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc75"></div> <div class="button"><a href="Product.html"><img src="Product-b.jpg" alt="" width="206" height="50" id="pdb" onMouseOver="MM_swapImage('pdb','','Product-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc75"></div> <div class="button"><a href="Service.html"><img src="Service-b.jpg" alt="" width="200" height="50" id="svb" onMouseOver="MM_swapImage('svb','','Service-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc75"></div> <div class="button"><a href="Contact.html"><img src="Contact-b.jpg" alt="" width="200" height="50" id="ctb" onMouseOver="MM_swapImage('ctb','','Contact-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc33"></div> </nav> <section id="sec1"><br><br><br> <span class="bdtxt2">HOW TO PREPARE?</span> <br><br><br> <nav id="nav5"> <div class="button2"><img src="WhatsApp Image 2021-08-24 at 9.40.15 AM.jpeg" width="275" height="275" alt=""/></div> <br><br><br> <div class="button2"><img src="WhatsApp Image 2021-08-24 at 9.40.15 AM (1).jpeg" width="275" height="275" alt=""/></div> <br><br><br> <div class="button2"><img src="WhatsApp Image 2021-08-24 at 9.40.15 AM (3).jpeg" width="275" height="274" alt=""/></div> <br><br><br> <div class="button2"><img src="WhatsApp Image 2021-08-24 at 9.40.15 AM (2).jpeg" width="275" height="274" alt=""/></div> </nav> <nav id="nav6"> <div class="button4"><p class="bdtxt3">Step 1</p><br><br><p class="bdtxt5">Divide one or two bird's nests (37.5g) into three equal portions, and soak them in mineral water or pure water for several hours (depending on the type of bird's nest purchased), and wait until the bird's nest absorbs water and becomes translucent.</p></div> <div class="button4"><p class="bdtxt3">Step 2</p><br><br><p class="bdtxt5">Pick up a small amount of small feathers attached to the bird's nest, and then rinse it with clean water. About 12 gram of bird's nest can stew 500cc of bird's nest.</p></div> <div class="button4"><p class="bdtxt3">Step 3</p><br><br><p class="bdtxt5">Put the soaked bird's nest into the stewing pot, add 500cc of water and appropriate amount of rock sugar.</p></div> <div class="button4"><p class="bdtxt3">Step 4</p><br><br><p class="bdtxt5">Put the stewing pot into the rice cooker, add a cup of water to the outer pot, and wait for the rice cooker to jump on. If you don't have an electric rice cooker, you can also simmer it over a low heat for about 20-30 minutes.</p></div> </nav> <br></section> <footer id="foot"><img src="Foot.jpg" width="1366" height="200" alt=""/></footer> </div> </body> </html>
Service.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Royale Susinest</title> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript"> function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> </head> <body onLoad="MM_preloadImages('Home-a.jpg','About-a.jpg','Product-a.jpg','Contact-a.jpg')"> <div id="wrapper"> <header id="head1"><img src="Head.jpg" width="1366" height="250" alt=""/></header> <nav id="nav1"> <div class="bsc33"></div> <div class="button"><a href="index.html"><img src="Home-b.jpg" alt="" width="200" height="50" id="hpb" onMouseOver="MM_swapImage('hpb','','Home-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc75"></div> <div class="button"><a href="About.html"><img src="About-b.jpg" alt="" width="200" height="50" id="abb" onMouseOver="MM_swapImage('abb','','About-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc75"></div> <div class="button"><a href="Product.html"><img src="Product-b.jpg" alt="" width="200" height="50" id="pdb" onMouseOver="MM_swapImage('pdb','','Product-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc75"></div> <div class="button"><a href="Service.html"><img src="Service-a.jpg" alt="" width="200" height="51" id="svb"/></a></div> <div class="bsc75"></div> <div class="button"><a href="Contact.html"><img src="Contact-b.jpg" alt="" width="200" height="50" id="ctb" onMouseOver="MM_swapImage('ctb','','Contact-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc33"></div> </nav> <section class="bdtxt1" id="sec1"><br><br><br><span class="bdtxt2">SERVICES</span> <div class="bdtxt1"><img src="Service-photo.jpg" width="958" height="716" alt=""/></div> <div class="bdtxt1"><p class="bdtxt">We have a cleaning service. This service provides raw materials for bird's nest and cleans the raw materials of bird's nest. If you need this service, please click “<a href="Contact.html">Contact Us</a>” to contact the service staff to make an appointment.</p></div> <br> <br></section> <footer id="foot"><img src="Foot.jpg" width="1366" height="200" alt=""/></footer> </div> </body> </html>
Contact.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Royale Susinest</title> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript"> function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> </head> <body onLoad="MM_preloadImages('Home-a.jpg','About-a.jpg','Product-a.jpg','Service-a.jpg')"> <div id="wrapper"> <header id="head1"><img src="Head.jpg" width="1366" height="250" alt=""/></header> <nav id="nav1"> <div class="bsc33"></div> <div class="button"><a href="index.html"><img src="Home-b.jpg" alt="" width="200" height="50" id="hpb" onMouseOver="MM_swapImage('hpb','','Home-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc75"></div> <div class="button"><a href="About.html"><img src="About-b.jpg" alt="" width="200" height="50" id="abb" onMouseOver="MM_swapImage('abb','','About-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc75"></div> <div class="button"><a href="Product.html"><img src="Product-b.jpg" alt="" width="200" height="50" id="pdb" onMouseOver="MM_swapImage('pdb','','Product-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc75"></div> <div class="button"><a href="Service.html"><img src="Service-b.jpg" alt="" width="200" height="50" id="svb" onMouseOver="MM_swapImage('svb','','Service-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div> <div class="bsc75"></div> <div class="button"><a href="Contact.html"><img src="Contact-a.jpg" alt="" width="200" height="50" id="ctb"/></a></div> <div class="bsc33"></div> </nav> <section id="sec1"> <div id="map"><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15953.627197600208!2d103.7868531!3d1.5241143!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31ce2dc79a28b9c5%3A0xcea95d69069d326f!2zUm95YWxlIFN1c2luZXN0IOS6rueHleS6p-S4mg!5e0!3m2!1sen!2smy!4v1629457691034!5m2!1sen!2smy" width="1366" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe></div> <br><br><br><span class="bdtxt2">CONTACT US</span> <div class="bdtxt1"><p class="bdtxt">Address: No.25, Jalan Bistari 4/8, Taman Yayasan, 85010 Segamat, Johor. <br><br>Contact Number: +60-102072720/+60-187812903 <br><br>WhatsApp: <a href="https://wa.me/message/GDSA7PKEHCVDP1">https://wa.me/message/GDSA7PKEHCVDP1</a> <a href="https://wa.me/message/7QIESG73KJEQJ1">https://wa.me/message/7QIESG73KJEQJ1</a><br><br><img src="wacode1.png" width="80" height="80" alt=""/> <img src="wacode2.png" width="80" height="80" alt=""/><br><br> <img src="Contact1.jpg" width="1086" height="485" alt=""/></p> </div> </section> <footer id="foot"><img src="Foot.jpg" width="1366" height="200" alt=""/></footer> </div> </body> </html>
style.css
@charset "UTF-8"; #wrapper { width: 1366px; position: relative; margin-right: auto; margin-left: auto; margin-top: -8px; background-color: #AB9999; } #wrapper #head1 { width: 1366px; height: 250px; background-color: #6692DE; margin-left: auto; margin-right: auto; position: relative; } #wrapper #nav1 .bsc33 { width: 23px; height: 50px; background-color: #A77C52; float: left; } #wrapper #nav1 .button { width: 200px; height: 50px; float: left; background-color: #BF97D4; border-width: 2px; border-style: inset; } #wrapper #nav1 .bsc75 { width: 75px; height: 50px; float: left; background-color: #A77C52; } #wrapper #nav1 { width: 1366px; height: 50px; } #wrapper #sec1 #nav2 { width: 1366px; height: 300px; } #sec1 #nav2 .bx51 { width: 51px; height: 300px; float: left; } #sec1 #nav2 .vid { width: 400px; height: 300px; float: left; } #sec1 #nav2 .bx32 { width: 32px; height: 300px; float: left; } #wrapper #sec1 #nav3 { width: 1366px; height: 275px; } #sec1 #nav3 .bx558 { width: 545px; height: 275px; float: left; } .bdtxt4 { color: #696060; text-align: center; font-size: 25px; font-weight: bolder; } #sec1 #nav3 .button1 { width: 275px; height: 275px; float: left; } #wrapper #sec1 #nav4 { width: 1366px; height: 50px; } #wrapper #sec1 #nav5 { width: 683px; height: 700px; float: left; } #sec1 #nav5 .bx75 { width: 683px; height: 75px; } #sec1 #nav5 .button2 { width: 683px; height: 275px; } #wrapper #sec1 #nav6 { width: 683px; height: 700px; float: left; } #sec1 #nav6 .button3 { width: 683px; height: 275px; } #sec1 #nav6 .button4 { width: 610px; height: 275px; } #sec1 #nav6 .bx75 { width: 683px; height: 75px; } #wrapper #sec1 { width: 1366px; background-color: #CDBDBD; float: left; background-image: url(Background.jpg); text-align: center; margin-top: -6px; height: 1600px; } #wrapper #sec1 .bdtxt1 { width: 1086px; position: relative; margin-left: auto; margin-right: auto; text-align: center; } .bdtxt2 { color: #443D3D; font-size: 60pt; text-align: center; margin-bottom: -5px; } .bdtxt3 { color: #564E4E; text-align: center; font-size: 50px; text-shadow: 0px 0px; font-weight: bold; font-variant: normal; font-style: normal; text-decoration: none; margin-bottom: -5px; } .bdtxt { color: #342F2F; width: 1086px; height: 1067px; font-weight: normal; font-size: 36px; text-align: center; } .bdtxt5 { color: #3C3737; font-size: 20px; text-align: center; font-weight: bolder; font-variant: normal; font-style: normal; text-decoration: none; } #wrapper #sec2 { width: 683px; height: 400px; float: left; } #wrapper #sec3 { width: 683px; height: 400px; float: left; margin-right: auto; margin-left: 0px; } #wrapper #sec1 #sec7 { width: 1366px; height: 500px; float: left; margin-top: -20px; } #wrapper #sec1 #map { width: 1366px; height: 300px; } #wrapper #foot { width: 1366px; height: 200px; background-color: #413232; float: left; text-align: center; text-decoration: none; text-shadow: 0px 0px #E5DCDC; text-transform: lowercase; margin-top: auto; color: #DFD6D6; }
FIGMA
Phone Call
For my UI design school assignment, I delved into the realm of Figma, crafting a series of interfaces for phone call management, receiving calls, and a contact book. This project served as a pivotal learning experience, allowing me to familiarize myself with Figma’s functionalities and UI/UX design principles. Through this assignment, I gained proficiency in creating intuitive and visually appealing user interfaces, honing skills in layout design, iconography, and user interaction. The project demonstrates my foundational grasp of Figma as a powerful design tool, marking the beginning of my journey into the world of user interface design.
GRAPHIC DESIGN
Sexual Harassment Poster
Crafting a Sexual Harassment awareness campaign demanded a professional touch in design. Leveraging minimalism, I employed a restricted color palette of three colors across three distinct posters. Utilizing a balanced space grid, each poster’s layout was meticulously designed to entice passersby. Employing a consistent font style, size, and label dimensions throughout enhanced readability and visual coherence.
The intent was to create a compelling visual narrative that naturally drew viewers’ attention. Implementing strategic placement of a symbolic ‘hand’ illustration invited onlookers to engage further, arousing curiosity and encouraging prolonged observation. The deliberate use of these design elements aimed to evoke a desire to delve deeper into the poster’s message, creating a lasting impact on viewers’ awareness of sexual harassment issues.
Festival Poster and Hiring
Normally a company will always created their festival poster for celebrate with their client. Whenever a festival is coming soon I will searching online the festival reference poster, and understand what is the material using from their poster for this festival, what kind the festival will present, and also what is the people doing on the past festival. After that I will follow the objective of festival imagine some new design and combine with the company needed to create their customise design banner or poster.
The fastest time for Festival Poster I created is 2 hour. Because sometime their company is too much poster needed to do, so I need be fast to complete.
Menu Set
Empress Cafe’s innovative new menu unfolds like a captivating story across five pristine pages. Set against a clean white background with striking black fonts, clarity meets elegance, ensuring a visual feast for our guests. But there’s more than meets the eye – our menu embodies a culinary performance. Picture this: the liquor section sparking a fiery sensation, while our delectable fried offerings take flight right off the page. It’s not just a menu; it’s an experience waiting to enthrall. Join us at Empress Cafe, where every dish narrates its own tale and each page invites you into a world where flavors and creativity collide.
Robot Ads Poster
Crafted with precision using Adobe Illustrator and Photoshop, this poster aligns seamlessly with the project’s objective, brand identity, and emotional resonance. Emphasizing the brand’s distinctive colors and leveraging the combined power of Illustrator and Photoshop, the poster is designed to evoke a specific feeling, resonating with the audience’s emotions. Its compelling visuals succinctly portray the product’s selling points and benefits, aiming to captivate attention and convey the unique value proposition. Through strategic use of design elements and compelling imagery, the poster encapsulates the essence of the product, delivering a message that is visually appealing and clearly communicates the benefits and appeal of the offering.
Horror
Crafted as a chilling horror poster, titled ‘Find,’ this design encapsulates a sense of terror and suspense. Integrating my own image, the poster portrays a haunting narrative, drawing viewers into an eerie and mysterious atmosphere. The name ‘Find’ is strategically emphasized in a striking red hue, reminiscent of blood, creating a stark contrast against the overall composition. This color choice adds a visceral and unsettling element, intensifying the ominous undertones and heightening the poster’s spine-chilling effect. Through meticulous editing techniques and a deliberate color palette, the design seeks to provoke a sense of dread, leaving a lasting impression on those who encounter its unsettling visual narrative.
Graphic Design Gallery
PRODUCT STICKER AND BOARD GAME DESIGN
Sporty Bot
Adhering to the model outline, I’ve customized the design for our stickers using Illustrator, ensuring precision and adherence to the outlined specifications. Leveraging Illustrator’s versatile tools, I’ve meticulously crafted a visually appealing sticker design tailored to our needs. Subsequently, utilizing Photoshop, I’ve seamlessly integrated the design onto the model for presentation purposes, enabling a realistic and vivid portrayal of the sticker’s appearance on the intended product. Once the design gains approval within the company, the next step involves liaising with the printing department. They will take precise measurements of the product size and proceed to print the stickers, ensuring a seamless and professional final product that meets our standards.
Empire Crush (Board Game)
Collaborating with two other group members, I contributed significantly to the creation of ‘Empire Crush,’ a dynamic board game venture. My key involvement centered around the game’s centerpiece – the chest, meticulously designed and rendered using 3D Maya. Leveraging advanced tools, I crafted an intricate and visually compelling chest model, subsequently brought to life through precision 3D printing. Additionally, my creative input extended to various aspects of the game’s development, including designing game rules, crafting game cards, and overseeing the main design elements. ‘Empire Crush’ presents a captivating gameplay reminiscent of classics like Monopoly but with a unique twist, incorporating characters, potions, money, and the pivotal chest as a central character. The character design aspect was achieved through innovative character tool utilization, enhancing the game’s immersive and engaging experience. This collaborative effort resulted in a comprehensive and visually appealing board game that seamlessly merges creativity, strategy, and immersive gameplay.
Rules of Game
Chest create from 3D Maya
Magic Card
Print out production present
DIGITAL ILLUSTRATION
Gaming Interior & Outdoor
Employing advanced techniques in Photoshop, I spent one month meticulously crafting a captivating interior and outdoor illustration inspired by gaming landscapes sourced from extensive research on Google. This artwork intricately blends digital artistry with gaming aesthetics, utilizing the creative power of Photoshop to meticulously render intricate details and bring to life a captivating gaming-inspired setting. Through the use of digital brushes, layers, and precise detailing, this illustration invites viewers to explore an immersive world where the boundaries between reality and virtual gaming environments blur seamlessly.
Protrait
Utilizing Adobe Photoshop, I embarked on a creative journey by drawing a portrait inspired by a photo reference found on Google. Infused with a unique color palette, this rendition of the original image explores a fresh artistic interpretation. Through meticulous digital drawing techniques and a deliberate departure from the reference colors, I reimagined the portrait, infusing it with a new vibrancy and emotional depth. This approach transformed the familiar image into a captivating and original artwork, showcasing both technical skill and artistic innovation within the realm of digital artistry.
TYPOGRAPHY
Royale Susinest Product Ads
Employing Adobe After Effects, I’ve created a visually compelling typography video that serves both as a school assignment and an advertising showcase for Royale Susinest’s birdnest products. Utilizing the dynamic capabilities of After Effects, the video features animated text and descriptions, presenting a visually engaging narrative. Through meticulously crafted typography and animated sequences, the video effectively communicates the brand’s unique selling propositions and the benefits of Royale Susinest’s birdnest products. This innovative approach merges artistic typography techniques with advertising elements, resulting in a captivating promotional piece that showcases the brand’s offerings in an attention-grabbing manner.
Man’s Portrait
Explore the intersection of art and digital craftsmanship in my typography portrait design, meticulously crafted using Adobe Illustrator. Inspired by a downloaded image of a man, this captivating artwork emerges from the meticulous intertwining of text and digital illustration techniques. Using the precision of the pen tool and typographic elements in Adobe Illustrator, I meticulously outlined each contour, meticulously crafting a stunning visual using the intricate strokes and forms of typography. The result is a mesmerizing composition where the subject’s features and details are intricately woven from letters and characters, meticulously shaped to form a striking likeness. Through this innovative digital process, I’ve transformed a mere image into an artful typographic representation, demonstrating the boundless creative possibilities within the realm of digital art and typography.
Typography Booklet
Delve into the realm of typography with my meticulously crafted 20-page booklet design. Showcasing the timeless beauty of Helvetica fonts, each page becomes a canvas for the art of type. Through strategic use of font weights, sizes, and layouts, this design celebrates the clarity and versatility of Helvetica, highlighting its seamless interplay with negative space and composition. Explore the power of minimalist design and typographic expression in this captivating journey through the pages, a testament to the artistry inherent in typography.
VIDEOGRAPHY
Best Friend short film
For my video editing class, I embarked on a project centered around creating a ‘Best Friend’ video using Adobe Premiere Pro. The primary objective was to distill a longer video into a concise one-minute presentation. Employing Adobe Premiere Pro’s robust editing capabilities, I meticulously curated and cut the footage, extracting the essence of the content to encapsulate the meaningful moments within a shorter timeframe. Through deliberate editing techniques and precise selection, I condensed the video, emphasizing the guy will get back harmony life when ot use the fantasy medicine.
Sekinchan Vlog
I recently contributed to a Sekinchan vlog, where my role centered on video editing to enhance the visual storytelling. I utilized Adobe Premiere Pro to bring their vision to life. Incorporating voice narration and on-screen text elements, I skillfully edited the video to present three individuals introducing the latest news about homestays in Sekinchan.
Using Adobe Premiere Pro’s versatile editing features, I orchestrated a seamless fusion of video cuts, voiceovers, and text overlays, amplifying the vlog’s engaging narrative. Through strategic editing, I brought coherence to the diverse visuals, showcasing Sekinchan’s captivating landscapes, from lush paddy fields to scenic coastlines.
While not the creator of the vlog, my role in video editing aimed to elevate the content, offering viewers an immersive experience enriched by voice narration and informative text. Adobe Premiere Pro served as a crucial tool in sculpting this engaging Sekinchan vlog, transforming raw footage into a compelling visual story.
Fitness B-roll
My B-roll fitness videography project, I used 4-hour session to capture an array of engaging footage within the gym room. Focusing on dynamic fitness routines and exercises, I meticulously filmed various sequences aimed at capturing the essence of physical activity and motivation.
Upon completing the filming process, I employed strategic editing techniques, incorporating slow-motion effects to amplify the impactful moments and employing the ‘dip to dark’ transition to intensify the motivational segments. This nuanced approach added depth and emotion to the video, accentuating the inspirational aspect of the content.
Leveraging my proficiency in lighting control and video editing, I expedited the post-production phase, seamlessly integrating these effects to enhance the video’s narrative. The entire production, from filming to the final edited video, was efficiently executed within a remarkable one-day timeframe. This achievement underscores not only my technical skills but also my dedication to crafting a compelling fitness video that resonates with motivation and dynamism.
Aiyobaby Mask Vlog
In my latest vlog, I embarked on an exciting unboxing journey featuring the Aiyobaby mask collection. Armed with just my phone, I captured every moment of the unboxing experience, bringing the audience along for an intimate and authentic portrayal of the unveiling process.
Following the unboxing, I employed Adobe Premiere Pro’s versatile editing tools to curate a seamless and engaging narrative. Leveraging Premiere Pro’s features, I skillfully combined and edited the footage, enhancing the video’s flow and visual appeal. From cutting sequences to adding transitions and overlays, I ensured a polished final product that encapsulated the essence of unboxing these masks.
This vlog not only offers viewers an up-close look at the Aiyobaby mask collection but also showcases the potential of utilizing basic tools, such as a phone and Premiere Pro, to create an immersive and enjoyable unboxing experience.
MOTION GRAPHIC
Demo Reel
My creative demo reel is an amalgamation of my finest artworks from 2022, meticulously curated and presented in a captivating video format.Leveraging the power of Adobe After Effects and Premiere Pro, each artwork is thoughtfully presented, accentuating its distinctive visual impact and creative essence. This compilation showcases a culmination of my artistic endeavors throughout the year, encompassing a diverse range of styles, techniques, and inspirations. Each artwork is thoughtfully showcased, highlighting its unique visual impact and creative essence. As the reel unfolds, viewers are immersed in a visual journey that encapsulates the depth and breadth of my artistic prowess, offering a glimpse into my evolving skills and creativity. This video presentation serves as a testament to my dedication and passion for the arts, providing a comprehensive showcase of my best works from the year gone by.
>>>>–
Dutch Lady
Utilising AI, Photoshop, and Adobe After Effects, I crafted an advertising video for Dutch Lady Milk, employing web-sourced materials. The video delivers a compelling message about the product’s vitamins through dynamic motion styles. The color scheme of blue and white reflects the brand identity of Dutch Lady. Initially a school assignment, this project served as a learning ground, and I am committed to refining it further to enhance professionalism. Through this experience, I aim to rectify any motion errors and elevate the quality to meet industry standards, showcasing my dedication to continuous improvement and professional growth in motion graphic design.
Happy New Year 2022
Crafted with Adobe Illustrator, Photoshop, and Adobe After Effects, I designed a vibrant motion graphic video celebrating Chinese New Year 2022 for Saito University College. Using red and yellow hues to evoke festivity and prosperity, I intricately composed traditional Chinese symbols and animations within the video. Careful timeline structuring, effects incorporation, and meticulous rendering in After Effects culminated in a visually immersive experience. The video crescendos with the heartfelt message ‘Wishing you a Happy Chinese New Year!’—a culmination of technical finesse and creative vision that embodies the festive spirit and unity within our Saito community.
3D AUTODESK VISUAL & ANIMATION
Insect Jump Animation
The ‘Insect Jump’ project unfolded as an immersive 3D animation video, meticulously crafted within the realm of Maya. The project commenced with foundational steps, where I strategically utilized Maya’s functionalities to lay the groundwork for the insect’s movements. Beginning with simple controls via the time slider, I orchestrated the initial stages of the insect’s jumping animation along the tabletop.
As the project gained momentum, the focus shifted towards medium steps, demanding a more refined control approach. Leveraging Maya’s intricate tools, I honed my skills to manipulate the insect’s head, eyes, and body dynamics, intricately choreographing its jumps and movements across the tabletop terrain.
The culmination of these efforts resulted in the ‘Insect Jump’ 3D animation video—a testament to the meticulous control and animation skills applied within Maya’s expansive platform. This project showcases the intricate details and fluidity of the insect’s movements, bringing a captivating and lifelike dimension to the tabletop scenario.
Racing Animation
The completion of my 3D animation project titled ‘Racing’ ignited an overwhelming sense of enthusiasm, especially as it encompassed my favorite subject. Precision lighting played a pivotal role, adding the final layer of authenticity to each scene within this high-octane narrative. The expansive canvas of 3D space provided the ideal platform for translating creative visions into vibrant realities.
This project, a pinnacle in my showcase, predominantly highlights 3D animation expertise. Eager to transition these skills into tangible industry projects, I dedicated unwavering effort to every phase of this production.
‘Racing’ commenced with meticulous Maya designs, crafting the backdrop with intricate details—majestic mountains, dynamic skies, bustling traffic, and more. The characters were carefully curated, adorned with vivid colors, precisely controlled lighting, and a fusion of multifaceted skills, merging seamlessly into a unified whole.
Upon completion, rendering commenced, employing camera techniques to capture each meticulously constructed scene. In the final stages, Premiere Pro became instrumental, harmonizing the elements with a fitting background music score, orchestrating a symphony of animation, cinematic shots, and a captivating soundtrack.
The ‘Racing’ project embodies my unwavering dedication to 3D animation, showcasing the depth of my commitment to excellence. This title represents my eagerness to venture into professional endeavors, equipped to embrace industry projects with zeal and expertise.
Diorama
Titled ‘Diorama,’ this project emerged as a focal assignment in my 3D class, realized through Autodesk Maya. Inspired by remarkable works and drawing reference from exemplary designs, I crafted a captivating 3D scene. Using Maya’s UV and hypershade tools, I meticulously colored each object, bringing the model to life. The diorama features a quaint house with intricate details—a serene water pool, delicate roses adorning flowerpots, radiant sunshine streaming through windows, and a welcoming red carpet—all meticulously shaped and sculpted using XYZ coordinates. This detailed and immersive composition encapsulates a harmonious blend of elements, evoking a sense of warmth and tranquility within the confined space of the diorama. Through meticulous attention to detail and skillful manipulation of dimensions, this project aimed to create a captivating and awe-inspiring 3D landscape that showcases both technical prowess and creative vision.
2D ANIMATION
Mouth talking Animation
To achieve a compelling 2D mouth talking animation, I initiated the process by crafting a character illustration within Adobe Illustrator. Once the character was meticulously drawn and finalized, I seamlessly imported it into Adobe After Effects to bring it to life.
Leveraging the dynamic features of After Effects, I meticulously orchestrated the mouth movements to synchronize with speech or dialogue. This involved a detailed process of frame-by-frame animation, manipulating the character’s mouth shapes and movements to simulate natural talking motions.
Employing a combination of Illustrator’s precise drawing tools and After Effects’ animation capabilities, I meticulously crafted a seamless and expressive 2D mouth talking animation. This project showcases the powerful synergy between Illustrator and After Effects, allowing for the creation of engaging and lifelike character animations ready to convey dialogue or messages.
Durian and orang hutan
In my 2D animation video, I embarked on a creative endeavor featuring a durian and a character—illustrated using Adobe Illustrator—set within a sprawling forest backdrop. The character, meticulously drawn in Illustrator, seamlessly imported into Adobe After Effects for animation control.
Leveraging the dynamic features of After Effects, I skillfully manipulated the character’s movements, orchestrating precise actions such as jumping, walking, and rolling. Through meticulous control over the character’s motions, I intricately crafted lifelike and seamless movements that interacted seamlessly with the durian fruit.
This project became a testament to the synergy between Illustrator and After Effects, allowing for the creation of a vivid and engaging narrative. The integration of these Adobe tools facilitated the seamless transition from static illustration to dynamic animation, culminating in a visually captivating story set amidst the enchanting backdrop of a forest environment.
PHOTOGRAPHY
Nature
Photography series capturing the essence of nature in ocean, forest landscapes and departure. Three photographs taken using a Huawei camera in 2020 and 2021, showcasing the art of balance, alignment, and precise zoom. Each image encapsulates the serene beauty of natural environments—majestic oceans, lush forests, departure, inviting viewers to immerse themselves in the tranquil and awe-inspiring wonders of the natural world.
Nature Ocean
Huawei camera (2020)
Departure
Huawei camera (2021)
Forest
Huawei camera (2021)
Flatlay
Photography project ‘Flatlay’ centers on a specific color style, emphasizing the interplay between purple and white hues. Through skillful lens work and artistic composition, I’ve curated a collection of images where the essence lies in the nuanced application of these colors. The ‘Flatlay’ series harnesses the visual impact of the purple and white color scheme, presenting a visually stunning array of photographs. Each image within this project reflects an intentional harmony and contrast between these colors, creating a striking and visually captivating series that explores the unique beauty and harmony of purple and white.
COMPETITION WORK
The Guardian
Embarking on my artistic endeavor, I began by scouring Google for tiger references, meticulously selecting and printing them. Armed with pencil and paper, I delicately traced the tiger’s outlines, laying the groundwork for what would become a stunning artwork. Layer by layer, I employed watercolors, starting with the backdrop before meticulously painting the tiger. Every stroke was purposeful, aimed at capturing the intricacies of its fur, striving for a lifelike appearance. With finesse and attention to detail, I added the finishing touches, infusing the tiger with an air of magnificence and power. Witnessing my friends’ amazed reactions was incredibly rewarding; my artwork inspired them to delve into their own artistic journeys. The joy and pride I felt upon completing this piece are indescribable, knowing that my creation had ignited a spark of creativity in others.
Material: Water colour
Time duration completed: 2 month
Competition: UOB Painting of the year 2021
NTDAC Space Plane
Crafted entirely in Photoshop, ‘Space Plane’ is a digital masterpiece meticulously completed over one week for the esteemed National Techno Digital Art Challenge. The artwork features a captivating portrayal centered around a plane amid a celestial backdrop. Within this creation, the plane serves as the focal point, symbolizing human ambition and exploration, soaring amidst the vastness of a cosmic landscape. ‘Space Plane’ encapsulates the fusion of technology and imagination, inviting viewers to embark on a visual journey that celebrates the harmony between human innovation and the boundless wonders of the cosmos.
Material: Photoshop
Time duration completed: 1 week
Competition: National Techno Digital Art Challenge
Unity
Within the canvas, the artwork ‘Unity’ portrays a poignant depiction of four individuals, each missing a vital sensory organ—no eyes, no ears, no mouth, and no nose. However, at the core of the painting, their hearts are intricately tied together, symbolizing unity and collective strength during the pandemic. This representation of sensory deprivation serves as a metaphor for the challenges faced during these unprecedented times, where traditional forms of communication and perception were limited. Despite these apparent limitations, the interconnected hearts signify a newfound reliance on empathy, understanding, and mutual support among individuals. The absence of physical senses underscores the importance of emotional connections and mutual aid, highlighting the resilience and compassion that emerged during the challenging period. ‘Unity’ serves as a testament to the inherent human ability to support one another and find strength in togetherness amidst adversity.
Material: Water colour canvas A3
Time duration completed: 2 week
Competition: UOB Painting of the year 2020
My Resume
PROFESSIONAL
Intern Graphic Design cum Video Editing (Sales and Marketing department)
Diverse Supply Chain Sdn. Bhd.March 2023 – May 2023
✦Design posters for Facebook, WhatsApp and all promotional social media channels.
✦Operation of Photoshop and Adobe Illustrator.
✦Design custom robot stickers for customers and company online displays.
✦Designed Promotional Van sticker for company vehicle.
✦Creation of customer feedback videos.
✦Designing posters as requested for other departments, including human resources.
UI/Graphic Design/Multimedia Design/Web Design (IT department)
Software developerJan 2022 – Feb 2023
✦Collaboration with several departments including sales, marketing, HR and accounting.
✦Design of web pages and collaboration with programmer.
✦Edit and design of customer web buttons and carousel images.
✦Prepared festival and promotional banners.
✦Reviewing of promotional materials and final editing.
✦Created video for public advertising.
✦Creation of tutorial videos via Premiere Pro.
Supervisor
World Green Pulp Factory, Batang Kali outletMarch 2021 – December 2021
✦Translation of machine manuals from Chinese to English.
✦Organising and facilitating morning meeting with all staff and discussing any machine or engine working problems.
✦Budgeting meals for staff.
✦Building stakeholder relationships – locating customers and other external business for company to work alongside.
✦Invoices and stock replenishment.
✦Handling of factory utility bills and car tax.
✦Outstation to send stock to the customer.
✦Handle online company marketing and sales ( Facebook & WhatsApp ).
EXPERIENCE
Cashier/Admin/Reception/Designer
Empress CafeMarch 2020 – November 2020
✦(Cashier) Take customer orders and settle customer bills.
✦(Admin) Assisting with organising stock, past documents and accounting.
✦(Reception) Welcoming and greeting customers.
✦(Designer) Designed a new menu.
Sales Manager
Freelance BusinessJune 2018 – December 2019
✦Stock organisation, ordering and replenishment, ensuring customers recieve orders promptly.
✦Create an online shop at wechat account, take pictures for products and write copywriting to describe products and post out to the moment.
✦Add customer contact in groups and share contact to improve my sales performance.
✦Delivery of products to customers via postage and face to face.
Trainee & Part Time chef
Grand Hyatt Kuala Lumpur, Chinese kitchen and Indian kitchenJune 2017 – May 2018
✦Morning prepared breakfast buffet at Thirty8 Department for opening and get order with my handle stall, after that I will cooking the noodle soup then will take and serve to the customer.
✦Afternoon l went to the Dim Sum kitchen department to make frozen food and learned to chef how they prepare and serve for customer room plate orders. Also in the commissary kitchen department to learn how to clean and prepare the vegetables and fruit for all kitchen.
✦Prepared opening at JP Teres Indian and Chinese cuisine for full training two months time, cooking and getting paste to the kitchen to prepare waiting new customers.
✦Organising new food orders, cooking order and serving to customer.
✦Cutting and plating dishes at Event kitchen for customer banquets.
Skill
HTML
CSS
Graphic
User Interface
Figma
Microsoft Word
Microsoft Excel
Power Point
Skill
Illustrator
Photoshop
Premiere Pro
After Effect
Dreamweaver
Banner
WordPress
Poster
Diploma of Multimedia
Certificated of Student Representative Council (Head of International student)
Saito University College
May 2020 – June 2023
Diploma of Business
Stanford College Australia
September 2023 – present
Diploma in Food Preparation and Cooking
Cilantro Culinary Academy
March 2016 – March 2018
Sijil Pelajaran Malaysia (SPM)
SMK Seg Hwa (school of completely years 12)
January 2011 – December 2015
ENGLISH
BAHASA MALAY
MANDARIN
Contact With Me
Shuqi
CREATIVE DESIGNERFor inquiries and collaboration opportunities, reach out to me at peeshuqi@gmail.com. Let's create something extraordinary together!
Phone: +(61) 04 78293952 Email: peeshuqi@gmail.com