Merge branch 'main' of github.com:SoPat712/my-portfolio

README.md

@@ -1,38 +1,88 @@
-# sv
+# Terminal-Style SvelteKit Portfolio
 
-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+This is a terminal-inspired portfolio built with SvelteKit and Tailwind CSS, showcasing my projects, education, skills, and more. It includes an interactive “terminal” at the top of the page that lets users type commands like help, ls, or cat [section] to navigate through different sections of the site.
+## Features
 
-## Creating a project
+  * Terminal simulation: Visitors can type commands to navigate sections (e.g., cat projects, cat skills, cat education).
 
-If you're seeing this, you've probably already done this step. Congrats!
+  * Responsive design: Built with Tailwind CSS, so it looks great on all screen sizes.
 
-```bash
+  * Smooth scrolling: Clicking navigation items (or typing commands) scrolls to the relevant section.
-# create a new project in the current directory
-npx sv create
 
-# create a new project in my-app
+  * Dynamic data: Sections (Projects, Education, etc.) are driven by JavaScript objects that you can easily modify.
-npx sv create my-app
-```
 
-## Developing
+  * Mailto Form: The “Send a Message” form opens a user’s default email client with a prefilled message.
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+## Getting Started
+### Prerequisites
 
-```bash
+    Node.js (v14 or above recommended)
-npm run dev
 
-# or start the server and open the app in a new browser tab
+    npm (comes with Node) or pnpm / yarn, whichever you prefer.
-npm run dev -- --open
-```
 
-## Building
+### Installation
 
-To create a production version of your app:
+1. Clone this repository or download the source code:
 
-```bash
+`git clone https://github.com/SoPat712/my-portfolio.git`
-npm run build
-```
 
-You can preview the production build with `npm run preview`.
+2. Navigate into the project folder:
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+`cd my-portfolio`
+
+3. Install dependencies:
+
+`npm install`
+
+
+## Running the Development Server
+
+Start a local dev server:
+
+`npm run dev -- --open`
+
+Open your browser and visit http://localhost:5173 (port may vary) to see the portfolio.
+
+### Building for Production
+
+To create an optimized production build:
+
+`npm run build`
+
+Then preview the production build:
+
+`npm run preview`
+
+## Customizing
+
+### Update Profile and Data:
+
+  In src/routes/+page.svelte (or the main Svelte file where your data lives), find the profile, projects, education, etc. objects.
+
+  Modify them with your own information (e.g., name, role, courses, achievements, etc.).
+
+### Change the Terminal Commands:
+
+  Look for the executeCommand() function. You can add more commands or alter existing ones (like cat [section]) to do different things or show more data.
+
+### Tailwind Configuration:
+
+  If you need to change colors, spacing, or fonts, edit your tailwind.config.cjs (or tailwind.config.js) file.
+
+### Default Email:
+
+  The “Send a Message” form is configured to open the user’s mail client with a prefilled message. Modify it in the <script> block (the sendMail function) if you want a different email address or subject.
+
+## Terminal Commands
+
+    help: Shows available commands
+
+    clear: Clears the terminal output
+
+    whoami: Displays your name
+
+    ls or ls -la: Lists all sections (projects, education, achievements, experience, skills, contact)
+
+    cat [section]: Scrolls to a given section (e.g., cat projects → show projects)
+
+    contact: Scrolls to the contact section