Technical Doc

1. HTML Structure

The website is composed of two primary pages:

index.html: Serves as the magazine cover page.
article.html: Contains the featured article on vanilla HTML relevance.

The structure follows semantic HTML principles, utilizing elements such as:

<header> for navigation.
<main> for the primary content.
<section> to group related content.
<footer> for copyright and branding details.

2. CSS Styling

a. Tailwind CSS for Styling

The website uses Tailwind CSS for styling through a CDN link:

<script src="https://cdn.tailwindcss.com"></script>

Tailwind provides utility classes for:

Responsive layout (max-w-7xl mx-auto px-4)
Typography (text-4xl font-bold text-gray-900)
Flexbox and grid systems (flex justify-between items-center)
Color and effects (bg-white/80 backdrop-blur-md)

b. Custom CSS Animations

Two custom animations are defined using @keyframes to provide a smooth fade-in effect:

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}
.fade-in-delay {
    opacity: 0;
    animation: fadeIn 0.6s ease-out 0.3s forwards;
}

These animations enhance user experience by making elements appear smoothly as the page loads.

3. Navigation and Linking

A fixed navigation bar ensures users can access key pages at all times.

Internal links (<a href="article.html">) allow seamless navigation between pages.

The contact link uses a mailto: scheme to open an email client:

<a href="mailto:giga832065@gmail.com?subject=Magazine">CONTACT</a>

4. Image and Background Effects

The magazine cover page (index.html) features a background image with a dark overlay achieved using CSS blending:

<div class="absolute inset-0 bg-black/30 mix-blend-multiply"></div>

This technique enhances text readability over images.

5. Static Content Without JavaScript Dependencies

No JavaScript frameworks or libraries were used.

All animations and interactive effects are achieved purely with CSS.

The HTML is fully responsive using Tailwind’s utility classes.

Conclusion

The GIGATECH1 magazine website demonstrates how modern, visually appealing, and efficient web pages can be built exclusively with vanilla HTML and CSS. By leveraging Tailwind CSS, custom animations, and well-structured semantic HTML, this site achieves high performance, security, and ease of maintenance without relying on complex frameworks or CMS platforms.

Techniques Used GIGATECH1 Portfolio