Portfolio with VS Code UI

Project Brief

This portfolio is a web project inspired by the Visual Studio Code UI, featuring a dark theme, sidebar navigation, tab system, and a coding editor-like interface. It was designed to showcase projects, skills, and personal information in a unique and interactive way.

Features

  • VS Code UI Layout: Dark theme, sidebar, explorer panel, and terminal section.
  • Tab System: Different sections like “Home”, “About Me,” “Projects,” and “Contact” can be switched like VS Code tabs.
  • Code Editor Look: Project showcase styled like a code editor.
  • Custom Icons & Fonts: Uses VS Code-like fonts and icons for an authentic feel.

Plugins

  • Elementor Pro
  • Code Snippet

More Details

Type

Portfolio

Date

19 Feb 2025

Duration

2 Days

Country

Bangladesh

Contributor/s

Nurul

Build bold. Dream big. Launch now!

Tired of websites that blend into the crowd?
Let’s craft a digital masterpiece that turns visitors into fans and clicks into connections.

File Explorer

Search This PC

File Explorer

Search About

This website designed and developed by Nurul Hudda and designed with Elementor. Design inspiration from Windows 11.

File Explorer

Search Projects

This PC

This website designed and developed by Nurul Hudda and designed with Elementor. Design inspiration from Windows 11.

Contact.txt

File Explorer

Search Contact

This website designed and developed by Nurul Hudda and designed with Elementor. Design inspiration from Windows 11.

Projects.txt

Windows 11 – Themed Portfolio

Description: This portfolio is inspired by the Windows 11 UI, featuring a clean, modern, and glassmorphic design with smooth animations. It mimics the Windows 11 interface to provide a unique and interactive user experience, making your portfolio look like an operating system.

Technologies: Elementor, WordPress, JavaScript.

 

Portfolio with VS Code UI

Description: This portfolio is a web project inspired by the Visual Studio Code UI, featuring a dark theme, sidebar navigation, tab system, and a coding editor-like interface. It was designed to showcase projects, skills, and personal information in a unique and interactive way.

Technologies: Elementor, WordPress, JavaScript

About.txt

Developer Profile:

  • Name: Nurul Hudda
  • Profession: Web Designer & Developer
  • Expertise: Elementor, WordPress, HTML, CSS, JavaScript

Experience:

  • Years of Experience: 1.5+ Years
  • Projects: 60+ with Elementor


Skills:

  • Primary Skill: Web Development
  • Tools: Elementor Pro, VS Code, Figma, Adobe XD


Contact:

Nurul Hudda - Visual Studio Code

Explorer

portfolio

The reference site was created by Harwin Dan using Next.js, while this site has been built with the Elementor Page Builder by Nurul Hudda.

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nurul's Portfolio</title>
    <link rel="stylesheet" href="About.css">
</head>
<body>
    <header>
        <h1>Welcome to My Portfolio</h1>
        <p>Hi, I'm Nurul – A Web Designer & Developer</p>
    </header>
    
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
    
    <section>
        <h2>Crafting Unique Web Experiences</h2>
        <p>Passionate about building aesthetic & functional websites with Elementor.</p>
    </section>
    
    <footer>
        <p>© 2025 Nurul. All rights reserved.</p>
    </footer>
<//body>
</html>
				
			
				
					/* Developer Profile */
.nurul {
    name: "Nurul Hudda";
    profession: "Web Designer & Developer";
    expertise: ["Elementor", "WordPress", "HTML", "CSS", "JavaScript"];
}

/* Experience */
.experience {
    years: 1.5+ Years;
    projects: 60+ with Elementor;
}

/* Skills */
.skills {
    primary: "Web Development";
    tools: ["Elementor Pro", "VS Code", "Figma", "Adobe xd"];
}

/* Contact */
.contact {
    email: "hello@nurul.docstec.com";
    linkedin: "www.linkedin.com/in/nurulhudda247";
    website: "www.nurul.docstec.com";
    location: "Remote, Worldwide";
}
				
			
				
					// Nurul's Portfolio
const developer = {
    name: "Nurul Hudda",
    role: "Web Designer & Developer",
    skills: ["Elementor", "HTML", "CSS", "JavaScript"],
    projects: [
        { title: "Personal Portfolio", status: "Ongoing" },
        { title: "Landing Page", status: "Completed" },
        { title: "E-Commerce Website", status: "Completed" },
        { title: "Company Profile Website", status: "Completed" },
        { title: "Learning Management System", status: "Completed" },
        { title: "Charity Website", status: "Completed" },
    ]
};
				
			
				
					<?php
// Contact form handling
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    echo "Thanks for reaching out, " . htmlspecialchars($_POST["name"]) . "!";
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Nurul</title>
</head>
<body>
    <h1>Contact Me</h1>
    
    <!-- Basic Info -->
    <p><strong>Email:</strong> nurulhudda247@gmail.com</p>
    <p><strong>Phone:</strong> +880 1755 456 278</p>
    <p><strong>Follow me on:</strong></p>
    <ul>
        <li><a href="https://www.linkedin.com/in/nurulhudda247/">LinkedIn</a></li>
        <li><a href="wa.link/miz7am">Whatsapp</a></li>
    </ul>

    <!-- Contact Form -->
    <form method="POST">
        <label>Name:</label><br>
        <input type="text" name="name" required><br><br>
        
        <label>Email:</label><br>
        <input type="email" name="email" required><br><br>

        <label>Message:</label><br>
        <textarea name="message" required></textarea><br><br>

        <button type="submit">Send Message</button>
    </form>
</body>
</html>