Developing my Personal Website || HTML, JavaScript, jQuery and AJAX Integration

It's Day #15 of #100daysofMiva coding challenge! I took the liberty to dive into building my own website. I tried as much as possible to squeeze in 2 hours on the project today and will also squeeze in another 2 hours tomorrow. Hopefully, I should complete the project in about 2 weeks time.

So today I decided to use an HTML template to develop the About Me section of my personal website. Let's say I fell in love with it at first glance. Here's a thorough report on the project using the index.html of the project.

The primary goal of this project is to create a personal website that

1. Introduces me and my experiences
2. Showcases my portfolio
3. Shares my documentation/technical writing

Today's project focuses more on me and my experiences. The website offers an engaging experience for visitors through well-structured content and interactive elements

Website Features

Banner Section: Introduction and welcome message.
Spotlight Sections: Personal beliefs and experiences.
Information Panels: Details about writing, business experience, and books.
Contact Form: Allows users to get in touch with me.
Skills set: Listed skills I'm expert in.

2. Technologies and Languages Used

HTML

I utilized HTML to structure the content of the website. The HTML code defines different sections and elements on the page, such as:

• <section>: Defines distinct parts of the page, including the banner and spotlight sections.
• <div>: Containers for content and styling.
• <h1>, <h2>, <p>, <ul>, <li>: Used for headings, paragraphs, and lists.

CSS

External CSS files (main.css and noscript.css) were used to style the HTML elements:

• Responsiveness: Ensures the website adapts to various screen sizes.
• Design Elements: Color schemes, typography, and layout adjustments.

JavaScript

JavaScript is employed to add interactivity to the website:

• Dynamic Content: Handles user interactions and updates the content dynamically.

AJAX

AJAX is used to handle asynchronous data requests, allowing for updates to parts of the page without a full reload. This improves the user experience by making the site more responsive.

jQuery

jQuery simplifies DOM manipulation and event handling:

• Element Selection: Easily selects and manipulates page elements.
• Event Handling: Manages user interactions and actions.

PHP

The contact form utilizes PHP for server-side processing:

• Form Handling: Manages form submissions and sends emails.

Code breakdown

HTML

<section class="panel banner right">
    <div class="content color0 span-3-75">
        <h1 class="major">Hello, my name is<br /> Tobi Delly</h1>
        <p>Welcome to <strong>Tobi Delly International</strong>, beyond tech, beyond software engineering, all you need to know about me.</p>
        <ul class="actions">
            <li><a href="#first" class="button primary color1 circle icon solid fa-angle-right">Next</a></li>
        </ul>
    </div>
    <div class="image filtered span-1-75" data-position="25% 25%">
        <img src="images/pic01.jpg" alt="" />
    </div>
</section>

This HTML snippet creates a banner section with a welcome message and a button that leads to the next section.

CSS Integration

AJAX Example

$.ajax({
    url: 'server-endpoint.php',
    method: 'POST',
    data: { name: 'John Doe' },
    success: function(response) {
        console.log('Data saved successfully');
    }
});

PHP Form Handling

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];

    // Process form data
    mail("[e-mail]", "New Contact Form Submission", $message, "From:" . $email);
}
?>

4. Design and Usability

Layout and Design

The design incorporates a clean layout with distinct sections and a cohesive color scheme. Images are strategically placed to enhance visual appeal.

Responsive Design

The website is designed to be responsive, adapting to different devices through CSS media queries. This ensures a consistent user experience across various screen sizes.

SEO and Performance

SEO Practices

• Meta Tags: Includes meta tags for character encoding and responsive design.
• Heading Structure: Proper use of headings for SEO and accessibility.

Performance Considerations

• Optimized Images: Images are optimized to improve load times.
• CSS and JS Minification: Ensures files are minified for faster load times.

See project LIVE