This project is my personal portfolio and blog, built to showcase my work as a frontend engineer, share my thoughts on various topics, and provide a clear overview of my skills and interests. It's a central hub where you can dive into my projects and read my latest articles without any fuss.
Getting this project up and running on your local machine is pretty straightforward. Just follow these steps:
-
Clone the Repository: First, you'll want to get a copy of the project files. Open your terminal and run:
git clone git@github.com:Charmingdc/portfolio-v2 cd portfolio-v2 -
Install Dependencies: Once you're in the project directory, install all the necessary packages:
npm install
-
Start the Development Server: To see the project in action, start the development server. This will compile the SvelteKit application and make it accessible in your browser, typically at
http://localhost:5173.npm run dev
-
Build for Production (Optional): If you want to create an optimized production build, you can use:
npm run build npm run preview # to preview the production build
This portfolio is designed to be easily navigable, allowing visitors to explore different facets of my work and interests.
- Home (
/): This is where you'll find an introduction to who I am, what I'm currently working on, my technical tools, and my interests. - Blog (
/blog): Here, I share articles and insights on frontend engineering and other topics. You can browse through a list of posts and click on any title to read the full article. - Projects (
/projects): This section highlights the projects I've worked on, providing a glimpse into my practical skills and problem-solving approaches. You can click on a project to learn more about it. - Theme Toggle: You'll find a toggle in the bottom-right corner that lets you switch between dark and light themes, personalizing your viewing experience.
- Social Links: In the top-right corner, there are links to my social profiles (X, GitHub, Email, Myhappr) if you want to connect.
Here's a quick rundown of what this portfolio offers:
- Dynamic Content Management: Blog posts are managed dynamically using markdown files, making it easy to add and update content without touching the code.
- Responsive Design: The entire site is built to look great and function perfectly on any device, from desktops to mobile phones.
- Dark/Light Theme: Users can easily switch between a comfortable dark theme and a crisp light theme, based on their preference or system settings.
- Smooth Page Transitions: Enjoy a fluid browsing experience with subtle, performant page transitions powered by
svelte-motion. - SEO Optimized: The site includes comprehensive meta tags for improved search engine visibility and better social media sharing previews.
- Modern Frontend Stack: Leverages the latest features of SvelteKit and TypeScript for a robust and maintainable codebase.
This project is built using a modern and efficient set of technologies:
| Technology | Description |
|---|---|
| SvelteKit | A powerful framework for building web applications with Svelte. |
| Svelte | A reactive component framework that compiles code into tiny, vanilla JavaScript. |
| TypeScript | A typed superset of JavaScript that compiles to plain JavaScript. |
| Tailwind CSS | A utility-first CSS framework for rapidly building custom designs. |
| Vite | A next-generation frontend tooling that provides an extremely fast development experience. |
| ESLint | A pluggable linting utility for JavaScript and TypeScript. |
| Prettier | An opinionated code formatter. |
| Vercel | Platform for frontend developers, enabling instant deployments. |
| Skriplet | A content collection utility for SvelteKit. |
| Svelte-Motion | A simple, declarative motion library for Svelte, inspired by Framer Motion. |
You can find me, Adebayo Muis, around the web:
- GitHub: @Charmingdc
- X (Twitter): @yourhandle
- LinkedIn: Your LinkedIn
- Email: charmingdc002@gmail.com
- Myhappr: Adebayo Muis on Myhappr
