https://github.com/siddami/personal-landing-page
https://github.com/siddami/personal-landing-page
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/siddami/personal-landing-page
- Owner: Siddami
- Created: 2025-06-23T20:39:09.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-24T06:12:49.000Z (12 months ago)
- Last Synced: 2025-06-24T06:24:59.842Z (12 months ago)
- Language: JavaScript
- Size: 37.1 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Personal Landing Page Assignment
## Project Overview
This project is a simple **personal landing page** built to fulfill a frontend assignment brief for mentorled microship task. It features a clean, responsive design and includes key sections such as a header, about me, and a contact section with my email. The goal was to build a thoughtful, accessible, and well-structured landing page using modern frontend practices.
---
## Assignment Brief
**Requirements:**
- A header with your name and profession
- A short “About Me” section
- A contact email link
- Responsive design (mobile and desktop)
- A clean layout based on a Figma file
- Live + GitHub submission only
---
## Thought Process & Approach
### Tech Stack
I chose the following technologies for their speed, flexibility, and developer experience:
- **Vite + React** – Fast setup and modular component structure
- **TailwindCSS** – Utility-first responsive design with clean, scalable CSS
- **Framer Motion** – For smooth animations and enhanced interactivity
- **Deployed via netlify** – Easy and quick live deployment
### My Goals
- Build a **clean and accessible layout**
- Ensure **responsiveness on all screen sizes**
- Maintain **clarity, focus, and minimalism** in content
- Integrate **smooth animations** to improve user experience
- Follow **component-based architecture** for maintainability
---
## Components
- `Header` – Displays the Navbar and a main section with my image and name
- `About` – Contains a structured personal introduction with a responsive layout
- `Contact` – Provides a clickable email link for connection
- `Navbar` – Animated, interactive navigation with active state management
- `Loader` – Simple loading animation using Framer Motion
---
## Accessibility & UX Considerations
- High contrast colors for better visibility (dark mode supported)
- Clear alt text for all images
- Keyboard-accessible links and buttons
- Responsive layout tested across multiple screen sizes (mobile to desktop)
## Deployment
The site is deployed and live via **netlify**.
You can access it here: [Live Site](https://sidpersonallanding.netlify.app)
---
## Repository
GitHub repo: [GitHub Repo](https://github.com/siddami/personal-landing-page)
---
## Status
✅ Fully responsive
✅ Accessible
✅ Animations integrated
✅ Meets assignment requirements
## About Me
I'm **Yetunde Siddiqat Abdulkareem**, a frontend developer passionate about building meaningful digital experiences. I focus on accessibility, storytelling, and user-centered design.