The team of space
Generated Prompt
## APPLICATION OVERVIEW This application is a portfolio website designed for showcasing a team of space-related projects and experiences. It incorporates essential sections like a SaaS Hero Header, About, Projects, Experience, Contact, and a dedicated page for university summaries, enabling users to navigate through semesters, years, courses, and chapters, with integrated PDF viewing capabilities. ## CORE FEATURES 1. **Hero Section**: A prominent introductory area that showcases the team's mission and highlights key projects or achievements with visually appealing call-to-action buttons. 2. **About Section**: A concise overview of the team and their expertise, featuring images and brief bios of team members to establish credibility. 3. **Projects Showcase**: A gallery or list of completed projects with descriptions, images, and links to live demos or case studies. 4. **Experience & Resume Section**: A detailed account of professional experiences, skills, and qualifications, allowing users to download a resume in PDF format. 5. **University Summaries**: An organized page that displays semesters, years, courses, and chapters with clickable links that open PDFs for each chapter, facilitating easy access to academic resources. 6. **Contact Form**: A simple and user-friendly form for inquiries, feedback, or collaboration opportunities, ensuring easy communication with website visitors. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - The design emphasizes cleanliness and simplicity, with ample white space to enhance readability and focus on content. - **Color Mode**: Light theme featuring a primarily white background with dark text, ensuring high contrast and readability. - **Layout**: A single-page layout with smooth scrolling between sections. The Hero section at the top followed by About, Projects, Experience, University Summaries, and finally the Contact form. - **Typography**: Utilize a sans-serif font like 'Inter' or 'Roboto' for body text, with headings in a bolder style to create a clear visual hierarchy. Headings should be larger and more prominent to guide the user through sections. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for a robust and type-safe application. - **Styling**: Tailwind CSS for utility-first styling to maintain a consistent minimalist design. - **UI Components**: Integrate shadcn/ui for pre-built, accessible UI components. - **State Management**: Use React Context API or Zustand for state management as needed. ## IMPLEMENTATION STEPS 1. **Set up the project**: Initialize a new React project with TypeScript and install dependencies including Tailwind CSS and shadcn/ui. 2. **Create the layout**: Structure the application with a single-page layout using React Router if needed for any additional routes. 3. **Develop the Hero Section**: Implement a full-width section with a background image (if applicable), team name, tagline, and call-to-action buttons. 4. **Build the About Section**: Add team member bios, images, and professional backgrounds, ensuring a clean and simple presentation. 5. **Implement Projects Showcase**: Create a grid or card layout for projects, including images, descriptions, and links to detailed pages or case studies. 6. **Design Experience & Resume Section**: Include a downloadable resume button and a list of skills and experiences. 7. **Develop University Summaries Page**: Create a dynamic list of semesters and courses which users can click to open corresponding PDFs in a modal or new tab. 8. **Integrate the Contact Form**: Build a simple contact form with validation and success/error state management. 9. **Optimize for Responsiveness**: Use Tailwind CSS’s responsive utilities to ensure a seamless experience across devices. ## USER EXPERIENCE Users will navigate through the website using a fixed navigation bar that allows smooth scrolling to each section. The Hero section will immediately engage visitors, prompting them to explore further. Each project and experience entry will be clickable, leading to detailed views or downloadable files. The University Summaries section will provide an intuitive interface for accessing academic materials, making the site user-friendly and efficient. The contact form will ensure easy communication, enhancing user engagement and potential collaboration opportunities.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
