https://github.com/bagusperdanay7/portofolio-vue
A Single Page Application Personal Portfolio Website utilizing the Vue.js framework + Vite and Tailwind CSS.
https://github.com/bagusperdanay7/portofolio-vue
css html javascript tailwindcss vite vuejs web
Last synced: about 2 months ago
JSON representation
A Single Page Application Personal Portfolio Website utilizing the Vue.js framework + Vite and Tailwind CSS.
- Host: GitHub
- URL: https://github.com/bagusperdanay7/portofolio-vue
- Owner: bagusperdanay7
- License: mit
- Created: 2024-05-28T15:17:24.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-01-15T10:41:06.000Z (4 months ago)
- Last Synced: 2025-01-30T09:17:46.371Z (4 months ago)
- Topics: css, html, javascript, tailwindcss, vite, vuejs, web
- Language: Vue
- Homepage: https://bagusperdanay7.github.io/
- Size: 60.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Portfolio with Vue
[**Dokumentasi Bahasa Indonesia (Indonesian Documentation)**](/docs/id/README.md)
This project is my personal portfolio website developed using Vue.js + Vite framework and Tailwind CSS framework by applying single page application using vue router. The typography used is Lato from Google Fonts & the icons used in this website is Boxicons. The aim of developing this website is to introduce my personal brand, promote my skills, experience, projects and achievements in the field of Computer Science, and to expand my career and/or entice potential clients.
## Features
The features contained in this web application are as follows:
- Landing Page
- Form Submission Contact
- Certifications Page
- Projects Page
## Task and Responsibilities
**Bagus Perdana Yusuf (UI & UX Designer, Front-end Developer)**
- Designed and managed responsive web applications and designed user interface using Vue.js, ensuring multi-browser compatibility and optimal performance.
- Utilized Vue Router to create a single page application for seamless page navigation.
## Technology stack & Tools
This program needs:
| Tech Stack & Tools | Version |
| ---------------------------- | -------- |
| Node.js | 20.12.2+ |
| JavaScript | ES6 |
| Vue.js | 3.4.21+ |
| Vue Router | 3.4.21+ |
| Vite | 4.3.0+ |
| Tailwind CSS | 3.4.3+ |
| Box Icon | 2.1.4+ |
| date-fns | 4.1.0+ |
| Figma | Latest |
| Tailwind CSS Color Generator | Latest |
| Visual Studio Code | Latest |
## Setup
### Install Extension in VSCode
Install The following extension in Visual Studio Code:
- [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
### Install Dependencies
Open terminal, type the following command:
```sh
npm install
```
### Run Development (Compile and Hot-Reload)
Open terminal, type the following command:
```sh
npm run dev
```
### Run Build (Compile and Minify for Production)
Open terminal, type the following command:
```sh
npm run build
```
### Run Build Preview
Open terminal, type the following command:
```sh
npm run preview
```