Sign In Sign Up

Discover the best apps, components and starters from the community.

Search

Kreeshna KM

Hotel Dashboard

Search engiine that run away from you

Run Search Engine

Nextjs I18n Page

Nextjs I18n Page

Testimonials Slider

Testimonials Slider

Vehicle Assistant

Vehicle Assistant

Landing page with Animated Falling Tetrahedrons and Lines

Falling Tetrahedrons

Join Waitlist

Personal website for graphic designers

Creative Portfolio Website

# NOIR: Modern Exclusive Restaurant Website

A sophisticated, mobile-first restaurant website designed for an upscale dining establishment. This project showcases modern web design principles with a focus on creating an atmosphere of exclusivity and luxury.

## Key Features

- **Elegant Dark Mode Design** - Rich blacks and strategic accent colors create a premium, exclusive ambiance
- **Interactive Spline Animation** - Custom hamburger menu toggle with smooth animations
- **Mobile-First Approach** - Fully responsive from mobile to desktop with optimized layouts
- **Modern UI Components** - Sophisticated hover effects, transitions, and micro-interactions
- **Immersive Content Presentation** - Beautifully structured tasting menu and à la carte sections

## Technical Highlights

- Built with **Next.js 15** for optimal performance and SEO
- **Framer Motion** animations for smooth, engaging user experiences
- **Tailwind CSS** for responsive styling and consistent design language
- **Memoized components** for performance optimization
- Custom fonts with **Next.js Font** system for typography hierarchy

This project demonstrates how to create a high-end digital experience that matches the sophistication of an exclusive restaurant. Perfect for restaurants, cafes, or any premium service business looking to elevate their online presence.

Feel free to use this as inspiration for your own projects or as a starting point for client work in the hospitality industry!

Spline Menu: Restaurant Website

Color Extractor

Color Extractor

Sapid Food

Olum Foundation Co. Ltd

Olum Foundation Co. Ltd

Studio39 Salon

Live Mock Test

Athu tourism

Financial Dashboard

Financial Dashboard

Below is a comprehensive, section‑by‑section description of the portfolio site as shown in the screenshots. This outline should allow you (or a developer/designer) to replicate the layout, styling, and content as closely as possible.

⸻

1. Overall Look & Feel
• Color Scheme: Dark theme (black/very dark gray background) with white text.
• Typography: Large bold headings for section titles and the user’s name; smaller headings/subheadings for roles and skill categories; body text in a clean, sans‑serif font.
• Navigation: A top navigation bar (on a dark background) with links:
1. Home
2. Skills
3. Experience
4. Projects
5. Publications
6. Education
7. Contact
• Layout: Each major section (Skills, Experience, Projects, Publications, Education) appears as a full-width block on the dark background. Sections are separated by headings or visually distinct backgrounds/gradients.

⸻

2. Header / Hero Section
• Name & Title: Large centered text reading “Shaquille Williams,” with a subheading or tagline “AI Engineer & Community Builder” or “Senior Software Engineer, AI Specialist, and Community Organizer specializing in machine learning, generative AI…”
• Contact Details:
• Email: shaq.williams.ai@gmail.com
• Brief Summary / Bio: One to two lines describing specializations (machine learning, generative AI, cybersecurity, STEM education, etc.) and a commitment to AI-driven, open-source tools for social change.
• Call-to-Action Buttons:
• View Projects
• Contact Me

These buttons presumably link to the Projects section and the Contact section, respectively.

⸻

3. Skills Section
• Section Title: “Technical Skills” (centered heading).
• Skill Search & Filters:
• A search bar labeled “Search skills…”
• Filter buttons/toggles for skill proficiency: All, Expert, Advanced, Intermediate
• Skill Category Cards: Arranged in a grid, each with a heading and color-coded skill tags. The categories visible in the screenshots include:
1. Machine Learning & AI
• Tags: “Machine Learning,” “Deep Learning,” “NLP,” “Voice Cloning,” “Computer Vision,” “Reinforcement Learning,” “Generative AI,” “MLOps,” etc.
2. Programming & Development
• Tags: “Python,” “C++,” “JavaScript/TypeScript,” “SQL,” “R,” “MATLAB,” “Julia,” etc.
3. AI Frameworks & Tools
• Tags: “PyTorch,” “TensorFlow,” “Scikit‑learn,” “Hugging Face,” “CUDA,” “TensorRT,” “MLflow,” etc.
4. Data Science & Analytics
• Tags: “Data Science,” “Data Analysis,” “Data Visualization,” “Data Mining,” “Business Intelligence,” “Predictive Modeling,” “Big Data Processing,” etc.
5. Cloud & Infrastructure
• Tags: “AWS,” “GCP,” “Docker,” “Kubernetes,” “CI/CD,” “Microservices,” “DevOps,” etc.
6. Research & Analysis
• Tags: “Research Methods,” “Experimental Design,” “Scientific Writing,” “Literature Review,” “Grant Writing,” “Peer Review,” “Technical Documentation,” etc.
7. Tools & Technologies
• Tags: “LaTeX,” “Git/GitHub,” “Linux/Unix,” “SolidWorks,” “AutoCAD,” “Arduino,” “Raspberry Pi,” etc.
8. Soft Skills
• Tags: “Technical Writing,” “Public Speaking,” “Project Management,” “Team Leadership,” “Mentoring,” “Problem Solving,” “Critical Thinking,” etc.
9. Physics & Mathematics
• Tags: “Quantum Mechanics,” “Statistical Mechanics,” “Mathematical Physics,” “Differential Equations,” “Linear Algebra,” “Complex Analysis,” “Group Theory,” “Numerical Methods,” etc.

Each skill tag has its own label style (often color-coded, such as green, blue, etc.), and clicking filters or search updates which tags are visible if filtering is implemented.

⸻

4. Experience (“Professional Journey”) Section
• Section Title: “Professional Journey”
• Role/Position Cards: Each experience is displayed in a colored/gradient box or card with:
1. Position & Company:
• Example: “Technical Program Director” at Rose from Concrete (January 2021 – Present).
2. Key Achievements (bullet points):
• E.g., “Forged strategic partnerships with 40+ community centers across Brooklyn,” “Developed predictive models using Python, Scikit‑learn, and Geopandas on GCP to impact 20,000+ NYC residents,” etc.
3. Impact Metrics (in boxes underneath achievements):
• E.g., “40+ Community Centers,” “20,000+ Residents Impacted,” “15 Team Size.”
4. Technologies & Skills (listed in small tags or a side panel):
• E.g., “Python,” “Machine Learning,” “AWS,” “Docker,” “GCP,” “Community Development.”
5. Overall Impact: A short statement such as “Positively impacted over 20,000 NYC residents through data‑driven community programs.”
• Additional Roles might follow the same format. For example:
• “Lead AP Physics Teacher” at Success Academy High School of the Liberal Arts (July 2019 – 2022)
• Key Achievements like “Applied advanced data analysis and statistical techniques in Python for 150+ students,” “Awarded ‘Teacher Excellence Award,’” etc.
• Technologies & Skills: “Leadership,” “Data Analysis,” “Education,” “Team Management,” “Curriculum Development.”

⸻

5. Projects Section
• Section Title: “Projects”
• Featured Project: Shown in a large panel at the top or left side.
• Example: “Voice Cloning & Audio Processing Suite”
• Short description: “Comprehensive audio processing system including real-time voice cloning, multilingual transcription, and speaker diarization.”
• Tech stack badges: “TensorFlow TTS,” “PyTorch,” “Whisper,” “FastAPI,” “React,” etc.
• Buttons: GitHub link and a Live Demo link.
• Project Grid: Below (or next to) the Featured Project is a grid of project cards. Each card typically shows:
1. Project title & a small label (e.g., “Generative AI,” “Reinforcement Learning,” “Audio Processing & AI,” etc.)
2. Difficulty rating (stars)
3. Completion date (e.g., 2023‑03‑01)
4. Team size (e.g., 2 or 3)
5. Tech stack badges (e.g., PyTorch, CUDA, Docker, Python, TensorFlow, OpenAI Gym, etc.)
6. A “View Details” button that opens a modal or dedicated page.
• Examples of Projects:
• DALL‑E 2 PyTorch Implementation (Generative AI)
• Difficulty: 5 stars, Completed: 2023‑03‑01, Team Size: 2, Tech: PyTorch, CUDA, Docker
• Multi‑Agent RL Environment (Reinforcement Learning)
• Difficulty: 5 stars, Completed: 2023‑01‑20, Team Size: 2, Tech: Python, TensorFlow, OpenAI Gym
• Community Grant Management System (Full‑Stack Development)
• Wikipedia Connection Finder (Network Analysis)
• NYC Education Analytics (Data Science)
• Project Detail Modal (if implemented):
• Tabs for “Overview,” “Gallery,” “Interactive Demo.”
• Screenshots or placeholders within the “Gallery” tab.

⸻

6. Publications Section
• Though the screenshots do not show a detailed Publications page, there is a “Publications” link in the navigation.
• Presumably, this might list articles, papers, or other published work in a similar card or list format.

⸻

7. Education Section
• Section Title: “Education” or “Academic Background.”
• Institution / Location / Degree: For example, “New York, New York, BS – 2014.”
• Key Coursework: A set of labeled items (Machine Learning, Computational Physics, Data Visualization, Statistical Mechanics, Differential Equations, Data Structures, Network Science, Quantum Mechanics, Mathematical Physics, Linear Algebra, etc.).
• Skills Developed: Shown with percentage or progress bars (e.g., Scientific Computing 90%, Data Analysis 85%, etc.).
• Key Achievements: Short bullet points such as:
• “Research Excellence: Applied advanced data analysis techniques to physics research projects.”
• “Technical Innovation: Developed computational models for complex physical systems.”
• “Academic Leadership: Led physics study groups and mentored junior students.”

⸻

8. Contact Section
• The screenshots do not show a dedicated “Contact” page, but there is a Contact link in the top menu and a “Contact Me” button in the header/hero section.
• This may lead to either a simple contact form or display of the user’s email/phone for direct communication.

⸻

9. Footer (If Present)
• A typical footer could include copyright info, social media links, or quick navigation links.

⸻

10. Notable Visual / UX Elements
• Dark, minimalistic design with bold accent colors for headings and gradient backgrounds in the Experience section.
• Skill filtering: The Skills page offers dynamic filtering by proficiency level.
• Project detail modals: Each project card can open a modal with additional info, screenshots, or interactive demos.
• Impact metrics: Large numeric highlights (e.g., “40+,” “20,000+,” “100,000+”) for achievements or scope.

⸻

How to Recreate/Replicate
1. Framework & Styling
• You can use a modern front-end framework (React, Vue, etc.) or plain HTML/CSS/JS.
• Stick to a dark palette (#000000 or #121212 background, #FFFFFF text, etc.).
• Consider using a grid or card-based system (e.g., Bootstrap or Tailwind) to replicate the layout.
2. Navigation & Routing
• Top nav bar that scrolls or routes to each section: Home, Skills, Experience, Projects, Publications, Education, Contact.
• Possibly implement a “scroll-to-section” if it’s a single-page design.
3. Hero Section
• Large bold name, short tagline, contact info, and two prominent buttons.
4. Skills Section
• Use a grid layout; each card holds a category name and multiple skill tags.
• Implement a simple search bar that filters skill tags by text.
• Add a toggle for skill levels (Expert, Advanced, Intermediate).
5. Experience Section
• Each role is shown as a highlight card or gradient box, with bullet points for achievements, a short list of technologies, and numerical impact metrics.
6. Projects Section
• Feature one project at the top with a descriptive block, then a grid of other projects with cards or modals for details.
• Each card shows difficulty, completion date, team size, and tech used.
7. Education Section
• Break down courses, key academic projects, and skills

Portfolio Website

A dev portfolio

Home Management App

Home Management App

Computer Academy

Computer Academy

Pet Store Ecommerce

Pet Store Ecommerce

RadiantView_1