Telebort | Learning to code made fun!

bash

# Create and enter project folder
mkdir my-portfolio
cd my-portfolio

# Initialize Git repository
git init

# Create initial structure
touch index.html style.css script.js README.md

# First commit
git add .
git commit -m "🎉 Initial commit - project setup"

bash

cat > README.md << 'EOF'
# My Portfolio

A personal portfolio website showcasing my skills and projects.

## Technologies Used
- HTML5
- CSS3
- JavaScript
- Git & GitHub
- GitHub Pages

## Live Demo
Coming soon...

## Author
Your Name - [GitHub](https://github.com/YOUR-USERNAME)
EOF

git add README.md
git commit -m "📝 Add project README"

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0">
    <title>Your Name - Portfolio</title>
    <link rel="stylesheet" href="style.css">
    {/* Favicon added through GitHub Pages */}
</head>
<body>
    {/* Navigation */}
    <nav class="navbar">
        <div class="nav-container">
            <h1 class="nav-logo">YN</h1>
            <ul class="nav-menu">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </nav>

    {/* Hero Section */}
    <section id="home" class="hero">
        <div class="hero-content">
            <h1 class="hero-title">Hi, I'm <span class="name">Your Name</span></h1>
            <p class="hero-subtitle">Aspiring Developer | Git Enthusiast | Problem Solver</p>
            <div class="hero-buttons">
                <a href="#projects" class="btn btn-primary">View Projects</a>
                <a href="https://github.com/YOUR-USERNAME" class="btn btn-secondary">GitHub Profile</a>
            </div>
        </div>
    </section>

    {/* About Section */}
    <section id="about" class="about">
        <div class="container">
            <h2>About Me</h2>
            <p>I'm passionate about technology and currently learning web development. 
               I've just mastered Git and GitHub, and I'm excited to collaborate on projects!</p>
            <div class="stats">
                <div class="stat">
                    <h3>5+</h3>
                    <p>Git Commits</p>
                </div>
                <div class="stat">
                    <h3>1</h3>
                    <p>GitHub Repo</p>
                </div>
                <div class="stat">
                    <h3>∞</h3>
                    <p>Enthusiasm</p>
                </div>
            </div>
        </div>
    </section>

    {/* Skills Section */}
    <section id="skills" class="skills">
        <div class="container">
            <h2>Skills</h2>
            <div class="skills-grid">
                <div class="skill-card">
                    <div class="skill-icon">📝</div>
                    <h3>HTML & CSS</h3>
                    <p>Building responsive websites</p>
                </div>
                <div class="skill-card">
                    <div class="skill-icon">⚡</div>
                    <h3>JavaScript</h3>
                    <p>Adding interactivity</p>
                </div>
                <div class="skill-card">
                    <div class="skill-icon">🔧</div>
                    <h3>Git</h3>
                    <p>Version control master</p>
                </div>
                <div class="skill-card">
                    <div class="skill-icon">🚀</div>
                    <h3>GitHub</h3>
                    <p>Collaboration and deployment</p>
                </div>
            </div>
        </div>
    </section>

    {/* Projects Section */}
    <section id="projects" class="projects">
        <div class="container">
            <h2>Projects</h2>
            <div class="projects-grid">
                <div class="project-card">
                    <h3>Portfolio Website</h3>
                    <p>This website! Built with HTML, CSS, and deployed with GitHub Pages.</p>
                    <div class="project-links">
                        <a href="#" class="project-link">Live Demo</a>
                        <a href="https://github.com/YOUR-USERNAME/my-portfolio" class="project-link">Source Code</a>
                    </div>
                </div>
                <div class="project-card">
                    <h3>Coming Soon</h3>
                    <p>More awesome projects on the way!</p>
                </div>
            </div>
        </div>
    </section>

    {/* Contact Section */}
    <section id="contact" class="contact">
        <div class="container">
            <h2>Get In Touch</h2>
            <p>I'm always interested in learning and collaborating!</p>
            <div class="contact-links">
                <a href="https://github.com/YOUR-USERNAME" class="contact-link">GitHub</a>
                <a href="mailto:your.email@example.com" class="contact-link">Email</a>
            </div>
        </div>
    </section>

    {/* Footer */}
    <footer class="footer">
        <p>&copy; 2024 Your Name. Built with ❤️ and Git</p>
        <p class="git-status">Last commit: <span id="last-commit">Just now</span></p>
    </footer>

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

bash

git add index.html
git commit -m "✨ Add portfolio HTML structure"

css

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Navigation */
.navbar {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    font-size: 1.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}

.nav-menu a:hover {
    color: #667eea;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
}

.hero-title {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.name {
    background: linear-gradient(90deg, #fff, #f0f0f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn {
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.3s;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: white;
    color: #667eea;
}

.btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

/* Sections */
section {
    padding: 80px 0;
}

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

h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    text-align: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Skills Grid */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.skill-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s;
}

.skill-card:hover {
    transform: translateY(-5px);
}

.skill-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .nav-menu {
        flex-direction: column;
        gap: 0.5rem;
    }
}

bash

git add style.css
git commit -m "🎨 Add portfolio styling"

javascript

// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

// Update last commit time
function updateCommitTime() {
    const now = new Date();
    const timeString = now.toLocaleTimeString();
    document.getElementById('last-commit').textContent = timeString;
}

// Update every second (for fun)
setInterval(updateCommitTime, 1000);

// Console Easter egg
console.log('%c Welcome to my portfolio! 🚀', 'color: #667eea; font-size: 20px; font-weight: bold;');
console.log('%c Built with Git and deployed with GitHub Pages', 'color: #764ba2; font-size: 14px;');

bash

git add script.js
git commit -m "⚡ Add interactive features"

bash

# Add GitHub remote
git remote add origin https://github.com/YOUR-USERNAME/my-portfolio.git

# Push all your commits
git push -u origin main

# If your branch is 'master':
# git push -u origin master

bash

# Edit README to add live link
cat >> README.md << 'EOF'

## 🚀 Live Demo
[View Live Portfolio](https://YOUR-USERNAME.github.io/my-portfolio/)
EOF

git add README.md
git commit -m "📝 Add live demo link to README"
git push

less

🎉 Just deployed my first website using Git and GitHub Pages!

✅ Built a portfolio
✅ Tracked with Git
✅ Deployed online
✅ Ready for opportunities

Check it out: https://YOUR-USERNAME.github.io/my-portfolio/

#GitHubPages #WebDev #Portfolio #FirstWebsite

Project 1: Deploy to GitHub

Project 1: Deploy to GitHub