Portfolio Website

This project originally served as a simplified rendition of my old portfolio website made with Laravel Livewire. It's constructed using the powerful combination of EJS for templating and Express for server-side operations.

Overview

The objective behind this repository is to create a streamlined version of my existing portfolio website, focusing primarily on frontend architecture and user interaction. Instead of the Laravel framework used in the original website, this version leverages Express.js to manage server functionalities and EJS for dynamic HTML content generation.

One of the significant differences from the Laravel version is the use of the GitHub API to automatically fetch and populate my projects, enabling a more dynamic and efficient way of showcasing my work.

Furthermore, this project serves as an experimental ground, facilitating exploration and experimentation with a variety of tools and technologies, including Vite, EJS, and more. This experimentation allows for the exploration of innovative methods and optimizations to enhance the website's performance and user experience.

Template-Friendly Design

Moreover, this project is structured to serve as a versatile template for individuals aiming to establish their own portfolio websites. The clear separation between frontend and backend functionalities, coupled with the modularity of the codebase, ensures ease of adaptation. Developers can leverage this repository as a starting point to design and customize their frontend, tailor server functionalities, and effortlessly integrate their own content.

Key Features:

• Frontend Customization: Simple and adaptable HTML structure, allowing easy customization and styling for personal portfolios.
• Efficient Backend Integration: Express.js backend for managing server functionalities, enabling easy modification and extension.
• GitHub API Integration: Automatic project population through the GitHub API, providing a dynamic display of work.
• Hot Reloading: Automatic reloading of the server and frontend when changes are detected, ensuring a seamless development experience.

This project is designed to be accessible and modifiable for developers of various skill levels, offering a structured foundation to craft personalized portfolio websites.

Getting Started

Prerequisites

Ensure you have Node.js installed on your system. If not, you can download it here.

Installation

1. Clone the Repository:

   git clone https://github.com/Justin0122/simplified-portfolio.git portfolio
   cd portfolio

2. Install Dependencies:

    npm install

Usage

1. Start the Server:

    npm start

   ^{node app.js}

2. Development Mode:

    npm run dev

   ^{concurrently "npm run frontend" "npm run tailwind" "npm run watch:ejs" "npm run server"}

Development Mode

This project utilizes node --watch to automatically restart the server when changes are detected. It will also run npx tailwind to monitor changes to the frontend files and automatically recompile the CSS.

Individual Commands

Individual Commands

Compile Tailwind Styles

npm run tailwind

^{npx tailwindcss -i ./src/input.css -o ./public/style.css --watch}

Watch EJS and Auto-Refresh Browser

npm run watch:ejs

^{browser-sync start --proxy 'http://localhost:3000' --files 'views/.ejs, public/**/.ejs' --no-open --no-notify --no-ui --port 3000}

Vite

npm run frontend

^vite

Watch Server

npm run server

^{node --watch app.js}

Github integration

This portfolio website utilizes the GitHub API to automatically fetch and display my projects. The server-side logic retrieves project data from my GitHub account, eliminating the need to manually add projects to the portfolio. It automatically updates hourly to ensure that the projects are up-to-date and to minimize the number of API calls.

Built With

• EJS - Templating Engine
• Express - Web Framework
• GitHub API - API for fetching GitHub projects
• Node.js - JavaScript Runtime Environment

License

This project is licensed under the MIT License - see the LICENSE file for details.