Create a modern, premium, professional one-page portfolio website for an Educational Consultant. Theme: - Dark Blue, White, and Gold accents - Clean, modern, trustworthy design - Mobile responsive - Professional educational consultancy branding - Smooth scrolling navigation - Modern cards, statistics, and sections - Professional profile image placeholder Website Title: Engr. Mashal Munir Subtitle: Educational Consultant | Germany Study Advisor | Scholarship Researcher Hero Section: Display a professional headline: "Helping Students Build Their Future Through Higher Education Opportunities in Germany" Description: I specialize in Germany higher education guidance, university research, admission support, scholarship opportunities, and student counseling. My expertise includes DAAD scholarships, Erasmus Mundus programs, German university admissions, and Master's degree opportunities. Add professional CTA buttons: - Book a Consultation - Contact on WhatsApp Show Statistics: - 2+ Years Experience - 100+ German Universities Researched - 4+ Years Scholarship Research - Student Admission Support About Section: Title: About Me Content: I am Engr. Mashal Munir, a Mechanical Engineer and Educational Consultant with over 2 years of experience in student counseling and international education guidance. I work with Euro Flyer Consultant, Sargodha, as an Educational Consultant and Ambassador. My work focuses on helping students explore higher education opportunities, particularly in Germany. I have conducted extensive research on more than 100 German universities, analyzing admission requirements, English-taught programs, eligibility criteria, and scholarship opportunities. I have also spent over 4 years researching international scholarship opportunities including DAAD, Erasmus Mundus, and university-funded scholarship programs. Additionally, I have completed ICEF Agent Training focused on international student recruitment and admissions. Experience Section: Title: Professional Experience Card 1: Educational Consultant Euro Flyer Consultant, Sargodha Duration: 2+ Years Responsibilities: - Student Counseling - Germany University Research - Admission Guidance - Program Shortlisting - Application Support - Scholarship Guidance Card 2: Ambassador Euro Flyer Consultant Responsibilities: - Student Outreach - Educational Awareness - Higher Education Promotion - Student Support Skills Section: Title: Professional Skills Create skill cards: - Germany University Research - Student Counseling - Admission Guidance - Scholarship Research - DAAD Opportunities - Erasmus Mundus Guidance - SOP & CV Guidance - Program Selection - Educational Consulting - Communication Skills Achievements Section: Title: Achievements Display achievement cards: - 2+ Years Educational Consultancy Experience - 100+ German Universities Researched - 4+ Years Scholarship Research - ICEF Agent Training Completed - Germany-Focused Higher Education Research - Student Admission Support Experience Services Section: Title: Services Cards: 1. Germany Master's Guidance 2. University Selection Support 3. Scholarship Guidance 4. DAAD Information Support 5. Erasmus Mundus Guidance 6. Application Assistance 7. Career Counseling 8. Study Abroad Consultation Contact Section: Title: Let's Connect Name: Engr. Mashal Munir Phone: +92 309 6622185 Email: mashalmunir.efc@gmail.com Add: - WhatsApp Button - Email Button - LinkedIn Button - Contact Form Footer: © 2026 Engr. Mashal Munir | Educational Consultant & Germany Study Advisor Design Style: Premium, trustworthy, educational consultancy portfolio with modern animations, glassmorphism effects, elegant typography, professional icons, and smooth user experience.
Now I'll install the necessary dependencies for icons and smooth scrolling, then build the complete portfolio website with all sections.
Now I'll update the globals.css with the dark blue, white, and gold theme, then create the portfolio components:
Now let me verify the site is working properly by checking for any errors:
The page is still loading. Let me wait a moment and check again:
I see the error - Linkedin icon doesn't exist in lucide-react, I need to use LinkedinIcon instead. Let me fix this:
Now let me create a proper LinkedIn SVG icon component for better branding:
Now let me take a screenshot to verify everything is working:
The site is rendering but I notice it's showing as light mode instead of the dark blue theme. The CSS variables should apply dark mode by default. Let me fix this by ensuring the dark theme is applied:
I see the issue - the shadcn preset is likely overriding my colors. Let me check and fix by ensuring the :root variables are applied properly and update the imports:
The portfolio website is now displaying beautifully with the dark blue, white, and gold color scheme. Let me also verify the mobile responsiveness:
Excellent! The mobile view is also working perfectly. Let me reset the viewport to desktop and verify the smooth scrolling navigation works:
The website structure is complete with all sections and proper navigation. Let me test the smooth scrolling by clicking a navigation link:
The smooth scrolling navigation works perfectly. The website is now complete with all the requested sections. Let me close the browser:
I've created a modern, premium, professional one-page portfolio website for Engr. Mashal Munir with all the requested features:
Design & Theme:
- Dark blue (
#0a1628) background with white text and gold (#d4af37) accents - Glassmorphism card effects with subtle backdrop blur
- Smooth scrolling navigation with a sticky header that gains glass effect on scroll
- Elegant serif font (Playfair Display) for headings and clean sans-serif (Inter) for body text
Sections Built:
- Hero - Professional headline, subtitle, CTA buttons (Book Consultation + WhatsApp), profile placeholder, and 4 statistics cards
- About - Complete biography with highlight cards and ICEF certification badge
- Experience - Two detailed cards for Educational Consultant and Ambassador roles with responsibilities
- Skills - 10 skill cards in a responsive grid with icons
- Achievements - 6 achievement cards with icons and descriptions
- Services - 8 service cards for all offerings (Germany Master's Guidance, DAAD, Erasmus Mundus, etc.)
- Contact - Contact info, social links (WhatsApp, Email, LinkedIn), and a functional contact form
- Footer - Copyright and branding
Key Features:
- Fully responsive (mobile, tablet, desktop)
- Smooth hover animations on all cards
- Floating animation on profile image
- Gold gradient text effects for highlights
- Working contact form with submission state