Full-Stack Engineer Portfolio Website

📋 Table of Content

• ✨ Introduction
• 🧩 Features
• 💻 Tech Stack
• 🗂️ Project Structure
• ⚙️ Getting Started
• 📬 Contact
• 🫰🏻 Support
• ⚖️ License

✨ Introduction

Welcome to the personal portfolio website of a Full-Stack Engineer. This site is thoughtfully designed to blend elegance with technology, showcasing three key aspects: projects, education, and skills. Built with a modern tech stack and refined UI/UX, it also features immersive 3D elements to enhance the interactive experience.

🧩 Features

🎨 Multi-section layout – Projects, Education, Skills, and Contact.

📱 Responsive design – With Tailwind CSS, it is optimized across mobile, tablet, and desktop screens.

🎞️ Smooth Animations – Powered by GSAP for scroll interactions.

📽️ Remarkable 3D - Powered by Three.JS, an interactive 3D models with realistic lighting and shadows.

📬 Functional Contact Form – Integrated with EmailJS.

and many more, including code architecture and reusability.

💻 Tech Stack

• React 19
• JavaScript
• Vite
• Three.js (Fiber and Drei)
• GSAP
• Tailwind CSS
• emailjs

🗂️ Project Structure

portfolio/
├── public/
|   ├── *images/          # Images
|   └── models/           # 3D Models
|
├── src/
|   ├── components/       # Reusable UI components
|   ├── *constants/       # Static data
|   ├── hooks/            # Custom React hooks
|   ├── sections/         # Website's sections
|   ├── App.jsx           # Root component
|   ├── index.css         # Global styles
|   └── main.jsx          # App entry point
|
├── +.env                 # Environment variables
├── .gitignore            # Git ignored folders/files
├── eslint.config.js      # ESLint config file
├── *index.html           # Project's main HTML file
├── .LICENSE              # Legal license
├── package.json          # Environment required packages
├── README.md             # Project documentation
└── vite.config.js        # Vite config file

📝 Notes:

• Folders/Files prefixed with * has the content that needs to be changed to match your needs.
• Folders/Files prefixed with + needs to be created.

⚙️ Getting Started

Follow these steps to set up the project locally on your machine.

📃 Prerequisites

• Git
• Node.js
• npm

🛠️ Installation & Development

Installation

# Clone the repository
git clone https://github.com/AnasAlhwid/portfolio.git

cd portfolio    # Navigate to the directory

npm install     # Install dependencies

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

VITE_APP_EMAILJS_SERVICE_ID=
VITE_APP_EMAILJS_TEMPLATE_ID=
VITE_APP_EMAILJS_PUBLIC_KEY=

Replace the placeholder values with your actual EmailJS credentials.

Development

npm run dev     # Start development server

Open http://localhost:5173 in your browser to view the project.

🧹 Code Quality

npm run lint       # Lints the code with ESLint

🏗️ Production Build

npm run build      # Builds the project

npm run preview    # Serves the production build locally

📬 Contact

• Email
• LinkedIn
• X
• GitHub

🫰🏻 Support

⚖️ License

GNU Affero General Public License v3.0