Skip to content

acmsnu/SoW-Landing-Page

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
Readme.md
Readme.md
 
 
index.html
index.html
 
 
script.js
script.js
 
 
style.css
style.css
 
 

Repository files navigation

Personal Landing Page 🌟

Welcome to your personal portfolio landing page! This is a clean, modern, and responsive portfolio website built with vanilla HTML, CSS, and JavaScript. Perfect for showcasing your skills, projects, and professional journey to potential employers and clients!

What You'll Learn

  • Modern web development with vanilla JavaScript
  • Responsive design principles and CSS Grid/Flexbox
  • DOM manipulation and event handling
  • CSS animations and transitions
  • Performance optimization for static sites
  • SEO best practices for personal branding
  • Accessibility standards (WCAG guidelines)
  • Progressive enhancement techniques

How It Works 🔧

The Personal Landing Page serves as your digital resume and portfolio:

  1. Professional Introduction: Eye-catching hero section with your name and role
  2. About Section: Tell your story and highlight your expertise
  3. Skills Showcase: Visual representation of your technical abilities
  4. Project Portfolio: Featured projects with descriptions and links
  5. Contact Information: Easy ways for visitors to reach you
  6. Responsive Design: Looks great on all devices and screen sizes

Prerequisites

Before you start, make sure you have these tools:

Getting Started

1. Clone or Download

Get your copy of this project:

git clone https://github.com/acmsnu/SoW-Landing-Page.git
cd landing-page

Or download the ZIP file and extract it to your desired location.

2. Open in Your Editor

Open the project folder in your preferred code editor:

code .  # If using VS Code

3. Start Development

You can open the project in several ways:

Option 1: Direct Browser Opening

  • Simply double-click index.html to open in your default browser

Option 2: Live Server (Recommended)

  • If using VS Code with Live Server extension
  • Right-click on index.html and select "Open with Live Server"
  • Your site will open at http://localhost:5500 with auto-reload

Option 3: Python Simple Server

# Python 3
python -m http.server 8000

# Then visit http://localhost:8000

Project Structure

landing/
├── index.html              # Main HTML structure
├── style.css              # Styling and responsive design
├── script.js              # Interactive functionality
└── Readme.md             # This documentation

File Overview

  • index.html: Semantic HTML structure with accessibility in mind
  • style.css: Modern CSS with Grid, Flexbox, and animations
  • script.js: Vanilla JavaScript for interactivity and smooth scrolling

Your Mission 🎯

Create a stunning personal landing page that represents your professional brand:

Core Features (Start Here!)

  • Hero section with your name and professional title
  • About section with your background and expertise
  • Skills section with visual progress bars or icons
  • Projects showcase with thumbnails and descriptions
  • Contact section with social links and email
  • Responsive design for mobile, tablet, and desktop

Intermediate Features

  • Smooth scrolling navigation
  • CSS animations and hover effects
  • Dark/light theme toggle
  • Image optimization and lazy loading
  • Form validation for contact form
  • Social media integration
  • Blog section for articles and thoughts

Advanced Features (Challenge!)

  • Progressive Web App (PWA) capabilities
  • Advanced CSS animations with GSAP
  • Content Management System integration
  • Multi-language support
  • Performance optimization (95+ Lighthouse score)
  • SEO optimization with meta tags and structured data
  • Analytics integration (Google Analytics)
  • A/B testing for different layouts

Design Guidelines 🎨

Color Scheme

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --accent-color: #28a745;
  --background-light: #f8f9fa;
  --background-dark: #343a40;
  --text-primary: #212529;
  --text-secondary: #6c757d;
}

Typography

/* Font hierarchy */
h1 {
  font-size: 3.5rem;
  font-weight: 700;
}
h2 {
  font-size: 2.5rem;
  font-weight: 600;
}
h3 {
  font-size: 1.75rem;
  font-weight: 500;
}
body {
  font-size: 1.125rem;
  line-height: 1.6;
}

Responsive Breakpoints

/* Mobile First Approach */
@media (min-width: 576px) {
  /* Small devices */
}
@media (min-width: 768px) {
  /* Medium devices */
}
@media (min-width: 992px) {
  /* Large devices */
}
@media (min-width: 1200px) {
  /* Extra large devices */
}

Content Strategy 📝

Hero Section

  • Compelling headline: Your name and what you do
  • Subheading: Brief value proposition
  • Call-to-action: "View My Work" or "Get In Touch"
  • Professional photo: High-quality headshot

About Section

const aboutContent = {
  introduction: "Brief personal story",
  expertise: ["Skill 1", "Skill 2", "Skill 3"],
  experience: "Years of experience and key achievements",
  personality: "What makes you unique",
};

Projects Showcase

const projects = [
  {
    title: "Project Name",
    description: "Brief description of the project",
    technologies: ["HTML", "CSS", "JavaScript"],
    image: "project-thumbnail.jpg",
    liveUrl: "https://project-demo.com",
    githubUrl: "https://github.com/username/project",
  },
];

Performance Optimization ⚡

Image Optimization

<!-- Use appropriate formats and sizes -->
<img
  src="small.jpg"
  srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Descriptive alt text"
  loading="lazy"
/>

CSS Optimization

/* Use efficient selectors */
.hero-title {
  /* Good */
}
div div div p {
  /* Avoid */
}

/* Minimize repaints and reflows */
.animated-element {
  transform: translateX(100px); /* Better than left: 100px */
  will-change: transform; /* Optimize for animations */
}

JavaScript Performance

// Debounce scroll events
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

window.addEventListener("scroll", debounce(handleScroll, 10));

SEO Best Practices 🔍

Meta Tags

<meta name="description" content="Your compelling description" />
<meta name="keywords" content="web developer, frontend, react, javascript" />
<meta property="og:title" content="Your Name - Web Developer" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="your-photo.jpg" />
<meta name="twitter:card" content="summary_large_image" />

Structured Data

{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Your Name",
  "jobTitle": "Web Developer",
  "url": "https://yourwebsite.com",
  "sameAs": [
    "https://linkedin.com/in/yourprofile",
    "https://github.com/yourusername"
  ]
}

Accessibility Guidelines ♿

ARIA Labels and Roles

<nav role="navigation" aria-label="Main navigation">
  <ul>
    <li><a href="#about" aria-label="About section">About</a></li>
    <li><a href="#projects" aria-label="Projects section">Projects</a></li>
  </ul>
</nav>

Keyboard Navigation

// Ensure all interactive elements are keyboard accessible
document.addEventListener("keydown", (e) => {
  if (e.key === "Enter" || e.key === " ") {
    // Handle keyboard activation
  }
});

Color Contrast

  • Ensure minimum 4.5:1 contrast ratio for normal text
  • Use tools like WebAIM Color Contrast Checker
  • Test with screen readers

Testing Strategies 🧪

Cross-Browser Testing

  • Test on Chrome, Firefox, Safari, Edge
  • Use BrowserStack for comprehensive testing
  • Check mobile browsers (iOS Safari, Chrome Mobile)

Performance Testing

# Lighthouse CLI
npm install -g lighthouse
lighthouse https://yoursite.com --output html --output-path ./report.html

Accessibility Testing

  • Use WAVE Web Accessibility Evaluator
  • Test with screen readers (NVDA, JAWS)
  • Keyboard-only navigation testing

Deployment Options 🚀

GitHub Pages

# Enable GitHub Pages in repository settings
# Your site will be available at: https://username.github.io/repository-name

Netlify

# Drag and drop your folder to Netlify
# Or connect your GitHub repository for automatic deployments

Vercel

npm install -g vercel
vercel --prod

Traditional Web Hosting

  • Upload files via FTP to your hosting provider
  • Ensure index.html is in the root directory

Helpful Commands

# Validate HTML
npx html-validate index.html

# Check CSS
npx stylelint style.css

# Optimize images
npx imagemin src/*.jpg --out-dir=dist

# Minify CSS
npx clean-css-cli -o style.min.css style.css

# Minify JavaScript
npx terser script.js -o script.min.js

Tips for Success 💡

  1. Content First: Write compelling content before focusing on design
  2. Mobile First: Design for mobile devices first, then enhance for desktop
  3. Performance Matters: Optimize images and minimize HTTP requests
  4. User Experience: Make navigation intuitive and content scannable
  5. Personal Branding: Maintain consistency across all your online presence

Common Challenges & Solutions

Responsive Images

.hero-image {
  width: 100%;
  height: 60vh;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 768px) {
  .hero-image {
    height: 40vh;
  }
}

Smooth Scrolling

function smoothScroll(target) {
  document.querySelector(target).scrollIntoView({
    behavior: "smooth",
    block: "start",
  });
}

Form Handling

function validateForm(formData) {
  const errors = {};

  if (!formData.email || !isValidEmail(formData.email)) {
    errors.email = "Please enter a valid email address";
  }

  return errors;
}

Content Ideas 💭

Project Descriptions

  • Challenge: What problem did you solve?
  • Solution: How did you approach it?
  • Technologies: What tools did you use?
  • Results: What was the outcome?

Skills Section

  • Technical Skills: Programming languages, frameworks, tools
  • Soft Skills: Communication, leadership, problem-solving
  • Certifications: Relevant certifications and courses
  • Experience Level: Beginner, Intermediate, Advanced

Resources for Learning

Need Help?

  • Check browser DevTools Console for JavaScript errors
  • Validate HTML and CSS with online validators
  • Test responsive design with browser DevTools device simulation
  • Use Lighthouse for performance and accessibility audits
  • Join web development communities for support

Bonus Features 🌟

Once you complete the basic landing page, try these enhancements:

  • Animation Library: Integrate AOS (Animate On Scroll) or GSAP
  • Contact Form: Add a working contact form with EmailJS
  • Blog Integration: Connect to a headless CMS like Contentful
  • PWA Features: Add service worker for offline functionality
  • Advanced Analytics: Implement Google Analytics 4
  • Internationalization: Add multi-language support
  • Theme Customization: Let users choose their preferred color scheme

Example Content Structure 📋

<!-- Hero Section -->
<section class="hero">
  <h1>John Doe</h1>
  <h2>Full-Stack Developer</h2>
  <p>Creating amazing digital experiences with modern web technologies</p>
  <a href="#projects" class="cta-button">View My Work</a>
</section>

<!-- About Section -->
<section class="about">
  <h2>About Me</h2>
  <p>Passionate developer with 5+ years of experience...</p>
</section>

Happy coding! 🚀

"Your landing page is your digital handshake - make it count!"

About

No description, website, or topics provided.

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages