Update README.md

This commit is contained in:
Josh Patra
2025-04-10 00:17:59 -04:00
committed by GitHub
parent 609d497c43
commit 8702605ac1

View File

@@ -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
# create a new project in the current directory
npx sv create
* Smooth scrolling: Clicking navigation items (or typing commands) scrolls to the relevant section.
# create a new project in my-app
npx sv create my-app
```
* Dynamic data: Sections (Projects, Education, etc.) are driven by JavaScript objects that you can easily modify.
## Developing
* Mailto Form: The “Send a Message” form opens a users 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
npm run dev
Node.js (v14 or above recommended)
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
npm (comes with Node) or pnpm / yarn, whichever you prefer.
## Building
### Installation
To create a production version of your app:
1. Clone this repository or download the source code:
```bash
npm run build
```
`git clone https://github.com/SoPat712/my-portfolio.git`
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 users 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