Skip to main content

​
Prerequisites

Before you begin, ensure you have the following:
  • A modern web browser (Chrome, Firefox, Safari, or Edge)
  • A code editor (VS Code, Sublime Text, or similar)
  • Basic knowledge of HTML, CSS, and JavaScript
  • Git (optional, for cloning the repository)

​
Clone the Repository

Get started by cloning the repository to your local machine:
1

Clone the repository

Open your terminal and run:
git clone https://github.com/MilesONerd/milesonerd.github.io.git
cd milesonerd.github.io
2

Explore the directory structure

The project structure looks like this:
milesonerd.github.io/
├── index.html              # Main homepage
├── 404.html                # Custom 404 error page
├── accessibility.html      # Accessibility statement
├── assets/                 # Static assets
│   ├── scripts/           # JavaScript files
│   │   ├── functions.js   # Core functions
│   │   └── quotes.js      # Quote rotator system
│   └── image/             # Images and logos
│       ├── Logo/          # Brand logos
│       └── favicon/       # Favicon files
├── old/                    # Legacy website version
│   ├── index.html         # Old homepage
│   ├── about.html         # About page
│   ├── contact.html       # Contact page
│   ├── blog/              # Blog system
│   │   └── scripts/       # Blog JavaScript
│   └── styles.css         # Old site styles
├── license/                # License information
├── policies/               # Privacy and cookies
├── terms/                  # Terms of service
└── robots.txt             # SEO crawler instructions
3

Open in your browser

Simply open index.html in your web browser:
# On macOS
open index.html

# On Linux
xdg-open index.html

# On Windows
start index.html
Or drag and drop the index.html file into your browser window.

​
Understanding the HTML Structure

The main index.html file uses a modern, component-based structure with Tailwind CSS. Here’s the basic layout: 
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home | Enzo Fuke</title>
    
    <!-- Tailwind CSS from CDN -->
    <script src="https://cdn.tailwindcss.com/3.4.16"></script>
    
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="font-sans antialiased text-gray-100 bg-gray-900">
    <!-- Header/Navbar -->
    <header class="fixed w-full z-50 bg-gray-900">
        <!-- Navigation content -->
    </header>
    
    <!-- Hero Section -->
    <section class="hero-gradient pt-32 pb-20">
        <!-- Hero content -->
    </section>
    
    <!-- Footer -->
    <footer class="bg-gray-900 pt-16 pb-8">
        <!-- Footer content -->
    </footer>
    
    <script src="/assets/scripts/functions.js"></script>
</body>
</html>
The website uses Tailwind CSS delivered via CDN, which means you don’t need to install any build tools or dependencies to run it locally.

​
Key Features

​
1. Quote Rotator System

The website includes a dynamic quote rotator powered by /assets/scripts/quotes.js. This file contains 185+ pop culture quotes from movies, games, and TV shows: 
const quotes = [
    { quote: "If it hasn't worked out yet, it's because it's not over yet", author: "MilesONerd" },
    { quote: "Do... or do not. There is no try.", author: "Yoda" },
    { quote: "I am Iron Man", author: "Tony Stark" },
    // ... 182 more quotes
];

function getRandomQuote() {
    const randomIndex = Math.floor(Math.random() * quotes.length);
    return quotes[randomIndex];
}

function updateQuote() {
    const { quote, author } = getRandomQuote();
    document.getElementById('random-quote').innerHTML = `&ldquo;${quote}&rdquo;`;
    document.getElementById('quote-author').innerHTML = `&mdash;${author}`;
}
The footer showcases an extensive social media presence across 17+ platforms: 
<div class="social-icons-container">
    <a href="https://github.com/MilesONerd">
        <img src="https://cdn.simpleicons.org/github/ffffff" alt="GitHub logo" />
    </a>
    <a href="https://kaggle.com/milesonerd">
        <img src="https://cdn.simpleicons.org/kaggle/ffffff" alt="Kaggle logo" />
    </a>
    <!-- More social links -->
</div>

​
3. Legacy Website Archive

The /old directory preserves the original website with its classic design: 
<!-- Modern Tailwind CSS design -->
<body class="font-sans antialiased text-gray-100 bg-gray-900">
    <header class="fixed w-full z-50 bg-gray-900 bg-opacity-90">

​
Testing Your Setup

After opening the website, verify these features work correctly:

Navigation

Click the “New website” button in the header to navigate to the modern site at milesonerd.netlify.app

Responsive Design

Resize your browser window to test the mobile-responsive layout powered by Tailwind CSS

Social Links

Check that all social media icons in the footer render correctly from cdn.simpleicons.org

Legacy Archive

Navigate to the /old directory to view the preserved original website

​
Development Tips

Hot Reload: Since this is a static HTML site, you can use VS Code’s Live Server extension for automatic browser refresh during development.
The website references external resources (Tailwind CDN, Font Awesome, Google Analytics). You’ll need an internet connection for these to load properly.

​
File Locations Reference

Key files you’ll interact with during development:
File PathPurposeLine Reference
/index.htmlMain homepageFull file: 185 lines
/assets/scripts/quotes.jsQuote rotation logicquotes.js:1-202
/assets/scripts/functions.jsCore helper functionsfunctions.js:2-12
/old/index.htmlLegacy homepageOld design preserved
/old/styles.cssLegacy CSS stylingClassic styles

​
Next Steps

Now that you have the website running locally, you can:
1

Customize the content

Edit index.html to modify the hero section, update social links, or change the branding
2

Add new quotes

Extend the quotes array in /assets/scripts/quotes.js with your favorite quotes
3

Explore the blog system

Check out the /old/blog directory to understand the legacy blog implementation
4

Deploy your changes

Push to GitHub Pages or deploy to Netlify for live hosting
This website is a static HTML site with no build process required. All changes you make to HTML, CSS, or JavaScript files will be immediately visible when you refresh your browser.

Build docs developers (and LLMs) love

Get started for freeTalk to us