Personal Landing Page

🧑‍💻 Responsive personal portfolio landing page built with HTML, SCSS, JavaScript, and Webpack.

This project presents a frontend developer portfolio through a compact static site with responsive sections, modular SCSS, small JavaScript interactions, and a production-oriented Webpack setup. The codebase stays intentionally small, but keeps the same habits as larger projects: clear structure, asset pipeline, formatting, accessibility improvements, and optimized production output.

✨ Features

• Responsive portfolio landing page for desktop, tablet, and mobile
• Intro, skills, experience, about, projects, testimonials, reviews, and contact sections
• Semantic HTML structure and improved accessibility for navigation, tabs, accordion, and form controls
• Local Sora font files
• SCSS architecture split into general styles and section-level components
• Reusable responsive mixins instead of scattered breakpoint values
• Small vanilla JavaScript modules for burger menu, accordion, tabs, and demo contact form behavior
• Simulated contact form submission with client-side validation and feedback message
• Webpack production build with HTML, CSS, and JavaScript minification
• Production asset copying for images and fonts
• SEO-friendly metadata and optimized hero image loading

🧰 Tech Stack

• HTML
• SCSS
• Sass
• JavaScript
• Webpack
• PostCSS
• Autoprefixer
• Prettier
• npm

📁 Project Structure

src/
  index.html              Main page markup and metadata
  js/
    script.js             Page-level module initialization
    modules/              Burger, accordion, tabs, and form behavior
  scss/
    general/              Reset, fonts, variables, and media mixins
    components/           Section and component styles
    style.scss            Main SCSS entry point
  images/                 Source images, icons, logos, and favicon
  fonts/                  Local Sora font files
webpack.config.js         Thin Webpack entry point
webpack/                  Split Webpack config: parts and shared paths
build/                    Development build output
public/                   Production build output

🚀 Scripts

Install dependencies:

npm install

Run the local development server:

npm run dev

Build the production version:

npm run public

Format code:

npm run format

Check formatting:

npm run format:check

🧱 Architecture Notes

• src/index.html owns the full page structure because this is a static portfolio landing page.
• SCSS is split into shared foundation files and section-level component files to keep styles readable without overengineering the project.
• JavaScript is organized as small DOM-focused modules instead of a framework.
• The contact form is intentionally simulated on the client side and does not submit data to a backend.
• Webpack config is split into small parts for paths, plugins, optimization, and dev server setup.
• Webpack handles production asset copying and HTML, CSS, and JavaScript minification.
• The project is kept proportional to its size: improvements should favor clarity, accessibility, and performance over additional tooling complexity.