portfolio_website

What the portfolio includes

The repository holds a personal developer portfolio for Mwaki Denis, built as a modern single page website. The README describes it as a sleek and fully responsive personal site built with Vite, React, and TypeScript, styled with Tailwind CSS and shadcn/ui components. The feature list covers a dark and light mode toggle, full responsiveness across device sizes, a chat section, animated GIFs, an about me and career journey timeline, a technical skills overview with progress bars, a certifications section, integrated blog highlights, and a project portfolio. Additional features include an education history section, a career timeline, a testimonials carousel, an interactive rating and feedback section, a contact form with validation, an optional embedded Google Maps location, a floating WhatsApp contact icon, modular reusable components, SEO meta tags with social sharing, an organized codebase, social media integration, a resume download link, a sticky navbar with smooth scrolling, and external link previews with rich cards. The README frames the site as a complete presentation of the developer's journey, skills, projects, and professional story. Because the content is personal, the exact sections reflect one developer's career rather than a generic template. The site targets people who want to learn about the developer's work and contact them through the built in form or the linked social accounts.

Project display and integrations

The portfolio presents completed work through a project section that pulls data live from GitHub. According to the README, the project portfolio includes live GitHub API integration, rich descriptions, live demo links, GitHub repository links, and dynamic tech stack tags. A hook named useGithubProjects in the src/hooks directory drives that integration, so the displayed projects reflect the developer's repositories rather than a hand written list. Beyond projects, the site collects several ways to share information. The blog highlights and blog section surface written posts. The certifications section uses an improved grid layout. The skills overview renders progress bars, and the career timeline plus about me section tell the developer's story. The contact form validates input before sending, and the floating WhatsApp icon plus embedded map give visitors extra ways to reach out. The README also lists SEO meta tags, social sharing cards, and external link previews as parts of the presentation layer. In short, the site is a collection of personal and professional content displayed in one place, with the project area kept current through the GitHub API. The dynamic tech stack tags color themselves from an accent palette, which the README describes as auto rotating through several accent colors for visual variety.

Tech stack and code structure

The technical foundation is Vite for the dev server and build, React with TypeScript for component logic, Tailwind CSS for utility first styling, and shadcn/ui for accessible interface components. The README lists these as the core stack and notes that Node.js and npm are required, with nvm recommended for installation. To run the project, the steps are clone the repository, move into the project folder, run npm install, optionally create a dot env file with VITE_GITHUB_TOKEN and VITE_GITHUB_USERNAME, and then run npm run dev, after which the site is served at http://localhost:5173. The source tree is organized under src with components split into sections, ui, and chat, a data directory for static projects and certificates, custom hooks such as useGithubProjects, a lib directory for utilities, pages, and a types directory for TypeScript definitions, plus App.tsx as the main application. Deployment targets Vercel: the framework preset is Vite, the build command is npm run build, and the output directory is dist. Environment variables VITE_GITHUB_TOKEN and VITE_GITHUB_USERNAME are added in Vercel for higher API rate limits. The color system uses a coal black primary theme with several accent colors for the dynamic tags. The project is licensed under the MIT License. The README also documents a color system built around a coal black primary theme with several accent colors used by the dynamic tags, which keeps the visual identity consistent across the light and dark modes.

Editorial conclusion

The project is licensed under the MIT License and built with Vite, React, TypeScript, Tailwind CSS, and shadcn/ui components. The README points to a live demo at mwakidenis.pages.dev and documents deployment through Vercel with a Vite build and a dist output directory.