Website Code Generator
Run ID: 69bc9da805a86f9557abaf23•2026-03-29Web Development
PantheraHive BOS
BOS Dashboard

Website Code Generation Complete: John Smith Dev Portfolio

Here is the complete HTML, CSS, and JavaScript code for your "John Smith Dev" portfolio website, incorporating a dark blue and white color scheme and the requested pages (Home, About, Portfolio, Contact). This output is immediately actionable and ready for deployment.

1. Project Structure and Overview

The generated code is organized into three core files:

To use this code:

  1. Create a new folder for your website (e.g., JohnSmithDevPortfolio).
  2. Inside this folder, create three files: index.html, style.css, and script.js.
  3. Copy and paste the respective code blocks below into their corresponding files.
  4. Open index.html in your web browser to see your new website.
  5. You can then upload these files to a web hosting service to make your website live.

2. index.html (Website Structure)

This file defines the content and layout of your "John Smith Dev" portfolio.

css • 8,588 chars
/* Basic Reset & Global Styles */
:root {
    --primary-dark-blue: #1A237E; /* Deep Dark Blue */
    --secondary-dark-blue: #283593; /* Slightly lighter dark blue for accents */
    --accent-blue: #3F51B5; /* A more vibrant blue for highlights */
    --white: #FFFFFF;
    --light-grey: #E0E0E0;
    --text-color: #CFD8DC; /* Light grey for main text on dark background */
    --heading-color: var(--white);
    --border-color: rgba(255, 255, 255, 0.1);

    --font-primary: 'Roboto', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--primary-dark-blue);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    color: var(--accent-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--white);
}

ul {
    list-style: none;
}

h1, h2, h3 {
    font-family: var(--font-secondary);
    color: var(--heading-color);
    margin-bottom: 1rem;
    line-height: 1.2;
}

h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
}

h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--accent-blue);
    border-radius: 2px;
}

p {
    margin-bottom: 1rem;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: 600;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease;
    border: none;
    cursor: pointer;
    font-family: var(--font-secondary);
}

.primary-btn {
    background-color: var(--accent-blue);
    color: var(--white);
}

.primary-btn:hover {
    background-color: var(--secondary-dark-blue);
    color: var(--white);
}

.secondary-btn {
    background-color: transparent;
    color: var(--accent-blue);
    border: 2px solid var(--accent-blue);
    padding: 10px 23px;
}

.secondary-btn:hover {
    background-color: var(--accent-blue);
    color: var(--white);
}

/* Header */
.main-header {
    background-color: var(--secondary-dark-blue);
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.8rem;
    font-weight: 700;
}

.logo a {
    color: var(--white);
    text-decoration: none;
}

.logo a:hover {
    color: var(--light-grey);
}

.main-nav ul {
    display: flex;
}

.main-nav li {
    margin-left: 30px;
}

.main-nav a {
    color: var(--light-grey);
    font-weight: 500;
    font-size: 1.1rem;
    padding: 5px 0;
    position: relative;
}

.main-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-blue);
    transition: width 0.3s ease;
}

.main-nav a:hover::after,
.main-nav a.active::after {
    width: 100%;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--white);
}

/* Hero Section */
.hero-section {
    background: linear-gradient(rgba(26, 35, 126, 0.8), rgba(26, 35, 126, 0.8)), url('https://via.placeholder.com/1920x1080?text=Hero+Background') no-repeat center center/cover;
    color: var(--white);
    text-align: center;
    padding: 100px 0;
    display: flex;
    align-items: center;
    min-height: 80vh; /* Make hero section take up most of the viewport height */
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-content h2 {
    font-size: 4rem;
    margin-bottom: 1rem;
    line-height: 1;
    color: var(--white); /* Override general h2 color */
}

.hero-content h2::after {
    display: none; /* Remove underline from hero H2 */
}

.hero-content p {
    font-size: 1.5rem;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Content Sections */
.content-section {
    padding: 80px 0;
    background-color: var(--primary-dark-blue);
    border-bottom: 1px solid var(--border-color);
}

.content-section:nth-of-type(even) {
    background-color: var(--secondary-dark-blue);
}

.section-intro {
    text-align: center;
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto 3rem auto;
}

/* About Section */
.about-content {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
    justify-content: center;
}

.profile-pic {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--accent-blue);
    flex-shrink: 0;
}

.about-content p {
    flex: 1;
    min-width: 300px;
    max-width: 700px;
    text-align: justify;
}

/* Portfolio Section */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.portfolio-item {
    background-color: var(--primary-dark-blue);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.portfolio-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.portfolio-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-bottom: 1px solid var(--border-color);
}

.portfolio-item h3 {
    font-size: 1.8rem;
    margin: 1.5rem 1.5rem 0.5rem 1.5rem;
    color: var(--white);
}

.portfolio-item p {
    padding: 0 1.5rem;
    margin-bottom: 1.5rem;
    flex-grow: 1; /* Allows text to take up available space */
}

.portfolio-item .btn {
    margin: 0 1.5rem 1.5rem 1.5rem;
    align-self: flex-start; /* Aligns button to the left */
}


/* Contact Section */
.contact-form {
    max-width: 700px;
    margin: 0 auto 3rem auto;
    background-color: var(--primary-dark-blue);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--white);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background-color: var(--secondary-dark-blue);
    color: var(--white);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.3);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-info {
    text-align: center;
    margin-top: 3rem;
}

.contact-info ul {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.contact-info a {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--accent-blue);
}

/* Footer */
.main-footer {
    background-color: var(--secondary-dark-blue);
    color: var(--light-grey);
    text-align: center;
    padding: 40px 0;
    border-top: 1px solid var(--border-color);
}

.main-footer p {
    margin-bottom: 0.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .main-header .container {
        flex-direction: column;
        text-align: center;
    }

    .main-nav ul {
        margin-top: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .main-nav li {
        margin: 0 15px 10px 15px;
    }

    .hero-content h2 {
        font-size: 3rem;
    }

    .hero-content p {
        font-size: 1.2rem;
    }

    h2 {
        font-size: 2rem;
    }

    .about-content {
        flex-direction: column;
        align-items: center;
    }

    .about-content p {
        text-align: left;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .contact-info ul {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .hero-content h2 {
        font-size: 2.5rem;
    }

    .hero-content p {
        font-size: 1rem;
    }

    .main-nav li {
        margin: 0 10px 10px 10px;
    }
}
Sandboxed live preview

Actionable Details & Recommendations for script.js:

  • Smooth Scrolling: This script provides a modern smooth scroll effect to section anchors, making navigation more pleasant.
  • Active Navigation Highlight: As you scroll, the corresponding navigation link in the header will be highlighted, giving visual feedback to the user about their current page location.
  • Footer Year: The script automatically updates the copyright year in the footer.
  • Further Enhancements: You could expand this script to include:

* Mobile Navigation Toggle: Add a hamburger menu for smaller screens.

* Dynamic Content Loading: If you have many portfolio items, consider loading them dynamically.

* Animations: Implement scroll-reveal animations for sections as they enter the viewport using libraries like AOS (Animate On Scroll).

5. Live Preview (Conceptual)

While a direct live preview cannot be embedded in this text output, imagine opening index.html in your browser. You would see:

  • A dark blue background with white/light grey text.
  • A sticky header at the top with "John Smith Dev" on the left and "Home, About, Portfolio, Contact" navigation links on the right.
  • The "Home" link would be highlighted by default.
  • A large hero section welcoming visitors to "John Smith Dev" with a call to action button.
  • Scrolling down, you would transition into the "About Me" section, then "My Portfolio" with placeholder project cards, and finally the "Get In Touch" contact form and information.
  • Clicking any navigation link would smoothly scroll you to the corresponding section, and that link would become highlighted.
  • The footer would display the current year and your business name.

This setup provides a solid, professional foundation for your online portfolio. Good luck with your development!

Step 2: websitebuilder

Workflow Execution: Website Code Generator - Step 2: Deploy

App: websitebuilder

Focus: Deploy

The "Website Code Generator" workflow has successfully completed its generation phase, and we are now moving to the deployment phase. Below you will find the complete, production-ready HTML, CSS, and JavaScript code for your portfolio website, "John Smith Dev," adhering to a dark blue and white color scheme.

This output is designed to be immediately actionable, allowing you to launch your website quickly.

1. Summary of Website Specifications

  • Website Purpose: Portfolio
  • Business Name: John Smith Dev
  • Pages: Home, About, Portfolio, Contact
  • Color Scheme: Dark blue and white
  • Key Features: Responsive design, smooth navigation, clear sections, placeholder content.

2. Website Code Package

Here is the complete code for your website. You should save these into three separate files: index.html, style.css, and script.js within the same directory.

2.1. index.html (Main HTML File)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>John Smith Dev - Portfolio</title>
    <meta name="description" content="Official portfolio website of John Smith Dev, showcasing projects, skills, and contact information.">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
    <!-- Favicon (optional) -->
    <!-- <link rel="icon" href="favicon.ico" type="image/x-icon"> -->
</head>
<body>
    <header class="main-header">
        <div class="container">
            <h1 class="logo"><a href="#home">John Smith Dev</a></h1>
            <nav class="main-nav">
                <button class="menu-toggle" aria-label="Toggle navigation">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                <ul class="nav-links">
                    <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>
        </div>
    </header>

    <main>
        <section id="home" class="hero-section">
            <div class="container">
                <div class="hero-content">
                    <h2>Hello, I'm John Smith.</h2>
                    <p class="tagline">A passionate web developer building modern and responsive web applications.</p>
                    <a href="#portfolio" class="btn primary-btn">View My Work</a>
                    <a href="#contact" class="btn secondary-btn">Get In Touch</a>
                </div>
            </div>
        </section>

        <section id="about" class="about-section section-padding">
            <div class="container">
                <h2>About Me</h2>
                <div class="about-content">
                    <div class="about-text">
                        <p>Welcome to my corner of the internet! I'm John Smith, a dedicated developer with a strong focus on creating intuitive and high-performing web experiences. My journey in development started with a curiosity for how things work online, and it quickly evolved into a passion for bringing ideas to life through code.</p>
                        <p>I specialize in front-end development, with a solid understanding of HTML, CSS, and JavaScript, and I'm always eager to learn new technologies and frameworks. I believe in clean code, user-centric design, and continuous improvement. Let's build something amazing together!</p>
                    </div>
                    <div class="skills-list">
                        <h3>My Skills</h3>
                        <ul>
                            <li>HTML5 & CSS3</li>
                            <li>JavaScript (ES6+)</li>
                            <li>React / Vue.js (Placeholder)</li>
                            <li>Responsive Design</li>
                            <li>Git & GitHub</li>
                            <li>UI/UX Principles</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <section id="portfolio" class="portfolio-section section-padding">
            <div class="container">
                <h2>My Portfolio</h2>
                <p class="section-description">A selection of my recent projects demonstrating my skills and problem-solving abilities.</p>
                <div class="portfolio-grid">
                    <div class="portfolio-item">
                        <img src="https://via.placeholder.com/400x250/3465a4/ffffff?text=Project+1" alt="Project 1 Thumbnail">
                        <h3>Project Title One</h3>
                        <p>A brief description of Project One, highlighting key technologies used and its purpose.</p>
                        <a href="#" class="btn tertiary-btn" target="_blank">View Project</a>
                    </div>
                    <div class="portfolio-item">
                        <img src="https://via.placeholder.com/400x250/3465a4/ffffff?text=Project+2" alt="Project 2 Thumbnail">
                        <h3>Project Title Two</h3>
                        <p>Description for Project Two, focusing on the challenges overcome and its impact.</p>
                        <a href="#" class="btn tertiary-btn" target="_blank">View Project</a>
                    </div>
                    <div class="portfolio-item">
                        <img src="https://via.placeholder.com/400x250/3465a4/ffffff?text=Project+3" alt="Project 3 Thumbnail">
                        <h3>Project Title Three</h3>
                        <p>Details about Project Three, including any unique features or design choices.</p>
                        <a href="#" class="btn tertiary-btn" target="_blank">View Project</a>
                    </div>
                    <div class="portfolio-item">
                        <img src="https://via.placeholder.com/400x250/3465a4/ffffff?text=Project+4" alt="Project 4 Thumbnail">
                        <h3>Project Title Four</h3>
                        <p>Summary of Project Four, explaining its functionality and my contribution.</p>
                        <a href="#" class="btn tertiary-btn" target="_blank">View Project</a>
                    </div>
                </div>
            </div>
        </section>

        <section id="contact" class="contact-section section-padding">
            <div class="container">
                <h2>Get In Touch</h2>
                <p class="section-description">Have a project in mind or just want to say hello? Feel free to reach out!</p>
                <form class="contact-form">
                    <div class="form-group">
                        <label for="name">Name:</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email:</label>
                        <input type="email" id="email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="message">Message:</label>
                        <textarea id="message" name="message" rows="6" required></textarea>
                    </div>
                    <button type="submit" class="btn primary-btn">Send Message</button>
                </form>
                <div class="contact-info">
                    <p>Email: <a href="mailto:john.smith@example.com">john.smith@example.com</a></p>
                    <p>LinkedIn: <a href="https://linkedin.com/in/johnsmithdev" target="_blank">linkedin.com/in/johnsmithdev</a></p>
                    <p>GitHub: <a href="https://github.com/johnsmithdev" target="_blank">github.com/johnsmithdev</a></p>
                </div>
            </div>
        </section>
    </main>

    <footer class="main-footer">
        <div class="container">
            <p>&copy; 2023 John Smith Dev. All rights reserved.</p>
            <div class="footer-links">
                <a href="#home">Home</a>
                <a href="#about">About</a>
                <a href="#portfolio">Portfolio</a>
                <a href="#contact">Contact</a>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>

2.2. style.css (Styling File)


/* General Resets & Variables */
:root {
    --color-dark-blue: #1a2b4c; /* Primary dark background */
    --color-medium-blue: #3465a4; /* Accent blue for highlights/buttons */
    --color-light-blue: #5b8ec2; /* Lighter accent for hover */
    --color-white: #ffffff;
    --color-off-white: #f0f0f0; /* Light text on dark, light background */
    --color-gray-text: #cccccc; /* Subtler text on dark */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    --max-width: 1200px;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--color-off-white);
    background-color: var(--color-dark-blue);
    overflow-x: hidden; /* Prevent horizontal scroll */
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

a {
    color: var(--color-medium-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-light-blue);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    margin-bottom: var(--spacing-sm);
    color: var(--color-white);
}

h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: var(--spacing-lg);
    position: relative;
}

h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--color-medium-blue);
    margin: 10px auto 0;
}

p {
    margin-bottom: var(--spacing-sm);
}

.section-padding {
    padding: var(--spacing-lg) 0;
}

.section-description {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--spacing-lg);
    color: var(--color-gray-text);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.8rem 1.8rem;
    border-radius: 5px;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
}

.primary-btn {
    background-color: var(--color-medium-blue);
    color: var(--color-white);
}

.primary-btn:hover {
    background-color: var(--color-light-blue);
}

.secondary-btn {
    background-color: transparent;
    color: var(--color-medium-blue);
    border-color: var(--color-medium-blue);
    margin-left: var(--spacing-sm);
}

.secondary-btn:hover {
    background-color: var(--color-medium-blue);
    color: var(--color-white);
}

.tertiary-btn {
    background-color: var(--color-dark-blue);
    color: var(--color-medium-blue);
    border-color: var(--color-medium-blue);
    font-size: 0.9rem;
    padding: 0.6rem 1.2rem;
}

.tertiary-btn:hover {
    background-color: var(--color-medium-blue);
    color: var(--color-white);
}

/* Header */
.main-header {
    background-color: var(--color-dark-blue);
    padding: var(--spacing-sm) 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.8rem;
    font-weight: 700;
}

.logo a {
    color: var(--color-white);
    text-decoration: none;
}

.nav-links {
    list-style: none;
    display: flex;
}

.nav-links li {
    margin-left: var(--spacing-md);
}

.nav-links a {
    color: var(--color-off-white);
    font-weight: 600;
    padding: 0.5rem 0;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-medium-blue);
    transition: width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: relative;
    z-index: 1001;
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-white);
    margin: 5px 0;
    transition: all 0.3s ease;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(rgba(26, 43, 76, 0.8), rgba(26, 43, 76, 0.8)), url('https://via.placeholder.com/1920x1080/1a2b4c/ffffff?text=Background+Image') no-repeat center center/cover;
    min-height: 80vh;
    display: flex;
    align-items: center;
    text-align: center;
    position: relative;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-lg) 0;
}

.hero-content h2 {
    font-size: 3.5rem;
    margin-bottom: var(--spacing-sm);
    color: var(--color-white);
}

.hero-content h2::after {
    display: none; /* Remove underline for hero heading */
}

.hero-content .tagline {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-lg);
    color: var(--color-off-white);
}

/* About Section */
.about-section {
    background-color: var(--color-off-white);
    color: var(--color-dark-blue);
}

.about-section h2, .about-section h3 {
    color: var(--color-dark-blue);
}

.about-content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    align-items: flex-start;
}

.about-text {
    flex: 2;
    min-width: 300px;
}

.skills-list {
    flex: 1;
    min-width: 200px;
    background-color: var(--color-dark-blue);
    padding: var(--spacing-md);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.skills-list h3 {
    margin-bottom: var(--spacing-sm);
    color: var(--color-white);
}

.skills-list ul {
    list-style: none;
}

.skills-list li {
    padding: 0.5rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    color: var(--color-off-white);
}

.skills-list li:last-child {
    border-bottom: none;
}

/* Portfolio Section */
.portfolio-section {
    background-color: var(--color-dark-blue);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
}

.portfolio-item {
    background-color: var(--color-dark-blue);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.portfolio-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.portfolio-item img {
    width: 100%;
    height: 200px; /* Fixed height for consistency */
    object-fit: cover;
    display: block;
}

.portfolio-item h3 {
    font-size: 1.4rem;
    margin: var(--spacing-sm) var(--spacing-md) 0.5rem;
}

.portfolio-item p {
    font-size: 0.95rem;
    color: var(--color-gray-text);
    padding: 0 var(--spacing-md);
    flex-grow: 1; /* Allows text to take up available space */
}

.portfolio-item .btn {
    margin: var(--spacing-md);
    align-self: flex-start; /* Aligns button to the left */
}


/* Contact Section */
.contact-section {
    background-color: var(--color-off-white);
    color: var(--color-dark-blue);
}

.contact-section h2 {
    color: var(--color-dark-blue);
}

.contact-form {
    max-width: 600px;
    margin: 0 auto var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--color-dark-blue);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: var(--spacing-sm);
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--color-off-white);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    background-color: #2b3c5e; /* Slightly lighter dark blue for input fields */
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-medium-blue);
    box-shadow: 0 0 0 2px rgba(52, 101, 164, 0.3);
}

.form-group textarea {
    resize: vertical;
}

.contact-form .btn {
    width: auto;
    margin-top: var(--spacing-sm);
}

.contact-info {
    text-align: center;
    margin-top: var(--spacing-md);
    color: var(--color-dark-blue);
}

.contact-info a {
    color: var(--color-medium-blue);
}

/* Footer */
.main-footer {
    background-color: var(--color-dark-blue);
    color: var(--color-gray-text);
    padding: var(--spacing-md) 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.main-footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.footer-links a {
    color: var(--color-gray-text);
    margin: 0 0.8rem;
}

.footer-links a:hover {
    color: var(--color-medium-blue);
}

/* Responsive Design */
@media (max-width: 768px) {
    .main-header .container {
        flex-wrap: wrap;
    }

    .main-nav {
        width: 100%;
        order: 1; /* Move nav below logo on small screens */
    }

    .nav-links {
        flex-direction: column;
        width: 100%;
        display: none; /* Hidden by default for mobile */
        text-align: center;
        background-color: var(--color-dark-blue);
        padding: var(--spacing-sm) 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-links.active {
        display: flex; /* Show when active */
    }

    .nav-links li {
        margin: 0;
        padding: 0.8rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .nav-links li:last-child {
        border-bottom: none;
    }

    .menu-toggle {
        display: block;
    }

    .menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .hero-content h2 {
        font-size: 2.5rem;
    }
    .hero-content .tagline {
        font-size: 1.2rem;
    }

    .hero-content .btn {
        margin-bottom: var(--spacing-sm);
        display: block;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-content .secondary-btn {
        margin-left: auto; /* Override default margin */
    }

    .about-content {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .portfolio-grid {
        grid-template-columns: 1fr; /* Single column on small screens */
    }

    h2 {
        font-size: 2rem;
        margin-bottom: var(--spacing-md);
    }

    .section-padding {
        padding: var(--spacing-md) 0;
    }

    .main-footer .footer-links {
        flex-direction: column;
    }
    .main-footer .footer-links a {
        margin: 0.5rem 0;
    }
}

@media (max-width: 480px) {
    .hero-content h2 {
        font-size: 2rem;
    }
    .hero-content .tagline {
        font-size: 1rem;
    }
}

2.3. script.js (JavaScript File)


document.addEventListener('DOMContentLoaded', () => {
    // Smooth scrolling for navigation links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();

            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);

            if (targetElement) {
                // Close mobile menu if open
                const navLinks = document.querySelector('.nav-links');
                const menuToggle = document.querySelector('.menu-toggle');
                if (navLinks.classList.contains('active')) {
                    navLinks.classList.remove('active');
                    menuToggle.classList.remove('active');
                }

                // Scroll to target with offset for fixed header
                const headerOffset = document.querySelector('.main-header').offsetHeight;
                const elementPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
                const offsetPosition = elementPosition - headerOffset - 20; // Added extra padding

                window.scrollTo({
                    top: offsetPosition,
                    behavior: "smooth"
                });
            }
        });
    });

    // Mobile navigation toggle
    const menuToggle = document.querySelector('.menu-toggle');
    const navLinks = document.querySelector('.nav-links');

    if (menuToggle && navLinks) {
        menuToggle.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            menuToggle.classList.toggle('active');
        });
    }

    // Add 'active' class to nav link on scroll
    const sections = document.querySelectorAll('section');
    const navLi = document.querySelectorAll('.nav-links li a');

    window.addEventListener('scroll', () => {
        let current = '';

        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.clientHeight;
            // Adjust offset to account for fixed header
            const headerHeight = document.querySelector('.main-header').offsetHeight;
            if (pageYOffset >= sectionTop - headerHeight - 50) { // -50 for a little buffer
                current = section.getAttribute('id');
            }
        });

        navLi.forEach(a => {
            a.classList.remove('active');
            if (a.getAttribute('href').includes(current)) {
                a.classList.add('active');
            }
        });
    });

    // Handle contact form submission (client-side only for now)
    const contactForm = document.querySelector('.contact-form');
    if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            // In a real application, you would send this data to a server.
            // For now, we'll just log it and show an alert.
            const formData = new FormData(this);
            const formObject = {};
            formData.forEach((value, key) => {
                formObject[key] = value;
            });
            console.log('Form Submitted:', formObject);
            alert('Thank you for your message! We will get back to you shortly.');
            this.reset(); // Clear the form
        });
    }
});

3. Live Preview & Local Setup

While a direct live preview cannot be provided in this text-based output, you can easily view your website locally:

  1. Save the files: Create a folder (e.g., JohnSmithDevWebsite).
  2. Place files: Save index.html, style.css, and script.js inside this folder.
  3. Open index.html: Double-click index.html in your file explorer. It will open in your default web browser.

Expected Live Preview Description:

Your website will load with a clean, modern aesthetic. The primary

website_code_generator.txt
Download source file
Copy all content
Full output as text
Download ZIP
IDE-ready project ZIP
Copy share link
Permanent URL for this run
Get Embed Code
Embed this result on any website
Print / Save PDF
Use browser print dialog
\n\n\n```\n\n**Actionable Details & Recommendations for `index.html`:**\n* **Placeholder Content:** Replace `[X years]`, `[mention your core technologies]`, `[mention hobbies]`, and all project-specific text and image `src` attributes with your actual information.\n* **Images:** For portfolio items, replace `https://via.placeholder.com/...` with links to your project screenshots or actual images. For your profile picture, replace `https://via.placeholder.com/200` with a link to your headshot.\n* **Links:** Update the `href` attributes for your social media links (LinkedIn, GitHub) and email address in the contact section.\n* **Contact Form:** The `
` element is purely client-side HTML. To make it functional (send emails), you will need to integrate a backend service (e.g., Formspree, Netlify Forms, or a custom server-side script). This is outside the scope of this initial code generation but is a crucial next step for a live contact form.\n\n---\n\n### 3. `style.css` (Website Styling)\n\nThis file contains all the CSS rules to bring your \"John Smith Dev\" portfolio to life with a dark blue and white theme.\n\n```css\n/* Basic Reset & Global Styles */\n:root {\n --primary-dark-blue: #1A237E; /* Deep Dark Blue */\n --secondary-dark-blue: #283593; /* Slightly lighter dark blue for accents */\n --accent-blue: #3F51B5; /* A more vibrant blue for highlights */\n --white: #FFFFFF;\n --light-grey: #E0E0E0;\n --text-color: #CFD8DC; /* Light grey for main text on dark background */\n --heading-color: var(--white);\n --border-color: rgba(255, 255, 255, 0.1);\n\n --font-primary: 'Roboto', sans-serif;\n --font-secondary: 'Montserrat', sans-serif;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nbody {\n font-family: var(--font-primary);\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--primary-dark-blue);\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n}\n\na {\n color: var(--accent-blue);\n text-decoration: none;\n transition: color 0.3s ease;\n}\n\na:hover {\n color: var(--white);\n}\n\nul {\n list-style: none;\n}\n\nh1, h2, h3 {\n font-family: var(--font-secondary);\n color: var(--heading-color);\n margin-bottom: 1rem;\n line-height: 1.2;\n}\n\nh2 {\n font-size: 2.5rem;\n text-align: center;\n margin-bottom: 2.5rem;\n position: relative;\n}\n\nh2::after {\n content: '';\n position: absolute;\n left: 50%;\n bottom: -10px;\n transform: translateX(-50%);\n width: 60px;\n height: 3px;\n background-color: var(--accent-blue);\n border-radius: 2px;\n}\n\np {\n margin-bottom: 1rem;\n}\n\n/* Buttons */\n.btn {\n display: inline-block;\n padding: 12px 25px;\n border-radius: 5px;\n font-weight: 600;\n text-transform: uppercase;\n transition: background-color 0.3s ease, color 0.3s ease;\n border: none;\n cursor: pointer;\n font-family: var(--font-secondary);\n}\n\n.primary-btn {\n background-color: var(--accent-blue);\n color: var(--white);\n}\n\n.primary-btn:hover {\n background-color: var(--secondary-dark-blue);\n color: var(--white);\n}\n\n.secondary-btn {\n background-color: transparent;\n color: var(--accent-blue);\n border: 2px solid var(--accent-blue);\n padding: 10px 23px;\n}\n\n.secondary-btn:hover {\n background-color: var(--accent-blue);\n color: var(--white);\n}\n\n/* Header */\n.main-header {\n background-color: var(--secondary-dark-blue);\n padding: 1.5rem 0;\n border-bottom: 1px solid var(--border-color);\n position: sticky;\n top: 0;\n z-index: 1000;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\n}\n\n.main-header .container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.8rem;\n font-weight: 700;\n}\n\n.logo a {\n color: var(--white);\n text-decoration: none;\n}\n\n.logo a:hover {\n color: var(--light-grey);\n}\n\n.main-nav ul {\n display: flex;\n}\n\n.main-nav li {\n margin-left: 30px;\n}\n\n.main-nav a {\n color: var(--light-grey);\n font-weight: 500;\n font-size: 1.1rem;\n padding: 5px 0;\n position: relative;\n}\n\n.main-nav a::after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n width: 0;\n height: 2px;\n background-color: var(--accent-blue);\n transition: width 0.3s ease;\n}\n\n.main-nav a:hover::after,\n.main-nav a.active::after {\n width: 100%;\n}\n\n.main-nav a:hover,\n.main-nav a.active {\n color: var(--white);\n}\n\n/* Hero Section */\n.hero-section {\n background: linear-gradient(rgba(26, 35, 126, 0.8), rgba(26, 35, 126, 0.8)), url('https://via.placeholder.com/1920x1080?text=Hero+Background') no-repeat center center/cover;\n color: var(--white);\n text-align: center;\n padding: 100px 0;\n display: flex;\n align-items: center;\n min-height: 80vh; /* Make hero section take up most of the viewport height */\n}\n\n.hero-content {\n max-width: 800px;\n margin: 0 auto;\n}\n\n.hero-content h2 {\n font-size: 4rem;\n margin-bottom: 1rem;\n line-height: 1;\n color: var(--white); /* Override general h2 color */\n}\n\n.hero-content h2::after {\n display: none; /* Remove underline from hero H2 */\n}\n\n.hero-content p {\n font-size: 1.5rem;\n margin-bottom: 2.5rem;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n}\n\n/* Content Sections */\n.content-section {\n padding: 80px 0;\n background-color: var(--primary-dark-blue);\n border-bottom: 1px solid var(--border-color);\n}\n\n.content-section:nth-of-type(even) {\n background-color: var(--secondary-dark-blue);\n}\n\n.section-intro {\n text-align: center;\n font-size: 1.2rem;\n max-width: 700px;\n margin: 0 auto 3rem auto;\n}\n\n/* About Section */\n.about-content {\n display: flex;\n flex-wrap: wrap;\n gap: 30px;\n align-items: flex-start;\n justify-content: center;\n}\n\n.profile-pic {\n width: 200px;\n height: 200px;\n border-radius: 50%;\n object-fit: cover;\n border: 5px solid var(--accent-blue);\n flex-shrink: 0;\n}\n\n.about-content p {\n flex: 1;\n min-width: 300px;\n max-width: 700px;\n text-align: justify;\n}\n\n/* Portfolio Section */\n.portfolio-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 30px;\n}\n\n.portfolio-item {\n background-color: var(--primary-dark-blue);\n border: 1px solid var(--border-color);\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n display: flex;\n flex-direction: column;\n}\n\n.portfolio-item:hover {\n transform: translateY(-5px);\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);\n}\n\n.portfolio-item img {\n width: 100%;\n height: 250px;\n object-fit: cover;\n border-bottom: 1px solid var(--border-color);\n}\n\n.portfolio-item h3 {\n font-size: 1.8rem;\n margin: 1.5rem 1.5rem 0.5rem 1.5rem;\n color: var(--white);\n}\n\n.portfolio-item p {\n padding: 0 1.5rem;\n margin-bottom: 1.5rem;\n flex-grow: 1; /* Allows text to take up available space */\n}\n\n.portfolio-item .btn {\n margin: 0 1.5rem 1.5rem 1.5rem;\n align-self: flex-start; /* Aligns button to the left */\n}\n\n\n/* Contact Section */\n.contact-form {\n max-width: 700px;\n margin: 0 auto 3rem auto;\n background-color: var(--primary-dark-blue);\n padding: 30px;\n border-radius: 8px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);\n}\n\n.form-group {\n margin-bottom: 20px;\n}\n\n.form-group label {\n display: block;\n margin-bottom: 8px;\n font-weight: 600;\n color: var(--white);\n}\n\n.form-group input[type=\"text\"],\n.form-group input[type=\"email\"],\n.form-group textarea {\n width: 100%;\n padding: 12px;\n border: 1px solid var(--border-color);\n border-radius: 5px;\n background-color: var(--secondary-dark-blue);\n color: var(--white);\n font-size: 1rem;\n outline: none;\n transition: border-color 0.3s ease, box-shadow 0.3s ease;\n}\n\n.form-group input[type=\"text\"]:focus,\n.form-group input[type=\"email\"]:focus,\n.form-group textarea:focus {\n border-color: var(--accent-blue);\n box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.3);\n}\n\n.form-group textarea {\n resize: vertical;\n min-height: 120px;\n}\n\n.contact-info {\n text-align: center;\n margin-top: 3rem;\n}\n\n.contact-info ul {\n display: flex;\n justify-content: center;\n gap: 25px;\n margin-top: 15px;\n flex-wrap: wrap;\n}\n\n.contact-info a {\n font-size: 1.1rem;\n font-weight: 500;\n color: var(--accent-blue);\n}\n\n/* Footer */\n.main-footer {\n background-color: var(--secondary-dark-blue);\n color: var(--light-grey);\n text-align: center;\n padding: 40px 0;\n border-top: 1px solid var(--border-color);\n}\n\n.main-footer p {\n margin-bottom: 0.5rem;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .main-header .container {\n flex-direction: column;\n text-align: center;\n }\n\n .main-nav ul {\n margin-top: 15px;\n flex-wrap: wrap;\n justify-content: center;\n }\n\n .main-nav li {\n margin: 0 15px 10px 15px;\n }\n\n .hero-content h2 {\n font-size: 3rem;\n }\n\n .hero-content p {\n font-size: 1.2rem;\n }\n\n h2 {\n font-size: 2rem;\n }\n\n .about-content {\n flex-direction: column;\n align-items: center;\n }\n\n .about-content p {\n text-align: left;\n }\n\n .portfolio-grid {\n grid-template-columns: 1fr;\n }\n\n .contact-info ul {\n flex-direction: column;\n gap: 10px;\n }\n}\n\n@media (max-width: 480px) {\n .hero-content h2 {\n font-size: 2.5rem;\n }\n\n .hero-content p {\n font-size: 1rem;\n }\n\n .main-nav li {\n margin: 0 10px 10px 10px;\n }\n}\n```\n\n**Actionable Details & Recommendations for `style.css`:**\n* **Color Customization:** All colors are defined using CSS variables at the top (`:root`). Easily change `var(--primary-dark-blue)`, `var(--accent-blue)`, `var(--white)`, etc., to fine-tune your color scheme without searching through the entire stylesheet.\n* **Fonts:** The current fonts (`Roboto`, `Montserrat`) are imported from Google Fonts. You can change these by updating the `@import` links in the `` of `index.html` and the `var(--font-primary)`/`var(--font-secondary)` variables.\n* **Hero Background:** Replace `https://via.placeholder.com/1920x1080?text=Hero+Background` in the `.hero-section` background with an actual high-quality image that represents you or your work.\n* **Responsiveness:** Basic media queries are included to ensure your site looks good on smaller screens. Test on various devices and adjust as needed.\n\n---\n\n### 4. `script.js` (Website Interactivity)\n\nThis file adds smooth scrolling to navigation links and highlights the active link based on the user's scroll position.\n\n```javascript\ndocument.addEventListener('DOMContentLoaded', () => {\n const navLinks = document.querySelectorAll('.main-nav .nav-link');\n const sections = document.querySelectorAll('section');\n const currentYearSpan = document.getElementById('current-year');\n\n // Set current year in footer\n if (currentYearSpan) {\n currentYearSpan.textContent = new Date().getFullYear();\n }\n\n // Smooth scrolling for navigation links\n navLinks.forEach(link => {\n link.addEventListener('click', (e) => {\n e.preventDefault();\n const targetId = link.getAttribute('href').substring(1);\n const targetSection = document.getElementById(targetId);\n\n if (targetSection) {\n // Adjust scroll position to account for fixed header\n const headerOffset = document.querySelector('.main-header').offsetHeight;\n const elementPosition = targetSection.getBoundingClientRect().top + window.pageYOffset;\n const offsetPosition = elementPosition - headerOffset - 20; // -20 for a little extra padding\n\n window.scrollTo({\n top: offsetPosition,\n behavior: 'smooth'\n });\n }\n });\n });\n\n // Highlight active navigation link based on scroll position\n const observerOptions = {\n root: null,\n rootMargin: '0px 0px -50% 0px', // When section is 50% in view, it becomes active\n threshold: 0\n };\n\n const sectionObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // Remove active class from all links\n navLinks.forEach(link => link.classList.remove('active'));\n\n // Add active class to the link corresponding to the intersecting section\n const activeLink = document.querySelector(`.main-nav a[href=\"#${entry.target.id}\"]`);\n if (activeLink) {\n activeLink.classList.add('active');\n }\n }\n });\n }, observerOptions);\n\n sections.forEach(section => {\n sectionObserver.observe(section);\n });\n\n // Special handling for initial load to set active link for #home\n const initialActiveLink = document.querySelector('.main-nav a[href=\"#home\"]');\n if (initialActiveLink && window.pageYOffset < 100) { // If at the very top, home is active\n navLinks.forEach(link => link.classList.remove('active'));\n initialActiveLink.classList.add('active');\n }\n\n // Ensure active link is set correctly on page load/refresh if not at top\n window.addEventListener('scroll', () => {\n let currentActiveSection = 'home';\n sections.forEach(section => {\n const sectionTop = section.offsetTop - document.querySelector('.main-header').offsetHeight - 50; // Account for header height\n if (window.pageYOffset >= sectionTop) {\n currentActiveSection = section.id;\n }\n });\n\n navLinks.forEach(link => {\n link.classList.remove('active');\n if (link.getAttribute('href') === `#${currentActiveSection}`) {\n link.classList.add('active');\n }\n });\n });\n});\n```\n\n**Actionable Details & Recommendations for `script.js`:**\n* **Smooth Scrolling:** This script provides a modern smooth scroll effect to section anchors, making navigation more pleasant.\n* **Active Navigation Highlight:** As you scroll, the corresponding navigation link in the header will be highlighted, giving visual feedback to the user about their current page location.\n* **Footer Year:** The script automatically updates the copyright year in the footer.\n* **Further Enhancements:** You could expand this script to include:\n * **Mobile Navigation Toggle:** Add a hamburger menu for smaller screens.\n * **Dynamic Content Loading:** If you have many portfolio items, consider loading them dynamically.\n * **Animations:** Implement scroll-reveal animations for sections as they enter the viewport using libraries like AOS (Animate On Scroll).\n\n---\n\n### 5. Live Preview (Conceptual)\n\nWhile a direct live preview cannot be embedded in this text output, imagine opening `index.html` in your browser. You would see:\n\n* A **dark blue background** with **white/light grey text**.\n* A **sticky header** at the top with \"John Smith Dev\" on the left and \"Home, About, Portfolio, Contact\" navigation links on the right.\n* The \"Home\" link would be highlighted by default.\n* A large **hero section** welcoming visitors to \"John Smith Dev\" with a call to action button.\n* Scrolling down, you would transition into the \"About Me\" section, then \"My Portfolio\" with placeholder project cards, and finally the \"Get In Touch\" contact form and information.\n* Clicking any navigation link would smoothly scroll you to the corresponding section, and that link would become highlighted.\n* The footer would display the current year and your business name.\n\nThis setup provides a solid, professional foundation for your online portfolio. Good luck with your development!\n\n## Workflow Execution: Website Code Generator - Step 2: Deploy\n\n**App:** websitebuilder\n**Focus:** Deploy\n\nThe \"Website Code Generator\" workflow has successfully completed its generation phase, and we are now moving to the deployment phase. Below you will find the complete, production-ready HTML, CSS, and JavaScript code for your portfolio website, \"John Smith Dev,\" adhering to a dark blue and white color scheme.\n\nThis output is designed to be immediately actionable, allowing you to launch your website quickly.\n\n---\n\n## 1. Summary of Website Specifications\n\n* **Website Purpose:** Portfolio\n* **Business Name:** John Smith Dev\n* **Pages:** Home, About, Portfolio, Contact\n* **Color Scheme:** Dark blue and white\n* **Key Features:** Responsive design, smooth navigation, clear sections, placeholder content.\n\n---\n\n## 2. Website Code Package\n\nHere is the complete code for your website. You should save these into three separate files: `index.html`, `style.css`, and `script.js` within the same directory.\n\n### 2.1. `index.html` (Main HTML File)\n\n```html\n\n\n\n \n \n John Smith Dev - Portfolio\n \n \n \n \n \n\n\n
\n
\n

John Smith Dev

\n \n
\n
\n\n
\n
\n
\n
\n

Hello, I'm John Smith.

\n

A passionate web developer building modern and responsive web applications.

\n View My Work\n Get In Touch\n
\n
\n
\n\n
\n
\n

About Me

\n
\n
\n

Welcome to my corner of the internet! I'm John Smith, a dedicated developer with a strong focus on creating intuitive and high-performing web experiences. My journey in development started with a curiosity for how things work online, and it quickly evolved into a passion for bringing ideas to life through code.

\n

I specialize in front-end development, with a solid understanding of HTML, CSS, and JavaScript, and I'm always eager to learn new technologies and frameworks. I believe in clean code, user-centric design, and continuous improvement. Let's build something amazing together!

\n
\n
\n

My Skills

\n
    \n
  • HTML5 & CSS3
    • \n
  • JavaScript (ES6+)
    • \n
  • React / Vue.js (Placeholder)
    • \n
  • Responsive Design
    • \n
  • Git & GitHub
    • \n
  • UI/UX Principles
    • \n
\n
\n
\n
\n
\n\n
\n
\n

My Portfolio

\n

A selection of my recent projects demonstrating my skills and problem-solving abilities.

\n
\n
\n \"Project\n

Project Title One

\n

A brief description of Project One, highlighting key technologies used and its purpose.

\n View Project\n
\n
\n \"Project\n

Project Title Two

\n

Description for Project Two, focusing on the challenges overcome and its impact.

\n View Project\n
\n
\n \"Project\n

Project Title Three

\n

Details about Project Three, including any unique features or design choices.

\n View Project\n
\n
\n \"Project\n

Project Title Four

\n

Summary of Project Four, explaining its functionality and my contribution.

\n View Project\n
\n
\n
\n
\n\n
\n
\n

Get In Touch

\n

Have a project in mind or just want to say hello? Feel free to reach out!

\n \n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n \n \n
\n

Email: john.smith@example.com

\n

LinkedIn: linkedin.com/in/johnsmithdev

\n

GitHub: github.com/johnsmithdev

\n
\n
\n
\n
\n\n \n\n \n\n\n```\n\n### 2.2. `style.css` (Styling File)\n\n```css\n/* General Resets & Variables */\n:root {\n --color-dark-blue: #1a2b4c; /* Primary dark background */\n --color-medium-blue: #3465a4; /* Accent blue for highlights/buttons */\n --color-light-blue: #5b8ec2; /* Lighter accent for hover */\n --color-white: #ffffff;\n --color-off-white: #f0f0f0; /* Light text on dark, light background */\n --color-gray-text: #cccccc; /* Subtler text on dark */\n --font-heading: 'Montserrat', sans-serif;\n --font-body: 'Open Sans', sans-serif;\n --max-width: 1200px;\n --spacing-sm: 1rem;\n --spacing-md: 2rem;\n --spacing-lg: 4rem;\n}\n\n*, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nbody {\n font-family: var(--font-body);\n line-height: 1.6;\n color: var(--color-off-white);\n background-color: var(--color-dark-blue);\n overflow-x: hidden; /* Prevent horizontal scroll */\n}\n\n.container {\n max-width: var(--max-width);\n margin: 0 auto;\n padding: 0 var(--spacing-md);\n}\n\na {\n color: var(--color-medium-blue);\n text-decoration: none;\n transition: color 0.3s ease;\n}\n\na:hover {\n color: var(--color-light-blue);\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-family: var(--font-heading);\n margin-bottom: var(--spacing-sm);\n color: var(--color-white);\n}\n\nh2 {\n font-size: 2.5rem;\n text-align: center;\n margin-bottom: var(--spacing-lg);\n position: relative;\n}\n\nh2::after {\n content: '';\n display: block;\n width: 60px;\n height: 3px;\n background-color: var(--color-medium-blue);\n margin: 10px auto 0;\n}\n\np {\n margin-bottom: var(--spacing-sm);\n}\n\n.section-padding {\n padding: var(--spacing-lg) 0;\n}\n\n.section-description {\n text-align: center;\n max-width: 700px;\n margin: 0 auto var(--spacing-lg);\n color: var(--color-gray-text);\n}\n\n/* Buttons */\n.btn {\n display: inline-block;\n padding: 0.8rem 1.8rem;\n border-radius: 5px;\n font-weight: 600;\n text-align: center;\n transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;\n border: 2px solid transparent;\n cursor: pointer;\n}\n\n.primary-btn {\n background-color: var(--color-medium-blue);\n color: var(--color-white);\n}\n\n.primary-btn:hover {\n background-color: var(--color-light-blue);\n}\n\n.secondary-btn {\n background-color: transparent;\n color: var(--color-medium-blue);\n border-color: var(--color-medium-blue);\n margin-left: var(--spacing-sm);\n}\n\n.secondary-btn:hover {\n background-color: var(--color-medium-blue);\n color: var(--color-white);\n}\n\n.tertiary-btn {\n background-color: var(--color-dark-blue);\n color: var(--color-medium-blue);\n border-color: var(--color-medium-blue);\n font-size: 0.9rem;\n padding: 0.6rem 1.2rem;\n}\n\n.tertiary-btn:hover {\n background-color: var(--color-medium-blue);\n color: var(--color-white);\n}\n\n/* Header */\n.main-header {\n background-color: var(--color-dark-blue);\n padding: var(--spacing-sm) 0;\n position: sticky;\n top: 0;\n z-index: 1000;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\n}\n\n.main-header .container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.8rem;\n font-weight: 700;\n}\n\n.logo a {\n color: var(--color-white);\n text-decoration: none;\n}\n\n.nav-links {\n list-style: none;\n display: flex;\n}\n\n.nav-links li {\n margin-left: var(--spacing-md);\n}\n\n.nav-links a {\n color: var(--color-off-white);\n font-weight: 600;\n padding: 0.5rem 0;\n position: relative;\n}\n\n.nav-links a::after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n width: 0;\n height: 2px;\n background-color: var(--color-medium-blue);\n transition: width 0.3s ease;\n}\n\n.nav-links a:hover::after,\n.nav-links a.active::after {\n width: 100%;\n}\n\n.menu-toggle {\n display: none;\n background: none;\n border: none;\n cursor: pointer;\n padding: 10px;\n position: relative;\n z-index: 1001;\n}\n\n.menu-toggle span {\n display: block;\n width: 25px;\n height: 3px;\n background-color: var(--color-white);\n margin: 5px 0;\n transition: all 0.3s ease;\n}\n\n/* Hero Section */\n.hero-section {\n background: linear-gradient(rgba(26, 43, 76, 0.8), rgba(26, 43, 76, 0.8)), url('https://via.placeholder.com/1920x1080/1a2b4c/ffffff?text=Background+Image') no-repeat center center/cover;\n min-height: 80vh;\n display: flex;\n align-items: center;\n text-align: center;\n position: relative;\n}\n\n.hero-content {\n max-width: 800px;\n margin: 0 auto;\n padding: var(--spacing-lg) 0;\n}\n\n.hero-content h2 {\n font-size: 3.5rem;\n margin-bottom: var(--spacing-sm);\n color: var(--color-white);\n}\n\n.hero-content h2::after {\n display: none; /* Remove underline for hero heading */\n}\n\n.hero-content .tagline {\n font-size: 1.5rem;\n margin-bottom: var(--spacing-lg);\n color: var(--color-off-white);\n}\n\n/* About Section */\n.about-section {\n background-color: var(--color-off-white);\n color: var(--color-dark-blue);\n}\n\n.about-section h2, .about-section h3 {\n color: var(--color-dark-blue);\n}\n\n.about-content {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing-lg);\n align-items: flex-start;\n}\n\n.about-text {\n flex: 2;\n min-width: 300px;\n}\n\n.skills-list {\n flex: 1;\n min-width: 200px;\n background-color: var(--color-dark-blue);\n padding: var(--spacing-md);\n border-radius: 8px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n}\n\n.skills-list h3 {\n margin-bottom: var(--spacing-sm);\n color: var(--color-white);\n}\n\n.skills-list ul {\n list-style: none;\n}\n\n.skills-list li {\n padding: 0.5rem 0;\n border-bottom: 1px dashed rgba(255, 255, 255, 0.1);\n color: var(--color-off-white);\n}\n\n.skills-list li:last-child {\n border-bottom: none;\n}\n\n/* Portfolio Section */\n.portfolio-section {\n background-color: var(--color-dark-blue);\n}\n\n.portfolio-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: var(--spacing-md);\n}\n\n.portfolio-item {\n background-color: var(--color-dark-blue);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n display: flex;\n flex-direction: column;\n}\n\n.portfolio-item:hover {\n transform: translateY(-5px);\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);\n}\n\n.portfolio-item img {\n width: 100%;\n height: 200px; /* Fixed height for consistency */\n object-fit: cover;\n display: block;\n}\n\n.portfolio-item h3 {\n font-size: 1.4rem;\n margin: var(--spacing-sm) var(--spacing-md) 0.5rem;\n}\n\n.portfolio-item p {\n font-size: 0.95rem;\n color: var(--color-gray-text);\n padding: 0 var(--spacing-md);\n flex-grow: 1; /* Allows text to take up available space */\n}\n\n.portfolio-item .btn {\n margin: var(--spacing-md);\n align-self: flex-start; /* Aligns button to the left */\n}\n\n\n/* Contact Section */\n.contact-section {\n background-color: var(--color-off-white);\n color: var(--color-dark-blue);\n}\n\n.contact-section h2 {\n color: var(--color-dark-blue);\n}\n\n.contact-form {\n max-width: 600px;\n margin: 0 auto var(--spacing-lg);\n padding: var(--spacing-md);\n background-color: var(--color-dark-blue);\n border-radius: 8px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n}\n\n.form-group {\n margin-bottom: var(--spacing-sm);\n}\n\n.form-group label {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 600;\n color: var(--color-off-white);\n}\n\n.form-group input[type=\"text\"],\n.form-group input[type=\"email\"],\n.form-group textarea {\n width: 100%;\n padding: 0.8rem;\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 5px;\n background-color: #2b3c5e; /* Slightly lighter dark blue for input fields */\n color: var(--color-white);\n font-family: var(--font-body);\n font-size: 1rem;\n transition: border-color 0.3s ease, box-shadow 0.3s ease;\n}\n\n.form-group input:focus,\n.form-group textarea:focus {\n outline: none;\n border-color: var(--color-medium-blue);\n box-shadow: 0 0 0 2px rgba(52, 101, 164, 0.3);\n}\n\n.form-group textarea {\n resize: vertical;\n}\n\n.contact-form .btn {\n width: auto;\n margin-top: var(--spacing-sm);\n}\n\n.contact-info {\n text-align: center;\n margin-top: var(--spacing-md);\n color: var(--color-dark-blue);\n}\n\n.contact-info a {\n color: var(--color-medium-blue);\n}\n\n/* Footer */\n.main-footer {\n background-color: var(--color-dark-blue);\n color: var(--color-gray-text);\n padding: var(--spacing-md) 0;\n text-align: center;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.main-footer .container {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--spacing-sm);\n}\n\n.footer-links a {\n color: var(--color-gray-text);\n margin: 0 0.8rem;\n}\n\n.footer-links a:hover {\n color: var(--color-medium-blue);\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .main-header .container {\n flex-wrap: wrap;\n }\n\n .main-nav {\n width: 100%;\n order: 1; /* Move nav below logo on small screens */\n }\n\n .nav-links {\n flex-direction: column;\n width: 100%;\n display: none; /* Hidden by default for mobile */\n text-align: center;\n background-color: var(--color-dark-blue);\n padding: var(--spacing-sm) 0;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n }\n\n .nav-links.active {\n display: flex; /* Show when active */\n }\n\n .nav-links li {\n margin: 0;\n padding: 0.8rem 0;\n border-bottom: 1px solid rgba(255, 255, 255, 0.05);\n }\n\n .nav-links li:last-child {\n border-bottom: none;\n }\n\n .menu-toggle {\n display: block;\n }\n\n .menu-toggle.active span:nth-child(1) {\n transform: translateY(8px) rotate(45deg);\n }\n .menu-toggle.active span:nth-child(2) {\n opacity: 0;\n }\n .menu-toggle.active span:nth-child(3) {\n transform: translateY(-8px) rotate(-45deg);\n }\n\n .hero-content h2 {\n font-size: 2.5rem;\n }\n .hero-content .tagline {\n font-size: 1.2rem;\n }\n\n .hero-content .btn {\n margin-bottom: var(--spacing-sm);\n display: block;\n width: 80%;\n margin-left: auto;\n margin-right: auto;\n }\n\n .hero-content .secondary-btn {\n margin-left: auto; /* Override default margin */\n }\n\n .about-content {\n flex-direction: column;\n gap: var(--spacing-md);\n }\n\n .portfolio-grid {\n grid-template-columns: 1fr; /* Single column on small screens */\n }\n\n h2 {\n font-size: 2rem;\n margin-bottom: var(--spacing-md);\n }\n\n .section-padding {\n padding: var(--spacing-md) 0;\n }\n\n .main-footer .footer-links {\n flex-direction: column;\n }\n .main-footer .footer-links a {\n margin: 0.5rem 0;\n }\n}\n\n@media (max-width: 480px) {\n .hero-content h2 {\n font-size: 2rem;\n }\n .hero-content .tagline {\n font-size: 1rem;\n }\n}\n```\n\n### 2.3. `script.js` (JavaScript File)\n\n```javascript\ndocument.addEventListener('DOMContentLoaded', () => {\n // Smooth scrolling for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n\n const targetId = this.getAttribute('href');\n const targetElement = document.querySelector(targetId);\n\n if (targetElement) {\n // Close mobile menu if open\n const navLinks = document.querySelector('.nav-links');\n const menuToggle = document.querySelector('.menu-toggle');\n if (navLinks.classList.contains('active')) {\n navLinks.classList.remove('active');\n menuToggle.classList.remove('active');\n }\n\n // Scroll to target with offset for fixed header\n const headerOffset = document.querySelector('.main-header').offsetHeight;\n const elementPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;\n const offsetPosition = elementPosition - headerOffset - 20; // Added extra padding\n\n window.scrollTo({\n top: offsetPosition,\n behavior: \"smooth\"\n });\n }\n });\n });\n\n // Mobile navigation toggle\n const menuToggle = document.querySelector('.menu-toggle');\n const navLinks = document.querySelector('.nav-links');\n\n if (menuToggle && navLinks) {\n menuToggle.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n menuToggle.classList.toggle('active');\n });\n }\n\n // Add 'active' class to nav link on scroll\n const sections = document.querySelectorAll('section');\n const navLi = document.querySelectorAll('.nav-links li a');\n\n window.addEventListener('scroll', () => {\n let current = '';\n\n sections.forEach(section => {\n const sectionTop = section.offsetTop;\n const sectionHeight = section.clientHeight;\n // Adjust offset to account for fixed header\n const headerHeight = document.querySelector('.main-header').offsetHeight;\n if (pageYOffset >= sectionTop - headerHeight - 50) { // -50 for a little buffer\n current = section.getAttribute('id');\n }\n });\n\n navLi.forEach(a => {\n a.classList.remove('active');\n if (a.getAttribute('href').includes(current)) {\n a.classList.add('active');\n }\n });\n });\n\n // Handle contact form submission (client-side only for now)\n const contactForm = document.querySelector('.contact-form');\n if (contactForm) {\n contactForm.addEventListener('submit', function(e) {\n e.preventDefault();\n // In a real application, you would send this data to a server.\n // For now, we'll just log it and show an alert.\n const formData = new FormData(this);\n const formObject = {};\n formData.forEach((value, key) => {\n formObject[key] = value;\n });\n console.log('Form Submitted:', formObject);\n alert('Thank you for your message! We will get back to you shortly.');\n this.reset(); // Clear the form\n });\n }\n});\n```\n\n---\n\n## 3. Live Preview & Local Setup\n\nWhile a direct live preview cannot be provided in this text-based output, you can easily view your website locally:\n\n1. **Save the files:** Create a folder (e.g., `JohnSmithDevWebsite`).\n2. **Place files:** Save `index.html`, `style.css`, and `script.js` inside this folder.\n3. **Open `index.html`:** Double-click `index.html` in your file explorer. It will open in your default web browser.\n\n**Expected Live Preview Description:**\nYour website will load with a clean, modern aesthetic. The primary";function phTab(btn,name){document.querySelectorAll(".ph-panel").forEach(function(el){el.classList.remove("active");});document.querySelectorAll(".ph-tab").forEach(function(el){el.classList.remove("active");el.classList.add("inactive");});var p=document.getElementById("panel-"+name);if(p)p.classList.add("active");btn.classList.remove("inactive");btn.classList.add("active");if(name==="preview"){var fr=document.getElementById("ph-preview-frame");if(fr&&!fr.dataset.loaded){if(_phIsHtml){fr.srcdoc=_phCode;}else{var vc=document.getElementById("panel-content");fr.srcdoc=vc?""+vc.innerHTML+"":"

No content

";}fr.dataset.loaded="1";}}}function phCopyCode(){navigator.clipboard.writeText(_phCode).then(function(){var b=document.getElementById("tab-code");if(b){var o=b.innerHTML;b.innerHTML=' Copied!';setTimeout(function(){b.innerHTML=o;},2000);}});}function phCopyAll(){navigator.clipboard.writeText(_phAll).then(function(){alert("Content copied to clipboard!");});}function phDownload(){var content=_phCode||_phAll;if(!content){alert("No content to download.");return;}var fn=_phFname;if(!_phCode&&fn.endsWith(".txt"))fn=fn.replace(/\.txt$/,".md");var a=document.createElement("a");a.href="data:text/plain;charset=utf-8,"+encodeURIComponent(content);a.download=fn;a.click();}function phDownloadZip(){ var lbl=document.getElementById("ph-zip-lbl"); if(lbl)lbl.textContent="Preparing\u2026"; /* ===== HELPERS ===== */ function cc(s){ return s.replace(/[_\-\s]+([a-z])/g,function(m,c){return c.toUpperCase();}) .replace(/^[a-z]/,function(m){return m.toUpperCase();}); } function pkgName(app){ return app.toLowerCase().replace(/[^a-z0-9]+/g,"_").replace(/^_+|_+$/g,"")||"my_app"; } function slugTitle(app){ return app.replace(/_/g," "); } /* Generic code block extractor. Finds marker comments like: // lib/main.dart or # lib/main.dart or ## lib/main.dart and collects lines until the next marker. Also strips markdown fences (\`\`\`lang ... \`\`\`) from each block. */ function extractFiles(txt, pathRe){ var files={}, cur=null, buf=[]; function flush(){ if(cur&&buf.length){ files[cur]=buf.join("\n").trim(); } } txt.split("\n").forEach(function(line){ var m=line.trim().match(pathRe); if(m){ flush(); cur=m[1]; buf=[]; return; } if(cur) buf.push(line); }); flush(); // Strip \`\`\`...\`\`\` fences from each file Object.keys(files).forEach(function(k){ files[k]=files[k].replace(/^\`\`\`[a-z]*\n?/,"").replace(/\n?\`\`\`$/,"").trim(); }); return files; } /* General path extractor that covers most languages */ function extractCode(txt){ var re=/^(?:\/\/|#|##)\s*((?:lib|src|test|tests|Sources?|app|components?|screens?|views?|hooks?|routes?|store|services?|models?|pages?)\/[\w\/\-\.]+\.\w+|pubspec\.yaml|Package\.swift|angular\.json|babel\.config\.(?:js|ts)|vite\.config\.(?:js|ts)|tsconfig\.(?:json|app\.json)|app\.json|App\.(?:tsx|jsx|vue|kt|swift)|MainActivity(?:\.kt)?|ContentView\.swift)/i; return extractFiles(txt, re); } /* Detect language from combined code+panel text */ function detectLang(code, panel){ var t=(code+" "+panel).toLowerCase(); if(t.indexOf("import 'package:flutter")>=0||t.indexOf('import "package:flutter')>=0) return "flutter"; if(t.indexOf("statelesswidget")>=0||t.indexOf("statefulwidget")>=0) return "flutter"; if((t.indexOf(".dart")>=0)&&(t.indexOf("pubspec")>=0||t.indexOf("flutter:")>=0)) return "flutter"; if(t.indexOf("react-native")>=0||t.indexOf("react_native")>=0) return "react-native"; if(t.indexOf("stylesheet.create")>=0||t.indexOf("view, text, touchableopacity")>=0) return "react-native"; if(t.indexOf("expo(")>=0||t.indexOf("\"expo\":")>=0||t.indexOf("from 'expo")>=0) return "react-native"; if(t.indexOf("import swiftui")>=0||t.indexOf("import uikit")>=0) return "swift"; if(t.indexOf(".swift")>=0&&(t.indexOf("func body")>=0||t.indexOf("@main")>=0||t.indexOf("var body: some view")>=0)) return "swift"; if(t.indexOf("import android.")>=0||t.indexOf("package com.example")>=0) return "kotlin"; if(t.indexOf("@composable")>=0||t.indexOf("fun mainactivity")>=0||(t.indexOf(".kt")>=0&&t.indexOf("androidx")>=0)) return "kotlin"; if(t.indexOf("@ngmodule")>=0||t.indexOf("@component")>=0) return "angular"; if(t.indexOf("angular.json")>=0||t.indexOf("from '@angular")>=0) return "angular"; if(t.indexOf(".vue")>=0||t.indexOf("