Title of Project

A Project Report Submitted

In partial fulfilment of the requirements for the degree of

BACHELOR OF COMPUTER APPLICATION
(BCA)

Submitted by:

STUDENT’S NAME : Avneesh

Roll No.: 41222126

under the guidance of

Dr. Pankaj Lathar
Associate Professor

COMPUTER DEPARTMENT
Delhi Skill and Entrepreneurship University (DSEU)
Dwarka campus, Sector 9, Dwarka, New
Delhi-110077

May 2025
1
Title of Project Work -Portfolio Builder Website

Name of Student - Avneesh

Roll Number – 41222126

Name of Guide- Dr. Pankaj Lathar

Designation- Associate Professor

Student’s Signature​ Guide Signature

I/C BCA

2
 Index
S. No. Topic Page No.
1. Title of Project 1
2. Information Sheet 2
3. Declaration 4
4. Acknowledgement 5
5. Introduction 6
6. Literature Review 7
7. Objective 8
8. Work Plan and Methodology 9
9. SRS, Flow Chart, System Diagrams etc. 11
10. Implementation / Code etc. 13
11. Testing 15
12. Results and Findings 17
13. Limitations and Future Scope 19
14. Conclusion 20

3
 DECLARATION

I hereby declare that the project work entitled “Portfolio Builder Website” submitted to
Delhi Skill & Entrepreneurship University, Dwarka Campus is a record of an original work
done by me under the guidance of “Dr. Pankaj Lathar”. This project work is submitted in
the partial fulfilment of the requirements for the award of the degree of Bachelor of Computer
Application. The results embodied in this report have not been submitted to any other
University or Institute for the award of any degree or diploma.

Signature of Candidate

Name - Avneesh

Roll No. - 41222126

4
 Acknowledgement

I would like to express my sincere gratitude to all those who supported and guided me throughout
the completion of this project.

First and foremost, I would like to thank Dr. Pankaj Lathar sir, for their valuable guidance,
encouragement, and continuous support during the course of this project. Their insights and
feedback were instrumental in shaping the direction of my work.

I also extend my heartfelt thanks to the faculty members of Computer Department, DSEU, for
providing me with the opportunity and resources to undertake this project.

Lastly, I would like to acknowledge the valuable information and resources made available through
online communities, tutorials, and documentation, which played a crucial role in the development
and successful deployment of this project.

5
 Introduction

●​ In today’s digital-first environment, having an impressive online portfolio is crucial for

developers and tech students to showcase their skills, projects, and professional profiles. This
project aims to develop a Portfolio Builder Website that enables users to easily generate
personalized portfolio websites by integrating their existing LinkedIn and GitHub profiles.

●​ The primary objective of this platform is to simplify the portfolio creation process for
individuals who may lack advanced technical knowledge in web development. Users can
securely sign up and log in using Firebase Authentication with email and password, and
upon successful login, they can connect their LinkedIn and GitHub accounts to
automatically fetch relevant data such as project repositories, skills, and professional details.

●​ The website is built using HTML, CSS, JavaScript for the frontend, and Python with
Flask for the backend server. Firebase handles user authentication while offering a secure
and scalable way to manage user sessions. The backend communicates with Firebase’s REST
API for authentication and processes data accordingly.

●​ This project not only helps aspiring developers build a strong personal brand but also allows
them to quickly deploy and manage their portfolios without manually writing HTML or
handling hosting complexities. The final platform aims to be modern, minimalistic, and
developer-friendly, providing users with a seamless experience from signup to a live,
personalized portfolio site.

6
 Literature Review

●​ In the current digital era, having a personal online presence is crucial for developers and
students pursuing tech careers.​

●​ According to studies on career development trends, developers with an online portfolio are
50% more likely to secure interviews than those without one.​

●​ Existing platforms like GitHub and LinkedIn serve as professional networks but lack
customizable personal portfolio creation features.

●​ Several website builders like Wix, WordPress, and Webflow exist but require manual input,
technical setup, or paid plans for premium features.​

●​ Template-based generators such as HTML5 UP and Bootstrap-based templates offer free

designs but demand technical know-how for customization and hosting.​

●​ No existing platform offers integration-based, automated portfolio generation via

LinkedIn and GitHub APIs tailored specifically for developers and students.

●​ Python is among the top programming languages for rapid web development due to its
simplicity, readability, and strong library support.

●​ Flask, being a lightweight Python web framework, is ideal for projects requiring custom
routing, API integration, and quick backend setup without unnecessary overhead.

●​ Multiple case studies highlight Flask’s effectiveness in handling small to medium-sized

applications where API-driven functionalities and modular development are priorities.

●​ Modern web applications increasingly focus on dark-themed interfaces with 3D elements,

motion graphics, and micro-interactions to enhance visual appeal and user engagement.

●​ Studies on web user behavior suggest that minimalist designs with fewer distractions and
clean call-to-action buttons improve conversion and retention rates.

7
 Objective
The primary objective of this project is to develop a user-friendly and automated portfolio builder
website tailored for developers and tech students. The aim is to simplify the process of creating a
personalized online portfolio by allowing users to sign up using email and password authentication
via Firebase and then connect their GitHub and LinkedIn accounts to fetch relevant data such as
repositories, skills, and professional background. The system is designed to dynamically generate a
modern and professional-looking portfolio website based on this information, without requiring the
user to write any code or handle deployment manually. Furthermore, the platform seeks to offer a
secure and seamless user experience through a visually appealing interface and responsive design.
Overall, the project strives to bridge the gap between technical complexity and accessibility by
offering a practical solution for students and developers to build and maintain their online presence
effectively.

8
 Work Plan and Methodology

1.​ Requirement Analysis:

○​ Identified the need for an accessible, automated portfolio creation tool for developers
and tech students.
○​ Defined core features like email/password authentication, GitHub and LinkedIn
integration, and automated portfolio generation.​

2.​ Technology Stack Selection:

○​ Chose HTML, CSS, and JavaScript for frontend development.
○​ Selected Python with Flask as the backend framework.
○​ Integrated Firebase Authentication for secure email and password-based user login.​

3.​ System Design:

○​ Designed the website structure, user workflow, and feature mapping.
○​ Created wireframes for the login page, homepage, user dashboard, and generated
portfolio layout.​

4.​Frontend Development:
○​ Built responsive UI components using HTML, CSS, and JavaScript.
○​ Designed a modern dark-themed login/signup page with animated 3D background
elements.

5.​ Backend Development:

○​ Set up a Flask server for handling API requests, routing, and managing user data.
○​ Integrated Firebase Authentication via its REST API for user login and registration.
○​ Planned API endpoints for connecting to LinkedIn and GitHub (to be expanded).​

6.​ Integration and Testing:

○​ Connected the frontend with backend endpoints.
○​ Validated responsiveness and UI consistency across devices.

9
 7.​ Deployment and Documentation:
○​ Prepared the project for deployment on a local or cloud-based server.
○​ Created project documentation, reports, and user instructions.

Methodology

This project follows a modular and incremental development approach to ensure flexibility and
smooth feature integration. Development was requirement-driven, addressing the practical needs of
tech students and developers. An agile-inspired workflow divided tasks into phases, each focusing
on individual modules like authentication, UI, and backend integration. The system adopts an
API-centric design, integrating Firebase Authentication and planning for future LinkedIn and
GitHub API connections. A mobile-first, responsive design ensures accessibility across devices.

10
Flowchart

11
 SRS

Project Title: Developer Portfolio Builder Website​

Purpose: To create a platform that allows tech students and developers to easily build portfolio
websites by connecting their GitHub and LinkedIn accounts, with secure login via Firebase.

1.​ Functional Requirements

●​ User Registration and Login via Firebase
●​ User Profile Management
●​ GitHub and LinkedIn Profile Integration
●​ Automated Portfolio Generation
●​ Download or Deploy Portfolio Option
●​ Responsive UI for all devices​

2.​ Non-Functional Requirements

●​ System should be secure and scalable
●​ User-friendly and modern interface
●​ Fast API responses and minimal latency
●​ Cross-browser compatibility
●​ Responsive Design

3.​ Technology Stack

●​ Frontend: HTML, CSS, JavaScript
●​ Backend: Python (Flask)
●​ Authentication: Firebase Authentication
●​ Database: Firebase (for authentication and minimal user data)
●​ APIs: GitHub, LinkedIn (future integration)

12
 Implementation

The development of the Portfolio Builder Website was carried out using a modular and incremental
approach to ensure flexibility, maintainability, and ease of feature integration. The implementation
was divided into the following major components:

1. Frontend Development

●​ The frontend was designed using HTML, CSS, and JavaScript with a modern, responsive,
and mobile-first design approach.
●​ The landing page was kept minimal with two primary options: Signup and Login, placed
over a visually appealing dark-themed background with animated 3D illustrations.
●​ After user authentication, the homepage provided options to connect LinkedIn and GitHub
accounts for profile integration.
●​ The navigation bar dynamically updated to display the user’s profile icon once authenticated.

2. Backend Setup

●​ The backend was implemented using Python with Flask to handle routing, session
management, and API calls.
●​ Firebase Authentication was integrated for managing user signups and logins using email and
password.
●​ Secure session management and JSON Web Tokens (JWT) were used to maintain active user
sessions.

3. Database Integration

●​ Firebase Realtime Database was chosen for its seamless integration with Firebase
Authentication and ease of use.
●​ User profile data, portfolio templates, and connection tokens for LinkedIn and GitHub APIs
(future scope) were stored and managed here.

13
4. Authentication and Session Management

●​ Firebase Authentication APIs were integrated for secure and reliable user login and
registration.
●​ User credentials were securely authenticated, and a session token was generated upon
successful login to allow access to restricted pages.

5. Portfolio Template Selection and Preview

●​ Users were given options to select from multiple modern templates (Minimal, Creative,
Techy/Geeky).
●​ Selected templates dynamically loaded user data fetched from Firebase, providing an instant
live preview of the portfolio.

6. Deployment and Hosting

●​ The project was hosted locally during development and later planned for deployment on
Vercel.
●​ The live portfolio files were made downloadable as a ZIP file or linked to a GitHub
repository created via API.

7. Testing and Debugging

●​ Manual functional testing was conducted after implementing each module.

●​ Special attention was given to validating user authentication, database connections, and
frontend responsiveness.
●​ Bugs and issues were logged and resolved iteratively.

14
 Testing

To ensure the reliability, stability, and security of the Portfolio Builder Website, rigorous manual
testing was conducted at each stage of development. The testing process followed a modular and
iterative approach, where individual modules were tested independently before integrating them into
the system.

1. Unit Testing

●​ Each function and component, such as user input validation, form submission, and API calls,
was tested separately to ensure proper working.
●​ Error messages for invalid inputs (like empty fields or incorrect email formats) were tested.
●​ Authentication requests using Firebase Authentication were individually validated for both
success and failure cases.

2. Integration Testing

●​ Once individual modules passed unit testing, integrated testing was performed to check the
interaction between frontend forms, backend API routes, and Firebase Authentication.
●​ Verified session management after login and logout events.
●​ Tested database operations like storing and retrieving user profile data.

3. User Interface (UI) Testing

●​ Ensured consistent design and responsiveness across different screen sizes and devices.
●​ Checked the working of interactive elements such as buttons, navigation bar updates, and
animated 3D backgrounds.
●​ Validated template selection and live preview rendering.

4. Functional Testing

●​ Performed end-to-end testing for complete workflows like user signup, login, and logout.
●​ Confirmed successful template selection and preview for authenticated users.

15
5. Security Testing

●​ Verified protection against unauthorized access by restricting non-authenticated access to the

homepage and profile sections.
●​ Ensured secure storage of user session tokens.
●​ Tested the security of database interactions and authentication processes.

6. Compatibility Testing

●​ Tested the application on multiple browsers like Google Chrome, Mozilla Firefox, and
Microsoft Edge.
●​ Checked responsiveness on devices including smartphones, tablets, and desktops.

16
 Results and Findings

After completing the development and testing phases, the Portfolio Builder Website for Developers
and Tech Students successfully achieved its intended objectives. The following outcomes and
observations were recorded:

Key Results:

●​ Functional Authentication System: Firebase Authentication was effectively implemented,

providing secure and reliable email-password based user login and signup functionality.

●​ Seamless User Experience: The frontend interface, with its dark-themed aesthetic, animated
background, and clean two-button login/signup screen, was responsive and performed
smoothly across multiple devices and browsers.

●​ User Data Management: User profiles were successfully created and managed within
Firebase’s Realtime Database, ensuring persistent data storage for future sessions and profile
updates.

●​ Dynamic Template Preview: Portfolio templates were displayed dynamically with real-time
previews, integrating user data immediately after login and template selection.

●​ Session-Based Navigation Control: The website correctly restricted unauthorized users

from accessing authenticated sections and dynamically updated the navigation bar to display
user-specific options post-login.

Findings:

●​ Integrating Firebase Authentication with a Python backend using Flask proved efficient for
small-to-medium scale projects, offering ease of setup and maintenance without complex
server configurations.

●​ Manual functional and UI testing showed that the website was fully responsive, rendering
well on smartphones, tablets, and desktops, ensuring usability for students and developers
alike.

17
●​ The animated background and modern UI layout significantly improved the visual appeal and
professional look of the application, making it more attractive for its target audience.

●​ A potential enhancement identified was to integrate LinkedIn and GitHub APIs in future
updates to automate fetching user information, reducing manual input.

18
 Limitations and Future Scope

Limitations:

●​ Limited Template Options: At this stage, the number of portfolio templates available for
selection is limited. Expanding template variety and customization options would enhance
the user experience.

●​ Basic Authentication Method: The website uses email and password authentication via
Firebase, without multi-factor authentication (MFA) or social login options like Google or
GitHub OAuth, limiting flexibility.

●​ Local Hosting and Deployment Constraints: The project was tested in a local development
environment. Full-scale deployment and load testing on public servers were not performed
due to time and resource constraints.

●​ Basic Error Handling and Validation: Some frontend form validations and error prompts
can be improved to provide a more guided and user-friendly interaction.

Future Scope:

●​ Integration with LinkedIn and GitHub APIs: Automate fetching of user information,
projects, and achievements directly from their profiles to simplify the portfolio creation
process.

●​ Expanded Portfolio Template Gallery: Add more modern, responsive, and customizable
portfolio templates catering to different design preferences and professional niches.

●​ Live Deployment and Domain Integration: Deploy the project to a public server with a
custom domain, enabling real-world use by tech students and developers.

●​ Analytics Dashboard for Users: Provide a dashboard for users to track the number of visits
and interactions on their portfolio websites.

●​ Portfolio Export and Hosting Options: Enable users to either download their portfolio as a
ZIP file or directly push it to a newly created GitHub repository via API integration.

19
 Conclusion

The Portfolio Builder Website for Developers and Tech Students was successfully developed to help
users easily create professional portfolios without coding skills. Using Firebase email-password
authentication, a clean Python backend, and a modern, responsive frontend, the platform ensures
secure and seamless user experiences.

While the current version offers basic template options and manual data entry, it effectively meets its
core objective of simplifying portfolio creation. The project lays a strong foundation for future
improvements like LinkedIn/GitHub API integration, expanded template libraries, and portfolio
analytics, making it a practical and scalable solution for the tech community.

20