Alabang, Muntinlupa City Philippines

carlosdulos@gmail.com

(+63) 952 472 3866

facebook_logoinstagram_logo_whitex_white_logolinkedin_white_logogithub_white_logo
favicon

My Portfolio

favicon

My Portfolio

React Web Resume Pro...

Home / Blogs / Web Development / React Web Resume Pro...

Web Development

React Web Resume Project

image of author

JC Dulos

2024-12-13

๐Ÿš€ Building My Cyberpunk-Inspired Resume Website ๐Ÿ’ป

Crafting a portfolio is more than just presenting your achievementsโ€”it's about creating an experience. My latest project is a cyberpunk-inspired resume website, built using React and Tailwind CSS. This futuristic design features a dark purple theme with neon accents, ensuring a unique, professional, and responsive look. Hereโ€™s a walkthrough of the siteโ€™s design and features, complete with screenshots for each section!


๐ŸŒŸ Hero Section: Home Page

The Hero Section is where visitors are greeted with my name, a concise introduction, and quick-access buttons to my socials:
๐Ÿ”— LinkedIn
๐Ÿ™ GitHub
๐ŸŒ Personal Portfolio Website

Features:
Eye-catching neon-glow buttons.
Responsive design with dynamic navigation for a smooth user experience.

Screenshots:
PC View:
Hero_PC_view_acfdbc7935.jpg Mobile View:
Hero_Mobile_view_3060f122c9.jpg


๐ŸŽ“ Education Tab

This section outlines my academic journey, showcasing:
Advanced Diploma of Information Technology from Abbey College Australia.
Bachelor of Science in Computer Science (Magna Cum Laude) from iAcademy, Philippines.
Specialized certifications and courses like Mobile Game Development Training and Professional Culinary Arts Diploma.

Tailored for clarity, this tab uses a clean grid layout that ensures readability.

Screenshots:
PC View:
Education_PC_view_656d208981.jpg Mobile View:
Education_Mobile_view_d73ba3d076.jpg


โš™๏ธ Skills Tab

Organized into categories, this tab highlights:
Languages: Java, C#, PHP, TypeScript, JavaScript, Python.
Frameworks & Libraries: React.js, Spring Boot, Laravel, .NET Core, Next.js.
Tools & Platforms: Git, Docker, AWS, JIRA, Jenkins.

Tailwind's grid system ensures that the design is visually balanced and optimized for all screen sizes.

Screenshots:
PC View:
Skills_PC_view_a34b7eb20d.jpg Mobile View: Skills_Mobile_view_116fd2c68c.jpg


๐Ÿ’ผ Work Experience Tab

The Work Experience section is split into three subtabs, showcasing my diverse background:

  1. ๐Ÿ”ง Tech Experience
    Web Developer Intern at Maqro Capital: Optimized server response times by 75%.
    ThreatHunter Intern at Trend Micro: Enhanced threat analysis through automation scripts.
    Freelance Web Developer: Built SEO-optimized, responsive websites.

    Screenshots:
    PC View:
    Work_Exp_PC_view1_57f24eda3d.jpg Mobile View:
    Work_Experience_Mobile_view1_64f0a282ed.jpg

    1. ๐Ÿ‘จโ€๐Ÿณ Non-Tech Experience
      Roles in the hospitality industry, emphasizing my adaptability and interpersonal skills:
      Food and Beverage Attendant at Holiday Inn and Rydges Hotel.
      Room Attendant at Sofitel Darling Harbour.
      Bartender at freelance events.

    Screenshots:
    PC View:
    Work_Exp_PC_view2_7eea6c3dd1.jpg Mobile View:
    Work_Experience_Mobile_view2_910c7ab2c9.jpg

    1. ๐Ÿ› ๏ธ Internship Experience
      Accenture (EAM Developer Intern): Wrote onboarding guides and maintained code quality.
      Trend Micro (ThreatHunter Intern): Strengthened threat intelligence through automation.

    Screenshots:
    PC View:
    Work_Exp_PC_view3_2fc25919f3.jpg Mobile View: Work_Experience_Mobile_view3_7420d551b8.jpg


๐Ÿ“ž Contact Tab

This tab makes reaching out effortless with clickable links for:
โœ‰๏ธ Email: Directly opens the user's default mail app.
๐Ÿ“ž Phone Number: Initiates a call on mobile devices.
๐ŸŒ LinkedIn Profile: Redirects to my LinkedIn profile.

Tailored animations and hover effects enhance user interaction.

Screenshots:
PC View:
Contact_PC_view_67e0d98e8d.jpg Mobile View:
Contacts_Mobile_view_497310a8d2.jpg


๐Ÿ“ฑ Responsive Design

One of the project highlights is the fully responsive layout:
On smaller screens, the hamburger menu provides an intuitive way to navigate via a side panel.
Elements resize seamlessly, maintaining aesthetics across all devices.

Screenshot:
Mobile Menu View:
Menu_Mobile_view_db3503adbf.jpg


๐ŸŽ‰ Conclusion

This project reflects my technical expertise and creative flair, merging functionality with a visually stunning cyberpunk aesthetic. From dynamic tabs to responsive design, each element is crafted to leave a lasting impression.

๐Ÿ’ก Check out the live site: Resume Website
๐Ÿ“ฉ Have questions? Feel free to connect through the Contact Tab or my socials!

favicon

My Portfolio

Juan Carlos Dulos

facebook_logoinstagram_logo_whitex_white_logolinkedin_white_logogithub_white_logo

Contact

Alabang, Muntinlupa City Philippines


carlosdulos@gmail.com


(+63) 952 472 3866

Copyright ยฉ Ashu Web Corp | Designed by Ashu Web Corp - Powered by Strapi & Next.js