mirror of
https://github.com/SoPat712/my-portfolio.git
synced 2025-08-21 10:18:45 -04:00
Update README.md
This commit is contained in:
98
README.md
98
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
|
||||
# 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 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
|
||||
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 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
|
||||
|
Reference in New Issue
Block a user