Resume and something that can get you from bottom to top.

Communicating well is a

Gem of a skill which I learnt during my internship experiences. Internship provides an

Opportunities were I can exhibit my communication skills in delivering the knowledge

To the people
 Project
Create a E news website

Introduction

Now-a-days we live in age of Information Communication and Technology. We can't think a single moment without
technology. From morning to night, we need help of the technology. This is the revolutionary time of computer
technology. Most of the works depends on web application. For this reason, anytime, anywhere, anyone can access a
website by internet at low cost and we can find our expectable and most update information from website. At present
information is one the most valuable resource of the current world. We have developed our project so that we can
aware the people

1.1 Objective of the Present Work

 The objective of this project is to develop a web application for Online News Paper website that can aware the
people
 The objective of this project is to provide the daily news.
 The objective of this project is to provide the breaking news.

 It makes use of various technologies to get required crime oriented information more quickly, easily, colorfully
and attractively.

 To do this for more widely coverage of distribution and faster dissemination of

 information in a more timely manner.

 Anytime, anywhere, anyone can know about the news or information by internet at

 low cost.

 Dynamically provides facility.

1.2 Literature Review

A lot of project work has carried on Online News Portal System. At the present time. Online News Portal websites are
available. But most of this website is static and traditional. There is no feature that can make people awareness. This is
why we have done this project. Our project has many features that can aware the people. By using this website one
can get more and more information that helps the people in their daily life.

1.3 Organization of the Project

In this project we have develop an Online News Portal website. It is a dynamic system. It can be maintain and changed
easily because it is based on database. It's contain web pages that are generated in real-time. These pages include
Web scripting code, such as JAVASCRIPT. It is fully secured from unauthorized access. In a word it can say that our
Online News Portal website is a completely dynamic website.

To create the software, we have worked on all possible types of hasic codes used for principle design based on mainly
on CSS and HTML. Here we have used incremental model to create the software. We have collected all kinds of
information related to this software from the customer. Actually it is one kind of Customized software products.

The project background model specially designed on the basis of certain web programming

language like JAVASCRIPT LIBRARY, CSS etc. In following section here we are

going to give a brief description about this language in this project.

Project Snapshot

➢ Home page Of User specification

 ➢ Online News Paper Business Page

By clicking the Business user can get the business and economics related
news here

➢ Online News Paper Entertainment Page

By clicking the Entertainment user can get the Entertainment related

 ➢ Online News Paper General Page

By clicking the General user can get the General related Online News

➢ Paper Science Page

By clicking the Science user can get the Science related

 Source Code

• Index.ts

export const NAVLINK = [

{
id: 1,
lable: 'Home',
path: '/',
},
{
id: 2,
lable: 'Business',
path: 'business',
},
{
id: 3,
lable: 'Entertainment',
path: 'entertainment',
},
{
id: 4,
lable: 'General',
path: 'general',
},
{
id: 5,
 lable: 'Health',
path: 'health',
},
{
id: 6,
lable: 'Science',
path: 'science',
},
{
id: 7,
lable: 'Sports',
path: 'sports',
},
{
id: 8,
lable: 'Technology',
path: 'technology',
},
];

• Header.tsx

import React, { useEffect, useState } from 'react';

import Link from 'next/link';
import { useRouter } from 'next/router';
import { twJoin } from 'tailwind-merge';
import { Container } from './Container';
import CloseIcon from '../components/Icons/CloseIcon';
import { MenuIcon } from '../components/Icons/MenuIcon';
import { NAVLINK } from '../constants/Index';

const Header = () => {

const router = useRouter();
const { pathname, query } = router;

const [openMenu, setOpenMenu] = useState(false);

useEffect(() => {
if (typeof window !== undefined) {
if (openMenu) {
document.body.classList.add('lg:overflow-auto', 'overflow-hidden');
} else {
document.body.classList.remove('overflow-hidden');
}
}
}, [openMenu]);

return (
<div className="relative">
<div className="sticky top-0 z-50 border-b bg-white py-4 shadow-md md:py-5">
<Container>
<div className="flex flex-row items-center justify-between">
<div>
<Link
 href={'/'} className="font-Inter text-2xl font-semibold italic leading-5 text-purple-700" >
E-Paper
</Link>
</div>
<div className="hidden flex-row items-center justify-between gap-3 md:flex lg:gap-4">
{NAVLINK &&
NAVLINK.length > 1 &&
NAVLINK.map(({ id, lable, path }) => (
<Link
href={path}
key={id}
className={twJoin(
'rounded-lg border px-2 py-1.5 font-Inter text-base leading-5 lg:px-4 lg:py-2',
query?.pathName === path || pathname === path
? 'border-purple-700 bg-purple-700 text-white'
: 'border-transparent'
)}
>
{lable}
</Link>
))}
</div>

<div className="block md:hidden">

<button className="w-7" onClick={() => setOpenMenu(!openMenu)}>
<MenuIcon />
</button>
 </div>
</div>
</Container>

{openMenu && (
<div className="fadeInRight fixed top-0 flex h-screen w-full flex-col items-center justify-start gap-4
overflow-y-auto bg-white p-3">
<div className="self-end">
<button className="w-7" onClick={() => setOpenMenu(false)}>
<CloseIcon />
</button>
</div>
<div className="flex flex-col items-center justify-between gap-3">
{NAVLINK &&
NAVLINK.length > 1 &&
NAVLINK.map(({ id, lable, path }) => (
<Link
href={path}
key={id}
className={twJoin(
'rounded-lg border px-4 py-1.5 font-Inter text-base leading-5',
query?.pathName === path || pathname === path
? 'border-purple-700 bg-purple-700 text-white'
: 'border-transparent'
)}
onClick={() => setOpenMenu(false)}
>
{lable}
 </Link>
))}
</div>
</div>
)}
</div>
</div>
);
};

export { Header };

• packeje.json

{
"name": "hos",
"version": "3.8.0",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"build-stats": "cross-env ANALYZE=true npm run build",
"export": "next export",
"build-prod": "run-s clean build export",
"clean": "rimraf .next out",
"lint": "next lint",
"format": "next lint --fix && prettier '**/*.{json,yaml}' --write --ignore-path .gitignore",
 "commit": "cz",
"prepare": "husky install",
"postbuild": "next-sitemap"
},
"dependencies": {
"@tailwindcss/line-clamp": "^0.4.4",
"axios": "^1.3.4",
"convert-zip-to-gps": "^1.2.0",
"google-map-react": "^2.2.1",
"moment": "^2.29.4",
"next": "^13.2.1",
"next-seo": "^5.15.0",
"next-sitemap": "^3.1.52",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-geocode": "^0.2.3",
"react-infinite-scroll-component": "^6.1.0",
"react-markdown": "^8.0.5",
"react-top-loading-bar": "^2.3.1",
"swiper": "^9.1.0",
"tailwind-merge": "^1.10.0"
},
"devDependencies": {
"@commitlint/cli": "^17.4.4",
"@commitlint/config-conventional": "^17.4.4",
"@commitlint/cz-commitlint": "^17.4.4",
"@next/bundle-analyzer": "^13.2.1",
"@percy/cli": "^1.20.0",
"@semantic-release/changelog": "^6.0.2",
"@semantic-release/git": "^10.0.1",
"@types/google-map-react": "^2.1.7",
"@types/node": "^18.14.1",
"@types/react": "^18.0.28",
"@types/react-geocode": "^0.2.1",
"@typescript-eslint/eslint-plugin": "^5.53.0",
"@typescript-eslint/parser": "^5.53.0",
"autoprefixer": "^10.4.13",
"commitizen": "^4.3.0",
"cross-env": "^7.0.3",
"cssnano": "^5.1.15",
"eslint": "^8.34.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-next": "^13.2.1",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-simple-import-sort": "^10.0.0",
"eslint-plugin-tailwindcss": "^3.9.0",
"eslint-plugin-testing-library": "^5.10.2",
"eslint-plugin-unused-imports": "^2.0.0",
 "husky": "^8.0.3",
"lint-staged": "^13.1.2",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.21",
"prettier": "^2.8.8",
"prettier-plugin-tailwindcss": "^0.3.0",
"rimraf": "^4.1.2",
"semantic-release": "^19.0.5",
"tailwindcss": "^3.2.7",
"typescript": "^4.9.5"
},
"config": {
"commitizen": {
"path": "@commitlint/cz-commitlint"
}
},
"release": {
"branches": [
"main"
],
"plugins": [
"@semantic-release/commit-analyzer",
"@semantic-release/release-notes-generator",
"@semantic-release/changelog",
[
"@semantic-release/npm",
{
 "npmPublish": false
}
],
"@semantic-release/git",
"@semantic-release/github"
]
},
"author": ""
}

• Global.css

@import
url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500
;1,700&display=swap');
@import
url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,70
0;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import
url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=P
oppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,
600;1,700;1,800;1,900&display=swap');
@import 'swiper/css';

@tailwind base;
@tailwind components;
@tailwind utilities;
body {
overflow-x: hidden;
}

.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
 -webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

CONCLUSION

In today's Web development, a good site design is essential. A bad design will lead to the
loss of visitors and that can lead to a loss of business. In general, a good page layout has to
satisfy the basic elements of a good page design. This includes color contrast, text
organization, font selection, style of a page, page size, graphics used, and consistency. In
order to create a well- designed website for a specific audience, the developer needs to
organized and analyze the users' statistics and the background of the users. Although it can
be hard to come up with a design that is well suited to all of the users, there will be a design
that is appropriate for most of the audience. The better the page design, the more hits a
website will get. That implies an increase in accessibility and a possible increase in business.
 Thank You
For
Your Attention