leonchike / personal-site

Personal resume and blog

Personal Portfolio Website

This repository contains the code for my personal portfolio website, built using the latest web technologies. The website showcases my past projects and team experiences, providing a comprehensive overview of my skills and expertise.

Table of Contents

• Features
• Tech Stack
• Getting Started
• Project Structure
• API Documentation
• Testing
• Deployment
• Optimization
• Future Enhancements
• Contributing
• License

Features

• Modern and responsive UI design created with Figma
• Server-side rendering (SSR) for improved performance and SEO
• Dynamic content loading with React Server Components and Streaming
• TypeScript for enhanced type safety and developer productivity
• Styling with Tailwind CSS for rapid UI development
• MongoDB database integration using Mongoose ODM
• Authentication and authorization with NextAuth and OAuth
• Real-time data fetching with SWR library
• Scheduled tasks and background processing using Cron Jobs
• Analytics tracking with Google Analytics

Tech Stack

• Next.js 14
• React
• TypeScript
• App Router
• Server Actions
• Streaming
• Server-Side Rendering (SSR)
• Tailwind CSS
• MongoDB
• Mongoose
• Figma
• Vercel
• Cron Jobs
• NextAuth
• OAuth
• SWR Library
• Google Analytics

Getting Started

1. Clone the repository:

   git clone https://github.com/leonchike/personal-site.git
   

2. Install dependencies:

   cd personal-site
   npm install
   

3. Set up environment variables:
   • Create a .env.local file in the root directory
   • Add the required environment variables (e.g., database connection string, API keys)
4. Run the development server:

   npm run dev
   

5. Open your browser and visit http://localhost:3000 to see the website in action

Project Structure

📦 personal-portfolio
 ┣ 📂 components
 ┃ ┣ 📜 Header.tsx
 ┃ ┣ 📜 Footer.tsx
 ┃ ┗ 📜 ...
 ┣ 📂 lib
 ┃ ┣ 📜 db.ts
 ┃ ┣ 📜 auth.ts
 ┃ ┗ 📜 ...
 ┣ 📂 models
 ┃ ┣ 📜 Project.ts
 ┃ ┗ 📜 ...
 ┣ 📂 pages
 ┃ ┣ 📂 api
 ┃ ┃ ┗ 📜 ...
 ┃ ┣ 📜 index.tsx
 ┃ ┣ 📜 projects.tsx
 ┃ ┗ 📜 ...
 ┣ 📂 public
 ┃ ┣ 📂 images
 ┃ ┗ 📜 ...
 ┣ 📂 styles
 ┃ ┗ 📜 globals.css
 ┣ 📜 .env.local
 ┣ 📜 .gitignore
 ┣ 📜 next.config.js
 ┣ 📜 package.json
 ┣ 📜 README.md
 ┗ 📜 tsconfig.json

API Documentation

The website integrates with a RESTful API to fetch and manage data. Detailed API documentation can be found in the API Docs file.

Testing

The project includes a comprehensive test suite to ensure the reliability and stability of the website. To run the tests, use the following command:

npm run test

The tests cover various aspects of the application, including components, pages, and API endpoints.

Deployment

The website is deployed using Vercel, which provides seamless integration with Next.js applications. The deployment process is automated through a CI/CD pipeline triggered by pushing changes to the main branch.

To deploy the website manually, run the following command:

npm run deploy

Optimization

Several optimization techniques have been applied to enhance the performance of the website:

• Code splitting and lazy loading to reduce initial bundle size
• Image optimization using Next.js built-in image component
• Caching of frequently accessed data using SWR library
• Minimizing the use of client-side JavaScript for faster page loads

Future Enhancements

Some planned enhancements for the website include:

• Implementing a blog section to share technical articles and insights
• Adding a contact form for visitors to get in touch
• Integrating with a CMS for easier content management
• Enhancing the project details page with more interactive elements

Contributing

Contributions to the project are welcome! If you find any bugs, have suggestions for improvements, or would like to add new features, please submit an issue or a pull request. Make sure to follow the Contributing Guidelines when contributing to the project.

License

This project is licensed under the MIT License. Feel free to use, modify, and distribute the code as per the terms of the license.

---

Thank you for visiting my personal portfolio website! If you have any questions or feedback, please don't hesitate to reach out.